html.lock {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: 0; height: 0;  margin-left: -50%; margin-top: -50%;}

    #cursor.arrow .cursor__circle {width: 8.75rem; height: 8.75rem; border-radius: 50%; background-color: var(--subcolor); }
    #cursor.arrow:after {display: block; content: "Drag"; letter-spacing: 0; font-size: 1.5625rem; color:#fff; font-family: var(--pointfont); clear: both; position: absolute; width: fit-content; height: fit-content; top:-20%; left: -18%;}
    #cursor.arrow:before {position: absolute; left: -41%; top: -13%;  content: url("/img/cursor-arrow.png"); z-index: 1;}
}

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

/* 푸터 */
footer {background: #312a20; padding: 80px 0 30px; color: rgba(228,224,215,0.75);}
footer .container {display: flex; align-items: center; justify-content: center; flex-direction: column;}
footer h3 {padding: 0.25rem 1rem; border-radius: 100px; background: rgba(160,137,100,0.5);}
footer .f-nav {gap: 1rem;}

@media(max-width:768px) {
    footer {padding: 80px 0 12rem;}
    footer.font-16 {font-size: 1.25rem;}
    footer.font-18 {font-size: 1.375rem;}
    footer .f-nav {flex-wrap: wrap;}
}

/* 해더 */
#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 20; color: #fff; transition: 0.3s;}
#header.on {background: #fff;  box-shadow: 5px 5px 20px rgba(0,0,0,0.05); color: #000;}
#header img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transition: all 0.3s ease-in-out;  }
#header.on img  {filter: none;}
#header.active img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transition: all 0.3s ease-in-out; }
#header .wrap {width: 90%; margin: auto;}

#header a.logo img {width: 9.5rem;}

#header .nav ul {gap: 3.5rem; }
#header .nav ul li.depth01 {cursor: pointer; padding: 2rem 0; position: relative;}
#header .nav ul li.depth01 span {position: relative;}
#header .nav ul li.depth01 span:after {position: absolute; left: 0; width: 0; bottom: -5px; content: ""; background: #fff; height: 2px; transition: 0.45s;}
#header.on .nav ul li.depth01 span:after {background: #000;}
#header .nav ul li.depth01:hover span:after {width: 100%;}
#header .nav .lnb {position: absolute; left: 50%; transform: translateX(-50%); top: 5.5rem; width: 12.5rem; padding: 2rem 1.5rem; background: rgba(145,113,62,0.8); opacity: 0; visibility: hidden; transition: 0.3s;  box-shadow: 5px 5px 20px rgba(0,0,0,0.05);}
#header .nav ul > li:hover .lnb {opacity: 1; visibility: visible;}

#header .nav .lnb a {padding: 0.625rem 0; display: block; color: #fff; opacity: 0.7; transition: 0.3s;}
#header .nav .lnb a:hover {opacity: 1;}

#header .side-nav {gap: 2rem; position: relative; z-index: 22;}

/* 햄버거메뉴 */
#header .hamburger {z-index: 21; cursor: pointer;}
#header .hamburger .line {width: 2rem; height: 3px; background-color:#fff; display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;  cursor: pointer;}
#header.on .hamburger .line {background-color: var(--pointcolor);}
#header.active .hamburger .line {background-color: #fff;}
#header .hamburger.is-active{animation: smallbig 0.6s forwards;}
@keyframes smallbig{
  0%, 100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}      

#header .hamburger.is-active .line:nth-child(2) {opacity: 0;}   
#header .hamburger.is-active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);}
#header .hamburger.is-active .line:nth-child(3){-webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); }

/* 반응형 */
@media(max-width:1680px) {
    #header .wrap  {width: 95%;}
}

@media(max-width:1440px) {
    #header .nav ul {gap: 2.5rem; }
}

@media(max-width:1240px) {
    #header .font-18 {font-size: 1rem;}
}

@media(max-width:990px) {
    #header {padding: 2rem 0;}
    #header.active {background: var(--pointcolor); border-bottom: 1px solid #fff;}
    #header.on.active img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transition: all 0.3s ease-in-out;  }
    #header.on.active .hamburger .line {background: #fff;}
    #header ::-webkit-scrollbar {display: none;}
    #header .wrap  {width: 90%;}
    #header .nav {width: auto;}
    #header .nav ul {position: absolute; left: 100%; top: 7.2rem; background: var(--pointcolor); width: 100%; display: block; padding: 5rem 5%; height: calc(100vh - 7.2rem); overflow-y: auto; transition: left 0.45s;} 
    #header.active .nav ul {left: 0;}
    #header .nav ul li.depth01 {padding:0;}
    #header .nav ul li.depth01 span {color: #fff; font-size: 3.125rem; padding: 1.5rem 0; display: block; transition: font 0.3s;}
    #header .nav ul li.depth01 span.bold {font-weight: 700;}
    #header .nav ul li.depth01 span:after  {display: none;}
    #header .nav ul li.depth01 span::before {position: absolute; top: 50%; transform: translateY(-50%); right: 0; content: url("/img/plus.png"); opacity: 0.5; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transition: 0.45s;}
    #header .nav ul li.depth01 span.bold::before {content: url("/img/minus.png");}
    #header .nav .lnb {position: initial; transform: none; opacity: 1; visibility: visible; box-shadow: none; width: 100%; padding: 0 2rem; height: auto; transition: none;}
    #header .nav .lnb a {color: #bbbbbb; font-size: 1.875rem; opacity: 1;}
    #header .nav .lnb a:hover {color: #fff;}

    #header .login-box a,
    #header .login-box span {color: #fff;}

    #header .hamburger .line {width: 2.8rem;}
}

/* 풀메뉴 */
#fullmenu {position: fixed; left: 0; top: -100%; width: 100%; z-index: 21; background: #fff; height: 100%; overflow-y: auto; transition: top 0.45s;}
#fullmenu.active {top: 0;}
#fullmenu::-webkit-scrollbar {display: none;}
#fullmenu .flexList {--x-gap: 0rem; }
#fullmenu .box.menu {padding: 3rem; height: 100%; position: relative;}
#fullmenu .box.menu .depth01 {padding: 1rem 0;}
#fullmenu .box.menu .depth01:last-child {position: absolute; bottom: 3rem; left: 47%;}
#fullmenu .box.menu .depth01 span {font-size: 1.875rem; font-weight: 700; position: relative; color: #000;}
#fullmenu .box.menu .depth01 span:after {position: absolute; left: -3rem; top: 50%; transform: translateY(-50%); width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--pointcolor); content: "";}
#fullmenu .box.menu .depth02 {margin-top: 0.5rem;}
#fullmenu .box.menu .depth02 a {font-size: 1.125rem; padding: 0 1rem; position: relative;}
#fullmenu .box.menu .depth02 a:first-child {padding-left: 0;}
#fullmenu .box.menu .depth02 a.DB {display: none;}
#fullmenu .box.menu .depth02 a:hover {font-weight: 600;}
#fullmenu .box.menu .depth02 a:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ""; height: 60%; width: 1px; background: #b5b5b5;}
#fullmenu .box.menu .depth02 a:last-child:after {display: none;}
#fullmenu .box.img {background: url("/img/main/fullmenu_bg.jpg"); background-size: cover; background-position: center;}
#fullmenu .box.img .logo {padding: 1.5rem 3.5rem; display: block;}

@media(max-width:1440px) {
    #fullmenu .box.menu .depth01 span:after {left: -2rem;}
}

@media(max-width:1240px) {
    #fullmenu .box.menu {width: 55% !important;}
    #fullmenu .box.img {width: 45% !important;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 2.5%; top: calc(50% + 7rem); transform: translateY(-50%); z-index: 5; display: flex; align-items: flex-end; flex-direction: column;}
#quick2 {position: fixed; right: 2.5%; top: calc(50% - 7rem); transform: translateY(-50%); z-index: 6; display: flex; align-items: flex-end; flex-direction: column;}
.quick li {width: 3.5rem; height: 3.5rem; background: var(--pointcolor); border-radius: 50%; cursor: pointer; margin-top: .5rem;}

.quick li.tel {position: relative;}
.quick li.tel:after {position: absolute; left: -11rem; content: attr(data-tooltip); top: 50%; transform: translateY(-50%); width: 10rem; background: rgba(160, 137, 100, 0.4); text-align: center; color: #fff; padding: 0.5rem 1rem; border-radius: 100px; opacity: 0; visibility: hidden; transition: 0.45s; font-weight: 700;} 
.quick li.tel:hover:after {opacity: 1; visibility: visible;}
.quick li.goTop {color: #fff; text-transform: uppercase; letter-spacing: 0.05rem; text-align: center; transition: 0.45s;}
.quick li.goTop:hover {background: #969744; color: #fff;}
.quick li.point {width: 11rem; height: 3.5rem; background: transparent; position: relative; background: var(--pointcolor); border-radius: 100px; display: flex; align-items: center;justify-content: space-between; padding: 1.5rem; gap: 1rem; transition: 0.45s;}
.quick li.point:hover {background: #969744;}
.quick li.point a {color: #fff; width: 100%;}
.quick li.point img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.quick li.contact.on {background: #969744;}

.quick ul {margin-top: 0.5rem;}
.quick ul li {background: rgba(160, 137, 100, 0.4);}
.quick ul li img {transform: scale(0.7); -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

@media(max-width:990px) {
    .quick ul li img  {transform: scale(0.5);}
}

@media(max-width:768px) {
    #quick {top: auto; transform: none; bottom: 15%;}
    .quick li.tel:after {display: none;}
    .quick li {width: 6rem; height: 6rem; margin-top: 1rem;}
    .quick ul li,
    .quick li.goTop  {background: #fff5e5; color: var(--pointcolor); font-weight: 700;}
    .quick li.goTop:hover {background: #969744; color: #fff !important;}
    .quick li.plus {display: flex !important; align-items: center; justify-content: center;}
    .quick li.plus img {transform: scale(0.7); -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
    .quick li.plus.on img {transform: scale(0.7) rotate(45deg);}
    .quick li.visible-xs {display: flex !important; line-height: 1.2;}
    .quick li.visible-xs a {color: #ffffff; font-weight: 700; text-align: center; font-size: 1.25rem;}
    .quick ul li img  {transform: scale(0.7); filter:none;}
    .quick ul li.tel {display: none;}

}

/* 퀵메뉴 하단 */
#quick3 {position: fixed; left: 0; bottom: 0; z-index: 5; width: 100%;}
#quick3 li {width: calc(100% / 3);}
#quick3 li:nth-child(1) {background: #91713e;}
#quick3 li:nth-child(2) {background: #c3ab84;}
#quick3 li:nth-child(3) {background: #dbc39c;}
#quick3 li a {color: #fff; padding: 2rem 1rem; gap: 1rem;}
#quick3 li a img {transform: scale(0.8);}

@media(max-width:480px) {
    #quick3.font-24 {font-size: 1.5rem;}
    #quick3 li a  {gap: 0rem; padding: 1.5rem 1rem;}
    #quick3 li a span {padding-right: 1rem;}
    #quick3 li a img {transform: scale(0.6);}

    #quick {bottom: 12.5%;}
}

@media(max-width:420px) {
    #quick3.font-24 {font-size: 1.25rem;}
    #quick3 li a  {padding: 1.5rem 0rem;}
    #quick3 li a img {transform: scale(0.5);}
}

@media(max-width:360px) {
    #quick3 li a img {display: none;}
    #quick3 li a span {padding-right: 0;}

    #quick {bottom: 10%;}
}

/* 모달 */
#modal .close {position: absolute; right: 1.5rem; top: 1.5rem; cursor: pointer;}
#modal button {width: 100%; background: var(--pointcolor2); color: #fff; padding: 0.8rem 1rem;}

/* 문의하기 폼 */
#modal.contact {position: fixed; right: calc(10% + 5rem); top: 15%; z-index: 11; background: #fff; padding: 3rem; border: 3px solid var(--pointcolor); border-radius: 10px; width: 25rem;}
#modal.contact .item {padding: 1rem 0; border-bottom: 1px solid var(--pointcolor); display: flex; align-items: center;}
#modal.contact .item label {width: 5rem;}
#modal.contact .item .input {width: calc(100% - 5rem);}
#modal.contact .item .telbox {display: flex; align-items: center; gap: 5px;}
#modal.contact .item .telbox input {width: inherit;}
#modal.contact .item input,
#modal.contact .item select,
#modal.contact .item textarea {border: none; background: #eaeaea; padding: 0.25rem 0.5rem; border-radius: 10px; height: 2.5rem;}
#modal.contact .item select {background: url("/img/select_arrow.png") no-repeat 85% 50%, #eaeaea; background-size: 14%; appearance: none;}
#modal.contact .item textarea {height: 5rem;} 
#modal.contact .item .wr_tel {width: 30% !important;}
#modal.contact .check {padding: 1rem 0;}
#modal.contact .check input {width: 15px; height: 15px;}
#modal.contact .check label,
#modal.contact .check a {color: #909090;}
#modal.contact .check .more {cursor: pointer;}

#modal.contact input[type=text]:focus, 
#modal.contact textarea[type=text]:focus, 
#modal.contact input[type=password]:focus, 
#modal.contact textarea:focus, 
#modal.contact select:focus {
    border: none !important; box-shadow: none !important;
}
#modal.contact [type="checkbox"] {accent-color: black;}

@media(max-width:1440px) {
    #modal.contact {width: 30rem;}
    #modal.contact .item {padding: 1.5rem 0;}
    #modal.contact .item input {padding: 1rem;}
}

@media(max-width:990px) {
    #modal.contact .font-30 {font-size: 2.8125rem !important; line-height: 1.4;}
    #modal.contact .font-18 {font-size: 1.75rem !important;}
    #modal.contact .font-16 {font-size: 1.375rem !important;}
    
    #modal.contact {right: auto; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 38rem;}
    #modal .close {right: 2rem; top: 2rem;}
    #modal.contact .item {padding: 1.5rem 0;}
    #modal.contact .item label {width: 8rem;}
    #modal.contact .item .input {width: calc(100% - 8rem);}
    #modal.contact .item input,
    #modal.contact .item select,
    #modal.contact .item textarea {height: 4rem;}
    #modal.contact .item textarea {height: 8rem;} 
    #modal button {padding: 1rem;}
}

@media(max-width:420px) {
    #modal.contact {width: 90%;}
    #modal.contact .item label {width: 7rem;}
    #modal.contact .item .input {width: calc(100% - 7rem);}
    #modal.contact .item .telbox {gap: 3px;}
    #modal.contact .item .telbox span {font-size: 1.25rem !important;}
}

@media(max-width:360px) {
    #modal.contact .item {flex-direction: column; align-items: flex-start;}
    #modal.contact .item label {width: 100%; margin-bottom: 1rem;}
    #modal.contact .item .input {width: 100%;}
}

/* 개인정보방침 */
#modal.privacy {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11; background: #fff; padding: 5rem;  border: 3px solid var(--pointcolor); border-radius: 10px; }

@media(max-width:768px) {
    #modal.privacy {width: 55rem;}
}

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