/* ==================== 底部样式 Start ==================== */ footer { position: relative; z-index: 14; } footer.gray .footer { background-color: #F5F5F7; } footer.gray .footer .foot-right .item .icon { background-color: #fff; } footer.gray .footer .foot-right .item .icon img:nth-child(1) { opacity: 0.5; } footer.black .footer { background-color: #0D0D0D; } footer.black .footer .foot-bottom { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.2); } footer.black .footer .foot-copyright { color: #fff; } footer.black .footer .foot-top > ul > li > a { color: #fff; } footer.black .footer .foot-top > ul > li > ul > li > a { color: #86868B; } footer.black .footer .foot-tel { border-color: #898989; } footer.black .footer .foot-tel:hover .icon img { -webkit-filter: brightness(0); filter: brightness(0); } footer.black .footer .foot-tel:hover .text { color: #000; } footer.black .footer .foot-tel:after { background-color: #fff; } footer.black .footer .foot-tel .icon img { -webkit-filter: brightness(1); filter: brightness(1); opacity: 1; } footer.black .footer .foot-tel .text { color: #FFFFFF; } footer.black .foot-right .item .icon { background-color: #898989; } footer.black .foot-right .item .icon img:nth-child(1) { opacity: 1; } .footer { background-color: #fff; } .footer .mxw-box { padding-top: 4.167vw; padding-bottom: 5.208vw; width: 65.104vw; } .footer .foot-top { margin-bottom: 4.167vw; } .footer .foot-top > ul { display: flex; align-items: flex-start; justify-content: space-between; } .footer .foot-top > ul > li:last-child > ul { margin-bottom: 0; } .footer .foot-top > ul > li > a { color: #1D1D1F; font-size: 0.938vw; font-family: "HYJunhei-85J"; display: block; margin-bottom: 1.042vw; } .footer .foot-top > ul > li > ul > li { margin-bottom: 0.781vw; } .footer .foot-top > ul > li > ul > li:last-child { margin-bottom: 0; } .footer .foot-top > ul > li > ul > li > a { font-size: 0.729vw; display: block; line-height: 1.2; font-family: "HYJunhei-65J"; color: inherit; } .footer .foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.042vw; padding-bottom: 1.042vw; border-bottom: 1px solid #424245; } .footer .foot-left { font-size: 0.729vw; color: #424245; line-height: 1.2; font-family: "HYJunhei-65J"; } .footer .foot-left span { color: #0071E3; } .footer .foot-left a { color: #0071E3; font-family: inherit; } .footer .foot-left a:hover { text-decoration: underline; } .footer .foot-right { display: flex; align-items: center; justify-content: flex-end; } .footer .foot-right .itembox { display: flex; align-items: center; justify-content: flex-start; } .footer .foot-right .item { margin-right: 1.146vw; position: relative; } .footer .foot-right .item:last-child { margin-right: 0; } .footer .foot-right .item:hover .icon img:nth-child(1) { display: none; } .footer .foot-right .item:hover .icon img:nth-child(2) { display: block; } .footer .foot-right .item:hover .qr, .footer .foot-right .item:hover .tel { opacity: 1; visibility: visible; } .footer .foot-right .item .icon { width: 1.458vw; height: 1.458vw; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #EAEAEC; border-radius: 100%; } .footer .foot-right .item .icon img:nth-child(1) { width: 70%; display: block; -webkit-filter: brightness(0); filter: brightness(0); opacity: 0.5; } .footer .foot-right .item .icon img:nth-child(2) { display: none; } .footer .foot-right .item .qr { width: 10.417vw; height: 10.417vw; border-radius: 0.521vw; overflow: hidden; z-index: 2; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1.042vw; padding: 0.521vw; transition: all 0.4s; opacity: 0; visibility: hidden; box-shadow: 0 0 0.521vw -0.26vw rgba(0, 0, 0, 0.5); } .footer .foot-right .item .tel { white-space: nowrap; padding: 0.781vw; background-color: #fff; border-radius: 0.521vw; overflow: hidden; z-index: 2; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1.042vw; transition: all 0.4s; color: #333; font-size: 0.833vw; opacity: 0; visibility: hidden; } .footer .foot-right .foot-tel { display: flex; align-items: center; justify-content: flex-start; padding: 0.521vw 0.729vw; border: 1px solid #898989; border-radius: 0.208vw; overflow: hidden; margin-left: 1.042vw; cursor: pointer; position: relative; } .footer .foot-right .foot-tel:hover .icon img { -webkit-filter: brightness(1); filter: brightness(1); opacity: 1; } .footer .foot-right .foot-tel:hover .text { color: #fff; } .footer .foot-right .foot-tel:hover:after { width: 100%; } .footer .foot-right .foot-tel:after { content: ""; display: block; width: 0; height: 100%; background-color: #000; transition: all 0.4s; position: absolute; left: 0; top: 0; } .footer .foot-right .foot-tel .icon { width: 1.25vw; display: block; flex-shrink: 0; margin-right: 0.313vw; position: relative; z-index: 2; } .footer .foot-right .foot-tel .icon img { transition: all 0.4s; -webkit-filter: brightness(0); filter: brightness(0); opacity: 0.5; } .footer .foot-right .foot-tel .text { font-size: 0.729vw; color: #666666; position: relative; z-index: 2; transition: all 0.4s; font-family: "HYJunhei-85J"; } .footer .foot-right .language { margin-left: 1.563vw; display: flex; align-items: center; justify-content: flex-start; } .footer .foot-right .language .text { font-size: 1.198vw; margin-right: 0.729vw; line-height: 1.1; color: #898989; font-family: "HYJunhei-85J"; } .footer .foot-right .language .icon { width: 2.344vw; display: block; flex-shrink: 0; } .footer .foot-copyright { font-size: 0.729vw; color: #424245; font-family: "HYJunhei-65J"; } .footer .foot-copyright a { color: inherit; font-family: inherit; } .footer .foot-copyright a:hover { text-decoration: underline; } /* ==================== 底部样式 End ==================== */