.zb-qd-list>ul{ font-size: 0; padding-top: 180px; text-align: center; } .zb-qd-list>ul>li{ display: inline-block; padding: 13px; } .zb-qd-list>ul>li>div{ width: 212px; text-align: left; height: 153px; background-repeat: no-repeat; background-position: right 25px bottom 25px; border-radius: 5px; font-size: 22px; font-weight: bold; color: #fff; cursor: pointer; transition: all 0.2s ease 0s; padding-left: 25px; padding-top: 20px; -webkit-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -moz-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -ms-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -o-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; } .zb-qd-list>ul>li>div:hover{ box-shadow: 0 0 14px rgba(0, 0, 0, .25); border-radius: 25px; } .zb-qd-yellow{ background-color: #f5b81f } .zb-qd-orange{ background-color: #f26d51 } .zb-qd-purple{ background-color: #8c97cb } .zb-qd-blue{ background-color: #4299ed } .zb-qd-cyan{ background-color: #13b5b1 } .zb-qd-ic1{ background-image:url(../images/zbimg/qd-ic1.png); } .zb-qd-ic2{ background-image:url(../images/zbimg/qd-ic2.png); } .zb-qd-ic3{ background-image:url(../images/zbimg/qd-ic3.png); } .zb-qd-ic4{ background-image:url(../images/zbimg/qd-ic4.png); } .zb-qd-ic5{ background-image:url(../images/zbimg/qd-ic5.png); } .zb-qd-tit1{ background: url(../images/zbimg/qd-ic6.png) center center no-repeat; } .zb-qd-tit2{ background: url(../images/zbimg/qd-ic7.png) center center no-repeat; } .zb-qd-rebox{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: flex-start; margin:30px 40px; position: relative; } .zb-qd-rebox:before{ position: absolute; left:50%; width: 1px; height: 100%; background: #ddd; content: ""; } .zb-qd-rebox>section{ width: 50%; flex: none; } .zb-qd-rebox>section:not(:last-of-type){ padding-right: 40px; } .zb-qd-rebox>section+section{ padding-left: 40px; } .zb-qd-rebox>section>header>span{ font-size: 18px; color: #333; font-weight: bold; } .zb-qd-rebox>section>header>span>i{ display: inline-block; margin-right: 10px; width: 30px; height: 30px; vertical-align: middle; } .zb-qd-rebox>section>article{ background: url(../images/zbimg/qd-ic11.png) left top repeat; font-size: 0; margin: 20px 0; } .zb-qd-rebox>section>article>a{ display:inline-block; font-size:15px; color: #555; text-decoration: none; height: 46px; width: 33.3%; background:url(../images/zbimg/qd-ic9.png) left 10px center no-repeat; padding-left: 30px; -webkit-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -moz-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -ms-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; -o-transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; transition: all 0.3s cubic-bezier(0.79, 0.51, 0, 0.92) 0s; border-radius: 20px; vertical-align: top; } .zb-qd-rebox>section>article>a>span{ display: flex; display: -webkit-flex; height: 46px; align-items: center; } .zb-qd-rebox>section>article>a:hover{ background:url(../images/zbimg/qd-ic10.png) left 10px center no-repeat #4299ed; border-radius: 5px; color: #fff; } .zb-qd-rebox>section>article>a.zb-qd-current{ color: #287bf6; font-weight: bold; background:url(../images/zbimg/qd-ic8.png) left 6px center no-repeat; } @media screen and (max-width:1600px){ .zb-qd-rebox>section>article>a{ width: 50%; } }