.pr { position: relative; } .warper { max-width: 1540px; margin: 0 auto; } .about-main2 { height: 800px; width: 100%; overflow: hidden; background: url(/site/219/css/history/lc_bg.png) no-repeat; background-size: 100% 100%; } .about-main2 .licheng-bg { background-color: rgba(255,255,255,.8); width: 100%; height: 100%; position: relative; } .about-main2 .licheng-bg .warper { height: 100%; } .about-main2 .licheng-bg .quxian { height: 2px; width: 100%; position: absolute; top: 50%; left: 0; /* background: url(/site/219/css/history/lc-quxian.png) no-repeat; */ /* background-size: 100%; */ background: #ccc; } .about-main2 .ny-title { padding-top: 80px; } .ny-title .title-en { font-size: 36px; color: #b4b4b4; font-family: arial; line-height: 36px; font-weight: normal; } .ny-title .title-ch { font-size: 34px; color: #333333; margin: 15px 0; font-weight: normal; } .ny-title .title-ch::after { display: block; content: ""; width: 42px; height: 3px; background-color: #0032af; margin: 15px 0 0; } .ny-title i { display: block; width: 42px; height: 1px; background-color: #b5b5b5; } .about-main2 .licheng-content { position: absolute; width: 100%; height: 100%; } .about-main2 .licheng-content .swiper-wrapper, .about-main2 .licheng-content .swiper-slide, .about-main2 .licheng-content ul { width: 100%; height: 100%; } .about-main2 .licheng-content ul li { width: 20%; float: left; height: 100%; } .about-main2 .licheng-content ul li a { display: block; width: 100%; position: relative; height: 320px } .about-main2 .licheng-content ul li .date { color: #0a3875; font-size: 30px; line-height: 1; } .about-main2 .licheng-content ul li.item1 .line, .about-main2 .licheng-content ul li.item3 .line, .about-main2 .licheng-content ul li.item5 .line { margin-bottom: 30px; } .about-main2 .licheng-content ul li.item2 .line, .about-main2 .licheng-content ul li.item4 .line { margin-top: 30px; } .about-main2 .licheng-content ul li.item1 .line:after, .about-main2 .licheng-content ul li.item3 .line:after, .about-main2 .licheng-content ul li.item5 .line:after { width: 25px; height: 25px; background-color: #fff; display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute; border: #0032af 4px solid; } .about-main2 .licheng-content ul li.item2 .line:before, .about-main2 .licheng-content ul li.item4 .line:before { width: 25px; height: 25px; background-color: #fff; display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute; border: #0032af 4px solid; } .about-main2 .licheng-content ul li .lc-left { position: absolute; } .about-main2 .licheng-content ul li .line { height: 250px; width: 1px; display: block; background-color: #0A3875; position: relative; left: 30px; } .about-main2 .licheng-content ul li .lc-right { position: absolute; left: 30px; width: 400px; height: calc(100% - 140px); display: table; } .about-main2 .licheng-content ul li.item5 .lc-right { width: 300px; } .about-main2 .licheng-content ul li.item2 .lc-right, .about-main2 .licheng-content ul li.item4 .lc-right { width: 450px; } .about-main2 .licheng-content ul li .lc-right .right-text { padding: 0 20px; display: table-cell; vertical-align: middle; } .about-main2 .licheng-content ul li.item1 a { top: 140px; } .about-main2 .licheng-content ul li.item1 .lc-left .line:after { bottom: -25px; left: -11px; } .about-main2 .licheng-content ul li.item1 .lc-right { top: 0; } .about-main2 .licheng-content ul li.item2 a { top: 350px; } .about-main2 .licheng-content ul li.item2 .lc-left .line:before { top: -25px; left: -11px; } .about-main2 .licheng-content ul li.item2 .lc-right { top: 100px; } .about-main2 .licheng-content ul li.item3 a { top: 140px; } .about-main2 .licheng-content ul li.item3 .lc-left .line:after { bottom: -25px; left: -11px; } .about-main2 .licheng-content ul li.item3 .lc-right { top: 0; } .about-main2 .licheng-content ul li.item4 a { top: 350px; } .about-main2 .licheng-content ul li.item4 .lc-left .line:before { top: -25px; left: -11px; } .about-main2 .licheng-content ul li.item4 .lc-right { top: 100px; } .about-main2 .licheng-content ul li.item5 a { top: 140px; } .about-main2 .licheng-content ul li.item5 .lc-left .line:after { bottom: -25px; left: -11px; } .about-main2 .licheng-content ul li.item5 .lc-right { top: 0; } .about-main2 .licheng-content .right-text h3 { font-size: 24px; margin-bottom: 10px; } .about-main2 .licheng-content .right-text p { font-size: 16px; } .lc-swiper-btn { width: 100%; position: absolute; top: 450px; } .lc-swiper-btn a { display: block; position: absolute; } .lc-swiper-btn .btn-prev { position: absolute; left: 15px; top: 50px; } .lc-swiper-btn .btn-next { position: absolute; right: 15px; top: 50px; } .lc-swiper-btn .iconfont { font-size: 30px; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; direction: ltr; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px,0,0); -webkit-transition-timing-function: ease; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0px,0,0); -moz-transition-timing-function: ease; -o-transition-property: -o-transform, left, top; -o-transition-duration: 0s; -o-transform: translate3d(0px,0,0); -o-transition-timing-function: ease; -o-transform: translate(0px,0px); -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0px,0,0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0s; transform: translate3d(0px,0,0); transition-timing-function: ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto } .swiper-slide { float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } .swiper-wp8-horizontal { -ms-touch-action: pan-y } @media(max-width:1900px) { .about-main2 .licheng-bg { overflow: hidden; overflow-x: auto; } } @media(max-width:1600px) { .warper { max-width: 100%; padding: 0; } .about-main2 .ny-title { padding: 80px 30px 0; } /* .about-main2 .licheng-content ul li.item1 a { top: 80px; } .about-main2 .licheng-content ul li.item2 a { top: 275px; } .about-main2 .licheng-content ul li.item3 a { top: 110px; } .about-main2 .licheng-content ul li.item4 a { top: 345px; } .about-main2 .licheng-content ul li.item5 a { top: 140px; }*/ .about-main2 .licheng-content ul li.item2 .lc-right { /* top: 70px; */ } .about-main2 .licheng-content ul li.item4 .lc-right { /* top: 30px; */ } .about-main2 .licheng-content ul li.item5 .lc-right { width: 280px; } } @media(max-width:1500px) { .about-main2 .licheng-content ul li.item5 .lc-right { width: 260px; } } @media(max-width:1366px) { .about-main2 .ny-title { padding: 80px 30px 0; } .about-main2 .licheng-content ul li.item5 .lc-right { width: 230px; } /* .about-main2 .licheng-content ul li.item1 a { top: 70px; } .about-main2 .licheng-content ul li.item2 a { top: 290px; } .about-main2 .licheng-content ul li.item3 a { top: 70px; } .about-main2 .licheng-content ul li.item4 a { top: 370px; } .about-main2 .licheng-content ul li.item5 a { top: 105px; }*/ .about-main2 .licheng-content ul li.item2 .lc-right { /* top: 40px; */ } .about-main2 .licheng-content ul li.item4 .lc-right { /* top: 0; */ } } @media(max-width:1280px) { /*.about-main2 .licheng-content ul li.item1 a { top: 70px; } .about-main2 .licheng-content ul li.item2 a { top: 300px; } .about-main2 .licheng-content ul li.item3 a { top: 60px; } .about-main2 .licheng-content ul li.item4 a { top: 370px; } .about-main2 .licheng-content ul li.item5 a { top: 90px; }*/ /* .about-main2 .licheng-content ul li.item2 .lc-right { top: 0; }*/ .about-main2 .licheng-content ul li.item5 .lc-right { width: 230px; } } @media(max-width:991px) { .about-main2 { min-height: 100%; height: auto; overflow: auto; background-size: 100% 100%; } .about-main2 .licheng-content, .about-main2 .licheng-bg .quxian { display: none; } .about-main2 .ny-title { padding: 15px 15px 0; } .ny-title .title-ch { font-size: 24px; } } @media(max-width:420px){ .about-main2{ background-size: cover; background-position: center; } }