.site-img{ width: 65%; padding-right: .3rem; } .site-img img{ width: 100%; } .site-text{ flex: 1; } .about-map{ position: relative; } .branch-sub-t{ font-weight: 600; font-size: .16rem; color: #2a2a2a; padding-left: .21rem; } .branch-sub-l{ flex-wrap: wrap; } .branch-sub-l li{ margin-top: .1rem; color: #a0a0a0; position: relative; width: 25%; max-width: 25%; min-width: 25%; } .branch-sub-l li:hover{ color: #e81d75; } .branch-sub-l li:hover .location img{ display: block; width: .16rem; } .branch-sub-l li:hover .province{ border-right: .02rem solid #e81d75; } .province,.city{ display: inline-block; } .province{ border-right: .02rem solid #a0a0a0; padding-right: .2rem; padding-left: .22rem; } .city{ padding-left: .2rem; } .location{ height: .14rem; } .location img{ position: absolute; display: none; } @media screen and (max-width:1125px){ .branch-sub-l li{ width: 33.33%; max-width: 33.33%; min-width: 33.33%; } } @media screen and (max-width:890px){ .branch-sub-l li{ width: 50%; max-width: 50%; min-width: 50%; } }