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


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

#businessPage {
    width: 100%;
    overflow: hidden;

    color: #111;

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

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



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

#businessIntro {
    width: 100%;

    padding: 42px 5% 60px;

    background: #fff;
}

#businessIntro .business_inner {
    width: 100%;
    margin: 0 auto;
}



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

#businessIntro .business_title {
    width: 100%;

    text-align: left;
}


#businessIntro .business_title .eng {
    margin: 0 0 14px;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 1.6px;

    color: #777;
}


#businessIntro .business_title h2 {
    margin: 0;

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

    font-size: 24px;
    line-height: 1.5;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: #111;

    word-break: keep-all;
}


#businessIntro .business_title .desc {
    margin: 22px 0 0;

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

    font-size: 13px;
    line-height: 1.85;

    font-weight: 400;

    letter-spacing: -0.2px;

    color: #666;

    word-break: keep-all;
}



/* =========================================================
   BUSINESS CATEGORY
========================================================= */

#businessIntro .business_nav {
    display: grid;

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

    width: 100%;

    margin-top: 42px;

    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}


#businessIntro .business_nav a {
    min-height: 112px;

    display: flex;

    flex-direction: column;

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

    padding: 18px 8px;

    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

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

    color: #111;

    background: #fff;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color .2s,
        color .2s;
}


/* ¸¶Áö¸· ONLINEÀº Àüü Æø */

#businessIntro .business_nav a:last-child {
    grid-column: 1 / -1;

    min-height: 105px;
}


#businessIntro .business_nav a:hover,
#businessIntro .business_nav a:active {
    background: #111;

    color: #fff;
}



/* NUMBER */

#businessIntro .business_icon {
    width: 30px;
    height: 30px;

    display: flex;

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

    margin-bottom: 12px;

    border: 1px solid #ccc;

    border-radius: 50%;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;
    line-height: 1;

    font-weight: 500;

    color: #999;

    transition:
        border-color .2s,
        color .2s;
}


#businessIntro .business_nav a:hover .business_icon,
#businessIntro .business_nav a:active .business_icon {
    border-color: #777;

    color: #aaa;
}



/* CATEGORY NAME */

#businessIntro .business_name {
    min-height: 34px;

    display: flex;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    line-height: 1.45;

    font-weight: 600;

    letter-spacing: .2px;
}



/* =========================================================
   BUSINESS CTA
========================================================= */

#businessIntro .business_cta {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 30px;
}


#businessIntro .business_btn {
    width: 100%;
    height: 50px;

    display: flex;

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

    border: 1px solid #111;

    background: #fff;

    color: #111;

    text-decoration: none;

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

    font-size: 13px;
    line-height: 1;

    font-weight: 500;
}


#businessIntro .business_btn_black {
    background: #111;

    color: #fff;
}



/* =========================================================
   SECTION COMMON
========================================================= */

#businessPage .section {
    width: 100%;
}


#businessPage .sec_inner {
    width: 100%;

    margin: 0 auto;
}



/* =========================================================
   SEC1
========================================================= */

#businessPage .sec1 {
    width: 100%;

    margin: 0;

    background: #fff;

    scroll-margin-top: 80px;
}


#businessPage .sec1 .swiper {
    width: 100%;

    overflow: hidden;
}


#businessPage .sec1 .swiper-wrapper {
    width: 100%;
}


#businessPage .sec1 .swiper-slide {
    position: relative;

    width: 100%;

    background: #fff;
}



/* =========================================================
   SEC1 IMAGE
========================================================= */

#businessPage .sec1 .visual {
    width: 100%;

    overflow: hidden;
}


#businessPage .sec1 .visual img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    padding: 0;
}



/* =========================================================
   SEC1 TEXT
========================================================= */

#businessPage .sec1 .txt_area {
    position: static;

    width: 100%;

    padding: 36px 5% 34px;

    text-align: left;

    background: #fff;
}



/* TEXT ANIMATION */

#businessPage .sec1 .txt_area p,
#businessPage .sec1 .txt_area .more {
    opacity: 0;

    transform: translateY(14px);
}


#businessPage .sec1 .txt_area.act p,
#businessPage .sec1 .txt_area.act .more {
    opacity: 1;

    transform: translateY(0);
}



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

#businessPage .sec1 .txt_area .title {
    margin: 0 0 12px;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 1.1px;

    color: #777;

    transition:
        opacity .45s,
        transform .45s;
}



/* =========================================================
   BIG
========================================================= */

#businessPage .sec1 .txt_area .big {
    margin: 0 0 22px;

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

    font-size: 23px;
    line-height: 1.48;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: #111;

    word-break: keep-all;

    transition:
        opacity .5s .08s,
        transform .5s .08s;
}



/* =========================================================
   SUB
========================================================= */

#businessPage .sec1 .txt_area .sub {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.85;

    font-weight: 400;

    letter-spacing: -0.2px;

    color: #555;

    word-break: keep-all;

    transition:
        opacity .5s .16s,
        transform .5s .16s;
}


#businessPage .sec1 .txt_area .sub_ko,
#businessPage .sec1 .txt_area .sub_en {
    display: block;
}


#businessPage .sec1 .txt_area .sub_en {
    margin-top: 28px;

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

    font-size: 11.5px;
    line-height: 1.8;

    font-weight: 400;

    letter-spacing: 0;

    color: #777;
}



/* =========================================================
   MORE
   ÇöÀç ¹Ì»ç¿ë / ÃßÈÄ ¹Ù·Î »ç¿ë °¡´É
========================================================= */

#businessPage .sec1 .txt_area .more {
    display: inline-flex;

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

    min-width: 125px;
    height: 42px;

    margin-top: 28px;

    padding: 0 30px;

    border: 1px solid #111;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 600;

    color: #111;

    text-decoration: none;

    background: #fff;

    transition:
        opacity .5s .24s,
        transform .5s .24s,
        background-color .2s,
        color .2s;
}


#businessPage .sec1 .txt_area .more:hover,
#businessPage .sec1 .txt_area .more:active {
    background: #111;

    color: #fff;
}



/* =========================================================
   SEC1 SWIPER
   ÇöÀç 1Àå / ÃßÈÄ º¹¼ö ¹è³Ê »ç¿ë °¡´É
========================================================= */

#businessPage .sec1 .swiper-pagination {
    position: absolute;

    left: 50%;
    bottom: 14px;

    width: auto;

    transform: translateX(-50%);

    z-index: 10;
}


#businessPage .sec1 .swiper-pagination-bullet {
    width: 6px;
    height: 6px;

    margin: 0 4px;

    background: #111;

    opacity: .3;
}


#businessPage .sec1 .swiper-pagination-bullet-active {
    opacity: 1;
}


#businessPage .sec1 .swiper_btn_next {
    position: absolute;

    left: 50%;
    bottom: 20px;

    z-index: 11;

    transform: translateX(-50%);

    cursor: pointer;
}


#businessPage .sec1 .swiper_btn_next img {
    display: block;

    width: 18px;
    height: auto;
}


/*
ÇöÀç °¢ SEC1ÀÌ 1ÀåÀ̹ǷÎ
Swiper disabled ¹öÆ°Àº ³ëÃâÇÏÁö ¾ÊÀ½.
ÃßÈÄ À̹ÌÁö°¡ ¿©·¯ ÀåÀ̸é ÀÚµ¿ »ç¿ë °¡´É.
*/

#businessPage .sec1 .swiper-button-disabled {
    display: none;
}



/* =========================================================
   SEC2
========================================================= */

#businessPage .sec2 {
    width: 100%;

    margin: 0 0 90px;

    padding: 8px 0 0;

    overflow: hidden;

    background: #fff;
}


#businessPage .sec2 .sec_inner {
    width: 100%;
}


#businessPage .sec2 .sec2_cont {
    width: 100%;

    overflow: hidden;
}


#businessPage .sec2 .swiper {
    width: 100%;

    overflow: visible;
}



/* =========================================================
   SEC2 ROLLING
========================================================= */

#businessPage .sec2 .swiper-wrapper {
    display: flex;

    align-items: center;

    gap: 18px;

    width: max-content;

    margin: 0;
    padding: 0;

    transition: none !important;

    will-change: transform;
}


#businessPage .sec2 .swiper-slide {
    flex: 0 0 150px;

    width: 150px;

    margin: 0;
    padding: 0;

    list-style: none;
}



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

#businessPage .sec2 .logo_box {
    width: 150px;
    height: 100px;

    display: flex;

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

    overflow: hidden;
}


#businessPage .sec2 .logo_box img {
    display: block;

    width: auto;
    height: auto;

    max-width: 140px;
    max-height: 85px;
}



/* =========================================================
   CAFE SECTION
   SEC2°¡ ÇöÀç ¾øÀ¸¹Ç·Î ´ÙÀ½ ¼½¼Ç°ú ¿©¹é È®º¸
========================================================= */

#businessPage .cafe_section {
    margin-bottom: 90px;
}



/* =========================================================
   IMAGE
========================================================= */

#businessPage img {
    -webkit-user-drag: none;

    user-select: none;
    -webkit-user-select: none;
}
/* BASIC css end */