.link_wap { height: 30px; line-height: 25px; width: 100%; background: #B0B0B0; font-size: 1.2rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFF; box-sizing: border-box; padding: 5px; overflow-y: auto; } .footer_top { background-color: #0074D6; box-sizing: border-box; padding: 3.8rem 0 0; } .footer_top .footer_topBox{ width: 77%; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .footer_left { width: calc(100% - 40rem); margin-right: 8%; } .footer_left img { width: 25.7rem; margin-bottom: 5.3rem; } .footer_left div .link_wap { margin-bottom: 0; } .footer_left div ul{ display: flex; align-items: center; } .footer_left div ul li, .link_wap li { margin-left: 1rem; } .footer_top_link{ width: 77%; box-sizing: border-box; padding: 2rem 0 3.8rem; margin: 0 auto; display: flex; align-items: center; flex-flow: wrap; } .footer_left div span, .footer_left li a, .footer_top_link span { font-size: 1.6rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFF; } .footer_left li a, .footer_top_link a { font-size: 1.6rem; margin-left:1rem ; } .footer_left li a:first-child{ margin-left: 0; } .footer_top_link a { color: #FFF; } .link_wap span, .link_wap a { font-size: 1.2rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFF; } .link_wap a { margin-left:1rem ; } .footer_left .footer_left_list { display: flex; align-items: center; justify-content: space-between; } .footer_right { width: 34rem; display: flex; align-items: center; /*box-sizing: border-box; padding-top: 7rem;*/ } .footer_right_img { width: 35%; margin-right: 4.6%; } .footer_right p { font-size: 2rem; font-family: Source Han Sans CN; font-weight: 400; color: #FFF; margin-bottom: 1.6rem; } .footer_right a { font-size: 2.4rem; font-family: Source Han Sans CN; font-weight: 400; color: #FFF; } .footer_bottom { display: flex; justify-content: center; align-items: center; height: 6.2rem; line-height: 6.2rem; background-color: #2A2B2C; } .footer_bottom a { margin-right: 2%; font-size: 1.6rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFF; } .beian { display: inline-block; vertical-align: sub; width: 2rem; margin-left: 3rem; margin-right: 1rem; } .link_wap { display: none; } .footer { width: 100%; background: #0074D6; box-sizing: border-box; padding: 2rem 0; text-align: center; } .footer p { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; } .footer a { font-size: 1.4rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFF; } .footer p .footer_map { margin: 0 5rem 0 6rem; } .footer_wap { display: none; padding: 1rem 0 0.5rem; } .footer_wap a { display: block; width: 100%; font-size: 1.4rem; margin-bottom: 0.5rem; } .footerBtn { position: fixed; left: 0; bottom: 0; width: 100%; display: none; width: 100%; height: 5.2rem; box-sizing: border-box; background-color: #fff; } .footerBtn ul { width: 100%; display: flex; align-items:flex-start; } .footerBtn li { width: 25%; box-sizing: border-box; padding: .5rem 0 .6rem; } .footerBtn li div { width: 2.2rem; margin: 0 auto .3rem; } .footerBtn li p { font-size: 1.2rem; font-weight: 400; color: #272727; text-align: center; } @media (min-width: 1920px) and (max-width:2560px) { .footer_right { width: 40rem; } .footer_right_img { width: 30%; } } @media (max-width: 1024px) { .footer_left { width: 50%; } } @media (max-width: 768px) { .link_wap { display: block; height: auto; } .footer_top { box-sizing: border-box; padding: 1.5rem 1rem; } .footer_top .footer_topBox{ width: 100%; } .footer_left { width: 60%; margin-right: 2%; } .footer_right { width: 40%; } .footer_left img { width: 12.9rem; margin-bottom: 2.2rem; } .footer_left div, .footer, .footer_top_link { display: none; } .footer_wap { display: block; } .footer_left .footer_left_list { flex-wrap: wrap; justify-content: flex-start; } .footer_left .footer_left_list li { width: 25%; } .footer_left_list li a { font-size: 1.2rem; } .footer_right { padding-top: 3rem; } .footer_right p { font-size: 1.2rem; margin-bottom: 0; } .footer_right a { font-size: 1.2rem; } .footer_bottom { flex-wrap: wrap; height: auto; box-sizing: border-box; padding: 1rem 0; } .footer_bottom a { display: block; width: 100%; font-size: 1.2rem; line-height: 20px; text-align: center; margin: 0; } .footerBtn { display: flex; box-shadow: 0 0 10px rgba(0,0,0,0.2); } } @media (max-width: 320px) { .footer_left .footer_left_list li { width: 33%; } }