/* 해더 */
#header {position: fixed; left: 0; top: 0; right: 0; width: 100%; height: 100px; z-index: 99;}
#header:after {position: absolute; left: 0; top: 0; width: 100%; height: 80px; z-index: -1; background: rgba(var(--point2color-rgb), 0.8); content: ""; opacity: 0; transition: 0.45s;}

@media(min-width:991px) {
    #header.on:after,
    #header:hover:after {opacity: 1;}

    #header .menu-wrap .gnb .sub-menu {position: absolute; top: 100px; left: 50%; transform: translateX(-50%); padding: 1rem; background: #88857e; border-radius: 5px; width: 13rem; opacity: 0; pointer-events: none; transition: opacity 0.45s;}
    #header .menu-wrap .gnb .sub-menu.on {opacity: 1; pointer-events: visible;}
}

#header .wrap {position: relative; top: -10px;}

#header .wrap > div {gap: 4rem;}
#header a.logo {width: 10rem;}

#header .menu-wrap {width: 85%;}
#header .menu-wrap .gnb {width: calc(90% - 10rem);}
#header .menu-wrap .gnb li {cursor: pointer; color: #fff; position: relative;}

#header .menu-wrap .gnb li.menu > span {height: 100px; line-height: 100px; display: inline-block;}

#header .menu-wrap .gnb .sub-menu li,
#header .menu-wrap .gnb .sub-menu li a,
#header .menu-wrap .gnb .sub-menu li a span {width: 100%;}

#header .menu-wrap .gnb .sub-menu li,
#header .menu-wrap .gnb .sub-menu li a,
#header .menu-wrap .gnb .sub-menu li a span {padding: 0.5rem 0.25rem;}

#header .menu-wrap .gnb .sub-menu li a {color: #d6d3cb;}
#header .menu-wrap .gnb .sub-menu li:hover a {color: #fff;}

#header .menu-wrap .login {width: 10rem; gap: 3rem; position: relative;}
#header .menu-wrap .login:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; content: ""; width: 1px; height: 0.8rem;}
#header .menu-wrap .login li {width: 50%;}
#header .menu-wrap .login a {color: #fff;}

@media(max-width:990px) {
    /* 폰트사이즈 */
    #header .menu-wrap .gnb li.menu > span {font-size: 3.750rem; font-weight: 300;}
    #header .menu-wrap .login {font-size: 1.875rem;}

    #header {height: 6.25rem;}
    #header:after {height: 6.25rem; background: rgba(0,0,0,0.2); opacity: 1;}
    
    #header .bg {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #a38a82; z-index: -1; transform: translateX(120%); transition: 0.45s;}
    #header .bg.on {transform: translateX(0);}
    #header .wrap {top: 0;}
    #header a.logo {width: auto;}
    #header a.logo img {width: 125px;}

    #header .wrap > div {display: block; position: relative;}

    #header .menu-wrap {width: 100%; display: block; position: absolute; top: 6.25rem; overflow-y: auto; height: calc(100vh - 12.5rem); z-index: 100; padding: 6.25rem 0; opacity: 0; transform: translateX(120%); transition: transform 0.45s;}
    #header .menu-wrap.on {opacity: 1; transform: translateX(0);}
    #header .menu-wrap::-webkit-scrollbar {display: none;}
    #header .menu-wrap .gnb {display: block; text-align: left; width: 90%; margin: auto;}

    #header .menu-wrap .gnb li {position: relative;}
    #header .menu-wrap .gnb li.menu > span {position: relative; width: 100%; line-height: 1; height: auto; padding: 2rem 0;}
    #header .menu-wrap .gnb li.menu.active > span {font-weight: 600 !important; }

    #header .menu-wrap .gnb li.menu > span::after,
    #header .menu-wrap .gnb li.menu > span::before {transition: transform 0.6s ease, opacity 0.6s ease; position: absolute; right: 0; top: calc(50% - 3px);}

    #header .menu-wrap .gnb li.menu > span:after { transform: translateY(-50%) scale(1); content: "+"; opacity: 0.5;}
    #header .menu-wrap .gnb li.menu > span::before { transform: translateY(-50%) scale(0); content: ""; width: 2.5rem; height: 2px; background: #fff; opacity: 1;}


    #header .menu-wrap .gnb li.menu.active > span:after {font-weight: 300; transform: translateY(-50%) scale(0);}
    #header .menu-wrap .gnb li.menu.active > span::before { transform: translateY(-50%) scale(1);}

    #header .menu-wrap .gnb .sub-menu {display: none;}
    #header .menu-wrap .gnb .sub-menu li a {font-size: 1.750rem; font-weight: 500; color: #fff; padding: 0.5rem 3%; display: inline-block;}

    #header .menu-wrap .login {width: 22rem; margin :6.25rem 0 0 5%; justify-content: flex-start;}


    /* 햄버거메뉴 */
    #header .hamburger {position: absolute; right: 1.875rem; z-index: 99; cursor: pointer;}
    #header .hamburger .line {width: 3.5rem; height: 3px; background-color: #ecf0f1; display: block; margin: 8px 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 .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(1),
    #header .hamburger.is-active .line:nth-child(2),
    #header .hamburger.is-active .line:nth-child(3) {-webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;}
          
    #header .hamburger.is-active .line:nth-child(2) {opacity: 0;}
          
    #header .hamburger.is-active .line:nth-child(1){ -webkit-transform: translateY(11px) rotate(45deg); -ms-transform: translateY(11px) rotate(45deg); -o-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg);}
          
    #header .hamburger.is-active .line:nth-child(3){-webkit-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg); }
}

@media(max-width:768px) {
    #header .wrap {width: 90%;}
    #header .hamburger {right: 5%;}
}

@media(max-width:500px) {
    #header .menu-wrap .gnb li.menu > span {font-size: 2.5rem;}
    #header .menu-wrap .gnb li.menu > span::after {font-size: 3rem;}
    #header .menu-wrap .gnb li.menu > span::before {width: 1.5rem;}
}

/* 푸터 */
footer {background: #b4b0a7; color: #f9f6ee; padding: 1.25rem 0;}
footer .wrap {width: calc(100% - 7.5rem); margin: auto; padding: 0 6.25rem;}
footer a {color: #fff; transition: 0.45s; font-weight: 500;} 
footer a:hover {color: #f9f6ee;}
footer h3 {text-transform: uppercase; font-weight: 500; letter-spacing: 0.7px;}

footer ul.f_top {column-gap: 4rem;}
footer ul.f_bottom {column-gap: 1rem; flex-wrap: wrap;}
footer ul.f_bottom li:first-child {width: 16rem;}
footer ul.f_bottom li:nth-child(2) {width: 18rem;}
footer ul.f_bottom li span:first-child {padding-right: 2rem;}

footer .bg-line {background: #c4bfb6; margin: 1.25rem 0;}

@media(max-width:1550px) {
    footer .wrap {width: 90%; margin: auto; padding: 0;}
}

@media(max-width:1240px) {
    footer ul.f_bottom li:nth-child(2) {width: calc(100% - 20rem);}
}

@media(max-width:768px) {
    footer {padding: 1.7rem 0;}
    footer .wrap {width: 80%;}
    footer .f_bottom_wrap {flex-direction: column; align-items: flex-start !important;}
    footer .f_bottom_wrap .width80, 
    footer .f_bottom_wrap .width20 {width: 100% !important;} 
    footer .f_bottom_wrap .width20 {margin-top: 4.5rem;}
    footer ul.f_bottom li {width: 100% !important;}

    footer .bg-line  {margin: 1.7rem 0;}
}

@media(max-width:380px) {
    footer ul.f_top {column-gap: 2rem;}
}

@media(max-width:340px) {
    footer ul.f_top {flex-wrap: wrap;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 3.75rem; bottom: 3.75rem; z-index: 21;}
#quick .wrap {display: flex; flex-direction: column; align-items: center; gap: 10px}

#quick li {width: 60px; height: 60px; border-radius: 50%; transition: 0.45s; filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.05)); transition: 0.45s;}
#quick li.item {background: #fff; transition: 0.45s;}
#quick li.item img {transition: 0.45s;}
#quick li.go_top {background: var(--pointcolor); font-size: 0.8rem;}
#quick li a {width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; letter-spacing: 0.5px;}

@media(max-width:1550px) {
    #quick {right: 1.875rem;}
}

@media(min-width:769px) {
    #quick li.item:hover {background: #88857e;}
    #quick li.item:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
    #quick li.go_top:hover {background: #88857e;}
}

@media(max-width:768px) {
    #quick li {width: 6rem; height: 6rem;}
    #quick li.go_top {font-size: 1rem;}
}

@media(max-width:500px) {
    #quick li {width: 5rem; height: 5rem;}
    #quick li img {transform: scale(0.8);}
}

/* 커서 커스텀 */
#customCursor {position: fixed; z-index: 1000; left: 0;top: 0;pointer-events: none;will-change: transform; mix-blend-mode: normal;}
  
@media (hover: hover) and (pointer: fine) {
    .cursor_circle {width: 8px;height: 8px; margin-top: -50%; mix-blend-mode: normal; background-color: transparent; border: 1px solid rgba(var(--pointcolor-rgb), 0.2);  margin-left: -50%; border-radius: 50%; transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

    /* 인테리어 */
    #customCursor.scroll .cursor_circle {mix-blend-mode: normal; width: 175px; height: 175px; border-radius: 50%; background-color: var(--pointcolor); }
    #customCursor.scroll:after,
    #customCursor.scroll:before {position: absolute; top: 50%; left: 50%; width: 143px; height: 143px; transform: translate(-50%, -50%); display: block; margin-top: -24%; margin-left: -50%; z-index: 1;}
    #customCursor.scroll:after {content: url("/img/main/cir_txt2.png"); animation: textRotation 8s linear infinite;}
    #customCursor.scroll:before {content: url("/img/main/cir_arrow.png");}

    #customCursor.scroll2 .cursor_circle {mix-blend-mode: normal; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); }

}

/* 모바일 숨김 */
@media (pointer:coarse) {
    #customCursor {display: none;}
}

@keyframes textRotation {to {transform: translate(-50%, -50%) rotate(360deg);}}