.foot-menu { display: flex; justify-content: space-evenly; margin: 0 auto; } #foot-menu * { -webkit-font-smoothing: auto; } .foot-menu a { display: flex; flex-direction: column; color: rgba(0,0,0,0.9); align-items: center; } .foot-menu i { font-size: 1.6rem; } .foot-menu span { margin-top: .3rem; font-size: .9rem; } .footer-desc { margin-top: 1.5rem; border-bottom: 1px solid rgb(204, 204, 204); padding: .5rem 0; } .footer-desc b { color: rgba(0,0,0,0.9); font-size: 1rem; } .footer-desc p { color: rgba(0,0,0,.7); font-size: .9rem; padding: 1rem 0; line-height: normal; } .footer-link { display: flex; flex-direction: column; } .footer-link a { font-size: 1rem; padding: 1rem 0; border-bottom: 1px solid rgb(204, 204, 204); } .footer-link span { color: rgba(0,0,0,.5); } .contact-link { padding: 1rem 0 2.5rem; border-bottom: 1px solid rgb(204, 204, 204); display: flex; align-items: center; justify-content: center; } .contact-link img { max-width: 2rem; margin: 0 1rem; } .contact-link i { font-size: 1.6rem; margin: 0 1rem; } .line-container { width: 100%; height: 1px; background-color: #aca4a4; margin: 2rem 0; } html[data-night='night'] .line-container { background-color: #444444; } html[data-night='night'] .foot-menu a { color: #fff; } html[data-night='night'] .footer-desc b { color: #fff; } html[data-night='night'] .footer-desc p { color: rgba(255,255,255,.7); } html[data-night='night'] .footer-link span { color: rgba(255,255,255,.5); } html[data-night='night'] .footer-link a { border-bottom: 1px solid rgb(68, 68, 68); } html[data-night='night'] .footer-desc { border-bottom: 1px solid rgb(68, 68, 68); } html[data-night='night'] .contact-link { border-bottom: 1px solid rgb(68, 68, 68); } @media(max-width: 767px) { .footer-desc b { font-size: 1.2rem } .footer-desc p { padding: .5rem 0; } .contact-link img { max-width: 2.25rem; } .contact-link i { margin: 0 .8rem; } } #foot-menu .fixed-to-right { background-color: #000; width: 3.5rem; position: fixed; height: 13rem; right: 0; top: 60%; z-index: 995; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; display: flex; flex-direction: column; justify-content: space-around; align-items: center; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #foot-menu .fixed-to-right .right-item { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: .8rem; } #foot-menu .fixed-to-right img { width: 2rem; margin-bottom: .2rem; } #foot-menu .fixed-to-bottom { background-color: rgb(34,34,34); width: 100%; position: fixed; min-height: 11rem; bottom: 0; left: 0; z-index: 999; border-top-left-radius: 1rem; border-top-right-radius: 1rem; --webkit-transform: translateZ(0); } #foot-menu .fixed-to-bottom .bottom-item { display: none; } #foot-menu .fixed-to-bottom .title { text-align: center; padding: 1rem; position: relative; } #foot-menu .fixed-to-bottom .title span { color: #fff; font-size: 1rem; } #foot-menu .fixed-to-bottom .title img { width: 1.5rem; cursor: pointer; position: absolute; right: 1rem; } #foot-menu .bottom-content { margin: 0 auto; max-width: 980px; max-height: 60vh; overflow-y: scroll; } #foot-menu .bottom-content.row { display: flex; flex-direction: row; } #foot-menu .bottom-content .item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 1rem; } #foot-menu .bottom-content.row .item a { display: flex; flex-direction: column; justify-content: center; align-items: center; color: currentcolor; } #foot-menu .bottom-content .item.post { align-items: normal; } #foot-menu .bottom-content .item.post p { text-align: center; } #foot-menu .bottom-content .item img.icon { margin-bottom: .5rem; width: 3rem; } #foot-menu .bottom-content .item img.thumb { max-width: 100%; border-radius: .5rem; margin-bottom: .5rem; width: 100%; height: 230px; object-fit: cover; } #foot-menu .bottom-content .item.post span { color: #fff; } @media (max-width: 768px) { #foot-menu .bottom-content .item img.thumb { height: 170px; } } #foot-menu .mask { position: fixed; width: 100%; height: 100%; background: #000; top: 0; left: 0; z-index: 998; opacity: 0.5; } #fixed-bottom { display: none; }