/* Header */
.s_logo_section {  
    width: 100%;
    max-height: 100px;
    height: 100%;
    background: fixed;
    background-color: var(--wh-color);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.15);
}

.s_logo_img {
    display: flex;
    justify-content: left;
    padding: 20px 30px;
    width: 100%;
    max-width: 300px;
}
.l_logo_main:hover .s_logo_img {
    opacity: 75%;
}
/* Footer */
.l_footer {
    background-color: var(--main-color);
    color: var(--wh-color);
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0px;
}
.l_footer_box {
    max-width: 85%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}
.l_footer_left {
    border-right: 2px solid var(--wh-color);
}
.l_f_address, .l_email {
    font-size: 1em;
    margin-top: 20px;
    letter-spacing: 10%;
}
.l_contact {
    font-size: .8em;
}
.l_email {
    
    margin-top: 15px;
    letter-spacing: 10%;
}
.l_email_link {
    color: var(--wh-color);
    text-decoration: underline;
}
.l_footer_right {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- LOGO BUTTON --- */
.l_btn_label {
    font-size: 1em;
}
.l_hover_logo_btn {
   display: none;
}
.l_btn:hover .l_hover_logo_btn{
    display: flex;
}
.l_btn:hover .l_logo_btn{
    display: none;
}
.l_footer_sns {
    display: flex;
    gap: 20px;
}
.f_sns {
    height: 40px;
    width: 40px;
}
/* ---BUTTON BASE --- */
.l_btn {
    width: 80%;
    display: inline-block; /* Or flex */
    position: relative;    /* This is the "anchor" for the white slide */
    text-decoration: none;
    z-index: 1;
}
.l_logo_btn, .l_hover_logo_btn {
    width: 50px;  
    height: 50px; 
    z-index: 9;
    position: relative;
}
.l_btn_container  {
    display: block;
    position: relative;
    transition: color .1s cubic-bezier(0.42, 0, 0.58, 1);
    padding: 30px 15px; 
    border-radius: 20px;
    border: 2px solid var(--wh-color);
    z-index: 1;
    overflow: hidden; 
    color: var(--wh-color);
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.l_btn:after {
    content: "";
    position: absolute;
    z-index: -1;           
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: var(--wh-color); 
    transition: all 0.3s ease;
    border-radius: 20px;

}
.l_btn_container:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bk-color); 
    background-clip: padding-box;
    border: 2px solid  rgba(255,255,255, 0);
    
}
.l_btn:hover:after {
    left: 0;
    width: 100%;
}
.l_btn:hover .c_btn_svg {
    background-color: var(--wh-color);
}
.l_btn :active {
    top: 2px;
}
.s_chevron_footer {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wh-color);
    flex-shrink: 0;
}
.footer_css_chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--main-color); 
    border-left: 2px solid var(--main-color);
    transform: translateX(-1px) rotate(135deg); /* Pointing Right */
}
.l_btn:hover .s_chevron_footer{
    background-color: var(--main-color) !important; 
}
.l_btn:hover .footer_css_chevron{
    border-color: var(--wh-color) !important; 
}
@media (max-width: 769px) {
    .l_logo_btn, .l_hover_logo_btn  {
        width: 35px;
        height: 35px;
    }
    .l_btn_label, .l_f_address, .l_email {
        font-size: 1.1em;
    }
    .l_footer_right {
        justify-content: end;
    }
    .l_btn {
        width: 85%;
    }
    .s_chevron_footer {
        width: 25px;
        height: 25px
        }
    .footer_css_chevron {
        width: 10px;
        height: 10px;
        }
        
    .l_btn_container {
            padding: 0px 15px;
            min-height: 80px;
        }
    .l_footer_sns {
            gap: 10px;
        }
    .f_sns {
            width: 25px;
            height: 25px;
        }
    }
@media (max-width: 696px) {
    .l_footer { 
        height: 370px;
    }
    .l_footer_box {
        max-width: 70%;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        gap: 25px;
    }
    .l_footer_sns {
        justify-content: center;
        align-items: center;
    }
    .l_footer_right {
        justify-content: center;
        width: 100%;
    }
    .l_footer_left {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0px;
        border-right: none;
    }
    .l_btn {
        width: 100%;
    }
    .l_logo_btn, .l_hover_logo_btn {
        width: 50px;
        height: 50px;
    }
    .f_sns_twitter  {
        width: 30px;
        height: 30px;
    }
    .f_sns_insta, .f_sns {
        width: 30px;
        height: 30px;
    }
    .f_sns_note  {
        width: 30px;
        height: 30px;
    }
    .l_btn_container {
            padding: 10px 15px;
    }
    .l_btn_label {
        font-size: clamp(1rem, 4vw, 1.8em);
    }
    .l_f_address {
        font-size: clamp(1rem, 3.4vw, 1.6em);
    }
    .l_email {
        font-size: clamp(1rem, 2.8vw, 1.1em);
    }
    .l_contact {
        font-size: clamp(1rem, 3vw, 1em);
    }

}
@media (max-width: 500px) {
   
    
}