*{ word-break: break-word; } .link-nav ul{ width: 80%; } .top-panel{ height: 790px; background-image: url(../img/zjnj-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; color: #4A4F54; padding-top: 43px; overflow: hidden; } .top-panel h3,.top-panel h2{ font-size: 30px; } .top-panel h2{ font-weight: bold; margin: 28px 0 38px 0; } .top-panel .desc,.panel2 .desc{ width: 95%; line-height: 30px; } .top-panel .desc p:last-child,.panel2 .desc p:last-child{ margin-top: 20px; } .top-panel .data-box{ width: 80%; /*margin: 107px auto 0;*/ margin: 0 auto; color: #004BA0; } .top-panel .data-box ul li{ text-align: center; font-weight: bold; } .top-panel .data-box .num{ font-size: 78px; position: relative; width: auto; margin: 0 auto; } .top-panel .data-box .unit{ font-size: 16px; color: #999; position: absolute; top: 0; right: -10%; } .panel2{ padding-left: 8%; } .panel2 .desc-box{ width: 50% ; padding-top: 53px; position: relative; } .panel2 .desc-box h3{ position: relative; padding-left: 36px; } .panel2 .desc-box h3::after{ content: ''; position: absolute; top: 5px; left: 0; width: 10px; height: 31px; background: #004BA0; } .panel2 .desc-box h2{ margin: 42px 0 30px; } .panel2 .pic{ width: 50%; background: #4A4F54; padding: 20px; } .panel2 .pic ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: -20px; } .panel2 .pic ul li{ width: 48.8%; height: 242px; margin-bottom: 20px; } .panel2 .pic ul li .pic-box{ width: 100%; height: 100%; } .panel2 .watch-more{ margin-top: 65px; } .cnj-logo{ position: absolute; right: 28px; top: 25px; } .panel3{ height: 883px; background-image: url(../img/zjnj-bg2.jpg); padding-top: 117px; } .panel3 .hd{ position: relative; } .panel3 .hd::after{ content: ''; position: absolute; left: 0; top: 10%; width: 100%; height: 15px; background-image: url(../img/long-line.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; } .panel3 .hd ul { width: 80%; margin: 0 auto; position: relative; z-index: 99; } .panel3 .hd ul li{ text-align: center; font-size: 20px; font-weight: bold; color: #333; cursor: pointer; } .panel3 .hd ul li i{ display: block; width: 29px; height: 29px; background: #4A4F54; border-radius: 50%; position: relative; margin: 0 auto 18px; } .panel3 .hd ul li i::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 45px; height: 45px; background: #4A4F54; opacity: 0.16; border-radius: 50%; } .panel3 .hd ul li.on i{ background: #004BA0; } .panel3 .hd ul li.on i::after{ background: #004BA0; } .panel3 .bd .step{ margin-top: 127px; height: 437px; background: #FFFFFF; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.08); } .panel3 .bd .step .pic-box{ width: 46%; } .panel3 .bd .step .desc{ width: 54%; padding: 31px 18px 30px 34px; } .panel3 .bd .step .desc h3{ color: #004BA0; margin-bottom: 35px; } .panel3 .bd .step .desc .info{ height: 304px; color: #333333; line-height: 24px; padding:0 20px; overflow: auto; position: relative; }.mCSB_scrollTools{ background: rgba(0,0,0,.6); } .panel3 .bd .step .desc .info::before{ content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-image: url(../img/line-left.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .panel3 .bd .step .desc .info p{ margin-bottom: 15px; } .panel4{ height: 809px; background-image: url(../img/zjnj-bg3.jpg); padding-top: 84px; } .panel4 .container{ width: 1800px; overflow: hidden; } .panel4 .title{ text-align: center; } .panel4 .item-box{ margin-top: 84px; } .panel4 .item-box ul li{ height: 411px; position: relative; width: 32%; } .panel4 .item-box ul li .pic-box{ width: 100%; height: 100%; } .panel4 .item-box ul li .hidden{ width: 90%; height: 85%; background: rgba(0, 0, 0, .49); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); padding: 36px 33px; text-align: center; display: block; } .panel4 .item-box ul li .hidden .date{ margin: 18px 0 0; padding-bottom: 35px; border-bottom: 1px solid rgba(255, 255, 255, .26); } .panel4 .item-box ul li .hidden .info{ line-height: 30px; margin: 18px 0 0 0; } .panel4 .item-box ul li:hover .hidden{ display: block; } .panel4 .item-box ul li .hidden .watch-more{ background: none; width: 40%; margin: 0 auto; } .bottom-panel{ height: 454px; background-image: url(../img/zjnj-bg4.jpg); position: relative; } .bottom-panel .link-map{ position: absolute; top: 13%; left: 44.5%; } .middle-panel{ padding: 72px 0; } .middle-panel .title{ text-align: center; } .middle-panel .title h3{ position: relative; overflow: hidden; margin-bottom: 23px; } .middle-panel .title>p{ position: relative; color: #999; } .middle-panel .title h3::after{ content: ''; position: absolute; top: 50%; left: -20px; width: 46%; height: 1px; background: #DCDEE3; } .middle-panel .title h3::before{ content: ''; position: absolute; top: 50%; right: 0; width: 46%; height: 1px; background: #DCDEE3; } .middle-panel .title p::after{ content: ''; position: absolute; top: 50%; left: 10%; width: 26%; height: 1px; background: #DCDEE3; } .middle-panel .title p::before{ content: ''; position: absolute; top: 50%; right: 10%; width: 26%; height: 1px; background: #DCDEE3; } .middle-panel .item-box{ margin-top: 67px; } .middle-panel .item-box ul li{ width: 16.6%; height: 302px; background: #FFFFFF; box-shadow: -2px 3px 16px 0px #E2DFDF; text-align: center; padding: 23px 12px 0; transition: all .3s; } .middle-panel .item-box ul li:hover{ animation: shake 800ms ease-in-out; } @keyframes shake { /* 垂直抖动,核心代码 */ 25%{transform: translate3d(0, 8px, 0);} 50%{transform: translate3d(0, 0, 0);} 85%{ transform: translate3d(0, -8px, 0); } } .middle-panel .item-box ul li .name{ margin-top: 4px; padding-bottom: 15px; border-bottom: 1px solid #DCDEE3; } .middle-panel .item-box ul li .info{ margin-top: 20px; line-height: 30px; } .panel5{ height: 753px; background-image: url(../img/zjnj-bg5.jpg); padding-top: 95px; } .panel5 .box,.panel6 .box{ width: 48%; height: 555px; background-image: url(../img/zjnj-bg7.jpg); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; position: relative; padding: 77px 43px; } .panel5 .box2{ background-image: url(../img/zjnj-bg8.jpg); } .panel5 .box::after{ content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .49); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); z-index: 1; } .panel5 .box .bg{ width: 100%; height: 100%; position: relative; z-index: 99; } .panel5 .box .bg::after{ content: ''; width: 1px; height: 48px; background: #FFFFFF; position: absolute; top: -77px; left: 0; } .panel5 .box .bg::before{ content: ''; width: 9px; height: 9px; background: #FFFFFF; border-radius: 50%; position: absolute; top: -38px; left: -4px; } .panel5 .box .desc{ width: 599px; height: 369px; border: 1px dashed rgba(250, 250, 250,.6); padding: 7px; margin-top: 40px; } .panel5 .box .desc ul{ width: 585px; height: 353px; background: rgba(250, 250, 250,.09); padding: 28px 30px; } .panel5 .box .desc ul .row{ margin-bottom: 24px; position: relative; } .panel5 .box2 .desc ul .row{ margin-bottom: 60px; } .panel5 .box .desc ul .row::before{ content: ''; position: absolute; left: -37px; top: 8px; width: 23px; height: 1px; background: #FAFAFA; } .panel5 .box .desc ul .row .name,.panel6 .name{ font-weight: bold; margin-bottom: 10px; } .panel5 .box .desc ul .row .info,.panel6 .info{ line-height: 25px; font-size: 14px; } .panel6{ height: 415px; background: #4A4F54; padding-top: 78px; } .panel6 .box{ height: 280px; display: flex; padding: 90px 38px; background-image: url(../img/zjnj-bg9.jpg); } .panel6 .box .icon{ margin-right: 73px; } .panel6 .box:last-child .icon{ margin-right: 104px; } .panel7{ padding: 101px 0 87px; background-image: url(../img/zjnj-bg6.jpg); } .panel7 .container{ position: relative; } .panel7 .swiper-slide{ display: flex; justify-content: space-between ; position: relative; z-index: 1; height: 510px; background: rgba(0, 0, 0, .36); padding: 57px 30px 50px 50px; } .panel7 .swiper-button-prev { left: 60px; top: 80%; z-index: 1000; } .panel7 .swiper-button-next { left: 160px; top: 80%; z-index: 1000;} .next, .prev { width: 48px; height: 48px; border: 1px dashed #fff; border-radius: 50%; } .next img, .prev img{ transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); } .panel7 .swiper-slide .desc-box { width: 50%; margin-right: 74px; } .panel7 .swiper-slide .desc-box .desc{ margin-top: 55px; line-height: 30px; } .panel7 .swiper-slide .desc-box .desc p:last-child{ margin-top: 20px; } .panel7 .pic{ width: 50%; } .panel7 .pic ul{ display: flex; justify-content: space-between; flex-wrap: wrap; height: 100%; } .panel7 .pic ul li{ width: 50%; height: 50%; } .panel7 .pic ul li .pic-box{ height: 100%; } @media (max-width: 1860px){ .panel4 .container{ width: 100%; } } @media (max-width: 1440px){ .panel4 .item-box ul li .hidden{ padding-bottom: 10px; } .panel4 .item-box ul li .hidden .watch-more{ width: 50%; } .panel5 .box .desc{ width: 500px; } .panel5 .box .desc ul{ width: 485px; } } @media (max-width: 750px){ .top-panel{ height: auto; padding-top: 1.46rem; background-image: url(../img/mzjnj-bg.jpg); } .top-panel h3,.top-panel h2{ font-size: .3rem; } .top-panel h2{ margin: .25rem 0; } .top-panel .desc,.panel2 .desc{ width: 100%; line-height: 1.5; } .top-panel .desc p:last-child,.panel2 .desc p:last-child{ margin-top: .3rem; } .top-panel .data-box{ width: 100%; margin: .58rem auto 0; } .top-panel .data-box ul li{ width: 50%; margin-bottom: .7rem; } .top-panel .data-box .num{ font-size: .78rem; /* width: 1.3rem; */ } .top-panel .data-box .unit{ font-size: .24rem; right: 26%; } .panel2{ padding-left: 0; } .panel2 .desc-box{ width: 100% ; padding: .33rem .67rem .46rem .36rem ; position: relative; } .panel2 .desc-box h3{ position: relative; padding-left: .36rem; } .panel2 .desc-box h3::after{ top: .08rem; width: .1rem; height: .31rem; } .panel2 .desc-box h2{ margin: .26rem 0; } .panel2 .pic{ width: 100%; padding: .3rem; } .panel2 .pic ul{ margin-bottom: -.14rem; } .panel2 .pic ul li{ width: 48.8%; height: 1.82rem; margin-bottom: .14rem; } .panel2 .pic ul li .pic-box{ width: 100%; height: 100%; } .panel2 .watch-more{ margin: .47rem auto 0; } .panel3{ height: auto; padding: .47rem 0; } .panel3 .container{ display: flex; justify-content: center; height: 7.55rem; } .panel3 .hd{ width: 40%; } .panel3 .hd::after{ left: .08rem; top: 0; width: .15rem; height: 100%; background-image: url(../img/mline.png); } .panel3 .hd ul { width: auto; height: 100%; margin: 0; align-items: stretch; } .panel3 .hd ul li{ display: flex; align-items: center; font-size: .24rem; cursor: pointer; } .panel3 .hd ul li i{ width: .29rem; height: .29rem; margin: 0 .2rem 0 0; } .panel3 .hd ul li i::after{ width: .45rem; height: .45rem; } .panel3 .hd ul li.on i::before{ content: ''; width: .16rem; height: .26rem; position: absolute; top: 0;left: .3rem; background-image: url(../img/jtou.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } .panel3 .bd{ width: 60%; } .panel3 .bd .step{ margin-top: 0; height: 100%; background: #FFFFFF; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.08); } .panel3 .bd .step .desc{ width: 100%; padding: .25rem .2rem .8rem .34rem; } .panel3 .bd .step .desc h3{ margin-bottom: .2rem; } .panel3 .bd .step .desc .info{ max-height: 6.05rem; line-height: 1.5; padding:0 ; } .panel3 .bd .step .desc .info::before{ display: none; } .panel3 .bd .step .desc .info p{ margin-bottom: .2rem; } .panel4{ height: auto; padding: .52rem 0 1.3rem; } .panel4 .container{ width: 100%; } .panel4 .item-box{ margin-top: .56rem; } .panel4 .item-box ul li.swiper-slide{ width: 33%; transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); } .panel4 .item-box ul li.swiper-slide-active, .panel4 .item-box ul li.swiper-slide-duplicate-active{ opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .panel4 .item-box ul li{ height: 4.87rem; position: relative; width: 32%; } .panel4 .item-box ul li .pic-box{ height: 100%; } .panel4 .item-box ul li .hidden{ display: block; width: 100%; height: 1.78rem; background: rgba(0, 0, 0, .49); position: absolute; bottom: 0; top: auto; left: 0; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; padding: .2rem; } .panel4 .item-box ul li .hidden .date{ margin: .15rem 0 0; padding-bottom: .18rem; border-bottom: 1px dashed #fff; } .panel4 .item-box ul li .hidden .watch-more{ background: none; width: 100%; margin: 0 auto; } .bottom-panel{ height: 4.54rem; background-image: url(../img/zjnj-bg4.jpg); position: relative; } .bottom-panel .link-map{ position: absolute; top:-25%; left: 20%; transform: scale(.5); -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); } .middle-panel{ padding: .4rem 0; } .specontainer{ width: 100%; } .middle-panel .title h3{ margin-bottom: 0; } .middle-panel .title h3::before{ right: -20px; top: 40%; } .middle-panel .title h3::after{ top: 40%; } .middle-panel .title p::after, .middle-panel .title p::before{ top: 60%; } .middle-panel .item-box{ margin-top: .43rem; } .middle-panel .item-box ul{ padding: .32rem 0; } .middle-panel .item-box ul li{ width:2.42rem; height: auto; padding: .23rem .12rem; } .middle-panel .item-box ul li .name{ margin-top: .1rem; padding-bottom: .15rem; border-bottom: 1px solid #DCDEE3; } .middle-panel .item-box ul li .icon-box img{ width: .77rem; } .middle-panel .item-box ul li .info{ margin-top: .2rem; line-height: 1.5; } .panel5{ height: auto; padding: .4rem 0; } .panel5 .box,.panel6 .box{ width: 100%; height: auto; padding: .77rem .44rem .43rem; } .panel5 .box .bg::after{ width: 1px; height: .48rem; top: -.77rem; left: 0; } .panel5 .box .bg::before{ width: 0.09rem; height: 0.09rem; top: -.38rem; left: -.03rem; } .panel5 .box .desc{ width: 100%; height: auto; padding: .07rem; margin-top: .4rem; } .panel5 .box .desc ul{ width: 100%; height: auto; padding: .28rem .3rem; } .panel5 .box .desc ul .row{ margin-bottom: .24rem; } .panel5 .box2 { margin-top: .35rem; } .panel5 .box2 .desc ul .row{ margin-bottom: .6rem; } .panel5 .box .desc ul .row::before{ left: -.37rem; top: .16rem; width:.23rem; } .panel5 .box .desc ul .row .name,.panel6 .name{ margin-bottom: .1rem; } .panel5 .box .desc ul .row .info,.panel6 .info{ line-height: 1.5; font-size: .24rem; } .panel6{ height: auto; padding: .3rem 0; } .panel6 .box{ width: 100%; height: 2.80rem; padding: .29rem .16rem .29rem 0; display: flex; align-items: center; justify-content: space-between; } .panel6 .box:first-child{ margin-bottom: .16rem; } .panel6 .box .icon{ margin-right: .3rem; transform: scale(.4); -webkit-transform: scale(.4); -moz-transform: scale(.4); -ms-transform: scale(.4); -o-transform: scale(.4); } .panel6 .box:first-child .icon{ margin-left: -0.3rem; } .panel6 .box .desc{ flex: 1; } .panel6 .box:last-child .icon{ margin-right: .8rem; } .panel7{ padding: .4rem 0; } .panel7 .swiper-slide{ flex-wrap: wrap; height: auto; padding: .14rem .11rem 1.4rem; } .panel7 .swiper-button-prev { left: 36%; top: 94%; z-index: 1000; } .panel7 .swiper-button-next { left: 50%; top: 94%; z-index: 1000;} .panel7 .swiper-slide .desc-box { width: 80%; margin: 0 auto; } .panel7 .swiper-slide .desc-box h2{ text-align: center; margin-top: .3rem; } .panel7 .swiper-slide .desc-box .desc{ margin-top: .36rem; line-height: 1.5; } .panel7 .swiper-slide .desc-box .desc p:last-child{ margin-top: .2rem; } .panel7 .pic{ width: 100%; } .panel7 .pic ul li{ width: 49%; height: 1.95rem; margin-bottom: .12rem; } }