/* 引入字体 */ @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); } .swiper-button-prev, .swiper-button-next:focus { outline: none; } /* 头部 */ .header{ height: 90px; background-color: #FFFFFF; position: fixed; left: 0; top: 0; z-index: 999; } .header .head{ display: flex; justify-content: space-between; align-items: center; } /* logo */ .logo{ font-family: "SourceHanSerifSC-Bold"; } .logo h1{ font-size: 26px; line-height: 1.5; } .logo span{ display: block; font-size: 18px; line-height: 1.5; opacity: .7; } /* 导航 */ .nav{ display: flex; justify-content: flex-end; } .nav li>a{ display: inline-block; padding: 0 35px; line-height: 90px; } .nav li:last-child>a{ padding-right: 0; } .nav li.active>a{ background-color: #de0011; color: #FFFFFF; padding: 0 40px; } .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: 820px; position: relative; background-color: #FFFFFF; margin-top: 90px; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-title{ color: #FFFFFF; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); text-align: center; z-index: 1; } .banner-title h2{ width: 100%; font-family: "HelveticaNeueLT-BoldOutline"; font-size: 98px; line-height: 1.2; font-weight: normal; text-transform: uppercase; } .banner-title p{ font-size: 52px; line-height: 1.2; margin-bottom: 25px; } .banner-title span{ font-family: "Helvetica"; display: block; font-size: 16px; line-height: 1.2; 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: 12px; height: 12px; background-color: #FFFFFF; margin: 0 8px !important; cursor: pointer; opacity: 1; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{ background-color: #de0011; } /* 首页 */ .index-title-bg{ display: flex; justify-content: space-between; align-items: flex-end; } .index-title{ display: flex; font-weight: normal; align-items: flex-end; } .index-title ins{ display: block; font-family: "HYa3gj"; font-size: 68px; line-height: 1.2; color: #de0011; } .index-title p{ font-size: 20rpx; line-height: 1.4; margin: 0 0 8px 3px; } .index-title p>em{ display: block; font-size: 12px; text-transform: uppercase; } .index-title-item{ display: flex; } .index-title-item li{ font-size: 18px; line-height: 1.2; cursor: pointer; } .index-title-item li.active{ color: #de0011; font-weight: bold; } .index-title-item li:last-child{ margin-left: 35px; } /* 新闻动态 */ .index-news-information{ display: flex; justify-content: space-between; margin-top: 42px; } .index-news{ display: flex; justify-content: space-between; width: calc(75% - 34px); } .index-news-left{ margin-top: 7px; width: 40%; background-color: #f6f6f6; padding-bottom: 8px; } .left-img{ width: 100%; height: 336px; } .left-img img{ width: 100%; min-height: 336px; } .left-title{ padding: 0 20px; font-size: 18px; line-height: 1.5; text-align: justify; margin-top: 20px; } .index-news-left p{ padding: 0 20px; font-size: 14px; line-height: 1.8; text-align: justify; margin: 15px 0; opacity: .8; } .index-news-left span{ display: flex; justify-content: space-between; align-items: center; width: calc(100% - 40px); margin: 0 auto; height: 30px; font-size: 13px; line-height: 30px; color: #868686; } .index-news-left span>em{ width: 53px; height: 11px; background-image: url(../imgs/news-more.png); background-size: 100%; } .index-news-left:hover .left-title{ color: #de0011; transition: all .6s; } .index-news-item{ display: none; } .index-news-item.cur{ display: block; } .index-news-all{ margin-top: 20px; } .index-news-first{ height: 159px; padding: 18px 15px; background-color: #FFFFFF; box-shadow: 0 0 8px rgba(201,201,201,0.3); } .index-news-first>a{ display: flex; justify-content: space-between; align-items: center; } .first-img{ width: 183px; height: 123px; } .first-img img{ width: 183px; min-height: 123px; } .first-txt{ width: calc(100% - 196px); } .first-txt>div{ font-size: 16px; line-height: 1.5; font-weight: bold; } .index-news-first:hover .first-txt>div{ color: #de0011; } .first-txt>p{ font-size: 14px; line-height: 1.5; margin: 10px 0; text-align: justify; opacity: .8; } .first-txt>span{ font-size: 13px; line-height: 1.5; opacity: .5; } .index-news-list{ margin-top: 20px; } .index-news-list li{ display: flex; justify-content: space-between; align-items: center; font-size: 15px; line-height: 2; margin: 10px 0; cursor: pointer; } .index-news-list li>a{ width: 85%; } .index-news-list li>a::before{ content: ""; display: block; width: 6px; height: 6px; background-color: #aaaaaa; margin:12px 10px 0 0; float: left; } .index-news-list li>span{ font-size: 13px; opacity: .7; } .index-news-right{ width: calc(60% - 34px); } .index-news-list li:hover a{ color: #de0011; transition: all .6s; } /* 主营业务 */ .index-information{ width: 25%; background-color: #de0011; } .index-information-title{ padding: 0 25px; line-height: 73px; background-color: #b80b12; font-size: 24px; font-weight: bold; color: #FFFFFF; } .index-information-title>span{ font-size: 14px; font-weight: normal; opacity: .5; } .index-information-list{ padding: 0 25px; } .index-information-list li{ padding: 15px 0; border-bottom: 1px solid #e53341; } .index-information-list li>a{ font-size: 15px; line-height: 1.5; color: #FFFFFF; } .index-information-list li>span{ display: block; font-size: 13px; line-height: 1.5; color: #FFFFFF; margin-top: 10px; opacity: .5; } .index-business{ height: 730px; margin-top: 50px; position: relative; } .index-business-list li{ position: relative; display: none; width: 100%; height: 730px; transition: all .6s; } .index-business-list li img{ width: 100%; min-height: 730px; } .index-business-list li.cur{ display: block; transition: all .6s; } .index-business-txt{ position: absolute; left: 50%; top: calc(50% - 60px); transform: translate(-50%,-50%); text-align: center; color: #FFFFFF; transition: all .6s; } .ndex-business-title h3{ font-size: 36px; line-height: 1.2; } .ndex-business-title span{ display: block; font-size: 20px; line-height: 2; text-transform: uppercase; } .index-business-txt p{ font-size: 16px; line-height: 1.8; margin-top: 20px; } .index-business-txt .more{ font-family: "AlibabaSans-Light"; width: 152px; font-size: 16px; line-height: 50px; background-color: rgba(255,255,255,.6); border-radius: 2px; margin: 30px auto 0; text-align: center; } .index-business-txt .more:hover{ background-color: rgba(222,0,17,.6); color: #FFFFFF; transition: all .6s; } .index-business-item{ display: flex; justify-content: space-between; width: 100%; height: 120px; background-color: rgba(0,0,0,0.6); position: absolute; left: 0; bottom: 0; z-index: 2; } .index-business-item li{ width: 100%; cursor: pointer; transition: all .6s; } .index-business-item li>img{ display: block; width: 50px; height: 50px; margin: 20px auto 2px; } .index-business-item li>p{ font-size: 18px; line-height: 1.5; text-align: center; color: #FFFFFF; } .index-business-item li.active{ background-color: rgba(222,0,17,1); transition: all .6s; } /* 关于我们 */ .index-about{ margin-top: 50px; padding: 50px; background-image: url(../imgs/about-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 60px; } .index-about-top{ display: flex; align-items: center; } .index-about-left{ width: 50%; } .corporate-name{ font-size: 24px; line-height: 1.5; color: #de0011; margin-top: 30px; } .index-about-left>p{ font-size: 14px; line-height: 1.8; text-align: justify; margin-top: 10px; } .index-about-left .more{ font-family: "AlibabaSans-Light"; width: 152px; font-size: 16px; line-height: 50px; background-color: #de0011; border-radius: 2px; margin-top: 50px; color: #FFFFFF; text-align: center; } .index-about-right{ display: flex; justify-content: flex-end; width: 50%; } .index-about-right img{ width: 85%; } .index-about-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 66px; } .index-about-bottom li{ width: 31.5%; height: 260px; padding: 40px 0; background-color: #FFFFFF; box-shadow: 0 0 9px rgba(201,201,201,0.3); margin-right: 2.75%; border-radius: 2px; text-align: center; /* cursor: pointer; */ } .index-about-bottom li:nth-of-type(3n){ margin-right: 0; } .index-about-bottom li img{ width: 64px; height: 64px; margin: 0 auto; } .index-about-bottom li h4{ font-size: 26px; line-height: 1.2; margin: 20px 0 15px; } .index-about-bottom li p{ padding: 0 21%; font-size: 14px; line-height: 1.8; margin: 10px 0; opacity: .8; } .index-about-bottom li:hover{ box-shadow: 0 0 20px rgba(38,38,38,.3); transition: all .6s; } /* .index-about-bottom li:hover h4{ color: #de0011; transition: all .6s; } */ /* 尾部 */ .footer{ background-image: url(../imgs/foot-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .foot{ display: flex; justify-content: space-between; padding: 50px 0; font-size: 14px; color: #FFFFFF; } .index-foot{ padding: 50px; } .foot-left{ width: 50%; } .foot-left>p{ line-height: 1.8; opacity: .8; } .foot-left>span{ display: block; line-height: 1.5; margin-top: 40px; opacity: .5; } .foot-left>span a{ display: inline-block; color: #FFFFFF; margin-left: 10px; } .foot-right{ max-width: 50%; } .links{ width: 365px; height: 45px; background-color: #393732; padding: 0 15px; position: relative; } .links>p{ display: flex; justify-content: space-between; align-items: center; line-height: 45px; cursor: pointer; opacity: .8; } .links p>img{ height: 6px; } .links .links-item{ width: 100%; height: 0; background-color: #393732; position: absolute; left: 0; top: 45px; z-index: 1; overflow: hidden; padding: 0; } .links .links-item a{ display: inline-block; font-size: 13px; color: #FFFFFF; margin-right: 10px; line-height: 2; } .links:hover .links-item{ height: auto; padding: 10px 15px; border-top: 1px solid rgba(255,255,255,.8); } .links:hover 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 */ } #wechat{ position: relative; } .wechat{ width: 0; height: 0; position: absolute; top: -10px; left: -45px; transform: translateY(-100%); overflow: hidden; } .wechat img{ width: 120px; height: 120px; } #wechat:hover .wechat{ width: 120px; height: 120px; } .follow{ display: flex; justify-content: flex-end; align-items: center; margin-top: 45px; } .follow>p{ opacity: .5; } .follow .mode-list{ display: flex; align-items: center; } .follow .mode-list a{ width: 30px; height: 30px; margin-left: 16px; } /* 走进蜀能 */ .pull-swiper{ height: 560px; position: relative; } .pull-banner-title{ top: 47%; } .pull-banner-title h2{ font-size: 78px; } .pull-banner-title p{ font-size: 32px; } .pull-banner-title ins{ display: block; width: 2px; height: 32px; background-color: #FFFFFF; margin: 0 auto; } .pull-item{ display: flex; justify-content: center; width: 100%; height: 58px; background-color: rgba(0,0,0,0.4); position: absolute; bottom: 0; left: 0; z-index: 99; } .pull-item.pull-item-fixed{ width: 1690px; position: fixed; top: 90px; left: 50%; transform: translateX(-50%); z-index: 99; } .pull-item li>a{ line-height: 58px; padding: 0 50px; color: #FFFFFF; font-size: 16px; } .pull-item li.cur>a{ background-color: #de0011; } /* 企业简介 */ .section{ padding: 55px 0; background-color: #f6f6f6; } .abstract-bg>h1{ font-family: "SourceHanSerifSC-Bold"; font-size: 40px; line-height: 1.2; color: #de0011; text-align: center; margin-bottom: 5px; } .abstract-bg>span{ display: block; font-family: "SourceHanSerifSC-Bold"; font-size: 20px; line-height: 1.8; color: #868686; text-align: center; text-transform: uppercase; } .abstract-txt{ font-size: 14px; text-align: justify; line-height: 1.8; padding-top: 5px; } .abstract-txt p{ margin-top: 30px; } .abstract-txt img{ max-width: 100%; margin: 0 auto; } /* 领导致辞 */ .speech-bg{ padding: 75px 0; background-image: url(../imgs/speech-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } /* 公共标题 */ .pull-title{ padding-bottom: 15px; } .pull-title h3{ font-size: 34px; line-height: 1.2; color: #de0011; font-weight: normal; } .pull-title span{ font-family: "Helvetica"; display: flex; align-items: center; font-size: 18px; line-height: 2; color: #868686; text-transform: uppercase; } .pull-title span::after{ content: ""; display: block; width: 8px; height: 8px; background-color: #de0011; margin-left: 7px; } .pull-title-white h3, .pull-title-white span{ color: #FFFFFF; } .pull-title-white span::after{ background-color: #FFFFFF; } .speech-txt{ font-size: 14px; text-align: justify; line-height: 2.1; color: #FFFFFF; } .speech-txt p{ margin-top: 28px; } .speech-txt img{ max-width: 100%; margin: 0 auto; } /* 管理团队 */ .team-bg{ padding-bottom: 35px; } .team-swiper { width: 100%; overflow-x: hidden; position: relative; padding-bottom: 90px; } .team-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* 指示点默认样式 */ .team-swiper .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #a7a7a7; margin: 0 8px !important; cursor: pointer; opacity: 1; } /* 团队列表 */ .team-list{ display: flex; justify-content: space-between; flex-wrap: wrap; } .team-list .team-item{ width: 48.5%; padding: 30px; background-color: #FFFFFF; margin-top: 3%; } .team-list .team-item h4{ font-size: 24px; line-height: 1.2; color: #de0011; font-weight: normal; } .team-list .team-item h4>em{ margin-left: 8px; } .team-list .team-item span{ display: block; font-size: 18px; line-height: 1.5; margin: 15px 0 10px; } .team-list .team-item p{ font-size: 14px; line-height: 1.8; opacity: .8; } /* 组织机构 */ .organization-bg{ background-image: url(../imgs/organization-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .organization-img{ display: flex; justify-content: center; margin-top: 50px; } .organization-img img{ width: 86.5%; height: auto; } /* 大事记 */ .memorabilia-bg{ background-image: url(../imgs/memorabilia-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding-bottom: 0; } .memorabili-txt{ padding: 0 88px; overflow: hidden; position: relative; } .memorabili-txt .swiper-slide{ width: 46.6% !important; height: 255px; margin: 30px 0; padding: 0 0 50px; margin-left: -21.6%; opacity: 1; cursor: pointer; transition: all .6s; } .memorabili-txt .swiper-slide:nth-of-type(5){ 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: 14px; line-height: 2.2; } .memorabili-txt .swiper-slide:nth-of-type(2n){ margin-top: 306px; } .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.25); 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(222,0,17,0.25); transition: all .6s; } .memorabili-txt .swiper-slide:hover em ins{ background-color: #de0011; transition: all .6s; } .memorabili-txt .swiper-slide:hover strong{ color: #de0011; transition: all .6s; } .memorabili-swiper .swiper-button-prev{ width: 51px; height: 51px; border-radius: 100%; background-color: #de0011; margin-top: -25.5px; left: 0; background-image: url(../imgs/join-arrow-left.png); background-size: 20px 22px; } .memorabili-swiper .swiper-button-next{ width: 51px; height: 51px; border-radius: 100%; background-color: #de0011; margin-top: -25.5px; right: 0; background-image: url(../imgs/join-arrow-right.png); background-size: 20px 22px; } .memorabili-swiper .swiper-button-disabled{ opacity: 1; } .memorabili-txt .line{ width: calc(100% - 102px); height: 1px; background-color: #e3e3e3; position: absolute; left: 51px; top: 50%; } /* 新闻动态 */ .news-bg{ background-image: url(../imgs/news-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 40px 0 45px; } .news-list{ display: flex; flex-wrap: wrap; margin-top: -25px; } .news-list li{ width: 31.5%; margin: 2.5% 2.5% 0 0; background-color: #FFFFFF; } .news-list li:nth-of-type(3n){ margin-right: 0; } .news-img{ height: 270px; } .news-img img{ width: 100%; min-height: 270px; } .news-txt{ padding: 10px 20px; } .news-txt h4{ font-size: 18px; line-height: 1.5; font-weight: normal; } .news-txt p{ font-size: 14px; line-height: 1.8; margin: 10px 0; opacity: .8; } .news-txt span{ display: flex; justify-content: space-between; align-items: center; height: 30px; font-size: 13px; line-height: 30px; color: #868686; } .news-txt span>em{ width: 53px; height: 11px; background-image: url(../imgs/news-more.png); background-size: 100%; } .news-list li:hover .news-txt h4, .news-list li:hover .news-txt p, .news-list li:hover .news-txt span{ color: #de0011; opacity: 1; transition: all .6s; } .news-list li:hover .news-txt span>em{ background-image: url(../imgs/news-more2.png); transition: all .6s; } /* 分页 */ .pase-size{ display: flex; justify-content: center; margin-top: 50px; } .pase-size a{ width: 34px; line-height: 34px; font-size: 16px; color: #737373; text-align: center; background-color: #FFFFFF; border-radius: 3px; margin: 0 3px; } .pase-size a:first-child, .pase-size a:last-child{ width: auto; padding: 0 12px; } .pase-size a.active{ background-color: #de0011; color: #FFFFFF; } /* 新闻动态文章页 */ .news-detail-bg{ padding-bottom: 0; } .news>h1{ font-size: 24px; line-height: 1.5; font-weight: normal; } .news>.news-time{ display: block; font-size: 15px; line-height: 1.5; padding: 15px 0; opacity: .8; border-bottom: 1px solid #e3e3e3; } .news>.news-time em{ margin: 0 15px; } .news-detail-txt{ font-size: 14px; line-height: 2; padding: 8px 0; text-align: justify; } .news-detail-txt img{ max-width: 100%; margin: 30px auto; } /* 上下篇 */ .news-page{ display: flex; justify-content: space-between; align-items: center; padding: 28px 0 25px; margin-top: 20px; border-top: 1px solid #e3e3e3; } .news-page>a{ display: flex; align-items: center; width: 49%; } .news-page>a ins>img{ height: 20px; } .news-page .prev{ justify-content: flex-start; } .news-page .prev span>img{ width: 90px; height: 60px; margin: 0 10px 0 15px; } .news-page .next{ justify-content: flex-end; } .news-page .next span>img{ width: 90px; height: 60px; margin: 0 15px 0 10px; } .news-page .next ins>img{ transform: rotate(180deg); } .page-title{ width: calc(100% - 151px); font-size: 16px; line-height: 1.8; } .page-title span{ font-size: 14px; color: #585858; } .news-page .next .page-title{ text-align: right; } .news-page a:hover .page-title{ color: #de0011; transition: all .6s; } /* 主营业务 */ .business-txt{ font-size: 14px; line-height: 2; text-align: justify; } .business-txt p{ margin-bottom: 30px; } /* 滚动样式 */ .business-img{ display: flex; justify-content: space-between; margin-bottom: 43px; position: relative; } .view { width: 77.9%; height: auto; overflow-x: hidden; position: relative; } .view .swiper-slide img{ width: 100%; } .preview{ width: 20%; margin-left: 2.1%; position: relative; } .preview .swiper-wrapper{ flex-wrap: wrap; transform: translate3d(0px, 0px, 0px) !important; } .preview .swiper-slide{ height: 178px; margin-bottom: 20px; background-color: #FFFFFF; } .preview .swiper-slide img{ width: 100%; min-height: 178px; cursor: pointer; } .preview .swiper-slide-thumb-active{ border: 1px solid #eda4a9; padding: 4px; } .preview .swiper-slide-thumb-active img{ width: 100%; min-height: 168px; cursor: pointer; } .preview-arrow{ display: flex; width: 116px; position: absolute; border-radius: 2px; background-color: #FFFFFF; left: 50%; bottom: 15px; transform: translateX(-50%); } .preview-arrow ins{ display: block; width: 1px; height: 48px; background-color: #e7626c; } .preview-arrow .preview-arrow-prev{ width: 58px; height: 48px; border: 1px solid #e7626c; background-image: url(../imgs/arrow-left.png); background-repeat: no-repeat; background-position: center; background-size: 21px 20px; opacity: 1; left: 0; border-right: 0; cursor: pointer; } .preview-arrow .preview-arrow-next{ width: 58px; height: 48px; border: 1px solid #e7626c; background-image: url(../imgs/arrow-right.png); background-repeat: no-repeat; background-position: center; background-size: 21px 20px; opacity: 1; right: 0; border-left: 0; cursor: pointer; } .preview-arrow .preview-arrow-prev:hover{ background-color: #de0011; background-image: url(../imgs/arrow-left2.png); } .preview-arrow .preview-arrow-next:hover{ background-color: #de0011; background-image: url(../imgs/arrow-right2.png); } /* 应用领域 */ .area-list{ display: flex; justify-content: space-between; flex-wrap: wrap; } .area-list li{ width: 50%; padding: 30px 35px; background-image: url(../imgs/area-list-bg.png); background-repeat: no-repeat; background-position: 35px bottom; background-size: 102px 127px; } .area-list li h4{ font-size: 26px; line-height: 1.2; font-weight: normal; } .area-list li:hover h4{ color: #de0011; transition: all .6s; } .area-list li span{ display: block; font-size: 15px; line-height: 1.5; color: #868686; margin-top: 10px; } .area-list li p{ font-size: 14px; line-height: 2; margin-top: 30px; } .area-list li .more{ display: flex; justify-content: flex-end; align-items: center; margin: 70px 0 35px; font-size: 13px; line-height: 2; color: #868686; } .area-list li .more:hover{ color: #de0011; transition: all .6s; } .area-list li .more>ins{ display: block; width: 16px; height: 10px; background-image: url(../imgs/area-more.png); background-size: 16px 10px; margin-left: 6px; } .area-list li:nth-of-type(1), .area-list li:nth-of-type(4), .area-list li:nth-of-type(5), .area-list li:nth-of-type(8), .area-list li:nth-of-type(9), .area-list li:nth-of-type(12), .area-list li:nth-of-type(13), .area-list li:nth-of-type(16), .area-list li:nth-of-type(17), .area-list li:nth-of-type(20), .area-list li:nth-of-type(21), .area-list li:nth-of-type(24), .area-list li:nth-of-type(25){ background-color: #FFFFFF; } /* 党群纪检 */ .inspect-img, .inspect-txt>span{ display: none; } .inspect-list li{ margin-bottom: 20px; padding: 24px 30px; background-color: rgba(255,255,255,0.5); } .inspect-list li>a{ display: flex; justify-content: space-between; align-items: center; } .inspect-time{ width: 82px; padding-right: 20px; border-right: 1px solid #ebebeb; text-align: right; } .inspect-time strong{ font-size: 30px; } .inspect-time span{ font-size: 15px; opacity: .6; } .inspect-txt{ width: calc(100% - 100px); } .inspect-txt h4{ font-size: 20px; line-height: 1.5; font-weight: normal; } .inspect-txt p{ font-size: 14px; line-height: 1.8; opacity: .7; margin-top: 10px; } .inspect-list li:hover .inspect-txt{ width: calc(100% - 423px); } .inspect-list li:hover .inspect-img{ display: block; } .inspect-list li:hover .inspect-time{ display: none; } .inspect-list li:hover .inspect-txt h4{ color: #de0011; } .inspect-img{ width: 403px; height: 270px; overflow: hidden; } .inspect-img img{ width: 100%; min-height: 270px; } .inspect-list li:hover .inspect-txt>span{ display: flex; justify-content: space-between; align-items: center; height: 30px; font-size: 13px; line-height: 30px; color: rgba(38,38,38,0.6); margin-top: 60px; } .inspect-list li:hover .inspect-txt>span>em{ width: 53px; height: 11px; background-image: url(../imgs/news-more.png); background-size: 100%; } /* 分页 */ .inspect-page{ padding: 30px 0 35px; } .inspect-prev>ins{ margin-right: 22px; } .inspect-next>ins{ margin-left: 22px; } /* 企业文化 */ .enterprise-list{ margin-bottom: 15px; } .enterprise-list li{ display: flex; justify-content: space-between; margin-top: 30px; } .enterprise-list li:first-child{ margin-top: 10px; } .enterprise-list li:nth-of-type(odd){ flex-direction: row-reverse; } .enterprise-img{ width: 50%; height: 370px; overflow: hidden; } .enterprise-img img{ width: 100%; min-height: 370px; } .enterprise-txt{ width: 50%; height: 370px; padding-top: 95px; background-color: #FFFFFF; box-shadow: 0 0 9px rgba(201,201,201,0.3); border-radius: 2px; text-align: center; } .enterprise-txt img{ width: 64px; height: 64px; margin: 0 auto; } .enterprise-txt h4{ font-size: 26px; line-height: 1.2; margin: 20px 0 15px; } .enterprise-txt p{ padding: 0 21%; font-size: 14px; line-height: 1.8; margin: 10px 0; opacity: .8; } /* 团队风采 */ .team-style-swiper{ width: 100%; overflow: hidden; } .team-style-swiper .swiper-slide-active{ background-color: #FFFFFF; } .team-style-swiper .swiper-slide img{ width: 100%; } .team-style-swiper .swiper-slide p{ padding: 15px 20px; font-size: 16px; line-height: 1.8; } .team-list-other{ margin-top: 40px; padding: 15px 25px 25px; background-color: #FFFFFF; } .team-list-other li{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #c9c9c9; overflow: hidden; } .team-list-other li>a{ width: 88%; font-size: 16px; line-height: 3; } .team-list-other li:hover>a{ color: #DE0011; transition: all .6s; } .team-list-other li>a::before{ content: ""; display: block; width: 6px; height: 6px; background-color: #262626; transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -moz-transform:rotate(45deg); /* Firefox */ -webkit-transform:rotate(45deg); /* Safari 和 Chrome */ -o-transform:rotate(45deg); /* Opera */ margin: 21px 10px 0 3px; float: left; } .team-list-other li>span{ font-size: 16px; line-height: 3; opacity: .8; } /* 社会责任 */ .social-list{ margin-top: -30px; } .social-list li{ background-color: #FFFFFF; margin-top: 40px; } .social-list li>a{ display: flex; justify-content: space-between; align-items: center; } .social-txt{ width: 50%; padding: 28px; } .social-txt h4{ font-size: 24px; line-height: 1.5; font-weight: normal; margin-bottom: 15px; } .social-txt p{ font-size: 14px; line-height: 2; text-align: justify; } .social-list li:hover .social-txt h4{ color: #de0011; transition: all .6s; } .social-list li:hover .social-txt p{ opacity: .6; transition: all .6s; } .social-img{ width: 50%; height: 428px; overflow: hidden; } .social-img img{ width: 100%; min-height: 428px; } /* 信息公开 */ .information-content{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 45px; } .information-txt{ width: 55%; font-size: 14px; line-height: 2; text-align: justify; } .information-txt p{ margin-top: 35px; } .information-img{ display: flex; justify-content: flex-end; width: 40%; } .information-img img{ width: 98%; height: auto; } /* 经营成果 */ .results-content{ font-size: 14px; line-height: 2; margin: -15px 0 15px; } .results-content img{ max-width: 100%; margin: 0 auto; } .results-content p{ margin-top: 35px; } /* 公开指南 */ .guide-list{ margin-top: 15px; } .guide-list li{ margin-bottom: 20px; padding: 24px 30px; background-color: rgba(255,255,255,0.5); } .guide-list li>a{ display: flex; justify-content: space-between; align-items: center; } .guide-list li:hover .inspect-time, .guide-list li:hover .inspect-txt{ color: #de0011; } /* 联系我们 */ .contact-content{ padding: 30px; background-color: #FFFFFF; margin-top: 8px; } .contact-top{ display: flex; justify-content: space-between; } .contact-top li{ width: 25%; padding: 25px 20px 0; border-left: 1px solid #e8e8e8; } .contact-top li:first-child{ border: 0; } .contact-top li>span{ display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; box-shadow: 0 0 20px rgba(201,201,201,.3); border-radius: 100%; margin: 0 auto 40px; } .contact-top li>span img{ height: 28px; } .contact-top li>p{ font-size: 15px; line-height: 1.8; text-align: center; opacity: .8; } .contact-top li>img{ width: 105px; height: 105px; margin: -12px auto 28px; } .contact-map{ height: 400px; margin: 30px 0 40px; } /* 留言 */ .contact-form>strong{ display: block; font-size: 28px; color: #de0011; margin-bottom: 10px; } .contact-form>p{ font-size: 15px; line-height: 1.8; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(38,38,38,0.5); } .form-top{ display: flex; justify-content: space-between; margin-top: 20px; } .form-top input, .form-txt>textarea{ width: 31.5%; height: 60px; padding: 0 17px; background-color: #f4f5f7; border: 1px solid #ebecf3; font-size: 15px; } .form-txt>textarea{ width: 100%; height: 190px; padding: 10px 17px; margin-top: 12px; line-height: 1.8; } .contact-btn{ display: block; width: 200px; height: 58px; background-color: #de0011; border: 0; border-radius: 0; font-size: 20px; color: #FFFFFF; margin: 25px auto 10px; } /* 加入我们 */ .join-list{ margin-top: 12px; } .join-list li{ margin-top: 5px; background-color: rgba(255,255,255,.6); cursor: pointer; } .join-list li:first-child{ margin: 0; cursor: auto; } .join-list li>div:nth-of-type(1){ display: flex; justify-content: space-between; padding: 0 30px; } .join-list li>div:nth-of-type(1)>strong, .join-list li>div:nth-of-type(1)>span{ display: block; width: 23%; font-size: 16px; line-height: 4; text-align: center; } .join-list li>div:nth-of-type(1)>strong:first-child, .join-list li>div:nth-of-type(1)>span:first-child{ width: 40%; text-align: left; } .join-list li>div:nth-of-type(1)>strong:last-child, .join-list li>div:nth-of-type(1)>span:last-child{ width: 14%; } .join-list li>div:nth-of-type(2){ background-color: #FFFFFF; height: 0; font-size: 14px; line-height: 2; overflow: hidden; } .join-list li.active>div:nth-of-type(1){ background-color: #de0011; color: #FFFFFF; } .join-list li>div:nth-of-type(2) p{ margin-top: 30px; } .join-list li.active>div:nth-of-type(2){ height: auto; padding: 0 30px 30px; } @media screen and (max-width:1690px){ .w1690{ width: 94%; } .pull-item.pull-item-fixed{ width: 94%; } .logo h1{ font-size: 24px; } .logo span{ font-size: 16px; } .nav li>a, .nav li.active>a{ padding: 0 30px; } } @media screen and (max-width:1580px){ .banner-swiper{ height: 750px; } .banner-title h2{ font-size: 90px; } .banner-title p{ font-size: 36px; } .banner-title span{ font-size: 15px; } .pull-swiper{ height: 490px; } .pull-banner-title h2{ font-size: 78px; } .pull-banner-title p{ font-size: 29px; } } @media screen and (max-width:1440px){ .logo h1{ font-size: 22px; } .logo span{ font-size: 15px; } .nav li>a, .nav li.active>a{ padding: 0 20px; } .w1280{ width: 90%; } .banner-swiper{ height: 670px; } .banner-title h2{ font-size: 87px; } .banner-title p{ font-size: 34px; } .banner-title span{ font-size: 15px; } .pull-swiper{ height: 430px; } .pull-banner-title h2{ font-size: 76px; } .pull-banner-title p{ font-size: 28px; } } @media screen and (max-width:1280px){ .logo h1{ font-size: 20px; } .logo span{ font-size: 14px; } .nav li>a, .nav li.active>a{ padding: 0 15px; } .banner-swiper{ height: 580px; } .banner-title h2{ font-size: 84px; } .banner-title p{ font-size: 32px; } .banner-title span{ font-size: 14px; } .pull-swiper{ height: 390px; } .pull-banner-title h2{ font-size: 74px; } .pull-banner-title p{ font-size: 28px; } } @media screen and (max-width:1180px){ .preview .swiper-slide{ height: 134px; margin-bottom: 10px; } .preview .swiper-slide img{ min-height: 134px; } .preview .swiper-slide-thumb-active img{ min-height: 120px; } .enterprise-txt{ height: 280px; padding-top: 45px; } .enterprise-img{ height: 280px; } .enterprise-img img{ min-height: 280px; } .team-style-swiper .swiper-slide p{ padding: 5px 15px; } .banner-swiper{ height: 520px; } .banner-title h2{ font-size: 80px; } .banner-title p{ font-size: 30px; } .banner-title span{ font-size: 14px; } .pull-swiper{ height: 380px; } .pull-banner-title h2{ font-size: 70px; } .pull-banner-title p{ font-size: 26px; } .index-information-title{ line-height: 1.5; } } @media screen and (max-width:1080px){ .nav li>a, .nav li.active>a{ padding: 0 12px; font-size: 15px; } .contact-top{ flex-wrap: wrap; } .contact-top li{ width: 50%; margin: 10px 0; } .contact-top li:nth-of-type(odd){ border: 0; } } @media screen and (max-width:980px){ .w1690{ width: 95%; } .content .w1690{ width: 100%; } .w1280{ width: 95%; } .footer{ width: 100%; } /* 头部 */ .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 .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: 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%; } } @media screen and (max-width:780px){ /* banner */ .banner-swiper{ width: 100%; height: 280px; margin-top: 70px; } .banner-title{ width: 80%; top: 43%; } .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; } .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: inline-block; margin-left: 10px; } .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: 28px; } .pull-title span{ font-size: 16px; } .pull-item.pull-item-fixed{ top: 70px; } .news-list li{ width: 100%; margin-right: 0; } .news-img{ height: 238px; overflow: hidden; } .news-img img{ min-height: 238px; } .pase-size a{ font-size: 13px; } .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; } .business-img{ flex-wrap: wrap; margin-bottom: 0; } .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: 40px; } .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: 70; padding-right: 10px; } .inspect-txt{ width: calc(100% - 90px); } .enterprise-list li{ flex-wrap: wrap; } .enterprise-list li>div{ width: 100%; } .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 li{ margin-top: 30px; } .social-list li>a{ flex-wrap: wrap; } .social-list 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{ width: 50%; padding: 15px 10px; } .contact-top li>span{ margin-bottom: 20px; } .contact-top li>img{ margin-bottom: 8px; } .contact-top li>p{ font-size: 13px; word-break: break-all; } .contact-map{ height: 200px; margin-top: 5px; } .form-top{ flex-wrap: wrap; } .form-top input{ width: 100%; margin-top: 10px; } .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: 16%; } .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: 0 10px; } .join-list li.active>div:nth-of-type(2){ padding: 0 10px 20px; } .join-list li>div:nth-of-type(1)>strong:first-child, .join-list li>div:nth-of-type(1)>span:first-child{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } @media screen and (max-width:390px){ .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: 7px 8px; line-height: 22px; font-size: 14px; text-align: center; } .pase-size a{ width: 30px; height: 30px; line-height: 30px; } .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; } }