/* BASIC css start */
/* =========================================================
   2026 TAVALON MOBILE
   CONTACT
========================================================= */


/* =========================================================
   PAGE
========================================================= */

#contactPage{
    width:100%;
    padding:48px 5% 80px;
    box-sizing:border-box;

    color:#111;

    font-family:'Noto Sans KR', sans-serif;
}

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

#contactPage .contact_inner{
    width:100%;
    margin:0 auto;
}

/* =========================================================
   PAGE TITLE
========================================================= */

#contactPage .page_title{
    width:100%;
    padding:0px 0 44px;
    margin:0;

    text-align:left;
}

#contactPage .page_title .eng{
    margin:0 0 12px;

    font-family:'Montserrat', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;

    letter-spacing:1.8px;

    color:#777;
}

#contactPage .page_title h2{
    margin:0;

    font-family:'Noto Sans KR', sans-serif;
    font-size:24px;
    line-height:1.4;
    font-weight:600;

    letter-spacing:-0.5px;

    color:#111;
}

#contactPage .page_title .desc{
    margin:16px 0 0;

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

    letter-spacing:-0.2px;

    color:#777;
}


/* =========================================================
   CONTACT LIST
========================================================= */

#contactPage .contact_list{
    width:100%;

    border-top:1px solid #111;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

#contactPage .contact_item{
    width:100%;

    padding:32px 0 36px;

    border-bottom:1px solid #ddd;
}


/* =========================================================
   ITEM HEAD
========================================================= */

#contactPage .item_head{
    display:flex;
    align-items:flex-start;

    width:100%;

    margin-bottom:24px;
}


/* =========================================================
   NUMBER
========================================================= */

#contactPage .item_num{
    flex:0 0 42px;

    padding-top:3px;

    font-family:'Montserrat', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;

    letter-spacing:0.4px;

    color:#999;
}


/* =========================================================
   TITLE
========================================================= */

#contactPage .item_title{
    flex:1;
    min-width:0;
}

#contactPage .item_title .eng{
    margin:0 0 9px;

    font-family:'Montserrat', sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:600;

    letter-spacing:1.4px;

    color:#888;
}

#contactPage .item_title h3{
    margin:0;

    font-family:'Noto Sans KR', sans-serif;
    font-size:21px;
    line-height:1.35;
    font-weight:600;

    letter-spacing:-0.4px;

    color:#111;
}


/* =========================================================
   CONTENT
========================================================= */

#contactPage .item_content{
    width:100%;

    padding-left:42px;
}

#contactPage .item_desc{
    margin:0 0 24px;

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

    letter-spacing:-0.2px;

    color:#666;
}


/* =========================================================
   BUTTON AREA
========================================================= */

#contactPage .btn_area{
    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:8px;

    width:100%;
}

#contactPage .btn_area.btn_three{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}


/* =========================================================
   BUTTON
========================================================= */

#contactPage .contact_btn{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:48px;

    padding:0 5px;

    border:1px solid #111;

    background:#111;

    color:#fff;

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

    letter-spacing:-0.2px;

    text-align:center;
    text-decoration:none;

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


/* =========================================================
   CUSTOMER SERVICE
========================================================= */

#contactPage .cs_info{
    width:100%;

    border-top:1px solid #ddd;
}

#contactPage .cs_info dl{
    display:flex;

    align-items:center;

    width:100%;
    min-height:46px;

    margin:0;

    border-bottom:1px solid #eee;
}

#contactPage .cs_info dt{
    flex:0 0 82px;

    margin:0;

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

    color:#777;
}

#contactPage .cs_info dd{
    flex:1;

    margin:0;

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

    color:#222;
}

#contactPage .cs_info dd a{
    color:#222;
    text-decoration:none;
}


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

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

    #contactPage{
        padding-left:20px;
        padding-right:20px;
    }

    #contactPage .page_title h2{
        font-size:23px;
    }

    #contactPage .item_num{
        flex-basis:38px;
    }

    #contactPage .item_content{
        padding-left:38px;
    }

    #contactPage .btn_area{
        gap:6px;
    }

    #contactPage .contact_btn{
        font-size:11px;
    }

}
/* BASIC css end */