html, body { min-height: 100vh; } body { font-family: sans-serif; margin: 0 auto; display: flex; flex-direction: column; min-width: 1280px; max-width: 1920px; } ul { margin: 0; padding: 0; list-style: none; } .main { flex-grow: 1; padding-bottom: 36px; } .header { display: flex; justify-content: space-between; align-items: center; width: 1280px; height: 162px; margin: auto; } .header .nav { width: 720px; } .nav { display: flex; justify-content: space-between; } .nav a { display: block; padding: 18px; border-radius: 5px; text-decoration: none; font-size: 22px; font-weight: 100; color: #808080; } .nav .current a { color: #fff; background-color: #1b75ba; } .footer { background-color: #202020; } .footer .content-info { display: flex; width: 1280px; height: 190px; margin: auto; align-items: center; } .footer .content-info .qrcode { width: 88px; margin: 0 10px 0 98px; } .footer .content-info :not(.qrcode) + .address { margin-left: 98px; } .footer .content-info .address { margin-right: 48px; } .footer .content-info .address, .footer .content-info .address a { font-style: normal; color: rgba(255, 255, 255, 0.43); font-size: 14px; text-decoration: none; } .footer .content-info .address p { margin: 0; } .footer .copyright { background-color: #000; line-height: 57px; text-align: center; font-size: 14px; letter-spacing: 1.4px; color: #fff; opacity: 0.6; } .column-header { box-sizing: border-box; text-align: center; height: 218px; padding-top: 40px; } .column-header .en { font-family: 'Microsoft Yi Baiti'; text-transform: uppercase; font-size: 36px; height: 38px; color: #77a5c5; } .column-header .cn { font-size: 48px; font-weight: 100; color: #fff; } .column-header .line { display: inline-block; width: 92px; height: 5px; background-color: #d77d2b; } .m-auto { margin: auto; }