.main .inner-container>div { display: flex; flex-direction: row; } .xw-banner { width: 436px; } .xw-banner .title { height: 64px; line-height: 64px; font-size: 26px; } .xw-banner .title>span:nth-child(1) { color: #022e52; } .xw-banner .title>span:nth-child(2) { color: #a9b9c6; } .xw-banner .banner-warp { width: inherit; height: 282px; overflow: hidden; position: relative; } .xw-banner .banner-warp .cutover_wrapper_focus { display: flex; position: absolute; right: 0; bottom: 0; height: 42px; } .cutover_wrapper_focus .cutover { margin: auto 5px; width: 12px; height: 12px; border-radius: 50%; background: rgba(67, 128, 188, 1); transition: all 0.5s; } .cutover_wrapper_focus .cutover.active { background: rgba(255, 255, 255, 1); } .xw-banner .banner-container { display: inline-flex; } .xw-banner .banner { width: 436px; height: 282px; position: relative; } .xw-banner .banner img { width: 100%; height: 100%; } .xw-banner .banner .banner-title { position: absolute; bottom: 0; width: 100%; height: 42px; line-height: 42px; padding-left: 20px; background: rgba(8, 40, 71, 0.65); font-size: 18px; color: #ffffff; box-sizing: border-box; } .data-list { margin-top: 80px; display: flex; flex: 1; margin-left: 30px; justify-content: space-between; } .data-list>div { width: 472px; } .data-2-2>div.xw { width: 476px; box-sizing: border-box; } .data-list .bar, .data-2-2>div.xw .bar { display: flex; justify-content: space-between; width: 100%; height: 38px; line-height: 36px; border-bottom: solid 2px #a9b9c6; } .data-list .bar>span, .data-2-2>div.xw .bar>span { font-size: 24px; color: rgba(2, 46, 82, 1); font-weight: bold; } .data-list .bar>a, .data-2-2>div.xw .bar>a { font-size: 16px; color: rgba(2, 46, 82, 0.59); padding-right: 20px; background: url(/uploads/image/gimg/right.svg) no-repeat; background-size: 10px 16px; background-position: right center; } .data-list .list ul li, .data-2-2>div.xw .list ul li { display: flex; justify-content: space-between; margin-top: 20px; font-size: 16px; } .data-list .list ul li>span, .data-2-2>div.xw .list ul li>span { color: #9b9b9b; } .data-2 { margin-top: 20px; margin-bottom: 49px; } .data-2-1 { width: 436px; height: 282px; overflow: hidden; } .data-2-1>.banner { height: 282px; overflow: hidden; position: relative; } .data-2-1>.banner .banner-container { display: inline-flex; } .data-2-1>.banner .banner-container img { width: 436px; height: 282px; } .data-2-1>.banner .cutover_wrapper { width: 100%; height: 34px; background: rgba(8, 40, 71, 0.65); display: flex; flex-direction: row; justify-content: center; position: absolute; bottom: 0; } .data-2-1>.banner .cutover_wrapper>.cutover { width: 12px; height: 12px; border-radius: 12px; background: rgba(67, 128, 188, 1); margin: auto 6px; transition: all 0.5s; } .data-2-1>.banner .cutover_wrapper>.cutover.active { background: rgba(255, 255, 255, 1); } .data-2-2 { margin-left: 30px; display: flex; } .data-2-2>div.fw { margin-left: 10px; width: 238px; height: 301px; box-sizing: border-box; padding: 30px 32px; color: #ffffff; background-size: 100%; background-repeat: no-repeat; border-radius: 14px; } .data-2-2>div:nth-child(2) { background-image: url(/uploads/image/gimg/yqfw.png); margin-left: 20px; } .data-2-2>div:nth-child(3) { background-image: url(/uploads/image/gimg/rzrf.png); } .fw>.fw-title { font-size: 24px; } .fw>.liner { width: 52px; height: 0; border: 1px solid #ffffff; margin-top: 12px; } .fw>.fw-list { margin-top: 24px; display: flex; flex-wrap: wrap; } .fw>.fw-list>a { width: 70px; text-align: center; box-sizing: border-box; font-size: 14px; padding-top: 54px; color: #ffffff; background-repeat: no-repeat; background-position: top center; background-size: 54px; } .fw>.fw-list>a>span { display: block; margin: auto; width: 100px; } .fw>.fw-list>a:nth-child(1), .fw>.fw-list>a:nth-child(3) { margin-right: 22px; } .fw>.fw-list>a:nth-child(3), .fw>.fw-list>a:nth-child(4) { margin-top: 35px; } .fw:nth-child(2)>.fw-list>a:nth-child(1) { background-image: url(/uploads/image/gimg/sgbl.svg); } .fw:nth-child(2)>.fw-list>a:nth-child(2) { background-image: url(/uploads/image/gimg/rzqy.svg); } .fw:nth-child(2)>.fw-list>a:nth-child(3) { background-image: url(/uploads/image/gimg/cwsq.svg); } .fw:nth-child(2)>.fw-list>a:nth-child(4) { background-image: url(/uploads/image/gimg/cgzl.svg); } .fw:nth-child(3)>.fw-list>a:nth-child(1) { background-image: url(/uploads/image/gimg/rzzx.svg); } .fw:nth-child(3)>.fw-list>a:nth-child(2) { background-image: url(/uploads/image/gimg/rzbl.svg); } .fw:nth-child(3)>.fw-list>a:nth-child(3) { background-image: url(/uploads/image/gimg/rcfw.svg); } .fw:nth-child(3)>.fw-list>a:nth-child(4) { background-image: url(/uploads/image/gimg/gksj.svg); }