.banner-max { position: fixed; top: 60px; left: 0; width: 100%; height: 880px; z-index: 2; } #banner-box { position: absolute; top: 0; left: 0; width: 100%; height: 880px; overflow: hidden; } #banner-box .btn { width: 1280px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; z-index: 10; } #banner-box .btn-fl { display: block; width: 52px; height: 52px; position: absolute; top: 220px; left: -92px; background: #cecece url(../images/banner-left.png) center center no-repeat; z-index: 3; } #banner-box .btn-fl:hover { background: #0086cd url(../images/banner-left-hover.png) center center no-repeat; } #banner-box .btn-fr { display: block; width: 52px; height: 52px; position: absolute; top: 220px; right: -92px; background: #cecece url(../images/banner-right.png) center center no-repeat; z-index: 3; } #banner-box .btn-fr:hover { background: #0086cd url(../images/banner-right-hover.png) center center no-repeat; } #banner-box .btn-a { position: absolute; top: 500px; left: 0; width: 100%; text-align: center; z-index: 4; } #banner-box .btn-a a { display: inline-block; width: 20px; height: 20px; } #banner-box .btn-a a b { display: block; margin: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; } #banner-box .btn-a a.active b { background: #0086cd; } .banner { width: 100%; height: 880px; position: relative; overflow: hidden; margin: 0 auto; z-index: 1; } .banner ul { position: absolute; top: 0; left: 0; z-index: 2; width: 10000px; background: url(../images/bg-100.png) repeat-x; } .banner ul li { float: left; width: 100%; } #banner-box .banner ul li a { display: block; width: 100%; height: 880px; background-size: auto 100%; background-position: center top; background-repeat: no-repeat; } .are { height: 534px; position: relative; z-index: 5; background: #fff; } .are .are-fl { float: left; width: 50%; height: 100%; background: url(../images/bg-1.jpg) right top no-repeat; } .are .are-fr { float: left; width: 50%; height: 100%; background: #008bd5; } .are .w { position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; } .are .w .are-top-box { float: right; width: 50%; height: 100%; text-align: center; } .are .w .are-top-box .are-top { margin: 0 80px; } .are .w .are-top-box .are-top .are-tit-1 { padding: 104px 0 0 0; font-size: 20px; color: #fff; } .are .w .are-top-box .are-top .are-cont-1 { font-size: 15px; color: #fff; margin: 26px 0 0 0; line-height: 25px; } .are .w .are-top-box .are-top .are-cont-2 { font-size: 13px; color: #7ad1ff; margin: 26px 0 0 0; line-height: 25px; } .case { position: relative; width: 100%; background: #e1e1e1; z-index: 5; } .add-1 { margin: 75px auto 0 auto; display: block; width: 100px; line-height: 35px; border: 1px solid #45bfff; } .add-1 a { font-size: 14px; color: #7ad1ff; text-indent: 25px; text-align: left; text-decoration: none; display: block; background: url(../images/arrows-3.png) 70px center no-repeat; } .add-1:hover a { text-decoration: none; color: #7ad1ff; text-indent: 30px; background: #049dee url(../images/arrows-3.png) 75px center no-repeat; } .case .w { position: relative; } .menu-nav { line-height: 30px; padding: 90px 0 0 0; } .menu-nav ul { float: right; } .menu-nav ul li { display: inline-block; text-align: center; } .menu-nav ul li a { display: inline-block; width: 100px; text-decoration: none; font-size: 16px; line-height: 33px; } .menu-nav ul li:hover a, .menu-nav ul li.active a { background: #008bd5; color: #fff; } .inform { position: relative; z-index: 5; background: #d2d2d2 url(../images/index-bg-4.jpg) center bottom no-repeat; } .inform .w { position: relative; } .inform .w .tit-box { top: -40px; } .nav-list { width: 1305px; margin: 60px auto 0 auto; } .nav-list li { display: none; } .inform-list-box { -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); float: left; } .inform-list-box .in-a { display: block; width: 395px; height: 140px; padding: 45px 20px 0 20px; } .inform-list-box .inform-list { position: relative; } .inform-list-box .inform-list .in-fl { position: absolute; top: -4px; left: 0; width: 65px; } .inform-list-box .inform-list .in-fl p { font-size: 20px; color: #000; line-height: 25px; } .inform-list-box .inform-list .in-fl span { display: block; font-size: 14px; color: #000; text-align: right; line-height: 25px; } .inform-list-box .inform-list .in-border { position: absolute; top: 0; left: 65px; width: 50px; height: 66px; background: url(../images/inform-border.jpg) center top no-repeat; } .inform-list-box .inform-list .in-fr { margin: 0 22px 0 115px; } .inform-list-box .inform-list .in-fr .inform-tit { margin-bottom: 10px; color: #000; font-size: 15px; line-height: 27px; height: 27px; overflow: hidden; } .inform-list-box .inform-list .in-fr .inform-cont { font-size: 13px; color: #4a4a4a; } .add-4 { display: block; width: 12px; height: 9px; margin-top: 13px; opacity: 0; -webkit-transform: translateY(0px) translateX(-10px); -moz-transform: translateY(0px) translateX(-10px); transform: translateY(0px) translateX(-10px); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background: url(../images/arrows-4.png) no-repeat; } .inform-list-box:hover { box-shadow: 0px 0px 16px #ababab; } .inform-list-box:hover .add-4 { -webkit-transform: translateY(0px) translateX(0); -moz-transform: translateY(0px) translateX(0); transform: translateY(0px) translateX(0); opacity: 1; } .nav-dot { position: relative; padding: 40px 0 50px 0; width: 100%; text-align: center; z-index: 4; } .nav-dot a { display: inline-block; width: 20px; height: 20px; } .nav-dot a b { display: block; margin: 6px; width: 8px; height: 8px; border-radius: 50%; background: #afafaf; } .nav-dot a.active b { background: #0086cd; } @media screen and (max-width: 1490px) { .w { width: 100%; } #banner-box .btn { margin: 0; left: 0; width: 100%; } #banner-box .btn-fl { left: 0; } #banner-box .btn-fr { right: 0; } .anim-list { width: 820px; margin: 0 auto; } .path-1 { margin: 0 20px 0 0; } .path .path-2 { margin: 0 20px 0 0; } .path .path-3 { margin: 0 20px 0 0; } .are .w { left: 0; margin: 0; } .case .w .case-list ul { width: 868px; } .case .w .case-list { width: 843px; margin: 0 auto; } .nav-list { width: 900px; } .inform-list-box .in-a { width: 100%; } .inform-list-box { width: 33.33%; } .inform .w .tit-box { left: 10px; } .menu-nav { margin: 0 20px 0 0; } .footer .w { margin: 0 20px; width: auto; } } .banner-min { display: none; margin-top: 60px; } .banner-min img { display: block; width: 100%; } @media screen and (max-width: 1000px) { .case .tit-box { display: none; } } @media screen and (max-width: 900px) { .inform-list-box { width: 100%; } .case .tit-box { display: none; } .case .w .case-list { width: 409px; } .case .w .case-list ul { width: 409px; } .case .w .case-list ul li .case-m-box { margin: 0; } .nav-list { margin: 20px 10px 0 10px; width: auto; } .inform-list-box { float: none; } .inform-list-box .in-a { width: auto; height: auto; padding: 45px 20px 27px 20px; } .inform .tit-box { display: none; } .menu-nav ul { text-align: center; float: none; } .menu-nav { padding: 65px 0 0 0; } } @media screen and (max-width: 780px) { .inform-list-box { width: 100%; } #banner-box { display: none; } .anim-list { width: 375px; } .banner-min { display: block; } .path .path-2 { margin: 0; } .path { margin: 0; } .are { height: auto; background: #008bd5; } .are .w { position: static; } .add-1 { margin: 75px auto 104px auto; } .are .w .are-top-box .are-top { margin: 0; padding: 0 80px; } .are .w .are-top-box { float: none; width: 100%; } .are-fl { display: none; } .are .are-fr { width: 100%; } .are .tit-box { display: none; } .case .tit-box { display: none; } } @media screen and (max-width: 409px) { .case .w .case-list { margin: 0 10px; width: auto; } .case .w .case-list ul { width: 100%; } .case .w .case-list ul li .case-m-box .case-m-img { width: 100%; height: auto; } .case .w .case-list ul li .case-m-box .case-m-img a img { width: 100%; height: auto; } .case .w .case-list ul li .case-m-box { height: auto; padding: 0 0 20px 0; } } @media screen and (max-width: 360px) { .path-index { margin: 0; } .path li { width: 100%; } .cont-3 { margin: 22px 0 22px 0; } .anim-list { margin: 0 20px; width: auto; } .path { padding: 135px 0 95px 0; } } .swiper-banner { width: 100%; overflow: hidden; position: relative; z-index: 3; } .swiper-banner .banner-ico { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; bottom: 0.02rem; left: 0; width: 100%; } .swiper-pagination-bullet { margin: 0 3px; } .new-index-box #banner-box .btn-fl { width: 76px; height: 76px; background: url(../images/new-banner-left.png) center center no-repeat; } .new-index-box #banner-box .btn-fr { width: 76px; height: 76px; background: url(../images/new-banner-right.png) center center no-repeat; } .new-index-box .new-main-box { margin: 920px auto 0 auto; position: relative; z-index: 5; background: #fff; width: 100%; } .new-index-box .new-main-box .new-main-top-box { position: absolute; top: -194px; left: 50%; width: 100%; transform: translate(-50%, 0); background: url(../images/shadow-top.png) center top no-repeat; height: 194px; } .new-index-box .new-main-box .process-box { width: 1308px; overflow: visible; height: 335px; position: absolute; top: -200px; left: 50%; transform: translate(-50%, 0); } .new-index-box .new-main-box .process-box .process-bottom-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 10px; box-shadow: 0 0 10px #ccc; overflow: hidden; } .new-index-box .new-main-box .process-box .min-process-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .new-index-box .new-main-box .process-box .one-box { float: left; text-align: center; width: 327px; height: 335px; position: relative; transition: 0.3s all; background: #fff; } .new-index-box .new-main-box .process-box .one-box:after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 80px; height: 5px; background: #c5c5c5; transition: 0.3s all; } .new-index-box .new-main-box .process-box .one-box::before { content: ''; display: block; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 2px; height: 125px; background: #e3e3e3; opacity: 1; transition: 0.3s all; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(4)::before { display: none; } .new-index-box .new-main-box .process-box .one-box:hover, .new-index-box .new-main-box .process-box .one-box.active { background: #0086cd; padding: 30px 0; margin-top: -30px; border-radius: 10px; } .new-index-box .new-main-box .process-box .one-box:hover::before, .new-index-box .new-main-box .process-box .one-box.active::before { opacity: 0; } .new-index-box .new-main-box .process-box .one-box:hover::after, .new-index-box .new-main-box .process-box .one-box.active::after { width: 110px; background: #fff; } .new-index-box .new-main-box .process-box .one-box:hover .text-box, .new-index-box .new-main-box .process-box .one-box.active .text-box { color: #fff; } .new-index-box .new-main-box .process-box .one-box:hover .time-box, .new-index-box .new-main-box .process-box .one-box.active .time-box { color: #fff; } .new-index-box .new-main-box .process-box .one-box:hover .arrow-box, .new-index-box .new-main-box .process-box .one-box.active .arrow-box { opacity: 1; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(1), .new-index-box .new-main-box .process-box .one-box:nth-of-type(1).active { border-radius: 10px 0 0 10px; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(1):hover, .new-index-box .new-main-box .process-box .one-box.active:nth-of-type(1) { border-radius: 10px; box-shadow: 0 0 25px #5a5959; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(1):hover .img-box, .new-index-box .new-main-box .process-box .one-box:nth-of-type(1).active .img-box { background-image: url(../images/process-1-white.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(1) .img-box { background-image: url(../images/process-1.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(2):hover { border-radius: 10px; box-shadow: 0 0 25px #5a5959; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(2):hover .img-box { background-image: url(../images/process-2-white.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(2) .img-box { background-image: url(../images/process-2.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(3):hover { border-radius: 10px; box-shadow: 0 0 25px #5a5959; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(3):hover .img-box, .new-index-box .new-main-box .process-box .one-box:nth-of-type(3).active .img-box { background-image: url(../images/process-3-white.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(3) .img-box { background-image: url(../images/process-3.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(4) { border-radius: 0 10px 10px 0; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(4):hover { box-shadow: 0 0 25px #5a5959; border-radius: 10px; } .new-index-box .new-main-box .process-box .one-box:nth-of-type(4):hover .img-box { background-image: url(../images/process-4-white.png); } .new-index-box .new-main-box .process-box .one-box:nth-of-type(4) .img-box { background-image: url(../images/process-4.png); } .new-index-box .new-main-box .process-box .one-box .img-box { background-position: center center; background-repeat: no-repeat; width: 100px; height: 100px; margin: 50px auto 0 auto; transition: 0.3s all; } .new-index-box .new-main-box .process-box .one-box .text-box { font-size: 24px; font-weight: bold; color: #0046a7; transition: 0.3s all; } .new-index-box .new-main-box .process-box .one-box .time-box { margin: 5px 0 0 0; color: #6c6c6c; font-size: 16px; transition: 0.3s all; } .new-index-box .new-main-box .process-box .one-box .arrow-box { display: block; background: url(../images/process-arrow.png); width: 79px; height: 79px; margin: 30px auto 0 auto; opacity: 0; transition: 0.3s all; } .new-index-box .new-about-box { padding: 200px 0 0 0; } .new-index-box .new-about-box .title-box { font-size: 36px; color: #000000; text-align: center; font-family: "鏂规鍏颁涵绮楅粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .new-about-box .des { font-size: 25px; color: #2d89be; text-align: center; margin: 10px 0; font-weight: bold; font-family: "鏂规鍏颁涵鐗归粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .new-about-box .box { margin: 100px auto 0 auto; display: flex; justify-content: space-between; width: 1308px; } .new-index-box .new-about-box .box .right-box { margin: 0 0 0 30px; } .new-index-box .new-about-box .box .right-box .t-box { color: #000000; font-size: 36px; margin: 90px 0 0 0; } .new-index-box .new-about-box .box .right-box .subtitle-box { font-size: 16px; color: #1b3150; margin: 50px 0 0 0; line-height: 30px; } .new-index-box .new-about-box .box .right-box .border-box { margin: 20px 0; width: 170px; height: 3px; background: #e0e0e0; } .new-index-box .new-about-box .box .right-box .des-box { font-size: 16px; line-height: 25px; color: #00000075; } .new-index-box .new-about-box .box .right-box .more-box { text-align: right; } .new-index-box .new-about-box .box .right-box .link-btn-box { display: inline-block; width: 170px; line-height: 48px; background: #018bd5; box-shadow: 0 0 10px #ccc; font-size: 16px; color: #fff; border-radius: 10px; text-align: center; text-decoration: none; } .new-index-box .new-about-box .box .right-box .link-btn-box:hover { background: #02429c; } .new-index-box .new-w { width: 1308px; } .new-index-box .new-main-bottom-box { width: 100%; background: url(../images/shadow-bottom.png) center top no-repeat; height: 159px; margin: 0 auto; } .new-index-box .new-news-box { background: url(../images/news-bg.png) center bottom no-repeat; height: 803px; } .new-index-box .new-news-box .title-box { font-size: 36px; color: #000000; text-align: center; padding: 40px 0 0 0; font-family: "鏂规鍏颁涵绮楅粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .new-news-box .des-box { text-align: center; font-size: 25px; color: #018bd5; margin: 10px 0 0 0; font-weight: bold; font-family: "鏂规鍏颁涵鐗归粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .new-news-box .news-list-box { position: relative; margin: 0 auto; } .new-index-box .new-news-box .news-list-box.two-list .group-one-box .min-box { left: -1308px; } .new-index-box .new-news-box .news-list-box.two-list .btn-box .one-btn-box:nth-of-type(1) { background: #bebebe; width: 80px; } .new-index-box .new-news-box .news-list-box.two-list .btn-box .one-btn-box:nth-of-type(2) { width: 44px; background: #1758a3; } .new-index-box .new-news-box .news-list-box .news-btn { position: absolute; top: 124px; width: 78px; height: 79px; cursor: pointer; } .new-index-box .new-news-box .news-list-box .news-btn.left-btn { left: -100px; background: url(../images/news-left-btn.png); } .new-index-box .new-news-box .news-list-box .news-btn.right-btn { right: -100px; background: url(../images/news-right-btn.png); } .new-index-box .new-news-box .news-list-box .btn-box { display: flex; text-align: center; justify-content: center; margin: 30px 0 0 0; } .new-index-box .new-news-box .news-list-box .btn-box .one-btn-box { height: 11px; border-radius: 10px; transition: 0.3s all; cursor: pointer; width: 44px; background: #1758a3; } .new-index-box .new-news-box .news-list-box .btn-box .one-btn-box:nth-of-type(2) { margin: 0 0 0 15px; background: #bebebe; width: 80px; } .new-index-box .new-news-box .news-list-box .group-one-box { margin: 100px 0 0 0; height: 322px; overflow: hidden; position: relative; } .new-index-box .new-news-box .news-list-box .group-one-box .min-box { display: flex; width: 2616px; position: absolute; top: 0; left: 0; transition: 0.3s all; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box { display: flex; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box { position: relative; width: 270px; height: 322px; padding: 0 70px; background: #fff; border-radius: 10px; transition: 0.3s all; display: block; margin: 0 26px 0 0; text-decoration: none; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:hover, .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box.active { box-shadow: 0 0 10px #ccc; background: #018bd5; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:hover:after, .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box.active:after { background: #fff; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:hover .l-one-box, .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box.active .l-one-box { color: #fff; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:hover .l-two-box, .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box.active .l-two-box { color: #fff; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:hover .l-three-box, .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box.active .l-three-box { color: #fff; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box:after { content: ''; display: block; width: 5px; height: 260px; background: #018ad4; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); transition: 0.3s all; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box .l-one-box { color: #018bd5; font-size: 38px; font-weight: bold; padding: 90px 0 0 0; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box .l-two-box { font-size: 25px; color: #adadad; font-weight: bold; transition: 0.3s all; } .new-index-box .new-news-box .news-list-box .group-one-box .list-box .one-box .l-three-box { margin: 20px 0 0 0; font-size: 15px; color: #2d2d2d; line-height: 25px; height: 50px; overflow: hidden; transition: 0.3s all; } .new-index-box .culture-box { background: #018bd5; } .new-index-box .culture-box .title-box { font-size: 36px; color: #fff; text-align: center; font-family: "鏂规鍏颁涵绮楅粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .culture-box .des-box { text-align: center; font-size: 25px; color: #fff; margin: 25px 0 0 0; font-weight: bold; font-family: "鏂规鍏颁涵鐗归粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .culture-box .list-box { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 70px 0 100px 0; } .new-index-box .culture-box .list-box .one-box { display: block; cursor: pointer; text-decoration: none; width: 602px; background: url(../images/c-line-blue.png) center bottom no-repeat; transition: 0.3s all; height: 288px; } .new-index-box .culture-box .list-box .one-box a { display: block; text-decoration: none; } .new-index-box .culture-box .list-box .one-box:hover { background: url(../images/c-line.png) center bottom no-repeat; } .new-index-box .culture-box .list-box .one-box:nth-of-type(1) { margin-right: 102px; } .new-index-box .culture-box .list-box .one-box:nth-of-type(1) .img-box { background-image: url(../images/c-1.png); } .new-index-box .culture-box .list-box .one-box:nth-of-type(2) .img-box { background-image: url(../images/c-2.png); } .new-index-box .culture-box .list-box .one-box:nth-of-type(3) { margin-right: 102px; } .new-index-box .culture-box .list-box .one-box:nth-of-type(3) .img-box { background-image: url(../images/c-3.png); } .new-index-box .culture-box .list-box .one-box .l-more-box { line-height: 50px; padding: 35px 0 0 0; } .new-index-box .culture-box .list-box .one-box .l-more-box span { font-size: 30px; color: #fff; vertical-align: top; } .new-index-box .culture-box .list-box .one-box .l-more-box i { vertical-align: middle; display: inline-block; margin: 0 0 0 30px; width: 19px; height: 32px; background: url(../images/arrow.png); } .new-index-box .culture-box .list-box .one-box .img-box { margin: 10px 0 0 75px ; width: 114px; height: 93px; background-size: 54%; background-color: #018bd5; background-position: center center; background-repeat: no-repeat; } .new-index-box .culture-box .list-box .one-box:nth-of-type(4) .img-box { background: none; } .new-index-box .culture-box .list-box .one-box .min-box { width: 390px; margin: 20px auto 0 auto; } .new-index-box .culture-box .list-box .one-box .l-t-box { font-size: 30px; color: #fff; } .new-index-box .culture-box .list-box .one-box .l-des-box { margin: 20px 0 0 0; font-size: 14px; color: #fff; line-height: 25px; } .new-index-box .case-box { background: #f3f5f8 url(../images/case-top.png) center top no-repeat; height: 1081px; } .new-index-box .case-box .title-box { text-align: center; font-size: 36px; color: #000000; padding: 135px 0 0 0; font-family: "鏂规鍏颁涵绮楅粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .case-box .des-box { text-align: center; font-size: 25px; color: #018bd5; margin: 10px 0 0 0; font-weight: bold; font-family: "鏂规鍏颁涵鐗归粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .case-box .list-max-box { position: relative; margin: 100px auto 0 auto; } .new-index-box .case-box .list-max-box .btn { position: absolute; top: 250px; width: 78px; height: 79px; cursor: pointer; } .new-index-box .case-box .list-max-box .left-btn { left: -100px; background: url(../images/news-left-btn.png); } .new-index-box .case-box .list-max-box .right-btn { right: -100px; background: url(../images/news-right-btn.png); } .new-index-box .case-box .list-box { overflow: hidden; position: relative; height: 590px; width: 1308px; } .new-index-box .case-box .list-box .min-box { position: absolute; top: 0; left: 0; transition: 0.3s all; width: 7848px; display: flex; } .new-index-box .case-box .list-box .min-box .li-box { width: 1308px; height: 590px; position: relative; } .new-index-box .case-box .list-box .min-box .li-box .one-box:nth-of-type(1) { width: 384px; } .new-index-box .case-box .list-box .min-box .li-box .one-box:nth-of-type(2) { width: 897px; height: 290px; position: absolute; top: 0; right: 0; } .new-index-box .case-box .list-box .min-box .li-box .one-box:nth-of-type(3) { position: absolute; top: 300px; left: 409px; width: 435px; height: 290px; } .new-index-box .case-box .list-box .min-box .li-box .one-box:nth-of-type(4) { width: 435px; height: 290px; position: absolute; top: 300px; left: 872px; } .new-index-box .case-box .list-box .min-box .li-box .fr-box { width: 897px; } .new-index-box .case-box .list-box .min-box .li-box .fr-box .top-box { height: 290px; } .new-index-box .case-box .list-box .min-box .li-box .fr-box .box { display: flex; height: 290px; justify-content: space-between; margin: 11px 0 0 0; } .new-index-box .case-box .list-box .min-box .li-box .fr-box .box .one-box { width: 435px; } .new-index-box .case-box .list-box .min-box .li-box .one-box { background-size: cover; height: 100%; border-radius: 10px; position: relative; overflow: hidden; } .new-index-box .case-box .list-box .min-box .li-box .one-box:hover .mask-box { opacity: 0.8; background: #0166da; } .new-index-box .case-box .list-box .min-box .li-box .one-box:hover .t-des-box { opacity: 1; } .new-index-box .case-box .list-box .min-box .li-box .one-box .mask-box { top: 0; left: 0; width: 100%; height: 100%; transition: 0.3s all; opacity: 0.1; background: #fff; } .new-index-box .case-box .list-box .min-box .li-box .one-box .m-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; padding: 42px 65px; } .new-index-box .case-box .list-box .min-box .li-box .one-box .t-box { font-size: 23px; color: #fff; font-weight: bold; } .new-index-box .case-box .list-box .min-box .li-box .one-box .t-border { margin: 20px 0; width: 43px; height: 2px; background: #fff; } .new-index-box .case-box .list-box .min-box .li-box .one-box .t-des-box { line-height: 25px; height: 100px; font-size: 14px; margin: 0 100px 0 0; color: #fff; opacity: 0; transition: 0.3s all; overflow: hidden; } .new-index-box .case-box .list-box .min-box .li-box .one-box .arrow-btn { position: absolute; right: 65px; bottom: 42px; background: url(../images/aorrow-right.png) center center no-repeat; width: 46px; height: 46px; border: 2px solid #ccc; } .new-index-box .case-box .switch-btn { display: flex; align-items: center; justify-content: center; margin: 20px 0 0 0; } .new-index-box .case-box .switch-btn .switch-one-btn { width: 118px; cursor: pointer; margin: 0 30px 0 0; } .new-index-box .case-box .switch-btn .switch-one-btn.active .top-box { background: url(../images/switch-active.png) center bottom no-repeat; } .new-index-box .case-box .switch-btn .switch-one-btn.active .text-box { color: #018bd5; } .new-index-box .case-box .switch-btn .switch-one-btn .top-box { height: 18px; background: url(../images/switch.png) center bottom no-repeat; } .new-index-box .case-box .switch-btn .switch-one-btn .text-box { color: #8a8a8a; font-size: 17px; line-height: 30px; text-align: center; margin: 5px 0 0 0; font-weight: bold; } .new-index-box .contact-box { height: 691px; background: url(../images/contact-1.png) center top no-repeat; } .new-index-box .contact-box .min-box { margin: 0 auto; } .new-index-box .contact-box .min-box .right-box { margin: 0 0 0 470px; } .new-index-box .contact-box .min-box .right-box .title-box { font-size: 36px; color: #000000; font-weight: bold; padding: 135px 0 0 0; font-family: "鏂规鍏颁涵绮楅粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .contact-box .min-box .right-box .des-box { margin: 27px 0 0 0; color: #018bd5; font-size: 25px; font-weight: bold; font-family: "鏂规鍏颁涵鐗归粦绠€浣?, "Microsoft YaHei", "寰蒋闆呴粦", Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; } .new-index-box .contact-box .min-box .right-box .t-box { margin: 100px 0 0 0; font-size: 23px; color: #193a79; } .new-index-box .contact-box .min-box .right-box .info-box { margin: 30px 0 0 0; display: flex; flex-wrap: wrap; } .new-index-box .contact-box .min-box .right-box .info-box .one-box { width: 409px; font-size: 16px; color: #8a8a8a; line-height: 35px; } .new-index-box .contact-box .min-box .right-box .info-box .one-box:nth-of-type(2n+1) { margin: 0 20px 0 0; } .new-index-box .list-one-box { display: flex; } .new-index-box .new-main-box .process-box .one-box { position: relative; } .new-index-box .new-main-box .process-box .one-box:hover .min-box { position: absolute; left: -2px; right: -2px; } .new-index-box .new-main-box .process-box .one-box .min-box { position: absolute; top: 0; left: 0px; right: 0px; bottom: 0; }