.social-list{
background-color: #444;
padding-block: 3rem;
color: #fff;
}
.social-list .social ul{
justify-content: center;
margin-top: 1rem;
}
.social-list .social ul li{
transition: all .3s;
}
.social-list .social ul li:hover{
filter: invert(1);
}
.footer-wrapper{
padding-block: 2rem;
background-color: var(--colorFt);
color: #000;
}
.footer-wrapper .logo{
width: fit-content;
max-width: 300px; margin-inline: auto;
}
.main-footer .social-list .section-header{
padding-bottom: 1rem;
}
.footer-nav{
margin-block: 1rem;
}
.footer-nav ul{
justify-content: center;
gap: 3rem;
font-size: 20px;
}
.copyright{
justify-content: center;
gap: 2rem;    
}
.developer{
background-color: var(--colorGold);
padding: 1rem var(--padding);
text-align: center;
}
.bottom-banner{
position: fixed;
bottom: 0;
width: 100%;
height: 90px;
background-color: rgba(255,255,255,0.5);
z-index: 1000;
backdrop-filter: blur(5px);
transition: bottom .3s;
}
.bottom-banner.hide{
bottom: -100vh;
}
.bottom-banner aside{
margin-inline: auto;
width: fit-content;
}
.bottom-banner .mob{display: none;}
.bottom-banner .close-banner{
position: absolute;
width: 2rem;
height: 2rem;
border:1px solid #000;
background-color: #fff;
cursor: pointer;
right: 0;
}
.bottom-banner .close-banner .line{
position: absolute;
width: 80%;
border-top:1px solid #000;
left: 10%;
top: 50%;
transform: rotate(45deg);
}
.bottom-banner .close-banner .line:last-of-type{
transform: rotate(-45deg);
}
@media screen and (max-width: 1120px) {
.footer-nav ul{
gap: 2rem;
font-size: 18px;
}
}
@media screen and (max-width: 820px) {
.footer-nav ul{
gap: 1rem;
font-size: 16px;
}
.bottom-banner .close-banner{
width: 1.5rem;
height: 1.5rem;
}
}
@media screen and (max-width: 760px) {
.bottom-banner{
height: 60px;
}
.bottom-banner .desk{display: none;}
.bottom-banner .mob{display: block;}
}
@media screen and (max-width: 640px) {
.footer-wrapper .logo{
width: 250px;
}
.footer-nav ul{
flex-wrap: wrap;
max-width: 350px;
margin-inline: auto;
font-size: 14px;
}
.footer-nav ul li{
width: calc((100% - 2rem) / 3);
text-align: center;
}
.home .developer{
padding-bottom: 100px;
}
}
@media screen and (max-width: 520px) {
.copyright{
font-size: 12px;
gap: 1rem;
}
}
@media screen and (max-width: 480px) {
.social-list{
padding-bottom: 2rem;
}
}
@media screen and (max-width: 380px) {
.footer-wrapper{
padding-block: 2rem;
}
.footer-nav ul li{
width: calc((100% - 1rem) / 2);
}
.developer span{
display: block;
}
}