/* 引入字体 */ @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); } /* 隐藏手机端样式 */ .wap-show{ display: none; } /* 头部 */ .header{ height: 90px; } .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: 12rpx; line-height: 1.5; opacity: .7; } /* 导航 */ .nav{ display: flex; justify-content: flex-end; } .nav li>a{ display: inline-block; padding: 0 40px; line-height: 90px; } .nav li:last-child>a{ padding-right: 0; } .nav li.active>a{ background-color: #de0011; color: #FFFFFF; padding: 0 40px; } /* 轮播样式 */ .banner-swiper { overflow-x: hidden; height: 820px; position: relative; background-color: #FFFFFF; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-title{ color: #FFFFFF; position: absolute; left: 50%; 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-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; 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; } .index-news-list li>a{ display: flex; align-items: center; width: 85%; } .index-news-list li>a::before{ content: ""; display: block; width: 6px; height: 6px; background-color: #aaaaaa; margin-right: 10px; } .index-news-list li>span{ font-size: 13px; opacity: .7; } .index-news-right{ width: calc(60% - 34px); } /* 主营业务 */ .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: 45%; 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-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{ height: 197px; } .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; } .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; } /* 尾部 */ .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; font-size: 14px; color: #FFFFFF; } .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-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 */ } .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: 999; } .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{ 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: 1.8; color: #FFFFFF; } .speech-txt p{ margin-top: 30px; } .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: 8px 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: 30px; 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; } /* 主营业务 */ .business-txt{ font-size: 14px; line-height: 2; } .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 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>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; } @media screen and (max-width:10px){ .head{ width: 90%; } } @media screen and (max-width:1440px){ } @media screen and (max-width:1280px){ } @media screen and (max-width:1180px){ } @media screen and (max-width:1080px){ } @media screen and (max-width:980px){ } @media screen and (max-width:900px){ .w1160{ width: 94% !important; } } @media screen and (max-width:768px){ /* 显示手机端样式 */ .wap-show{ display: block; } } @media screen and (max-width:350px){ }