.container { width: 1400px; margin: 0 auto; } /*-----轮播图---------*/ .banner_index { width: 100%; position: relative; overflow: hidden; } .banner_index img { display: block; width: 100%; } .rel { position: relative; overflow: hidden; } .abs { position: absolute; top: -85px; left: 0; height: 1px; } .banner { width: 100%; position: relative; } .banner_index li a > img { display: block; width: 100%; } .banner_index { position: relative; overflow: hidden; } .slides > li { position: relative; height: 800px; } .banner_index a { display: block; } .banner_index .flex-direction-nav .flex-prev, .banner_index .flex-direction-nav .flex-next { display: block; width: 49px; height: 49px; position: absolute; top: 52%; transform: translateY(-50%); transition: .5s; font-size: 0; } .banner_index .flex-direction-nav .flex-prev { left: 100px; background: url(../images/left.png) no-repeat center; } .banner_index .flex-direction-nav .flex-next { right: 100px; background: url(../images/right.png) no-repeat center; } .banner_index .flex-direction-nav .flex-prev:hover { background: url(../images/lefth.png) no-repeat center; } .banner_index .flex-direction-nav .flex-next:hover { background: url(../images/righth.png) no-repeat center; } .banner_index .flex-control-paging li a:before { content: ""; position: absolute; height: 3px; left: 0; transition: .5s; background: #8fccff; z-index: 2; } .banner_index .flex-control-paging li .flex-active:before { animation: wani 3s 1 cubic-bezier(0.28, 0.77, 1, 1); } @keyframes wani { 0% { width: 0; } 20% { width: 30%; } 40% { width: 40%; } 50% { width: 50%; } 60% { width: 60%; } 70% { width: 70%; } 80% { width: 80%; } 100% { width: 100%; } } @-webkit-keyframes wiggle { from { top: 10px; } to { top: 20px; } } @-moz-keyframes wiggle { from { top: 10px; } to { top: 20px; } } @-o-keyframes wiggle { from { top: 10px; } to { top: 20px; } } @keyframes wiggle { from { top: 10px; } to { top: 20px; } } .banner_index .flex-control-paging { position: absolute; bottom: 30px; right: 50%; transform: translate(50%, 0); } .banner_index .flex-control-paging li { float: left; cursor: pointer; } .banner_index .flex-control-paging a { display: block; width: 50px; height: 3px; cursor: pointer; background: #fff; font-size: 0; margin-right: 10px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; } .banner_index .flex-control-paging li:last-child a { margin-right: 0; } /*-----产品与解决方案---------*/ .in-one { overflow: hidden; padding: 60px 0; } .tit { text-align: center; margin-bottom: 38px; } .tit h3 { font-size: 32px; color: #333; line-height: 32px; position: relative; padding-bottom: 20px; margin-bottom: 11px; } .tit h4 { font-size: 14px; color: #666; } .tit h3:after { content: ''; width: 30px; height: 4px; border-radius: 2px; background: url(../images/line.png) no-repeat center; position: absolute; bottom: 0; left: 50%; margin-left: -15px; } .in1_list { overflow: hidden; text-align: center; } .in1_list li { float: left; width: 270px; position: relative; overflow: hidden; text-align: left; } .in1_list li.on { max-width: 90vw; width: 590px; } .in1_list li.on .imgCen { opacity: 1; } .img_desc { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .in1_list li.on .img_desc { background: transparent; opacity: 1; filter: alpha(opacity=100); position: relative; } .in1_list li.on .img_desc:after { content: ''; width: 100%; height: 327px; background: url(../images/in1-bg.png) no-repeat center; background-size: cover; position: absolute; bottom: 0; left: 0; } .imgCen { color: #fff; transition: all 0.3s; opacity: 0; position: absolute; bottom: 30px; z-index: 10; padding: 0 30px; width: 100%; } .imgTop img { width: 100%; display: block; height: 450px; object-fit: cover; } .imgBot h3 { color: #fff; font-size: 18px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgBot img { display: block; margin: 0 auto 16px; } .imgBot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; left: 50%; opacity: 1; padding: 0 10px; } .in1_list li.on .imgBot { opacity: 0; } .imgCen h3 { color: #fff; font-size: 18px; position: relative; padding-bottom: 15px; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgCen h3:after { content: ''; width: 30px; height: 2px; background: #0369fc; position: absolute; bottom: 0; left: 0; } .imgCen p { color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 24px; height: 48px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /*-----产业发展---------*/ .in-two { overflow: hidden; padding: 60px 0; background: url(../images/img9.jpg) no-repeat center; background-size: cover; } .slideTxtBox { overflow: hidden; } .slideTxtBox .hd { position: relative; } .slideTxtBox .hd ul { margin-bottom: 30px; } .slideTxtBox .hd ul li { width: 33.33%; float: left; cursor: pointer; text-align: center; } .slideTxtBox .hd ul li a { display: inline-block; font-size: 18px; color: #333; vertical-align: middle; } .slideTxtBox .hd ul li i { display: inline-block; vertical-align: middle; margin-right: 20px; position: relative; } .slideTxtBox .hd ul li i img.img2 { position: absolute; left: 0; top: 0; opacity: 0; } .slideTxtBox .hd ul li i img.img1 { opacity: 1; } .slideTxtBox .hd ul li.on a { color: #0369fc; } .slideTxtBox .hd ul li.on i img.img2 { opacity: 1; } .slideTxtBox .hd ul li.on i img.img1 { opacity: 0; } .slideTxtBox .bd { position: relative; } .slideTxtBox .bd .slide-item { zoom: 1; background: #fff; padding: 40px 138px; position: relative; /* -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; */ width: 1400px !important; } .slideTxtBox .arrow a { position: absolute; top: 210px; z-index: 10; display: inline-block; font-size: 30px; cursor: pointer; color: #7f7f7f; } .slideTxtBox .arrow a:hover { color: #0369fc; } .slideTxtBox .arrow .prev { left: 60px; } .slideTxtBox .arrow .next { right: 60px; } .slide-item-lf { width: 370px; height: 240px; overflow: hidden; float: left; margin-right: 30px; } .slide-item-lf img { display: block; width: 100%; } .slide-item-rt { width: 630px; float: left; } .slide-item-rt h3 { color: #0369fc; font-size: 18px; line-height: 18px; margin-bottom: 23px; padding-left: 30px; background: url(../images/user.png) no-repeat left center; } .slide-item-rt p { color: #666; font-size: 14px; line-height: 24px; } .slide-item-rt ul { margin-top: 25px; } .slide-item-rt ul li .bd-circle { margin-bottom: 9px; position: relative; } .slide-item-rt ul li { width: 80px; float: left; text-align: center; margin-right: 40px; } .slide-item-rt ul li:last-child { margin-right: 0; } .slide-item-rt ul li p { color: #666; font-size: 14px; transition: all 0.4s; } .slide-item-rt ul li .bd-circle img { transition: all 0.4s; } .slide-item-rt ul li .bd-circle img.img2 { position: absolute; left: 0; top: 0; opacity: 0; } .slide-item-rt ul li .bd-circle img.img1 { opacity: 1; } .slide-item-rt ul li:hover .bd-circle img.img2 { opacity: 1; } .slide-item-rt ul li:hover .bd-circle img.img1 { opacity: 0; } .slide-item-rt ul li:hover p { color: #0369fc; } /*-----服务与支持---------*/ .in-three { padding: 60px 0; overflow: hidden; } .in3_list { overflow: hidden; } .in3_list ul { padding: 0 !important; } .in3_list li { width: 446px; float: left; margin-right: 30px; text-align: center; } .in3_list li .in3-pic { width: 100%; overflow: hidden; } .in3_list li .in3-pic img { display: block; width: 100%; height: 100%; transition: all 0.3s; } .in3_list li .in3-desc { padding-top: 25px; padding-bottom: 23px; position: relative; height: 48px; overflow: hidden; transition: all 0.5s; } .in3_list li .in3-desc h3 { font-size: 18px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; } .in3_list li .in3-desc p { font-size: 14px; color: #666; line-height: 24px; height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .in3_list li:hover .in3-desc { border-bottom: 1px solid #0369fc; height: 155px; } .in3_list li:hover .in3-pic img { transform: scale(1.1); } .in3-con { position: relative; text-align: center; } .in3_btn a { font-size: 30px; color: #7f7f7f; position: absolute; top: 230px; } .in3_btn a.in3btn_prev { left: -50px; } .in3_btn a.in3btn_next { right: -50px; } .in3_btn a:hover { color: #0369fc; } /*关于我们*/ .in-four { padding: 80px 0; overflow: hidden; background: url(../images/home-bg.png) no-repeat center; background-size: cover; /*height: 650px;*/ } .in4-con .tit h3 { color: #fff; margin-bottom: 24px; } .in4-con .tit h4 { color: #fff; line-height: 24px; } .in4-con .tit { margin-bottom: 42px; } .in4-list { text-align: center; } .in4-list ul { font-size: 0; } .in4-list li { display: inline-block; width: 300px; vertical-align: top; transition: all 0.4s; } .in4-list .in4-pic { width: 80px; height: 80px; border-radius: 50%; border: 1px dashed #fff; margin: 0 auto 26px; } .in4-list .in4-desc h3 { color: #fff; font-size: 18px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .in4-list .in4-desc p { color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 24px; height: 100px; } .in4-list .set_2_button { margin-top: 34px; } .in4-list li:hover .in4-desc p { height: 48px; } .in4-list li:hover .in4-pic { border: 1px solid #fff; } .in5-list ul { display: flex; justify-content: center; align-items: center; } /* 查看更多按钮 */ .set_2_button { margin-top: 50px; text-align: center; display: inline-block; width: 140px; height: 35px; font-size: 14px; color: #fff; line-height: 35px; overflow: hidden; position: relative; transition: all 1s; cursor: pointer; background: url(../images/btn.png) no-repeat center; } .set_2_button > span { display: inline-block; transition: all .5s; line-height: 36px; } .set_2_btn-1:before { left: -100%; transition: all .5s; } .set_2_btn-1:hover:before { left: 48%; transition: all 1s; } .set_2_btn-1:hover:before { left: 48%; transition: all 1s; } .icon-forward:before { content: "→"; position: absolute; } .set_2_btn-1:hover > span { transform: translateX(300%); transition: all 1s; } @media (max-width: 1600px) { .container { width: 1200px; } .in1_list li { width: 230px; } .in1_list li.on { width: 510px; } } /*移动端适配*/ @media (max-width: 768px) { .banner_index { margin-top: 70px; } .container { width: 90vw; max-width: 1200px; } /*轮播图*/ .slides > li { height: 56.25vw; } /*首页-产品与解决方案*/ .set_2_button { margin-top: 20px; } .in-one { padding: 30px 0; } .in1_list ul { display: flex; flex-direction: column; } .in1_list li { max-width: 90vw; width: 90vw !important; margin-bottom: 20px; } .in1_list li .img_desc { background: transparent; opacity: 1; filter: alpha(opacity=100); position: relative; } .in1_list li .imgCen { opacity: 1; } .in1_list li .img_desc:after { content: ''; width: 100%; height: 327px; background: url(../images/in1-bg.png) no-repeat center; background-size: cover; position: absolute; bottom: 0; left: 0; } .imgTop img { width: 100%; height: 250px; object-fit: cover; } /*首页-产业发展*/ .in-two { padding: 30px 0; } .slideTxtBox .hd ul li i { margin-right: 0; } .slideTxtBox .bd .slide-item { width: 90vw !important; padding: 0; } .slide-item-lf { width: 100%; } .slide-item-rt { width: 100%; padding: 15px; } .slideTxtBox .arrow a { bottom: 40% } .slide-item-rt ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .slide-item-rt ul li { /*margin: 0 20px 20px 0;*/ width: 20%; margin: 0; text-align: center; } .slide-item-rt ul li .bd-circle { width: 40px; height: 40px; margin: 0 auto 9px; position: relative; } .slide-item-rt ul li .bd-circle img { width: 40px; height: 40px; } .slide-item-rt ul li p { font-size: 12px; } .slide-item-rt h3 { margin-bottom: 10px; } .in4-list li { min-height: 240px; } }