footer {padding: 60px 0;}
footer .cont {gap: 3rem;}
footer .cont span {color: #a0a0a0;}
footer .line {width: 100%; height: 1px; background: #e5e5e5;}
footer .address {gap: 6.25rem;}
footer .address span {letter-spacing: -0.125rem;}
footer .bottom p.copy {color: #a0a0a0;}
footer .infor {display: flex; gap: 1rem; justify-content: flex-end;}

@media(max-width:990px) {
    footer .bottom {flex-direction: column;}
    footer .bottom p.copy {text-align: left;}
    footer .infor {justify-content: flex-start; margin-top: 4rem;}
}

@media(max-width:768px) {
    footer {padding: 40px 0;}
    footer .font-16 {font-size: 1.75rem;}
    footer .cont {flex-wrap: wrap; gap: 1.5rem;}
    footer .cont p:first-child {width: 100%; margin-top: 2.5rem;}
    footer .cont p:last-child {width: 100%;}

    footer .address {flex-direction: column; gap: 0.5rem;}
    footer .address br {display: none;}
    footer .address span {letter-spacing: -0.5rem; width: 5.625rem; text-align: justify; display: inline-block; line-height: 0; position: relative; margin-right: 2rem;}
    footer .address span::before,
    footer .address span::after {content: ""; display: inline-block; width: 100%;}

}

@media(max-width:420px) {
    footer .address  {gap: 1rem;}
    footer .address p {line-height: 1.5;}
    footer .address br {display: block;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 3.5%; bottom: 5%; z-index: 10;}
#quick .item {width: 5rem; height: 5rem; text-align: center; background: #fff; margin-top: 1rem; border-radius: 0.625rem; box-shadow: 3px 0 20px rgba(0,0,0,0.15); cursor: pointer;}
#quick .item span {font-size: 0.875rem; font-weight: 600; margin-top: 5px; display: inline-block; color: #fff;}
#quick .item.item01 {background: #000; transition: 0.3s;}
#quick .item.item01 img {filter: brightness(0) invert(1);}
#quick .item.item02 img {filter: grayscale(100%) brightness(1); opacity: 0.8;}
@media(max-width:1024px) {
    #quick .item.item04 { background: #000; }
    #quick .item.item04 img {filter: none; }
}
#quick .item img {transform: scale(0.8);}

#quick .item.item01:hover {background: #fff;}
#quick .item.item01:hover img {filter: none;}
#quick .item.item01:hover span {color: var(--pointcolor);}

#quick .item.item02:hover img {filter: none; opacity: 1;}

#quick .item.item03 {display: none;}

/* 온라인상담신청 버튼 */
#contactBtn {position: fixed; right: -12px; top: 50%; transform: translateY(calc(-50% + 0.5px)); z-index: 21; transition: 0.3s;}
#contactBtn:after {position: absolute; right: 0; top: 50%; transform: translateY(calc(-50% + 0.5px)); width: 12px; height: 100vh; background: var(--pointcolor); content: "";}
#contactBtn a { gap: 1rem; transform: rotate(-90deg) translateY(55px); background: var(--pointcolor); padding: 10px 20px; border-radius: 0.625rem 0.625rem 0 0; cursor: pointer;}
#contactBtn span {font-size: 16px; color: #fff; font-weight: 700;}
#contactBtn img {transform: rotate(90deg); width: 2rem;}

#contactBtn:hover {right: 0;}

@media(max-width:1240px) {
    #quick .item {width: 6rem; height: 6rem;}
    #quick .item img {transform: scale(0.7);}
    #quick .item span {font-size: 1rem;}

    #contactBtn span {font-size: 1.25rem;}
}

@media(max-width:1024px) {
    #contactBtn {right: -15px;}
    #contactBtn a {transform: rotate(-90deg) translateY(45px); }
}

@media(max-width:768px) {
    #quick .item {width: 5.5rem; height: 5.5rem;}
    #quick .item.item03 {display: flex; background: var(--pointcolor);}
    #quick .item span {display: none;}
    #quick .item img {transform: scale(0.7);}
}

/* 해더 */
#header {position: fixed; left: 0; top: 0; width: 100%; height: 100px; background: #fff; z-index: 20;}
#header .wrap {height: 100%;}
#header .header-bar {height: 100%;}
#header .gnb  {gap: 4.5rem; font-size: 17px; font-weight: 600; height: 100%;}
#header .gnb li.depth01 {position: relative; height: 100%;}
#header .gnb li.depth01 > span { height: 100%; display: block; cursor: pointer; display: flex; align-items: center; justify-content: center;}

#header .lnb {position: absolute; left: 50%; top: 100px; transform: translateX(-50%); width: 12.5rem; height: auto; text-align: center; background: #f9f9f9; opacity: 0; visibility: hidden; transition: 0.3s; border-top: 2px solid var(--pointcolor);}
#header .lnb li.depth02 {padding: 0.8rem 2.8rem;}
#header .lnb li.depth02 a {padding: 0.8rem 0; display: block; position: relative; transition: transform 0.3s; margin: auto;}
#header .lnb li.depth02 a span {position: relative; width: fit-content;}
#header .lnb li.depth02 a span:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: "→"; transition: 0.3s; opacity: 0;}

#header .gnb li.depth01:hover .lnb {opacity: 1; visibility: visible;}
#header .lnb li.depth02 a:hover {color: var(--pointcolor); transform: translateX(-8px);}
#header .lnb li.depth02 a:hover span:after {right: -1.5rem; opacity: 1;}

#header .navBtn {gap: 1rem; background: #f5f5f5; padding: 1rem 2rem; border-radius: 100px; transition: 0.3s; cursor: pointer;}
#header .navBtn span {text-transform: uppercase; font-size: 12px;}
#header .navBtn span.close {display: none; width: 12px;}

#header .navBtn:hover {background: var(--pointcolor);}
#header .navBtn:hover span {color: #fff;}
#header .navBtn:hover img {filter: brightness(0) invert(1);}

#header .navBtn.on {background: var(--pointcolor);}
#header .navBtn.on span {color: #fff;}
#header .navBtn.on span.close {display: block; width: 12px;}
#header .navBtn.on img {display: none;}

#mo-header {display: none;}

@media(max-width:990px) {
    #header {height: 80px;}
    #header .logo img {width: 150px;}
    #header .gnb {display: none;}
    #header .moBtn img {width: 55px;}

    html.no-scroll {overflow: hidden;}

    /* 모바일메뉴 */
    #mo-header {display: flex; position: fixed; top: 0; right: -31.25rem; height: 100%; width: 31.25rem; background: var(--pointcolor); z-index: 30; border-radius: 1.25rem 0 0 1.25rem; padding: 8rem 4rem; color: #fff; transition: right 0.8s;}

    #mo-header.on {right: 0;}
    #mo-header a {color: #fff; display: block; font-size: 1.875rem; padding: 1rem 0; position: relative;}
    #mo-header a span {position: relative; width: fit-content;}
    #mo-header a span:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: "→"; transition: 0.3s; opacity: 0;}
    #mo-header a:hover {font-weight: 600;}
    #mo-header a:hover span:after {right: -3rem; opacity: 1;}

    #mo-header > ul {overflow-y: auto; height: 100%; width: 100%;}

    #mo-header li.depth01 {padding: 1.5rem 0; display: block; width: 100%;}
    #mo-header li.depth01 > span {font-size: 3.125rem; font-weight: 600; position: relative; width: 100%; display: block;}
    #mo-header li.depth01 > span:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(0.8); content: url("/img/menu-arrow.png");}
    #mo-header li.depth01.on > span:after {transform: translateY(-50%) scale(0.8) rotate(180deg);}

    #mo-header .lnb { margin-top: 1.5rem;}

    #mo-header .close {position: absolute; right: 4rem; top: 3%; transform: scale(0.8);}

    #mo-header ::-webkit-scrollbar {display: none;}

    #bg-overlay {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 29; opacity: 0; visibility: hidden;}
    #bg-overlay.on {opacity: 1; visibility: visible;}
}

@media(max-width:500px) {
    #header .moBtn img {width: 50px;}
}

@media(max-width:320px) {
    #mo-header {width: 100%; right: -100%;}
}

/* 사이트맵 */
#siteMap {position: fixed; top: -100%; left: 0; width: 100%; height: 100lvh; background: #fff; z-index: 19; transition: 0.8s;}
#siteMap.on {top: 100px;}
#siteMap .container {height: 60lvh;}
#siteMap .cont_wrap  {height: 100%;}
#siteMap li.depth01 {width: calc(100% / 4); padding: 0 3rem; border-right: 1px solid #e9e9e9;}
#siteMap li.depth01:last-child {border: none;}
#siteMap li.depth01 > span {font-size: 2.25rem; font-weight: 600; margin-bottom: 1.5rem; display: block;}
#siteMap a {display: block; font-size: 1.1875rem; color: #444444; padding: 1rem 0; position: relative;}
#siteMap a span {position: relative; width: fit-content;}
#siteMap a span:after {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); content: "→"; transition: 0.3s; opacity: 0; font-weight: 700;}
#siteMap a:hover {color: var(--pointcolor); font-weight: 600;}
#siteMap a:hover span:after {right: -2rem; opacity: 1;}

#siteMap .bottom {font-size: 14px; color: #808080;}
#siteMap .bottom ul {display: flex; gap: 2rem;}

@media(max-width:1580px) {
    #siteMap .tit.width40 {width: 35%;}
    #siteMap .nav.width60 {width: 65%;}
}

@media(max-width:1440px) {
    #siteMap .tit.width40 {width: 30%;}
    #siteMap .nav.width60 {width: 70%;}
    #siteMap .bottom {flex-direction: column; gap: 1rem;}
    #siteMap .bottom ul {width: 100%;}
}

@media(max-width:990px) {
    #siteMap {display: none;}
}

/* 커서커스텀 */
#cursor {position: fixed; z-index: 99; left: 0; top: 0; pointer-events: none; will-change: transform;}

@media (hover: hover) and (pointer: fine) and (max-width:1240px) {
    #cursor .cursor__circle {width: 0; height: 0;  margin-left: -50%; margin-top: -50%;}

    #cursor.arrow .cursor__circle {width: 6.25rem; height: 6.25rem; border-radius: 50%; background-color: var(--pointcolor); }
    #cursor.arrow:after {display: block; content: "SCROLL"; letter-spacing: 0; font-size: 1rem; color:#fff; font-family: var(--pointfont); clear: both; position: absolute; width: fit-content; height: fit-content; top:-20%; left: -27%; text-align: center;}
}

@media (pointer:coarse) {
    #cursor {display: none;}
}