/*---------------------------------------------------------
  메인 페이지 스타일 정의
  
  !! 주의사항 !!
  모든 경로는 상대경로로 작성되어 있습니다.
  배포 시 절대경로로 재작성을 권장합니다.
  예) ../img/img.jpg -> /assets/img/img/jpg

  !! 주의사항 !!
  본 CSS는 기본 스타일을 제외하고 HTML DOM 구조와 매우 타이트하게 동작하도록 작성되었습니다.
  이는 혹시 모를 하위 엘리먼트에 영향을 끼치는 위험을 제거하기 위함입니다.
  따라서 엘리먼트 계층 구조를 가급적 변경하지 않는 것이 좋습니다.
  변경이 필요한 경우 CSS도 DOM 경로에 맞춰 변경해 주시기 바랍니다.
---------------------------------------------------------*/

/* 메인 히든 메뉴 시작 */
#navMenu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-lac-500);
    color: var(--color-lac-50);
    z-index: 1000;

    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.38rem;
}

#navMenu.show {
    display: flex;
    top: 0;
}

#navMenu>.divClose {
    position: absolute;
    top: 5rem;
    right: 50%;
    transform: translate(50%, 0);

    width: 2.5rem;
    height: 2.5rem;

    background: url("https://cdn.leeartconsulting.com/img/icon_close.svg") no-repeat center center;
    background-size: contain;

    cursor: pointer;
}

#navMenu>.divSymbol {
    width: 2.63519rem;
    height: 3.0625rem;

    background: url("https://cdn.leeartconsulting.com/img/symbol.svg") no-repeat center center;
    background-size: contain;
}

#navMenu>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
}

#navMenu>ul>li {
    text-align: center;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xlarge);
    font-weight: 400;
}

#navMenu>ul>li>a {
    color: var(--color-lac-900);
    text-decoration: none;
}

#navMenu>ul>li>a:hover {
    color: var(--color-lac-600);
}

#navMenu>ul>li>a:active {
    color: var(--color-lac-50);
}

#navMenu>ul>li>a.active {
    color: var(--color-lac-50);
}

#navMenu>ul>li>a:disabled {
    color: var(--color-lac-400);
}

#navMenu>.imgLogo {
    position: absolute;
    bottom: 5.4rem;
    right: 50%;
    transform: translate(50%, 0);
    display: block;

    width: 18.55156rem;
    max-width: 90%;
}

/*-- 메인 히든 메뉴 끝 */


/* 메인 최상위 풀페이지 Wrapper 정의 */
#divMainFullpageWrap {
    position: relative;
    width: 100%;
    height: 100vh;
}


/* 메인 페이지 섹션 및 컨텐츠 기본 스타일 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
    color: var(--color-lac-900);
    background-color: var(--color-lac-50);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain>.divContent {
    position: relative;
    width: 980px;
    max-width: 100%;
    padding: 1.5rem 1.8rem;
}


#divMainFullpageWrap>.divMainWrap>.sectionMain>.divContent>h1 {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxlarge);
    font-weight: 400;
    letter-spacing: -0.09375rem;
    text-align: center;

    padding: 0;
    margin: 0;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain>.divContent>.divBody {
    margin: 4rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
}

/*-- 메인 페이지 기본 스타일 끝 */


/* 최상단 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.top {
    background-image: url("https://cdn.leeartconsulting.com/img/main/bg_top.jpg");
    color: var(--color-lac-50);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.divToggleMenu {
    position: absolute;
    top: 3rem;
    right: 50%;
    transform: translate(50%, 0);

    width: 3.8rem;
    height: 3.8rem;

    background: url("https://cdn.leeartconsulting.com/img/symbol.svg") no-repeat center center;
    background-size: contain;
    background-color: transparent;

    cursor: pointer;
    z-index: 100;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.divToggleMenu:hover::before {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-radius: 5rem;
    background-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 0 4rem 1.4rem rgba(255, 255, 255, 0.32),
        0 0 9rem 2.8rem rgba(255, 255, 255, 0.32),
        0 0 15rem 4.2rem rgba(255, 255, 255, 0.32);
    z-index: 90;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.imgTitle,
#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.imgTitleMobile {
    display: block;
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 1000px;
    max-width: 80%;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.imgTitleMobile {
    display: none;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.top>.divMore {
    position: absolute;
    bottom: 4.31rem;
    right: 50%;
    transform: translate(50%, 0);

    width: 3.5rem;
    height: 5rem;

    font-family: var(--font-family-serif);
    font-size: var(--font-size-large);
    text-align: center;

    padding-bottom: 2.6rem;

    background: url("https://cdn.leeartconsulting.com/img/arrow_bottom.svg") no-repeat center bottom;
    background-size: 90% auto;

    user-select: none;
    cursor: pointer;
}

/*-- 최상단 섹션 끝 */


/* ABOUT 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.about {
    position: relative;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.about>.divContent>.divBody>p {
    flex: 1 1 auto;
    width: 100%;

    text-align: justify;
    font-size: var(--font-size-default);
    font-weight: 500;
    color: var(--color-lac-700);
    line-height: 1.5rem;
    padding: 0;
    margin: 0;
}

/*-- ABOUT 섹션 끝 */


/* SERVICE 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.service {
    background-image: url("https://cdn.leeartconsulting.com/img/main/bg_service.jpg");
    color: var(--color-lac-50);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 4rem;

    margin: 4rem 0 0 0;
    padding: 0;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li {
    position: relative;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.25rem;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead {
    position: relative;
    flex: 0 0 auto;
    width: 19.5625rem;
    padding: 0 0 2.5rem 1.8rem;
    border-bottom: 1px solid var(--color-lac-50);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead>.spanNumber {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxlarge);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead>.spanUnit {
    display: inline-block;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-large);
    font-weight: 500;
    letter-spacing: -0.01725rem;

    position: absolute;
    right: 0.4rem;
    top: 2.4rem;
    width: 6rem;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divDesc>h2 {
    letter-spacing: 0.24rem;
    text-transform: uppercase;
    font-size: var(--font-size-default);
    font-weight: 400;
    margin: 0 0 0.75rem 0;
    padding: 0;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divDesc>p {
    font-size: var(--font-size-default);
    font-weight: 400;
    padding: 0;
    margin: 0;
}

/*-- SERVICE 섹션 끝 */


/* CONTACT 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.contact>.divContent>.divBody {
    align-items: stretch;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.contact>.divContent>.divBody>.divColumn {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2.12rem;
    gap: 1rem;
    flex-direction: column;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.contact>.divContent>button {
    display: block;
    margin: 4.44rem auto 0 auto;
}

/*-- CONTACT 섹션 끝 */


/* LOCATION 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody {
    gap: 3rem;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.ulMap {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;

    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    cursor: pointer;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.ulMap>li.active {
    font-weight: 700;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap {
    flex: 1 1 auto;
    width: 100%;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 0 1.5rem 0;
    padding: 0;
    outline: none;
    border: 1px solid var(--color-lac-100);
    overflow: hidden;
    cursor: pointer;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;

    transition: all .4s linear;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage.seoul {
    background-image: url("https://cdn.leeartconsulting.com/img/main/map_seoul.jpg");
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage.ny {
    background-image: url("https://cdn.leeartconsulting.com/img/main/map_ny.jpg");
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage.gallery {
    background-image: url("https://cdn.leeartconsulting.com/img/main/map_gallery.jpg");
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage:hover {
    background-size: 110% auto;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>h3 {
    color: var(--color-lac-900);
    text-align: center;
    font-size: var(--font-size-default);
    font-weight: 500;
    letter-spacing: 0.24rem;
    text-transform: uppercase;
    margin: 0 0 0.6rem 0;
    padding: 0;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>p {
    color: var(--color-lac-700);
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: 500;
}

/*-- LOCATION 섹션 끝 */


/* FOOTER 섹션 시작 */
#divMainFullpageWrap>.divMainWrap>.sectionMain.footer {
    background-image: url("https://cdn.leeartconsulting.com/img/main/bg_footer.jpg");
    color: var(--color-lac-50);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.imgTitle {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 690px;
    max-width: 75%;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo {
    position: absolute;
    bottom: 4.11rem;
    right: 50%;
    transform: translate(50%, 0);
    width: 1200px;
    max-width: 100%;
    padding: 0 1.8rem;

    font-size: var(--font-size-small);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1.25rem 0 0.75rem 0;
    border-bottom: 1px solid var(--color-lac-50);
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine:last-child {
    border-bottom: none;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulIcon {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulIcon>li {
    width: 3.08594rem;
    position: relative;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulIcon>li>a>img {
    outline: none;
    border: none;
    display: block;
    width: 100%;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulMenu>li>a {
    color: var(--color-lac-50);
    text-decoration: none;
}

#divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulMenu>li>a:hover {
    text-decoration: underline;
}

/*-- FOOTER 섹션 끝 */


/* 가로 800px 이하 화면 정의 */
@media screen and (max-width: 800px) {
    #divMainFullpageWrap>.divMainWrap>.sectionMain>.divContent>.divBody {
        flex-direction: column;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.contact>.divContent>.divBody>.divColumn {
        width: 100%;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.ulMap {
        display: flex;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap {
        display: none;
        width: 100%;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap.active {
        display: block;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine {
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.imgLogo {
        display: none;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.footer>.divInfo>.divLine>.ulMenu {
        gap: 0.8rem;
    }

}


/* 가로 640px 이하 화면 정의 */
@media screen and (max-width: 640px) {
    #divMainFullpageWrap>.divMainWrap>.sectionMain>.divContent>.divBody {
        margin-top: 3rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.top>.imgTitle {
        display: none;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.top>.imgTitleMobile {
        display: block;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul {
        gap: 2rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li {
        gap: 1.25rem;
        flex-direction: column;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        padding: 0 0 1rem 0.8rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead>.spanNumber {
        font-size: var(--font-size-xxlarge);
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divHead>.spanUnit {
        display: inline-block;
        font-family: var(--font-family-serif);
        font-size: var(--font-size-large);
        font-weight: 500;
        letter-spacing: -0.01725rem;

        position: absolute;
        right: 0.4rem;
        top: 1rem;
        width: 6rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.service>.divContent>ul>li>.divDesc>h2 {
        letter-spacing: 0.24rem;
        text-transform: uppercase;
        font-size: var(--font-size-default);
        font-weight: 400;
        margin: 0 0 0.75rem 0;
        padding: 0;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.contact>.divContent>.divBody>.divColumn>.divForm>textarea {
        min-height: 10rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody {
        gap: 2rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage {
        margin-bottom: 1rem;
    }

    #divMainFullpageWrap>.divMainWrap>.sectionMain.location>.divContent>.divBody>.divMap>.divImage {
        margin-bottom: 1rem;
    }
}