/* BASIC css start */
/* =========================================================
   TAVALON MOBILE FOOTER
========================================================= */

#footer{
    width: 100%;
    min-width: 320px;
    max-width: 850px;
    margin: 50px auto 0;
    padding: 60px 0 40px;
    background: #f6f6f6;
    box-sizing: border-box;
}

#footer *{
    box-sizing: border-box;
}

#footer ul,
#footer li{
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer a{
    text-decoration: none;
}

#footer button{
    font-family: inherit;
}

#footer .foot_inner{
    padding: 0 5%;
}


/* =========================================================
   TOP CONTENT POSITION
   로고 / 설명 / 회원버튼 / 고객센터 오른쪽 이동
========================================================= */

#footer .f_logo,
#footer .f_cont,
#footer .footer_member_btn,
#footer .footer_cs{
    margin-left: 22px;
}


/* =========================================================
   LOGO
========================================================= */

#footer .f_logo{
    margin-bottom: 15px;
}

#footer .f_logo img{
    display: block;
    width: auto;
    max-width: 125px;
}


/* =========================================================
   INTRO
========================================================= */

#footer .f_cont{
    margin-top: 0;
    margin-bottom: 20px;

    color: #333;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   LOGIN / JOIN BUTTON
========================================================= */

#footer .footer_member_btn{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 45px;
}

#footer .footer_member_btn .joinnow{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;
    padding: 0 17px;

    background: #222;
    border: 1px solid #222;

    color: #fff;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}


/* =========================================================
   CUSTOMER CENTER
========================================================= */

#footer .footer_cs{
    margin-bottom: 45px;
}

#footer .footer_cs h5{
    margin: 0 0 7px;

    color: #222;

    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   MAKESHOP CS
========================================================= */

#footer .footer_cs .cs{
    margin-bottom: 15px;
}

#footer .footer_cs .cs li{
    color: #777;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   CS TIME
========================================================= */

#footer .cs_time{
    margin: 15px 0 18px;
}

#footer .cs_time p{
    margin: 0 0 4px;

    color: #555;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

#footer .cs_time p:last-child{
    margin-bottom: 0;
}


/* =========================================================
   BANK
========================================================= */

#footer .bank{
    margin-top: 15px;
}

#footer .bank li{
    color: #777;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   ACCORDION
========================================================= */

#footer .footer_accordion{
    width: 100%;

    border-top: 1px solid #d9d9d9;
}


/* ACCORDION ITEM */

#footer .footer_accordion_item{
    width: 100%;

    border-bottom: 1px solid #d9d9d9;
}


/* =========================================================
   ACCORDION BUTTON
   왼쪽 제목 22px / 오른쪽 화살표 22px
========================================================= */

#footer .footer_accordion_btn{
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 62px;

    margin: 0;
    padding: 0 22px;

    border: 0;
    background: transparent;

    color: #222;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 600;

    text-align: left;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ACCORDION ARROW
========================================================= */

#footer .acc_icon{
    position: relative;

    display: block;
    flex-shrink: 0;

    width: 14px;
    height: 14px;

    transition: transform .3s ease;
}

#footer .acc_icon::before{
    content: "";

    position: absolute;
    top: 5px;
    left: 1px;

    width: 8px;
    height: 1.5px;

    background: #222;

    transform: rotate(45deg);
}

#footer .acc_icon::after{
    content: "";

    position: absolute;
    top: 5px;
    right: 0;

    width: 8px;
    height: 1.5px;

    background: #222;

    transform: rotate(-45deg);
}


/* 열린 상태 */

#footer .footer_accordion_btn.active .acc_icon{
    transform: rotate(180deg);
}


/* =========================================================
   ACCORDION CONTENT
   펼쳤을 때 내용도 왼쪽/오른쪽 22px
========================================================= */

#footer .footer_accordion_cont{
    display: none;

    padding: 0 22px 25px;
}


/* 일반 메뉴 */

#footer .footer_accordion_cont > ul:not(.f_info){
    padding-top: 2px;
}

#footer .footer_accordion_cont > ul:not(.f_info) li{
    margin-bottom: 13px;
}

#footer .footer_accordion_cont > ul:not(.f_info) li:last-child{
    margin-bottom: 0;
}

#footer .footer_accordion_cont > ul:not(.f_info) li a{
    display: inline-block;

    color: #777;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

#footer .footer_accordion_cont > ul:not(.f_info) li a:active{
    color: #222;
}


/* =========================================================
   COMPANY INFO
========================================================= */

#footer .company_item .footer_accordion_cont{
    padding: 0 22px 30px;
}

#footer .f_info{
    width: 100%;
}

#footer .f_info li{
    display: flex;
    align-items: flex-start;

    width: 100%;

    margin-bottom: 9px;

    color: #777;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
}

#footer .f_info li:last-child{
    margin-bottom: 0;
}


/* 회사정보 왼쪽 제목 */

#footer .f_info .info_title{
    flex: 0 0 105px;

    padding-right: 10px;

    color: #777;
}


/* 회사정보 오른쪽 내용 */

#footer .f_info .info_cont{
    flex: 1;

    min-width: 0;

    color: #777;

    word-break: keep-all;
}


/* 사업자 정보 확인 */

#footer .f_info .company_check{
    display: inline-block;

    margin-left: 4px;

    color: #444;

    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

#footer .foot_bottom{
    margin-top: 45px;
}

#footer .foot_bottom .foot_inner{
    padding: 0 5%;
}


/* =========================================================
   FOOTER MENU
========================================================= */

#footer .f_menu{
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px 16px;
}

#footer .f_menu li{
    position: relative;
}

#footer .f_menu li a{
    color: #777;

    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}


/* 메뉴 구분선 */

#footer .f_menu li:not(:last-child)::after{
    content: "";

    position: absolute;
    top: 50%;
    right: -8px;

    width: 1px;
    height: 9px;

    background: #ccc;

    transform: translateY(-50%);
}


/* =========================================================
   COPYRIGHT
========================================================= */

#footer .copyright{
    margin: 22px 0 0;

    color: #999;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 360px){

    #footer{
        padding-top: 50px;
    }

    #footer .foot_inner{
        padding-left: 5%;
        padding-right: 5%;
    }

    #footer .foot_bottom .foot_inner{
        padding-left: 5%;
        padding-right: 5%;
    }

    #footer .footer_accordion_btn{
        height: 58px;
        font-size: 14px;

        padding-left: 22px;
        padding-right: 22px;
    }

    #footer .footer_accordion_cont{
        padding-left: 22px;
        padding-right: 22px;
    }

    #footer .company_item .footer_accordion_cont{
        padding-left: 22px;
        padding-right: 22px;
    }

    #footer .f_info .info_title{
        flex-basis: 95px;
    }

}
/* BASIC css end */