.new-footer { width: 100%; background: #000; } .new-footer-top { min-width: 72rem; max-width: 120rem; background: #000; margin: 0 auto; } .new-footer-top .top-center div { flex: 1; display: flex; justify-content: center; align-items: center; } .new-footer-top .top-center { display: flex; padding: 2.5rem 4rem 2.5rem 4rem; } .top-center .footer-span1 { color: #fff; font-size: 1rem; } .top-center .footer-span2 { color: #999; font-size: 0.8rem; } .top-center ul { margin-left: 0.5rem; } .footer-top-border { margin-top: 0.4375rem; height: 2.5rem; border-left: 1px solid #FFFFFF; opacity: 0.37; } .footer-img1 { width: 2.25rem; height: 2.0625rem; } .footer-img2 { width: 2rem; height: 2.4375rem; } .footer-img3 { width: 2.3125rem; height: 2.375rem; } .footer-img4 { width: 2.5625rem; height: 2.5rem; } .footer-img5 { width: 2.375rem; height: 2.375rem; } .new-footer-middle { min-width: 72rem; max-width: 120rem; margin: 0 auto; } .footer-middle-down { padding: 0rem 4rem 1.5625rem 4rem; background: #000; } .middle-border-top { border-top: 1px solid #fff; padding-bottom: 1.5rem; opacity: 0.37; } .footer-middle-up { padding: 0rem 4rem 0.75rem 4rem; background: #000; font-size: 0.8rem; display: grid; } .footer-middle-up li { float: left; margin-right: 0.75rem; } .hot-tags, .hot-exhibitions { display: flex; } .tags-title { color: #fff; line-height: 2rem; width: 10rem; } .tags-box { color: #838789; background: #121212; line-height: 2rem; padding: 0rem 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .tags-box a:hover { color: #fff; } .middle-flex { display: flex; } .middle-left { flex: 1; display: flex; justify-content: end; align-items: center; } .middle-border-img { width: 1px; height: 5.7rem; max-height: 9.5rem; margin-left: 0.8rem; margin-right: 0.6rem; } .middle-center { flex: 3; padding: 0.9375rem 0rem; } .middle-center-ul { font-size: 0.8rem; color: #fff; font-weight: 400; display: flex; } .middle-center-ul li { flex: 1; max-width: 7.5rem; } .middle-friend-ul { font-size: 0.8rem; color: #fff; font-weight: 400; margin-top: 1.0625rem; } .middle-friend-title { margin-right: 0.875rem; } .middle-friend-ul li { float: left; } .middle-friend-ul a { margin-right: 0.875rem; color: #78797A; } .middle-friend-ul a:hover { color: #fff; } .middle-right { flex: 1; display: flex; } .middle-right div { text-align: center; max-width: 9.5rem; } .middle-right img { width: 6rem; height: 6rem; margin-left: 1.25rem; margin-right: 1.25rem; margin-bottom: 0.625rem; } .middle-right span { font-size: 0.875rem; color: #999; } .footer-middle-logo { width: 9.375rem; height: 3.15rem; } .new-footer-bottom { text-align: center; background: #fff; padding: 1rem 0rem 1.375rem 0rem; height: 3.5625rem; } .new-footer-bottom span { font-size: 0.875rem; color: #333; display: inline-block; height: 1.1875rem; } .new-footer-bottom img { display: inline-block; width: 0.875rem; height: 0.875rem; margin: -0.15rem 0.1rem 0rem 0.25rem; } @media (min-width: 1536px) { .middle-border-img { margin-left: 1.4rem; margin-right: 1.2rem; } .footer-middle-logo { width: 12.5rem; height: 4.2rem; } .middle-border-img { height: 7.6rem; } .middle-right img { width: 6.5rem; height: 6.5rem; } .top-center .footer-span1 { font-size: 1.25rem; } .top-center .footer-span2 { font-size: 1rem; } .new-footer-top .top-center { padding: 2.5rem 5.125rem 2.5rem 5.125rem; } .footer-middle-down { padding: 0rem 5.125rem 1.5625rem 5.125rem; } .footer-middle-up { padding: 0rem 5.125rem 0.75rem 5.125rem; font-size: 1rem; } .middle-friend-ul,.middle-center-ul { font-size: 1rem; } .tags-box { line-height: 2.5rem; padding: 0rem 1.25rem; } .tags-title { line-height: 2.5rem; } } @media (min-width: 1920px) { .middle-border-img { margin-left: 2rem; margin-right: 1.6rem; } .footer-middle-logo { width: 15.625rem; height: 5.25rem; } .middle-border-img { height: 9.5rem; } .middle-right img { width: 7rem; height: 7rem; } }