.index_foot { box-sizing: border-box; width: 1200px; margin: 0 auto; } .index_foot_name_box { margin: 10px auto 0px; text-align: center; font-size: 0px; } .index_foot_name { display: inline-block; height: 67px; line-height: 67px; color: #f2f9f4; font-size: 51px; font-weight: bold; overflow: hidden; } .index_foot_name:nth-of-type(even) { color: #333; font-size: 32px; } .foot_img_box { overflow: hidden; display: block; margin: 20px auto 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .foot_img_box a { width: 170px; height: 57px; margin: 0 0 20px 0; display: block; } .foot_img_box img { float: left; width: 170px; height: 57px; overflow: hidden; box-sizing: border-box; border: solid 1px #D7EDD4; display: block; margin: 0 auto; } .foot_img_box a:nth-child(2) { margin-left: 35px; } .foot_img_box a:nth-child(3) { margin-left: 35px; } .foot_img_box a:nth-child(4) { margin-left: 35px; } .foot_img_box a:nth-child(5) { margin-left: 35px; } .foot_img_box a:nth-child(6) { margin-left: 40px; } .foot_img_box a:nth-child(7) { margin-left: 0; } .foot_img_box a:nth-child(8) { margin-left: 35px; } .foot_img_box a:nth-child(9) { margin-left: 35px; } .foot_img_box a:nth-child(10) { margin-left: 35px; } .foot_img_box a:nth-child(11) { margin-left: 35px; } .foot_img_box a:nth-child(12) { margin-left: 40px; } .foot_img_box>* * { display: block; width: 100%; height: 100%; } .foot_img_box>*:nth-of-type(7n) { margin-right: 0px; } .foot_frind_box { display: block; margin: 11px auto; overflow: hidden; display: flex; width: 100%; // border-bottom: solid 2px #49A769; padding-bottom: 20px; } .foot_frind_box span { word-break: keep-all; white-space: nowrap; line-height: 22px; font-size: 16px; color: #333; font-weight: bold; } .foot_frind_box div { width: 100%; overflow: hidden; } .foot_frind_box div * { float: left; line-height: 22px; height: 22px; color: #333; font-size: 16px; margin: 0 30px; } .call_us_box { display: block; width: 100%; margin: 30px auto 0; overflow: hidden; text-align: center; font-size: 0px; background: #a01c0e; a { color: #fff; } } .call_us_box>* { height: 12px; line-height: 12px; color: #fff; font-size: 14px; display: inline-block; box-sizing: border-box; padding: 0 19px; font-weight: bold; border-left: solid 2px #7e1c11; margin: 18px 0; } .call_us_box>*:nth-of-type(1) { border-left: 0px; } .foot_text_box { margin: 20px auto 0px; text-align: center; color: #333; font-size: 14px; line-height: 25px; p { a { color: #333; font-size: 14px; } .webSitecolor { color: #a01c0e; } } } .foot_text_box_green { color: #a01c0e; } .foot_text_box img { display: inline-block; height: 20px; vertical-align: middle; } .foot_logo_out { position: relative; margin: 0px auto; width: 100%; height: 0px; } .foot_logo_out * { width: 120px; display: block; } .foot_logo_out>* { position: absolute; top: -140px; } .foot_logo_out>*:nth-of-type(1) { left: 0px; } .foot_logo_out>*:nth-of-type(2) { right: 0px; } .foot_last_img_box { margin: 40px auto 10px; text-align: center; overflow: hidden; width: 100%; font-size: 0px; padding-bottom: 40px; } .foot_last_img_box>* { height: 50px; width: 150px; display: inline-block; overflow: hidden; } .foot_last_img_box img { width: 120px; height: 50px; } .foot_text_html_css :deep(a) { color: #333; // text-decoration: underline; } .foot_text_html_css :deep(img) { margin: 0 5px; } //添加在线客服 .kefu { bottom: 100px; height: 430px; position: fixed; right: 10px; width: 100px; .kefu_itemKf { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; margin-bottom: 100px; a { >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 15px; width: 50px; height: 50px; margin-bottom: 5px; } } } .kefu_itemQQ { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 10px; width: 60px; height: 60px; } &:hover { .kefu_item_content_QQ { display: block; } } } .kefu_itemPhone { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 10px; width: 60px; height: 60px; } &:hover { .kefu_item_content_phone { display: block; } } } .kefu_item_content_QQ { position: absolute; top: -100px; right: 100px; background: #fff; border-radius: 10px; display: none; width: 190px; height: 330px; background: #fff; box-shadow: 0 4px 16px #0000001a; z-index: 99; box-sizing: border-box; padding: 20px; img { margin-bottom: 10px; } .qqfs { margin-bottom: 20px; font-size: 14px; color: #333; } .arrow { width: 0; height: 0; width: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; position: absolute; top: 120px; right: -20px; transform: translateX(-50%); z-index: 100; } } .kefu_item_content_phone { position: absolute; top: 0; right: 100px; background: #fff; border-radius: 10px; display: none; width: 190px; height: 80px; background: #fff; box-shadow: 0 4px 16px #0000001a; z-index: 99; box-sizing: border-box; padding: 20px; text-align: left; color: #333; .kefu_item_content_phone_title { margin-bottom: 5px; font-weight: bold; } .arrow { width: 0; height: 0; width: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; position: absolute; top: 20px; right: -20px; transform: translateX(-50%); z-index: 100; } } }