.about{background:;padding-top:100px;position:relative;background-size:55% auto;} .about .bg{background:url(../image/png44.png) left top no-repeat;height:320px;position:absolute;left:25px;top:0;right:0;background-size:contain;} .about .block{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:start;align-items:flex-start;} .about .title{display:none;} .about .list{ margin-bottom: 30px; -ms-flex: 1; flex: 1; padding-left: 3%; padding-right: 3%; border-left: 0px solid #e0e0e0; position: relative; margin-left: 0px; padding-bottom: 10px; } .about .list .item{position:relative;padding:55px 10px;border-bottom:1px solid #e0e0e0;font-size:18px;} .about .list .item .h{position:absolute;left:-280px;top:50px;width:280px;text-align:center;} .about .list .item .h img{max-width:75%;} .about .list .item:first-child{padding-top:0;} .about .list .item:first-child .h{top:-20px;} .about .list .item p{margin-bottom:20px; text-align:justify;} .about .list .item p:last-child{margin-bottom:0;} .about .pics{position:relative;width:67%;height:32vw;} .about .pics .d{position:absolute;background-position:center center;background-repeat:no-repeat;background-size:cover;} .about .pics .d1{left:0;top:0;height:100%;width:30%;} .about .pics .d2{left:30%;top:0;height:50%;width:45%;} .about .pics .d3{left:75%;top:0;height:50%;width:12%;} .about .pics .d4{left:30%;top:50%;height:50%;width:27%;} .about .pics .d5{left:57%;top:50%;height:50%;width:43%;} html { font-size: 100px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .flex { display: -webkit-flex; display: flex; flex-wrap: wrap } .list40 { flex-direction: column; position: relative; z-index: 1; overflow: hidden; padding: 1.3rem 0 2.4rem; margin: .1rem 0 0; background:url(../images/zdkj_2.png) no-repeat left 140px; } .list40:before { content: ""; position: absolute; top: 0; width: .02rem; height: calc(100% - 1.2rem); border-left: #ff860b .02rem dashed; z-index: -1; left: 50%; margin-left: -.01rem } .list40:after { content: ""; position: absolute; top: 0; width: .23rem; height: .23rem; border: #ff860b 1px solid; background: #fff; z-index: -1; left: 50%; margin-left: -.13rem; border-radius: 50%; } .list40 li { width: 50%; align-self: flex-end; margin: 0 0 -1.9rem; position: relative; z-index: 1; cursor: pointer; height:100%; } .list40 li::before { content: ""; position: absolute; width: .42rem; height: .41rem; border-radius: 50%; left: -.21rem; top: 0; background: #ff860b; z-index: 10; transform: scale(0); transition: .5s; } .list40 li:nth-child(2n):before { left: auto; right: -.21rem; } .list40 li .a { align-items: flex-start; position: relative; z-index: 1; padding: 0 0 0 .56rem; } .list40 li .a::before { content: ""; position: absolute; width: .42rem; height: .41rem; border-radius: 50%; left: -.21rem; top: 0; background: url(../images/list40_b1.png) center no-repeat; box-sizing: border-box; background-size: 100% 100% !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .list40 li .a::after { content: ""; position: absolute; background: #ff860b; width: .3rem; height: 1px; left: .2rem; top: .21rem; } .list40 li .top { justify-content: space-between; align-items: center; transform: translateY(-.06rem); margin-bottom: .1rem; } .list40 li .top .ll { font-size: .48rem; color: #ff860b; position: relative; z-index: 1; transform: translateY(-.12rem); font-family: "鑻规柟"; } .list40 li .top .ll:before { content: ""; position: absolute; bottom: .22rem; background: #ff860b; width: 100vw; height: 1px; left: calc(100% + .1rem); } .list40 li .top .rr h6 { font-size: .24rem; color: #ff860b; text-align: left; transform: translateY(-.25rem); position: relative; z-index: 1; right: 0; } .list40 li .top .rr h6::before { content: ""; background: url(../images/list40_b3.png) center no-repeat; width: .71rem; height: .11rem; position: absolute; top: .5rem; right: 0; } .list40 li .ar_article p { text-indent: 0; line-height: 180% !important; color: #666; font-size:18px; } .list40 li .ar_article p img{ width:70%; } .list40 li:nth-child(2n) .top .rr h6::before { transform: rotateY(180deg) } .bd_li2 { width: 9.8rem; max-width: 100%; margin: 0 auto; } .lshm { padding-bottom: .7rem; } @media(min-width: 1024px) { .list40 li:nth-child(2n) { align-self: flex-start } .list40 li:nth-child(2n) .a { padding: 0 .56rem 0 0; } .list40 li:nth-child(2n) .a::before { left: auto; right: -.21rem; } .list40 li:nth-child(2n) .top .ll { order: 1; } .list40 li:nth-child(2n) .top .ll:before { left: auto; right: calc(100% + .1rem); } .list40 li:nth-child(2n) .a::after { left: auto; right: .2rem; } .list40 li:hover::before { transform: scale(.25) } } @media(max-width: 1024px) { .list40:after { left: 0; } .list40:before { left: 0; } .list40 { overflow: visible; margin: 0 0 0 .2rem; padding: .8rem 0 0; } .list40 li { width: 100%; } } @media(max-width: 800px) { .miso_tab2 .hd { margin: 0 0 .2rem } .list39 li { padding: 0 .15rem } .list39 li a { font-size: .2rem } .about { background: ; padding-top: 30px; position: relative; background-size: 55% auto; } .list40{ background:none; } .list40 li{ margin:0; } .list40 li .top .ll { font-size: .26rem; } .list40 li .top .rr h6 { font-size: .18rem } .list40 li .a::before { width: .3rem; height: .3rem; left: -.16rem; } .list40 li .top .ll:before { content: ""; position: absolute; bottom: 0.18rem; } .list40 li .top { transform: translateY(.12rem); } .list40 li .a::after { top: .15rem; left: .13rem } .list40 li .top .rr h6::before { transform: scale(.7); transform-origin: right top; top: .36rem; display:none; } .list40 li .a { padding: 0 0 0 .4rem; } .list40 li .a::after { width: .2rem } }