.banner { z-index: 1; position: relative } .banner a { display: block; position: relative } .banner a::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: -1px; padding-bottom: calc(240% / 19.2); background-size: 100% 100%; z-index: 2; background: rgba(0, 0, 0, 1); background: -o-linear-gradient(bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } .banner .slick-img { display: block; overflow: hidden; position: relative; width: 100% } .banner { /* margin-top: 47px; */ position: relative; overflow: hidden; /* height: 100vh; */ } .banner .swiper-container { max-width: initial; } .banner .banner-dots { width: auto; text-align: center; position: absolute; left: calc(50% - 107px); bottom: 52px; text-align: center; overflow: hidden } .banner .slick-img { display: block; height: 100vh; overflow: hidden; position: relative; background-size: cover !important; padding-bottom: 0; background: #000; } .banner { position: relative; } .banner a::after { content: ''; display: block; position: absolute; width: 100%; left: 0; bottom: 0; padding-bottom: calc(164% / 19.2); background-size: 100% 100%; z-index: 2; background: rgba(0, 0, 0, 1); background: -o-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } .banner .bottom { padding: 0 0 17px; bottom: 0; z-index: 2; letter-spacing: 3px } .banner .title { color: #fff; white-space: nowrap; font-weight: 500; line-height: 1.2em; position: absolute; bottom: 10px; color: #ffffff; z-index:3; font-size: 20px; float: left; text-align: left; left: 100px; } .banner .vicetitle { margin: 9px 0 0; color: #fff; width: 100vw; max-width: 1320px; text-align: center } .banner a { display: block; position: relative; } .banner .slick-img video, .banner .slick-img img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .banner .slick-img img { min-width: 100%; object-fit: cover; } .banner .slick-img video { width: 100%; height: auto; position: absolute; left: 0; top: 50%; transform: translatey(-50%); } .banner_btns { position: absolute; right: 100px; bottom: 40px; z-index: 10; text-align: center; } .banner .swiper-button-prev, .banner .swiper-button-next { background: none; border: none; background-size: 10px 20px; width: 58px; height: 58px; text-align: center; margin: 0; border-radius: 0; } .banner:hover .swiper-button-prev{ background: rgba(255,255,255,.7) url(/uploads/image/nimages/mode1l.png) no-repeat center; background-size: 10px 20px; } .banner .swiper-button-prev { background: rgba(255,255,255,.7) url(/uploads/image/nimages/rr.png) no-repeat center; background: rgba(255,255,255,.4) url(/uploads/image/nimages/mode1l.png) no-repeat center; background-size: 10px 20px; left: 0; transition:all .3s ease-in-out; margin-left: 0; } .banner:hover .swiper-button-next{ background: rgba(255,255,255,.7) url(/uploads/image/nimages/mode1r.png) no-repeat center; background-size: 10px 20px; } .banner .swiper-button-next { transition:all .3s ease-in-out; background: rgba(255,255,255,.7) url(/uploads/image/nimages/ll.png) no-repeat center; background: rgba(255,255,255,.4) url(/uploads/image/nimages/mode1r.png) no-repeat center; left: auto; right: 0; margin: 0; background-size: 10px 20px; } .banner_more { padding: 0 17px 0 14px; position: relative; display: inline-block; vertical-align: top; margin: 0 0 0 18px; } .banner_more::before { content: ''; position: absolute; width: 1px; height: 20px; background: rgba(255, 255, 255, .5); left: 0; top: 0 } .banner_more::after { content: ''; position: absolute; right: 0; top: calc(50% - 4px); border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: .5; } .banner_more a { color: #fff } .banner_btns .swiper-pagination { position: relative; display: inline-block; vertical-align: middle; } .banner .swiper-slide-active .slick-img img { transition: transform 6s linear 0s; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .banner .swiper-pagination-bullet { width: 35px; height: 3px; margin: 0 0 0 10px; background: #fff; text-align: center; line-height: 28px; position: relative; transition: all ease-in-out .3s; border-radius: 0; opacity: 1; } .banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #f5ac1a; } .fraction{ display:none; } .bb { position: absolute; bottom: 14px; width: 18px; height: 18px; background: center no-repeat; left: 50%; transform: translatex(-50%); z-index: 2; -webkit-animation: bb 2s linear 0s infinite; animation: bb 2s linear 0s infinite; display: none; } @keyframes bb { 0% { transform: translate(-50%, 0); opacity: 0; } 20% { transform: translate(-50%, 3px); opacity: 1; } 80% { transform: translate(-50%, 10px); opacity: 1; } 90% { transform: translate(-50%, 10px); opacity: 0; } 100% { transform: translate(-50%, 10px); opacity: 0; } } .scroll { padding-top: 153px; } .content { position: relative; } .scroll { padding-top: 136px; z-index: 5; } /* mode1 */ .wrap_mode01 { /* padding-bottom: 60px; */ box-sizing: border-box; position: relative; overflow: hidden; z-index: 0; background: url(/uploads/image/nimages/dzvc_bg.jpg) no-repeat center; background-size: cover; background-attachment: fixed; } .wrap_mode01::before { content: ''; display: block; width: 267px; height: 444px; position: absolute; right: 0; bottom: 0; } .title { margin: 60px 0 35px; overflow: hidden; position: relative; } .tit { color: #01397e; display: inline-block; padding-left: 5px; box-sizing: border-box; position: relative; } .tit::before { content: ''; display: none; width: 40px; height: 40px; background: url(/uploads/image/nimages/ti.png) no-repeat; position: absolute; background-size: 100% 100%; left: 0; bottom: 0; } .find { margin-left: 40px; display: inline-block; line-height: 2.94; color: #999; position: relative; } .find::before { content: ''; display: block; width: 24px; height: 8px; background: no-repeat; background-size: 24px 8px; position: absolute; right: -34px; top: calc(50% - 4px); } .more { display: inline-block; /* width: 160px; */ background: #006ec0; height: 39px; line-height: 39px; padding: 0 65px 0 20px; box-sizing: border-box; position: absolute; right: 0; top: 50%; transform: translatey(-50%); } .more::before { content: ''; display: block; width: 38px; height: 19px; background: url(/uploads/image/nimages/more1.png) no-repeat; position: absolute; right: 15px; top: 50%; transform: translatey(-50%); } .mode1ul, .mode01ul2 { margin: 0 -20px; /* overflow: hidden; */ font-size: 0; box-sizing: border-box; } .mode1top { position: relative; box-sizing: border-box; margin-bottom: 25px; border-bottom: 0px dashed #e5e5e5; } .mode1top::before { content: ''; display: block; width: 100%; height: 0; border-bottom: 0px dashed #e5e5e5; bottom: 5px; position: absolute; left: 0; } .mode1ul { position: relative; overflow: visible; } .mode1ul li.slick-current .mode1pic::before { /* content: ''; */ display: block; position: absolute; width: 28%; height: 100%; background: rgba(0, 0, 0, .35); background: -o-linear-gradient(right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); left: 0; top: 0; z-index: 2; } .mode1ul li.slick-current li li .mode1pic::after { /* content: ''; */ display: block; position: absolute; width: 28%; height: 100%; background: rgba(0, 0, 0, .35); background: -o-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); right: 0; top: 0; } .mode1ul .slick-arrow { border: none; text-indent: -888rem; width: 30px; height: 50px; line-height: 50px; margin-top: -65px; transition: all .3s ease-in-out; } .mode1ul:hover .slick-prev{ background: rgba(255,255,255, .7) url(/uploads/image/nimages/mode1l.png) no-repeat center; background-size: 10px 20px; } .mode1ul .slick-prev { background: rgba(255,255,255, .4) url(/uploads/image/nimages/mode1l.png) no-repeat center; background-size: 10px 20px; left: 21px; } .mode1ul:hover .slick-next{ background: rgba(255,255,255, .7) url(/uploads/image/nimages/mode1r.png) no-repeat center; background-size: 10px 20px; } .mode1ul .slick-next { background: rgba(255,255,255, .4) url(/uploads/image/nimages/mode1r.png) no-repeat center; background-size: 10px 20px; right: 20px; } .mode1ul .slick-arrow:after { background: none; } .mode01ul2 { margin: 0 -20px; box-sizing: border-box; } .mode01ul2 .slick-list{ padding-bottom: 60px; box-sizing:border-box; } .mode01ul2 .slick-arrow{ background:none; border: none; text-indent: -8888rem; width: 30px; height: 50px; line-height: 50px; } .mode01ul2 .slick-prev { background: rgba(255,255,255, .7) url(/uploads/image/nimages/rr.png) no-repeat center; background-size: 10px 20px; left: -35px; top:40%; } .mode01ul2 .slick-next { background: rgba(255,255,255, .7) url(/uploads/image/nimages/ll.png) no-repeat center; background-size: 10px 20px; right: -35px; top:40%; } .mode1ul>li, .mode01ul2>li { width: 33.33%; display: inline-block; } .mode1ul .mode1ocm { display: block; margin: 0 20px; padding-bottom: 15px; box-sizing: border-box; } .mode01ul2 li { margin-bottom: 20px } .mode01ul2 a { display: block; background: #fff; padding: 20px; margin: 0 20px; box-sizing: border-box; position: relative; transition: all .3s ease-in-out; overflow: hidden; box-shadow: 0px 10px 20px 0px rgba(5, 54, 54, 0.1); } .mode01ul2 a:hover{ background: #0472cf; } .mode01ul2 a::after{ content: ''; display: block; width: 179px; height: 82px; background: url(/uploads/image/nimages/41.png) no-repeat; position: absolute; right: -2px; bottom: -5px; z-index: 2; transition: all .3s ease-in-out; } .mode01ul2 li:hover a::after { content: ''; display: block; width: 186px; height: 85px; background: url(/uploads/image/nimages/42.png) no-repeat; position: absolute; right: -22px; bottom: -15px; transition: all .3s ease-in-out; } .mode1pic { padding-bottom: 62.38%; position: relative; } .mode1boxmin { overflow: hidden; padding: 23px 20px; box-sizing: border-box; position: relative; background: #0472cf; } .mode1box { display: block; border: 0px solid #e5e5e5; border-top: none; position: relative; /* margin-bottom: 30px; */ } .mode1ul>li:hover .mode1box { border: 0px solid rgba(255, 255, 255, 0); } .mode1boxmin::before { content: ''; display: block; width: 116px; height: 85px; background: url(/uploads/image/nimages/1x.png) no-repeat; position: absolute; left: -6px; bottom: -25px; } .mode1ul .mode1box:hover::before { background: no-repeat; z-index: 2; } .mode1box::after { content: ''; display: block; width: 0; height: 100%; background: #006ec0; position: absolute; left: 0; bottom: 0; transition: all .3s ease-in-out; } .mode1ul li:hover .mode1box { box-shadow: 0px 10px 20px 0px rgba(14, 82, 83, 0.15); } .date { width: 77px; font-family: 'noto serif sc'; position: relative; z-index: 2; } .date::before { content: ''; display: block; width: 1px; height: 44px; background: #e5e5e5; position: absolute; right: 0; top: 50%; transform: translatey(-50%); } .mode1ul .mode1box:hover .date::before { background: rgba(255, 255, 255, .2); } .mode1ul .mode1box:hover .day { color: #f5ac1a; } .day { font-size: 3rem; color: #006ec0; font-weight: bold; padding-left: 8px; } .year { line-height: 26px; color: #666; letter-spacing: 1px; } .mode1ul .mode1box:hover .year { color: rgba(255, 255, 255, .88); } .mode1r { /* margin-left: 100px; */ line-height: 28px; height: 56px; color: #fff; /* padding: 10px 0; */ box-sizing: border-box; position: relative; z-index: 2; transition: all .3s ease-in-out; } .mode1ul .mode1box:hover .mode1r { color: #eee; transform: translatex(5px); } .mode1dl dd { margin-bottom: 20px; } .mode1dl a { display: block; padding-left: 22px; box-sizing: border-box; position: relative; transition: all .3s ease-in-out; } .mode01ul2 li:hover:hover a { transform: translatex(5px); } .mode1dltxt { line-height: 26px; min-height: 52px; max-height: 52px; color: #333; margin-bottom: 5px; position: relative; z-index: 4; } .mode01ul2 a:hover .mode1dltxt { color: #fff; } .date2 { color: #006ec0; line-height: 26px; font-family: 'noto serif sc'; letter-spacing: 1px; position: relative; z-index: 4; } .mode01ul2 a:hover .date2 { color: #eee; } .mode01ul2 .slick-dots li { width: 30px; height: 4px; margin: 0 10px; } .mode01ul2 .slick-dots li button { background: #fff; border-radius: 0; height: 4px; opacity: 1 !important; } .mode01ul2 .slick-dots li.slick-active button { background: #f5ac1a; } /* wrap_mode02 */ .wrap_mode02 { position: relative; overflow: hidden; } .mode2con::before { content: ''; display: block; /* box-shadow: 10px 0px 20px 0px rgba(39, 146, 147, 0.05); */ width: 13.1%; height: 100%; position: absolute; left: 0; top: 0; background:url(/uploads/image/nimages/xiaoxun_bg.png) no-repeat top left / 100%; } .mode2con::after { content: ''; display: block; width: 50.1%; height: 100%; background: #eaf4f4; position: absolute; right: 0; top: 0; } .wrap_mode02::before { content: ''; display: block; position: absolute; width: 346px; height: 128px; left: 0; top: 60px; background-size: cover; } .wrap_mode02::after { content: ''; display: block; position: absolute; width: 579px; height: 305px; right: 0; bottom: -35px; z-index: 0; } .mode2con { box-sizing: border-box; position: relative; z-index: 1; overflow: hidden; background: #fafafa; } .mode2 { position: relative; z-index: 1; padding-bottom: 0px; } .mode2 .title { margin-top: 0; box-sizing: border-box; position: relative; z-index: 1; } .mode2l { width: 64%; padding-right: 40px; padding-bottom: 80px; box-sizing: border-box; padding-top: 60px; background: #fafafa; box-shadow: 10px 0px 20px 0px rgb(39 146 147 / 5%); position: relative; z-index: 3; } .mode2r { width: 36%; padding-left: 40px; padding-top: 60px; box-sizing: border-box; position: relative; z-index: 4; overflow: hidden; } .more2 { display: inline-block; padding-right: 40px; box-sizing: border-box; position: absolute; right: 0; top: 50%; color: #006ec0; transform: translatey(-50%); z-index: 1; } .more2::before { content: ''; display: block; width: 38px; height: 19px; background: url(/uploads/image/nimages/more2.png) no-repeat; position: absolute; right: 0; top: 50%; transform: translatey(-50%); } .mode2ul, .mode2ul2 { margin: 0 -20px; font-size: 0; } .mode2ul2 { padding-bottom: 20px; box-sizing: border-box; position: relative; z-index: 2; } .mode2ul .slick-list { overflow: visible; } .mode2ulbox, .mode2ul2 .item { margin: 0 20px; } .mode2ul li { width: 50%; display: inline-block; transition: all .3s ease-in-out; } .mode2ul li .mode2pic { transition: all 1s ease-in-out; overflow: hidden; } .mode2ul li .mode2ulbox { position: relative; transition: all 3s ease-in-out; } .mode2ul li.slick-active .mode2ulbox { opacity: 1; position: relative; z-index: 1; } .mode2ul li.slick-active { height: 100%; overflow: visible; } .mode2ul li.slick-active .mode2pic { padding-bottom: 56.14%; } .mode2ul li.slick-active .mode2top { box-shadow: 0px 20px 46.75px 8.25px rgba(0, 0, 0, 0.06); } .mode2top { display: block; margin-bottom: 35px; box-shadow: 0px 20px 46.75px 8.25px rgba(0, 0, 0, 0.06); } .mode2info { padding: 15px 20px; box-sizing: border-box; } .mode2toptit { line-height: 26px; min-height: 52px; color: #333; margin-bottom: 10px; } .date3 { color: #18389f; line-height: 26px; letter-spacing: 1px; padding-left: 25px; box-sizing: border-box; position: relative; z-index: 3; } .date3::before { content: ''; display: block; width: 20px; height: 26px; position: absolute; left: 0; background:url(/uploads/image/nimages/time3.png) no-repeat left center; } .mode4ul1 a:hover .date3::before{ color:#fff; background:url(/uploads/image/nimages/time31.png) no-repeat left center; } .date5{ color: #eee; line-height: 26px; font-family: 'noto serif sc'; letter-spacing: 1px; padding-left: 23px; box-sizing: border-box; position: relative; z-index: 3; } .date5::before { content: ''; display: block; width: 20px; height: 26px; position: absolute; left: 0; background: url(/uploads/image/nimages/time31.png) no-repeat left center; } .mode2dl .mode1dltxt { min-height: 26px !important; } .mode2ul2 .slick-dots li { width: 30px; height: 3px; margin: 0 10px; } .mode2ul2 .slick-dots li button { background: #eaf4f4; border-radius: 0; height: 5px; opacity: 1 !important; } .mode2ul2 .slick-dots li.slick-active button { background: #f5ac1a; } .mode2rul li { margin-bottom: 13px; } .mode2rul li a { padding: 16px 30px 20px; background: #fff; transition: all .3s ease-in-out; display: block; overflow: hidden; box-sizing: border-box; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); } .mode2rul li:hover a { transform: translatex(5px); background: #f6f6f6; } .mode2rul li:hover .mode2rtxt { color: #006ec0; font-weight: bold } .date4 { font-family: 'noto serif sc'; width: 62px; height: 68px; background: #006ec0; /* display: flex; */ /* justify-content: center; */ /* align-items: center; */ text-align: center; padding: 0px 0; box-sizing: border-box; } .year4 { line-height: 24px; display:block; } .day4 { line-height: 1.3em; border-bottom: 1px solid #cdcdcd; } .mode2rright { margin-left: 90px; } .mode2rtxt { line-height: 28px; color: #333; font-weight: normal; margin-bottom: 10px; } .mode2sercours { line-height: 24px; color: #666; } /* wrap_mode03 */ .wrap_mode03 { padding-bottom: 90px; box-sizing: border-box; /* background: no-repeat; background-size: cover; */ position: relative; z-index: 0; } .wrap_mode03::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: calc(89% / 19.2); } .wrap_mode03::before { content: ''; display: block; width: 100%; height: 100%; background: url(/uploads/image/nimages/mode3bg2.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; } .mode03 { overflow: hidden; padding-top: 60px; box-sizing: border-box; } .mode03 .title { margin-top: 0; /* padding-top: 64px; */ box-sizing: border-box; } .mode03 .title .tit, .mode03 .title .more2 { color: #fff !important; } .mode03 .title .tit::before, .mode07 .title .tit::before { background: url(/uploads/image/nimages/ti3.png) no-repeat; background-size:100%; } .mode3l { width: 800px; overflow: hidden; padding-bottom: 40px; box-sizing: border-box; } .mode3pic { overflow: hidden; } .mode3l a { display: block; position: relative; overflow: hidden; } .mode3l a::before { content: ''; display: block; width: 100%; height: 157px; position: absolute; z-index: 5; left: 0; bottom: -1px; background: rgba(0, 0, 0, .77); background: -o-linear-gradient(top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); } .mode3txt { padding: 30px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 6; line-height: 26px; width: 100%; } .mode3info { margin-bottom: 5px; } .mode3l .slick-dots li { width: 30px; height: 5px; margin: 0 10px; } .mode3l .slick-dots li button { background: #fff; border-radius: 0; } .mode3l .slick-dots li.slick-active button { background: #f5ac1a; } .mode3r { width: calc(100% - 840px); background: rgba(0, 0, 0, .2); padding: 30px; box-sizing: border-box; position: relative; z-index: 2; } .mode3ulr li { margin-bottom: 25px; } .mode3ulr li:last-child { margin-bottom: 0; } .mode3ulr li:last-child a { border: none; } .mode3ulr li a { display: block; position: relative; padding-left: 2px; padding-bottom: 15px; box-sizing: border-box; transition: all .3s ease-in-out; line-height: 26px; border-bottom: 1px solid rgba(255, 255, 255, .35); } .mode3ulr { margin-bottom: 5px; } .mode3ulr li:hover a { transform: translatex(5px); } /* wrap_mode04 */ .wrap_mode04 { box-sizing: border-box; overflow: hidden; position: relative; z-index: 0; background:url(/uploads/image/nimages/mode04.jpg) no-repeat top center; background-size:cover; background-attachment:fixed; } .mode4 { /* overflow: hidden; */ margin-bottom:50px; } .mode4 .pic{} .mode4 .title{text-align: left; padding: 0px 0; width:100%;} .mode4 .text{background: #006ec0; min-height:220px; color: #fff; width: 50%; position: relative; position: absolute; right: 80px; bottom: 0;} .mode4 .text .inner { padding: 20px 30px; } .mode4 .text .l { width: 150px; margin-right: 40px; } .mode4 .text .r { -ms-flex: 1; flex: 1; } .mode4 .text .h { font-size: 20px; line-height: 1.8; } .mode4 .text .h a{ color:#fff; } .mode4 .text .p { margin-top: 15px; line-height: 1.6; text-align: left; font-size:16px; } .mode4 .more2 { margin: 0; } .mode4ulr li { margin-bottom: 15px; } .mode4ulr li:last-child { margin-bottom: 0; } .mode4ulr li:last-child a { border: none; padding-bottom:0; } .mode4ulr li a { display: block; position: relative; padding-left: 0px; padding-bottom: 10px; box-sizing: border-box; transition: all .3s ease-in-out; line-height: 26px; border-bottom: 1px solid rgba(255, 255, 255, .35); } .mode4ulr li:hover a { transform: translatex(5px); } .mode4l { width: 100%; overflow: hidden; padding-bottom: 160px; box-sizing: border-box; margin-top:0px; background:url(/uploads/image/nimages/xiangyun01.png) no-repeat left bottom; } .mode4pic { overflow: hidden; padding-bottom: 33.2%; } .mode4pic img{ } .mode4l a { display: block; position: relative; overflow: hidden; } .mode4l a::before { content: ''; display: block; width: 100%; height: 157px; position: absolute; z-index: 5; left: 0; bottom: -1px; background: rgba(0, 0, 0, .77); background: -o-linear-gradient(top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .77), rgba(0, 0, 0, 0)); } .mode4txt { padding: 30px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 6; line-height: 26px; width: 100%; } .mode4info { margin-bottom: 5px; } .mode4l .slick-dots li { width: 30px; height: 5px; margin: 0 10px; } .mode4l .slick-dots li button { background: #fff; border-radius: 0; } .mode4l .slick-dots li.slick-active button { background: #f5ac1a; } /* mode4r */ .mode4ul2 li { margin-bottom: 20px; position: relative; z-index: 1; } .mode4ul2 li a { display: block; position: relative; padding-left: 16px; box-sizing: border-box; border-left: 1px solid #e5e5e5; line-height: 26px; color: #333; transition: all .3s ease-in-out; } .mode4ul2 li a::before { content: ''; display: none; width: 2px; height: 18px; background: #006ec0; position: absolute; left: 0; top: 0; transition: all .3s ease-in-out; } .mode4ul2 li:hover .mode4info { color: #006ec0; } .mode4ul2 li:hover a { transform: translatex(5px); border-left: 1px solid #006ec0 } .mode4ul2 li:hover a::before { top: 100%; margin-top: -18px; } .mode4info { margin-bottom: 10px; } /* wrap_mode05 */ .wrap_mode05 { position: relative; z-index: 0; padding-bottom: 60px; box-sizing: border-box; overflow: hidden; } @keyframes bg { 0% { transform: translate(5px, 5px); opacity: 1; } 33% { transform: translate(-0px, -5px); opacity: .8; } 60% { transform: translate(-40px, 0px); opacity: .8; } 100% { transform: translate(5px, 5px); opacity: 1; } } .mode05 .title { margin-top: 15px; } .wrap_mode05 .more2 { margin-top: 0; } .mode05 ul { margin: 0 -5px; overflow: hidden; font-size: 0; } .mode05 li { margin-bottom: 10px; } .mode05 ul a { display: block; margin: 0 5px; overflow: hidden; position: relative; } .mode05 ul a::before { content: ''; display: block; width: 100%; height: 100px; position: absolute; z-index: 5; left: 0; bottom: -1px; background: rgba(0, 0, 0, .55); background: -o-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } .mode5pic { padding-bottom: 46.2%; } .mode5txt { padding: 5px 30px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; width: 100%; background: rgb(0,0,0,0.3); } .mode5info { padding-bottom: 10px; box-sizing: border-box; position: relative; z-index: 10; color: #fff; } .mode5info p { line-height: 26px; color: #fff; } .mode5info::before { content: ''; display: block; width: 40px; height: 2px; background: #006ec0; position: absolute; left: 0; bottom: 0; } .mode5ul1 li { width: 25%; display: inline-block; vertical-align: top; } .mode5ul1 li.lg { width: 50%; display: inline-block; vertical-align: top; } .mode5ul2 { font-size: 0; margin: 0 -5px; } .mode5ul2 li { width: 25%; display: inline-block; vertical-align: top; margin-bottom: 10px; } .mode5ul2 li.lg { width: 50%; display: inline-block; vertical-align: top; margin-bottom: 10px; } .mode5pic2 { padding-bottom: 93.6%; } /* mode08 */ .wrap_mode08 { position: relative; z-index: 0; padding-bottom: 50px; box-sizing: border-box; overflow: hidden; } .mode08 .title { margin-top: 60px; } .wrap_mode08 .more2 { margin-top: 0; } .mode08 ul { margin: 0 -5px; overflow: hidden; font-size: 0; width:50%; display: inline-block; } .mode08 li { margin-bottom: 10px; } .mode08 ul a { display: block; margin: 0 5px; overflow: hidden; position: relative; } .mode08 ul a::before { content: ''; display: block; width: 100%; height: 100px; position: absolute; z-index: 5; left: 0; bottom: -1px; background: rgba(0, 0, 0, .55); background: -o-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } .mode8pic { padding-bottom: 74%; } .mode8txt { padding: 5px 30px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; width: 100%; background: rgb(0,0,0,0.3); } .mode8info { padding-bottom: 10px; box-sizing: border-box; position: relative; z-index: 10; color: #fff; } .mode8info p { line-height: 26px; color: #fff; } .mode8info::before { content: ''; display: block; width: 40px; height: 2px; background: #006ec0; position: absolute; left: 0; bottom: 0; } .mode8ul1 li { width: 50%; display: inline-block; vertical-align: top; } .mode8ul1 li.lg { width: 100%; display: inline-block; vertical-align: top; } .mode8ul2 { font-size: 0; margin: 0 -5px; width:50%; display: inline-block; } .mode8ul2 li { width: 50%; display: inline-block; vertical-align: top; margin-bottom: 10px; } .mode8ul2 li.lg { width: 50%; display: inline-block; vertical-align: top; margin-bottom: 10px; } .mode8pic2 { padding-bottom: 73.6%; } /* mode7 */ .wrap_mode07 { position: relative; min-height: 200px; padding-top: 85px; padding-bottom: 70px; box-sizing: border-box; overflow: hidden; z-index: 0; margin-top: 0px; background: url(/uploads/image/nimages/77.png) center no-repeat; background-size: cover; top:-90px; margin-bottom:-90px; z-index:9; } .wrap_mode07::after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0px; padding-bottom: calc(85% / 19.2); background: center bottom no-repeat; background-size: cover; z-index: 2; display: none; } .wrap_mode07::before { content: ''; display: block; width: 100%; height: 100%; background: no-repeat; background-size: cover; position: absolute; left: 0; top: 0; z-index: 2; display: none; } .mode07 { position: relative; z-index: 8; } .mode07 .title { margin-top: 0; } .mode07 .title .tit, .mode07 .title .more2 { color: #fff; } .mode07 .title .more2 { margin-top: 0; } .mode7ul { margin: 0 -20px; font-size: 0; } .mode7ul li { width: 24.9%; display: inline-block; vertical-align: middle; transition: all 1s ease-out 0s; } .mode7ul li a { display: block; margin: 0 40px; position: relative; transition: all 0.2s ease-in-out; } .mode7box { position: relative; } .mode7img { margin: 0 auto; overflow: hidden; position: relative; z-index: 3; margin-bottom: 15px; } .mode7article{ line-height:26px; height:52px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; transition: all 0.2s ease-in-out; display: -moz-box; margin-bottom: 10px; display: -ms-flexbox; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .mode7dl { position: relative; z-index: 3; } .mode7pic { padding-bottom: 190.47%; transition: all 0.2s ease-in-out; } .mode7dl p { padding-left: 2px; box-sizing: border-box; line-height: 30px; position: relative; color: #fff; font-size:18px; } .mode7dl p::before { content: ''; display: block; width: 14px; height: 14px; position: absolute; left: 0; top: 9px; background-size: cover; } .mode7dl dd:nth-child(1) p::before { background: no-repeat; } .mode7dl dd:nth-child(2) p::before { background: no-repeat; } .mode7dl dd:nth-child(3) p::before { background: no-repeat; } /*横条链接*/ .nav-back{width:100%; max-width: 1400px; padding-left: 30px; opacity: 0; transform: translate(0,60px); padding-right: 30px; position: relative; padding-top: 30px; margin:0 auto; margin-top: 0px; z-index: 100; margin-bottom: -75px; transition: 0.5s all; height: 190px;} .nav-back ul li{ float: left; width: 12.5%; border-right: solid 1px #eee; position: relative; } .nav-back ul li img{ width:50%; margin:0 auto;transition: all 0.5s;cursor:pointer;} .nav-back ul li a:hover img {transform: rotate(360deg);-weibit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);-moz-transform: rotate(360deg);} .nav-back ul li a{ display: block; color: #000; padding:5px 0;font-size:16px; } .nav-back ul li a:hover{ color:#dab96b;} .nav-back ul li:last-child{ border:none; } .nav-back.active{ opacity: 1; transform: translate(0,0px); } .nav-back .caret{border:none;width:8px;height:8px;transform:rotate(-45deg);} .nav-logo{ margin-top: 8px; } .nav-logo img{ vertical-align: middle; } .img-box{ height: 363px; transition: 0.3s all; } .img-lg a{ display: block; position: relative; overflow:hidden; margin-bottom: 40px; } .img-lg a span{ position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: center no-repeat; background-size: 100% 100%; font-size: 18px; color: #fff; padding:55px 35px 0 35px; } .row-box .col-xs-6{ padding:0 20px; } .row-box{ margin:0 -20px; } .img-lg a:hover .img-box{ transform: scale(1.05,1.05); } .img-ul li{ float: left; width: 50%; padding:0 12px; margin-bottom: 40px; } .row-box .img-ul li .img-ul-bottom{ background: #fff; } .img-ul li .img-ul-bottom .img-ul-date{color:#af201e;} .img-ul li .img-ul-bottom{background:#fafafa;} .img-ul li a:hover .img-ul-tt{color:#003f98;} .img-ul{ margin:0 -12px; } .img-ul-top{ position: relative; padding-top: 63%;box-sizing:border-box;transition: 0.3s all; } .img-ul-top img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;box-sizing:border-box; padding:10px;} .text-center { text-align: center; } /* mode06 */ .wrap_mode06 { padding: 70px 0 80px; background: url(/uploads/image/nimages/mode06_bg.png) center no-repeat; background-size: cover; background-attachment: fixed; position: relative; /* margin: -110px 0 0; */ z-index: 0; } .mode06 { padding-bottom: 50px; overflow: hidden; } .index_06 { margin: 0 -20px; } .index_06 .img_box { margin: 0 20px; background: #fff; border-radius: 50%; padding: 25px; border: 1px dashed #006ec0; position: relative; } .index_06 .img_box::before { content: ''; display: block; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; border: 2px solid #006ec0; border-radius: 50%; opacity: .55; } .index_06 .title { margin: 10px 0 0; text-align: center; color: #333; line-height: 26px; transition: all .3s ease-in-out; } .index_06 .item:hover .img_box, .index_06 .item:hover .img_box::before { border-color: #f6ac19; } .index_06 .item:hover .title { font-size: 20px; } .index_06 .swiper_box { overflow: hidden; } .index_06 .swiper-pagination { bottom: 0; left: 0; right: 0; } .index_06 .swiper-pagination-bullet { width: 22px; height: 25px; background: url(/uploads/image/nimages/mode06_dot1.png) center no-repeat; margin: 0 15px; opacity: 1; border-radius: 0; } .index_06 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-image: url(/uploads/image/nimages/mode06_dot2.png); } @media screen and (max-width:1640px) { .banner .slick-dots { right: 100px } .mode01ul2 .slick-prev{ left: calc(50% - 50px); } .mode01ul2 .slick-next{ right: calc(50% - 50px); } .mode01ul2 .slick-arrow{top: auto;bottom: 0;width: 35px;height: 35px;} } @media screen and (max-width:1460px) { .mode3l { width: 700px; } .mode3r { width: calc(100% - 740px); } .mode7ul { height: 572px; } .mode7ul li:hover .mode7img { width: 252px; } } @media screen and (max-width:1360px) { .mode3l { width: 600px; } .mode3r { width: calc(100% - 640px); } .mode3ulr li:nth-last-child(2) { display: none; } .mode7ul li:hover .mode7img { width: 232px; } } @media screen and (max-width:1240px) { .mode2rul li:nth-last-child(1) { display: none; } .mode3l { width: 500px; } .mode3r { width: calc(100% - 540px); } .mode4ul1 { margin: 0 -13px; } .mode4ul1 a { margin: 0 13px; } .mode4r { width: calc(38.8% - 53px); } .mode7img { /* width: 160px; */ } .mode7ul { height: 514px; } .mode7ul li:hover .mode7img { width: 174px; } .mode7box { /* padding: 20px 18px 25px 30px; */ } .mode7ul li a::before, .mode7ul li a::after { left: 15px; } .mode7ul li:hover dd p::before { left: 0; } .mode7ul li:hover dd p { padding-left: 25px; } } @media screen and (max-width:1100px) { .mode1boxmin { padding: 15px; } .mode1ul .slick-arrow { margin-top: -57px; } .mode1ul .slick-prev { left: 10px; } .mode1ul .slick-next { right: 10px; } .date { width: 68px; } .mode01ul2{ margin: 0 -10px; } .mode01ul2 a{ margin: 0 10px; } .mode1ul .mode1ocm { margin: 0 10px; } .mode1ul { margin: 0 -10px; } .wrap_mode07 { background: #006ec0; padding-top: 54px; margin-top: 0; padding-bottom: 30px; } .wrap_mode05::before { display: none; } .wrap_mode07::after, .wrap_mode07::before { display: block; } .wrap_mode05 { padding-bottom: 40px; } .gp-f36 { font-size: 26px; font-size: 2.6rem; } .gp-f18 { font-size: 17px; font-size: 1.7rem; } .wrap_mode06 { padding: 75px 0 110px; } .index_06 .swiper-pagination { bottom: 0; } .title { margin: 45px 0 25px; } .mode05 .title { margin-top: 15px; } .mode3ulr li:nth-last-child(3) { display: none; } .mode7ul { height: 545px; } .mode7ul li:hover .mode7img { width: 180px; } .mode7box { /* padding: 20px 18px 25px 30px; */ } .footer::before { width: 100px; background-size: 100%; } .mode7ul li:hover .mode7box { padding: 24px 14px; } } @media screen and (max-width: 997px) { .nav-back { margin-left: 0; margin-right: 0; margin-top: 15px; padding-top: 15px; padding-left:10px; padding-right:10px; margin-bottom:0px; height: auto; padding-bottom: 15px; background: none; box-shadow: 0 0 0px rgb(0 0 0 / 10%); } .nav-back ul li { float: left; width: 25%; border-right: solid 0px #ececec; position: relative; } .nav-logo{ display: none; } .rmt-list { text-align: center; display: inline-block; background: #fff; position: relative; z-index: 1; padding: 0 10px; } .rmt-tt { font-size: 16px; } .mode2con::after { display: none; } .wrap_mode01 { padding-bottom: 10px; } .banner .swiper-pagination-bullet { margin-left: 25px; } .banner { margin-top: 0 } .date4 { height: 62px; } .year4 { margin-bottom: 2px; } .mode2rul li a { box-shadow: none; padding: 0; background: none; } .banner .slick-dots { right: auto; left: 30px; width: 26px; bottom: auto; top: 50%; transform: translatey(-50%) } .banner .slick-dots li { width: 24px; height: 24px; margin: 13px 0 0; opacity: .5 } .banner_btns { bottom: 30px; } .banner .slick-img { height: 0; padding-bottom: 47.92%; } .banner .banner_btns { right: auto; bottom: 10px; width: 100%; text-align: center; } .scroll { padding-top: 0 !important; } .mode2l, .mode2r { width: 100%; float: none !important; padding-top: 0px; } .mode2l { padding-right: 0; position: relative; } .mode2l::after { content: ''; display: block; width: calc(100% 30px); height: 100%; background: #eaf4f4; position: absolute; left: -15px; top: 0px; } .mode2ul .slick-dots li button { background: #fff } .mode2r { padding-left: 0; height: auto !important; padding-top: 30px; } .mode2rul li:nth-last-child(1) { display: block !important; margin-bottom: 35px; } .mode2ul2 .slick-dots li button { background: #fff; } .gp-f36 { font-size: 26px; font-size: 2.6rem; } .tit::before { width: 30px; height: 30px; } .tit { padding-left: 40px; } .title { margin: 35px 0 20px; } .mode4r .title { margin-top: 10px; padding-top: 35px; position: relative; z-index: 1; } .mode2 { /* padding-top: 35px; */ position: relative; z-index: 1; } .mode2ul2 { margin: 0 -10px; } .mode2con { padding-top: 0; } .mode1dl dd { margin-bottom: 20px; } .mode2l { padding-bottom: 30px; box-shadow: none; padding-top: 30px; } .more2 { /* margin-top: 18px; */ } .mode3l, .mode3r { width: 100%; float: none !important; } .mode3r { margin-top: 35px; margin-bottom: 35px; } .mode03 { padding-top: 35px; } .wrap_mode03 { padding-bottom: 25px; } .mode4l, .mode4r { width: 100%; float: none !important; } .mode4r { position: relative; } .mode4r .more2 { margin-top: 15px; } .mode4r::after { content: ''; display: block; width: calc(100% 30px); height: calc(100% 35px); background: #eaf4f4; position: absolute; left: -15px; top: 0px; } .mode4ul1 li:last-child { margin-bottom: 0; } .mode05 .title { margin-top: 15px; } .mode7ul li { width: 25% !important; /* margin-bottom: 20px; */ } .wrap_mode06 { padding: 50px 0 96px; } .mode7ul { height: auto !important; margin: 0 -10px; } .mode7ul li a { margin: 0 10px; } .mode7ul li { margin-bottom: 20px; } .index_06 .swiper-pagination { bottom: 0; } .mode2ulbox, .mode2ul2 .item { margin: 0 10px; } .mode2ul { margin: 0 -10px; /* padding-bottom: 20px; */ position: relative; z-index: 1; } } @media screen and (max-width:768px) { .banner_btns { bottom: 10px; } .find{ line-height: 30px; margin-left: 25px; } .banner .swiper-pagination-bullet { /* width: 20px; */ /* height: 20px; */ margin: 0 10px; } .mode7ul li { width: 50% !important; } .wrap_mode06 { padding: 50px 0 0px; } .index_06 .swiper-pagination { bottom: 58px; } .mode1ul .slick-dots li, .index_06 .swiper-pagination-bullet { margin: 0 5px; } .index_06 .swiper-pagination-bullet, .banner .swiper-pagination-bullet, .mode1ul .slick-dots li button { /* transform: scale(.8); */ } .index_06 ul li { transform: scale(.8) !important; } .mode4box::after { width: 149px; height: 52px; background-size: contain; } .mode3txt { padding: 15px; } .mode3r { padding: 20px; } .mode3ulr li { margin-bottom: 15px; } .mode1ul>li { width: 50%; } .mode3ulr li a { padding-bottom: 10px; } .mode5info { padding-bottom: 15px; } .mode5txt { padding: 0px 20px; } .mode2rul li a { padding: 0; box-shadow: none; background: none; } .mode1ul li .mode1pic::after { display: none; } .mode5ul2 li { width: 50%; margin-bottom: 15px; } .mode1ul li.slick-current li.slick-active .mode1pic::after { /* content: ''; */ display: block; position: absolute; width: 28%; height: 100%; background: rgba(0, 0, 0, .35); background: -o-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); right: 0; top: 0; } } @media screen and (max-width:479px) { .mode7ul li { width: 100% !important; } .mode2toptit { line-height: 26px; min-height: auto; max-height: 52px; } .mode1ul>li,.mode2ul li { width: 100%; } .more::before { right: 5px; } .mode1ul li .mode1pic::after { display: none; } .mode1ul li.slick-current .mode1pic::after { /* content: ''; */ display: block; position: absolute; width: 28%; height: 100%; background: rgba(0, 0, 0, .35); background: -o-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); right: 0; top: 0; } .date { width: 65px; } .mode1r { /* margin-left: 80px; */ line-height: 24px; height: 48px; } .mode2dl .mode1dltxt { /* min-height: 22px !important; */ height: auto; } .mode1dltxt { line-height: 22px; height: auto; min-height: auto; max-height: 44px; } .more { /* width: 100px; */ padding: 0 36px 0 15px; height: 30px; line-height: 30px; } .find { margin-left: 20px; } .tit::before { width: 30px; height: 30px; } .tit { padding-left: 40px; font-size: 2.6rem; } .mode1dl dd { margin-bottom: 10px; } .mode4r .title { margin-top: 25px; padding-top: 25px; } .mode05 .title { margin-top: 15px; } .mode2rright { margin-left: 72px; } .mode3r { margin-top: 20px; padding: 20px; } .mode3ulr li a { padding-bottom: 10px; } .mode3ulr li { margin-bottom: 15px; } .mode4ul1 li { width: 100%; margin-bottom: 20px; } .mode7ul { margin: 0 -10px; } .mode7ul li { width: 50% !important; margin-bottom: 20px; } .mode7ul li a { margin: 0 10px; } .mode4linfo { height: auto; max-height: 52px; } .mode4info { margin-bottom: 5px; } .mode3txt { padding: 10px; } .mode05 ul a::before { height: 50px; } .mode5ul1 li { width: 100%; margin-bottom: 15px; } .mode5info { padding-bottom: 15px; } .mode5txt { padding: 0 20px } .mode5ul2 li { width: 50%; margin-bottom: 15px; } .wrap_mode05 { padding-bottom: 35px; } .wrap_mode07::before { height: calc(100% 50px); top: -50px; } .index_06 .swiper-pagination-bullet { margin: 0 4px; } .mode2, .mode03 { /* padding-top: 25px; */ } .title { margin: 25px 0 15px; } .mode2info { padding: 10px 15px; } .mode2ul li.slick-active .mode2top { margin-bottom: 20px; } .wrap_mode06 { padding: 30px 0 0px; } .mode06 { padding-bottom: 95px; } .mode2rul li { margin-bottom: 10px; } .banner .swiper-button-prev, .banner .swiper-button-next{ width: 25px; height: 40px; background-size: 8px 14px; } .mode1ul .slick-prev { width: 25px; height: 40px; background-size: 8px 14px; left: 11px; } .mode1ul .slick-next { width: 25px; height: 40px; background-size: 8px 14px; right: 11px; } } @media screen and (max-width:414px) { .find { display: none; } } @media screen and (max-width:320px) { .mode7ul li { width: 100% !important; } .mode5ul2 li { width: 100% !important; }.mode7article{ line-height:26px; height: auto; max-height: 52px; } }