/* footer & header styles */
.header{ position: fixed; left: 0; top: 0; z-index: 995; width: 100%; }
.header .logo{ display: inline-block; padding: 25px 0; box-sizing: border-box; }

@media screen and (max-width: 1280px){
    .header .logo img{ width: 70px; }
}

@media screen and (max-width: 820px){
    .header .logo{ padding: 15px 0; }
    .header .logo img{ width: 50px; }
}

@media screen and (max-width: 400px){
    /* .header{ display: none; } */
}

.shareicon{ position: fixed; bottom: 36px; right: 2.5%; z-index: 999; display: flex; flex-direction: column; gap: 10px; font-family: 'FightingGyeongnam'; font-size: 16px; cursor: pointer; color: #252525; letter-spacing: -0.04em; justify-content: center; align-items: center;box-sizing: border-box; }
.shareicon.top{ right: auto; left: 2.5%; }
.shareicon .icon{ width: 54px; height: 54px; border-radius: 50%; border: 1px solid #000; background-color: #fff; text-align: center; font-size: 20px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.shareicon .icon > div{
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
    background-color: #ff5858;
    color: #fff;
}

@media screen and (min-width: 821px){
    .shareicon .icon > div:hover{ background-color: #000; }
}

@media screen and (max-width: 1440px) {
    .shareicon {
        bottom: 24px;
    }

    
}

@media screen and (max-width: 1280px) {
    .shareicon{ font-size: 12px; gap: 5px; }
    .shareicon .icon{ width: 40px; height: 40px; font-size: 14px; }
}

@media screen and (max-width: 820px){
    .shareicon .icon{ width: 35px; height: 35px; }
}

@media screen and (max-width: 500px){
    .shareicon{ right: 5%; top: auto; bottom: 30px; }

    .shareicon.top{ left: 5%; }
}