html.no-scroll {overflow: hidden;}

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

@media (hover: hover) and (pointer: fine) {
#cursor  .cursor__circle {width: 1rem; height: 1rem; background: rgba(88,53,145,0.2); border-radius: 50%;  transition: 0.45s; margin-top: -50%; margin-left: -50%;}
#cursor.hover .cursor__circle{ width: 3.5rem; height: 3.5rem;}
}

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

/* 해더 */
#header {position: fixed; left: 0; top: 0; width: 100%; z-index: 10;}
#header .wrap {width: 90%; margin: auto; gap: 1.5rem;}

#header .logo {width: 9.5rem;}

#header .gnb {display: flex; justify-content: center; color: #fff; gap: 3.5rem;}
#header .gnb .point-font { letter-spacing: 0.5px;}
#header .gnb > li {padding: 2.5rem 0; position: relative;}
#header .gnb li span {cursor: pointer;}

#header .gnb .login {display: none;}

#header .lnb {display: block; position: absolute; left: 50%; top: 6.5rem; transform: translateX(-50%); width: 15rem; background: #fff; border-radius: 0 0 0.625rem 0.625rem; text-align: center; padding: 1rem; border-top: 2px solid var(--pointcolor); opacity: 0; visibility:hidden; transition: 0.45s;} 
#header .lnb.on {opacity: 1; visibility: visible;}
#header .lnb li {padding: 1rem 0;}

#header .login {display: flex; gap: 1.5rem;}
#header .login li {width: 3rem; height: 3rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: inset 5px 5px 7px rgba(0,0,0,0.15);}
#header .login li:nth-child(1) {background: #a5a5a5;}
#header .login li:nth-child(2) {background: var(--pointcolor);}
#header .login li a {display: flex; justify-content: center; align-items: center;}

#header .menu {display: none;}

#header.on {background: #fff; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#header.on .logo img {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}
#header.on .gnb {color: #000;}
#header.on .gnb a {color: #000;}

@media(min-width:1241px) {
    #header:hover {background: #fff; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
    #header:hover .logo img {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}
    #header:hover .gnb {color: #000;}
    #header:hover .gnb a {color: #000;}
}

@media(max-width:1680px) {
    #header .wrap {width: 95%;}
    #header .gnb {gap: 2.5rem;}
    #header .login  {gap: 1rem;}
}

@media(max-width:1440px) {
    #header .gnb {gap: 2rem;}
}


@media(max-width:1240px) {
    #header .wrap {padding: 1.5rem 0; width: 90%;}
    #header .logo {width: 193px}

    #header .gnb {position: absolute; left: 100%; top: 6rem; display: block; background: #fff; color: #000; height: calc(100vh - 5rem); width: 100%; overflow-y: auto; padding: 2.5rem 0; transition: left 0.45s; opacity: 0; visibility: hidden;}
    #header .gnb.on {left: 0; opacity: 1; visibility: visible;}
    #header .gnb > li {padding: 0; font-size: 3rem; font-weight: 600;} 
    #header .gnb > li span {width: 100%; display: block; padding: 1.5rem 10%;}
    #header .gnb .login {display: flex; padding: 6.25rem 10%;}

    #header .lnb {position: initial; opacity: 1; visibility: visible; transition: none; width: 100%; transform: none; text-align: left; background: rgba(88,53,145,0.08); border-radius: 0; padding: 1rem 0;}
    #header .lnb li {padding: 1rem 10%; font-size: 2.625rem; font-weight: 500;}
    #header .lnb li a {width: 100%; display: block;}

    #header .menu {display: grid; grid-template-rows: repeat(2, 16px); grid-template-columns: repeat(2, 1fr); gap: 3px; width: 35px; position: relative; transition: 0.3s; position: relative;}
    #header .menu div {width: 16px; height: 16px; background: #fff; border-radius: 2px; transition: 0.3s;}
    #header.on .menu div {background: #393939;}
    
    #header .menu.on {transform: rotate(45deg);}
    #header .menu.on:after ,
    #header .menu.on:before {position: absolute; left: 50%; top: 50%; width: 3px; height: 35px; background: #393939; content: ""; border-radius: 2px;}
    #header .menu.on:after {transform: translate(-50%, -50%);}
    #header .menu.on:before {transform: translate(-50%, -50%) rotate(90deg);}
    #header .menu.on div {background: #fff;}

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

    #header .login.hidden-mo {display: none;}
    #header .login {gap: 2.5rem;}
    #header .login li {width: 56px; height: 56px;}
}

@media(max-width:990px) {
    #header .logo {width: 150px}
}

@media(max-width:500px) {
    #header .gnb > li {font-size: 2.5rem;}
    #header .gnb > li span {padding: 1.5rem 5%;}
    #header .lnb li {font-size: 2.25rem; padding: 1rem 5%;}
    #header .gnb .login {padding: 6.25rem 5%;}
}

/* 푸터 */
footer {padding: 80px 0;}
footer img {width: 9.5rem;}
footer a {color: #fff;}

footer .box.nav .flex {column-gap: 3rem; row-gap: 1rem; flex-wrap: wrap; justify-content: flex-end;}

@media(max-width:1240px) {
    footer .container > div {flex-direction: column; gap: 3.75rem;}
    footer .container .width60 {width: 100%;}
    footer .container .width40 {width: 100%;}

    footer .box.nav .flex {justify-content: flex-start; padding-left: 15.75rem;}
}

@media(max-width:768px) {
    footer .container {width: 80%;}
    footer img {width: 12rem;}
    footer .box.nav {order: -1; width: 25rem;}
    footer .box.nav .flex {padding-left: 0; margin-top: 2.5rem;}
    footer .infor {font-size: 1.375rem !important;}
    footer .copy {font-size: 1.125rem;}
}

@media(max-width:500px) {
    footer .container {width: 90%;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 5%; top: 50%; transform: translateY(-50%); z-index: 10;}
#quick li {margin-top: 10px; position: relative;}
#quick li a {width: 56px; height: 56px; background: rgba(81,80,76,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center;}

#quick li .telbox {position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: rgba(81,80,76,0.5); border-radius: 1rem; padding: 0.8rem 2rem; color: #fff; opacity: 0; visibility: hidden; transition: 0.45s;}
#quick li .telbox.on {opacity: 1; visibility: visible;}

#quick li.goTop {background: #000; width: 56px; height: 56px; border-radius: 50%; color: #fff; text-align: center; line-height: 56px; cursor: pointer; font-size: 14px;}

@media(max-width:768px) {
    #quick {top: auto; transform: none; bottom: 5%;}
    #quick ul {height: 0; transition: 0.4s ease-in-out;}
    #quick ul.on {height: 254px; margin-bottom: 1rem;}
    #quick ul:not(.on) {transition-delay: 1.1s;}
    #quick ul li {position: relative; transform: translateX(10rem); transition:  0.45s ease-in-out; opacity: 0; visibility: hidden;}
    #quick ul.on li {transform: translateX(0); opacity: 1; visibility: visible;}
    #quick ul li:nth-child(1) {transition-delay: 0.5s;}
    #quick ul li:nth-child(2) {transition-delay: 0.6s;}
    #quick ul li:nth-child(3) {transition-delay: 0.7s;}
    #quick ul li:nth-child(4) {transition-delay: 0.8s;}
    #quick li.goTop {font-size: 1.75rem; margin-top: 0;}
    #quick li.quick-wrap {width: 56px; height: 56px; background: var(--pointcolor); border-radius: 50%; display: flex !important; justify-content: center; align-items: center; transition: 0.45s;}
    #quick li.quick-wrap.on {transform: rotate(45deg);}
}

/* 문의하기 모달 */
#modal {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; background: #fff; border-radius: 1rem; padding: 4rem; width: 36.5rem; border: 3px solid var(--pointcolor); opacity: 0; visibility: hidden; transition: 0.45s;}
#modal.on {opacity: 1; visibility: visible;}
#modal .close {position: absolute; top: 3rem; right: 3rem; z-index: 13; cursor: pointer;}
#modal .box {padding: 1.5rem 0; border-bottom: 1px solid var(--linecolor);}
#modal .box label {width: 7.5rem; font-weight: 600;}
#modal .box > input,
#modal .box .telbox,
#modal .box > textarea {width: calc(100% - 7.5rem);}
#modal .box .telbox > input {width: calc(100% / 3);}
#modal .box .telbox span {padding: 0 1rem;}

#modal .box input,
#modal .box textarea { border: none; background: #e9e9e9; border-radius: 0.625rem; height: 3.125rem; padding: 0.5rem 1rem;}
#modal .box textarea {height: 7.5rem;}
#modal button {background: var(--pointcolor); width: 100%; padding: 1rem;}

#modal input {accent-color: slateblue}

#modal .box input:focus {outline:none; border: none !important; box-shadow: none;}
#modal .box textarea:focus {outline:none; border: none !important; box-shadow: none;}

#bg-overlay {background: #000; opacity: 0.5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 11;}

@media(max-width:768px) {
    #modal {width: 80%;}
    #modal .box .telbox span {padding: 0 0.25rem;} 
}

@media(max-width:380px) {
    #modal {width: 90%;}
}