/**
 * ============================================================================
 * LG Web Manual - Main Page Styles (main_h.css)
 * ============================================================================
 * main.html 전용 스타일시트
 * - 메인 페이지 레이아웃
 * - 메인 배너/커버 이미지
 * - 버튼 메뉴 (카테고리 그리드)
 * - 네비게이션 텍스트
 * ============================================================================
 */

/* ============================================================================
   Main Page Basic Reset
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
}

html {
    background-color: white;
}

body {
    margin: 0px;
    background-color: #fff;
    width: 100%;
    position: relative;
    padding-bottom: 0px;
}

/* 메인 페이지에서는 이전/다음 버튼 숨김 */
#prevBtn, #nextBtn {
    display: none;
}

/* ============================================================================
   Main Content Container
   ============================================================================ */
.content {
    padding-top: 0px;
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================================
   Main Banner / Cover Image
   ============================================================================ */
.content #mainCar {
    position: relative;
    font-size: 0px;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-image: url('../image/cover-image.jpg');
}

.content #mainCarBlock {
    height: 420px;
}

#mainCarPhone {
    display: none;
}

/* ============================================================================
   Navigation Text (Banner Text)
   ============================================================================ */
.content #naviText {
    margin: auto;
    color: #ffffff;
    font-family: "LG Smart Bold", sans-serif !important;
}

.content #naviText span {
    font-size: 60px;
    display: block;
    margin: auto;
    text-align: center;
    padding-top: 1.5in;
}

.content #naviTextCaption,
.content #naviTextCaption1,
.content #naviTextCaption2 {
    margin: auto;
    color: #ffffff;
    font-family: "LG Smart Regular", sans-serif !important;
}

.content #naviTextCaption span,
.content #naviTextCaption1 span,
.content #naviTextCaption2 span {
    padding-top: 0.2in;
    width: 80%;
    display: block;
    margin: auto;
    text-align: center;
    font-size: 16pt;
    color: #000000;
}

.content #naviTextCaption2 span {
    padding-bottom: 0.2in;
}

/* ============================================================================
   Car Name Logo
   ============================================================================ */
.content #carName {
    font-size: 0px;
    position: absolute;
    top: 610px;
    left: 60px;
}

.content #carName img {
    width: 180px;
}

/* ============================================================================
   Button Menu (Category Grid)
   ============================================================================ */
.content #buttonMenu {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 75%;
    margin-top: -125px;
    margin-right: auto;
    margin-left: auto;
    z-index: 10;
}

.content #buttonMenu > a {
    flex: 0 0 auto;
    width: 25%;
    height: 250px;
    text-decoration: none;
}

.content #buttonMenu > a > div {
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: var(--border-radius, 10px);
    width: 93%;
    height: 93%;
    background-repeat: no-repeat;
    background-position: 50% 40%;
    text-align: center;
    color: #000000;
    background-size: 50px;
    font-family: "LG Smart Regular", sans-serif !important;
}

.content #buttonMenu > a > div:hover {
    background-color: var(--color-primary, #af1947);
    color: #ffffff;
    border: 3px solid #ffffff;
}

.content #buttonMenu > a > div > span {
    position: relative;
    top: 55%;
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    text-transform: capitalize;
    margin-top: 10px;
}


/* ============================================================================
   Bottom Text
   ============================================================================ */
.content #bottomText {
    clear: left;
    margin: auto;
    padding-top: 15px;
    padding-left: 60px;
    color: #ffffff;
    font-family: 'LG Smart Light', sans-serif !important;
    font-size: 14px;
}

.content #bottomText > p {
    width: 100%;
    font-family: 'LG Smart Light', sans-serif !important;
    color: #ffffff;
    font-size: 14px;
}

/* Font Change Div (Hidden) */
.fontChangeDiv {
    position: absolute;
    top: -25px;
    left: 5%;
    display: none;
}

/* ============================================================================
   Responsive Design - Medium (800px ~ 1280px)
   ============================================================================ */
@media screen and (min-width: 800px) and (max-width: 1280px) {
    .content #buttonMenu {
        width: 90%;
    }
}

/* ============================================================================
   Responsive Design - Tablet (max-width: 800px)
   ============================================================================ */
@media screen and (max-width: 800px) {
    .content #buttonMenu {
        width: 92%;
        top: -40px;
    }

    .content #naviText span {
        font-size: 45px;
    }

    .content #naviTextCaption span,
    .content #naviTextCaption1 span,
    .content #naviTextCaption2 span {
        padding-top: 0.2in;
        width: 80%;
        font-size: 14pt;
        display: block;
        margin: auto;
        text-align: center;
    }
}

/* ============================================================================
   Responsive Design - Mobile (max-width: 640px)
   ============================================================================ */
@media screen and (max-width: 640px) {
    .content #mainCar {
        height: 600px;
    }
}

/* ============================================================================
   Responsive Design - Small Mobile (max-width: 480px)
   ============================================================================ */
@media screen and (max-width: 480px) {
    .content {
        padding-top: 0px;
        margin: 0;
    }

    .content #mainCar {
        height: 500px;
        margin-top: 0px;
    }

    .content #carName {
        top: 40px;
        left: 35px;
    }

    .content #carName img {
        font-size: 0px;
        position: absolute;
        top: 160px;
        left: -15px;
    }

    .content #buttonMenu {
        position: relative;
        top: 0px;
    }

    .content #buttonMenu > a > div {
        background-size: 44px !important;
        height: 85%;
        background-position: 50% 30%;
    }

    .content #buttonMenu > a {
        height: 190px !important;
        width: 33.333333%;
    }

    .content #buttonMenu > a > div > span {
        font-size: 12px;
        top: 48%;
        line-height: 130%;
        width: 85%;
        display: -webkit-box;
        word-wrap: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content #bottomText > p {
        font-size: 12px;
    }

    .content #naviText {
        bottom: 12%;
    }

    .content #naviText span {
        font-size: 36px;
    }

    .content #bottomText {
        clear: left;
        width: 93%;
        margin: auto;
        padding-top: 5px;
        padding-left: 20px;
        color: #ffffff;
        font-family: 'LG Smart Light', sans-serif !important;
        font-size: 14px;
    }

    .content #naviTextCaption span,
    .content #naviTextCaption1 span,
    .content #naviTextCaption2 span {
        padding-top: 0.2in;
        width: 80%;
        font-size: 13pt;
        display: block;
        margin: auto;
        text-align: center;
    }

    .content #naviTextCaption {
        padding: 0 15px;
    }

    .content #naviTextCaption span {
        padding-top: 0.1in;
    }
}

/* ============================================================================
   Responsive Design - Extra Small (max-width: 320px)
   ============================================================================ */
@media screen and (max-width: 320px) {
    .content {
        padding-top: 0px;
    }

    .content #naviTextCaption span,
    .content #naviTextCaption1 span,
    .content #naviTextCaption2 span {
        padding-top: 0.2in;
        width: 80%;
        font-size: 11pt;
        display: block;
        margin: auto;
        text-align: center;
    }
}