.fullswiper { width: 100%; height: 100%; } .fullswiper .swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .hometitle{ padding-bottom:30px; font-size:36px; letter-spacing:2px; color:#fff; } .white{ color:#fff; } /* 第一屏 */ .screenwrap1{ width:100%; height:100%; background: no-repeat; background-size:100% 100%; } .screenwrap1 .textwrap{ position: absolute; top:30%; left:0px; width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .screenwrap1 a{ color:#fff; } /* 新闻*/ .screenwrap2{ background: no-repeat; background-size:100% 100%; padding:100px 100px 40px 100px; display: flex; flex-direction: column; } .screenwrap2 .newswrap{ width:100%; max-width:1920px; overflow: hidden; } .newswrap li{ float: left; width:25%; padding:0.5vh; } .newswrap li:nth-child(1){ width:50%; } .newswrap li:nth-child(1) .imgwrap{ height:48.9vh; background-color:#fff; } .newswrap li:nth-child(1) .imgwrap img{ width:100%; height:48.9vh; } .newsswiper{ position: relative; } .news-swiper-pagination{ position: absolute; bottom:0px; z-index:999; text-align: right; } .newsswiper .swiper-slide{ position: relative; cursor: pointer; } .newsswiper .swiper-slide p{ position: absolute; width:100%; bottom:0px; padding:10px; background:rgba(0, 0, 0, 0.4); color:#fff; text-align:left; } .newswrap li .textwrap{ background: no-repeat; background-size:100% 100%; height:24vh; border-top:2px solid #f60; cursor: pointer; position: relative; } .newswrap li .textwrap p{ font-size: 16px; line-height: 1.5; text-align: left; padding:10px 20px; } .newswrap li .textwrap p:nth-child(2){ position: absolute; bottom:0px; border-top:1px solid #eee; width:100%; font-size:14px; color:#999; } /* 集团简介 */ .screenwrap3{ background: no-repeat; background-size:100% 100%; padding:100px 100px 40px 100px; display: flex; flex-direction: column; } .screenwrap3 .introduce_wrap{ width:100%; max-width:1920px; } .introducemain{ display: flex; } .introducemain li{ flex:1; height:70vh; background-color:#fafafa; } .introducemain img{ width:100%; height:100%; } .introducemain .textwrap{ padding:30px; display: flex; justify-content: center; flex-direction: column; } .introducemain h6{ margin-bottom:20px; } .introducemain p{ text-align: left; text-indent:24px; font-size:14px; line-height:28px; margin:0px; } /* 专题 */ .screenwrap4{ background: no-repeat; background-size:100% 100%; padding:100px 100px 40px 100px; display: flex; flex-direction: column; } .screenwrap4 .special_wrap{ width:100%; max-width:1920px; } #special{ position: relative; } .special_wrap .swiper { padding-top: 20px; padding-bottom: 40px; overflow: hidden; } .special_wrap .swiper-slide { background: #222; box-shadow:0 0 10px rgba(0, 0, 0, 0.1); cursor: pointer; } .special_wrap .swiper-slide img{ display:block; width: 100%; height:500px; } .special_wrap .swiper-slide p { line-height: 58px; padding-top: 0; text-align: center; color: #fff; margin: 0; } /* 集团业务 */ .screenwrap5{ background: no-repeat; background-size:100% 100%; padding:100px 100px 40px 100px; display: flex; flex-direction: column; } .screenwrap5 .business_wrap{ width:100%; max-width:1920px; } .businessmain{ } .businessmain ul{ overflow: hidden; } .businessmain ul li{ width:32%; height:35vh; float: left; background-color:#fff; position: relative; cursor: pointer; margin:0 10px 10px 0; } .businessmain ul li img{ width:100%; height:100%; } .businessmain ul li .textwrap{ position: absolute; width:100%; padding:10px 0; bottom:0px; left:0px; background:rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; flex-direction: column; color:#fff; border-radius:4px; overflow: hidden; } .businessmain ul li .textwrap p{ font-size:14px; margin-top:5px; } .businessmain ul li .textwrap h3,.businessmain ul li .textwrap p{ transition: all 0.3s; margin:0px; } .businessmain ul li .textwrap:hover h3,.businessmain ul li .textwrap:hover p{ transform: scale(1.2); } /* logo */ .screenwrap6{ padding:0px 100px; display: flex; flex-direction: column; background-color:#fafafa; } .logo_wrap{ padding-top:10px; } .logo_wrap .list_wrap{ overflow: hidden; } .logo_wrap .list_wrap li{ float:left; width:24.2%; margin-right:1%; margin-bottom:1%; background-color:#fff; border:1px solid #eee; padding:20px; border-radius:2px; transition: all 0.4s; } .logo_wrap .list_wrap li img{ width:100%; } .logo_wrap .list_wrap li:hover{ box-shadow:0 0 20px rgba(0, 0, 0, 0.1); } .logo_wrap .list_wrap li:nth-child(4n){ margin-right:0px; } /* swiper */ .swiper-button-prev { left: -30px; width: 45px; height: 45px; background-image: ; background-position: 0 0; background-size: 100%; } .swiper-button-prev:hover { background-position: 0 -46px; background-size: 100% } .swiper-button-next { right: -30px; width: 45px; height: 45px; background-image: ; background-position: 0 -93px; background-size: 100%; } .swiper-button-next:hover { background-position: 0 -139px; background-size: 100% } .swiper-button-prev::after,.swiper-button-next::after{ content: ''; } .swiper-pagination-bullet { margin: 0 5px; background-color: #d5d5d5; opacity: 1; } .swiper-pagination-bullet-active { background-color: #f60; } /* 手机大体适配 */ @media (max-width:900px) { #a1,#a2{ width:90%; } .screenwrap2{ padding:100px 20px; } .newswrap li:nth-child(1){ width:100%; } #b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9{ display: none; } #c1,#c2,#c4{ display: none; } .screenwrap3,.screenwrap4,.screenwrap5{ padding:50px 20px 20px 20px; } .screenwrap6{ padding:0px; } .special_wrap .swiper { padding-top:0px; padding-bottom:0px; } .businessmain ul li{ width:90%; } #e3,#e4,#e5,#e6{ display: none; } #ct,#dt,#et{ padding:0px; } .logo_wrap{ padding:0px; } } /* 企业文化 */ .screenwrap7{ background: no-repeat; background-size:100% 100%; padding:100px 0px 40px 0px; } .screenwrap7 .culture_wrap{ width:100%; max-width:1920px; } .culture_wrap marquee{ background-color:rgba(0, 0, 0, 0.4); } .culture_wrap img{ width: auto; height:240px; margin-right:4px; cursor: default; }