@charset "UTF-8";

/*header*/
header{position: fixed; z-index: 2; width: 100%; transition: all 0.3s ease;top:0;}
header.is-scroll{background: rgba(255,255,255,0); backdrop-filter: blur(1px);}
.header_wr .inner_lg{display: flex; flex-direction: row;align-items: center;  justify-content: space-between; width: 100%;height: 100px;position:relative;}
.header_wr .logo{width: 100%; max-width: 115px; }
.header_wr .logo a{display: block;width: 100%; height: 100%;}
.header_wr .logo a img{object-fit: contain;}
.header_wr .gMenu{}
.header_wr .gMenu .list{display: flex; flex-direction: row;align-items: center;column-gap: 50px;}
.header_wr .gMenu .list li{}
.header_wr .gMenu .list li a{display: block; font-size: 18px; font-weight: 500; color:#fff; }
header .hambug{display: none;}

header.h-color .gMenu .list > li > a{color:#BC9171;}
header.h-color .hambug span,
header.h-color .hambug span::before,
header.h-color .hambug span::after{background:#BC9171;}
header.h-color .header_wr .logo{filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(2025%) hue-rotate(343deg) brightness(97%) contrast(90%)}

/*quick*/
.quick_wr{position: fixed;z-index:20;bottom: 10px; right:30px;}
.quick_wr .list{display: flex; flex-direction: column; align-items: flex-end; row-gap: 10px;}
.quick_wr .list li.icon{width: 60px; height: 60px; border-radius: 50%; overflow: hidden; position: relative;}
.quick_wr .list li.icon.kakao{background:#ffdc00 }
.quick_wr .list li.icon.insta{background:radial-gradient(circle at left bottom , #f9ed41 0%, #ff833d 24%, #e7407b 49%, #0028ff 100%); }
.quick_wr .list li.icon.line{background:#00B900;}
.quick_wr .list li.icon.whats{background:#29A71A;}
.quick_wr .list li.icon:before{content:''; display: block; width: 40px; height: 40px; background-size: 400%; background-repeat: no-repeat; background-image: url(../../theme/basic/doje/image/ico-sprite.png); text-align: center; margin: 0 auto; cursor: pointer;
position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); pointer-events: none;}
/* [doje] 아이콘(:before)이 링크 위에 떠서 클릭을 가로채던 문제 - 링크가 동그라미 전체를 차지하게 */
.quick_wr .list li.icon a{position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%;}
.quick_wr .list li.icon.kakao:before{background-position: 0 center;}
.quick_wr .list li.icon.insta:before{background-position: -40px center;}
.quick_wr .list li.icon.line:before{background-position: -80px center;}
.quick_wr .list li.icon.whats:before{background-position: -120px center;}
.quick_wr .list li a{display: flex; flex-direction: row; align-items: center; justify-content: center; ; width: 100%; height: 100%;color:#BA8F71 }
.quick_wr .list li.quickRev > div{display: flex; flex-direction: column; align-items: end;row-gap: 8px;}
.quick_wr .list li.quickRev{width:180px;}
.quick_wr .list li.quickRev a{height: 60px;padding: 0 25px ; border-radius: 25rem; background: #000; color:#fff;}
.quick_wr .list li.quickRev .chk label{text-decoration: underline;font-size: 12px; }
.quick_wr .list li.quickRev .chk label:before{background: transparent; border-color:#000;border-radius: 0;width: 16px; height: 16px; flex: 0 0 16px}
.quick_wr .list li.quickRev .chk input:checked + label::after{border-color:#000;}
.mSkipBtn{display: none;}


/*footer*/
footer{background: #000; color:#fff;padding: 80px 0;}
.f_logo{width: 100%; max-width: 100px;}
.f_logo img{width: 100%; height: 100%; object-fit: contain;;}
.footer_wr{border-top: 1px solid rgba(255,255,255,0.3); padding-top: 24px;margin-top:30px;}
.f_links{display: flex; flex-direction: row; align-items: center; justify-content: flex-end;gap:4px 30px;}
.f_links li{}
.f_links li a{color:#fff;font-size: clamp(16px,1.4vw ,20px); }
.f_info{}
.f_info *{font-size: 18px; font-weight: 300; color:rgba(255,255,255,0.8); }
.f_info > *:not(:last-child){margin-bottom: 4px;}
.f_info ol{display: flex; flex-direction: row;;gap: 4px 30px}
.copyright{font-size: 18px; font-weight: 500; color:rgba(255,255,255,0.8);display: block; margin-top: 20px; }


/*subPage > header*/
.isSub header,
.isSub header.is-scroll{background:#fff;}
.isSub .header_wr .logo{filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(2025%) hue-rotate(343deg) brightness(97%) contrast(90%);}
.isSub .header_wr .gMenu .list li a{color:#BC9171}
.isSub header .hambug span,
.isSub header .hambug span:before,
.isSub header .hambug span:after{background-color: #BC9171;}




@media screen and (max-width: 1200px) {
    .header_wr .gMenu .list{column-gap: 36px; }

}

@media screen and (max-width: 1024px) {
    .header_wr .gMenu .list li a{font-size: 16px; }
    footer{padding: 50px 0;}

    .quick_wr .list{row-gap:6px;}
    .quick_wr .list li.icon{width: 50px; height: 50px;}
    .quick_wr .list li.icon:before{width: 30px; height: 30px;}
    .quick_wr .list li.icon.insta:before{background-position: -30px center;}
    .quick_wr .list li.icon.line:before{background-position: -60px center;}
    .quick_wr .list li.icon.whats:before{background-position: -90px center;}
    .quick_wr .list li.quickRev a{height: 40px; padding-left: 12px; padding-right: 12px; font-size: 12px;}

}

@media screen and (max-width: 768px) {
    header{padding-top:0; }
    .header_wr,
    .header_wr .inner_lg{height: 80px}
    header.is-scroll .header_wr .logo{max-width: 70px;}
    .header_wr .logo{position:relative; z-index: 10;left: 60%; transform: translateX(-50%);transition: all 0.3s ease;}
    .header_wr .logo:has(+.hambug.on){filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(2025%) hue-rotate(343deg) brightness(97%) contrast(90%);left:0; transform: unset;}
    header .hambug{display:block;position:absolute;top:27px;right:20px;z-index:10;width:26px;height:26px;background:transparent;border:0;cursor:pointer;}
    header .hambug span{position: absolute; top: 50%; left:50%; transform:translate(-50%, -50%); background: #fff; width: 100%; height: 2px;}
    header .hambug span::before,
    header .hambug span::after{content:''; display: block; width: 100%; height: 2px; position:absolute; left: 50%; transform: translateX(-50%);background:#fff;}
    header .hambug span::before{top:-10px}
    header .hambug span::after{top:10px;}
    header .hambug.on span:before,
    header .hambug.on span:after{background: #BC9171; }
    header .hambug.on span:before{top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
    header .hambug.on span:after{top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
    .header_wr .gMenu{background: #fff; width: 100%; height: 100%; position: fixed;top:0; left: 0; z-index: 2;
    transform:translateX(100%);transition:transform 0.4s ease; overflow-y: auto;}
    .header_wr .gMenu.on{transform:translateX(0);}
    .header_wr .gMenu.no-transition{transition:none !important;}
    .header_wr .gMenu .list{flex-direction: column; padding: 130px 25px 0 25px;}
    .header_wr .gMenu .list li{width: 100%; text-align: end; }
    .header_wr .gMenu .list li:not(:last-child){border-bottom: 1px solid #ddd;}
    .header_wr .gMenu .list li a{color:#BC9171; font-size: clamp(16px, 5vw, 50px);padding: 20px 0;}

    
    .f_logo{margin: 0 auto; }
    .footer_wr{border-top:0; padding-top:0; text-align: center; }
    .f_links{justify-content: center;margin-bottom: 20px;}
    .f_links li{position: relative;}
    .f_links li:not(:last-child):after{content:''; display:block; width: 1px; height: 12px; background:#fff; position: absolute; top:50%; right:-17px; transform: translateY(-50%);}
    .f_info{display: flex; flex-direction: column; }
    .f_info *{color:#969696;font-size: 16px}
    .f_info .ceo{order: 1;margin-bottom:0}
    .f_info .ceo span,
    .f_info .addr span{display: none;}
    .f_info .biz{order:3;padding-top: 24px; position: relative; justify-content: center;flex-direction: column; row-gap: 0;margin-top: 30px;}
    .f_info .biz:before{content:'변제익'; display: block; position: absolute; top:0; left: 50%; transform:translateX(-50%);}
    .f_info .addr{order: 2;}
    .copyright{font-size: 16px; color:#969696; text-align: center;;}


    .mSkipBtn{display: block ; width: 50px; height: 50px;  background-color:#232323; background-image: url("/img/ico_btnChat.png"); background-repeat:  no-repeat; background-position:  center center; background-size: 32px auto; cursor:pointer; border-radius: 50%; border:0; margin-left: auto; margin-top:10px;;}
    .mSkipBtn.on{background-image: url("/img/ico_btnClose.png")}
    .quick_wr .list{display:flex;max-height:0;opacity:0; visibility:hidden; overflow:hidden;   transform:translateY(20px); transition: max-height .3s ease, opacity .3s ease, transform .3s ease, visibility .3s;}
    .quick_wr .list.on{ max-height:500px;opacity:1;visibility:visible;transform:translateY(0);}

    .quick_wr .list li.icon{width: 50px; height: 50px;}
    .quick_wr .list li.icon:before{width: 30px; height: 30px;}
    .quick_wr .list li.icon.insta:before{background-position: -30px center;}
    .quick_wr .list li.icon.line:before{background-position: -60px center;}
    .quick_wr .list li.icon.whats:before{background-position: -90px center;}
    .quick_wr .list li.quickRev a{height: 32px; padding-left: 12px; padding-right: 12px; font-size: 12px;}
    .quick_wr{right:10px;}
    .quick_wr .list li.quickRev{width:150px;}
}

@media screen and (max-width: 575px) {
  

}

@media screen and (max-width: 425px) {
    .header_wr .gMenu .list li a{padding: 12px 0;}

    .f_links li a,
    .f_info *,
    .copyright{font-size: 14px; }


}

/* [doje] 서브 페이지: 헤더는 페이지와 함께 올라가고, 서브메뉴(subNavi)는 헤더를 따라 올라가다가
   화면 맨 위에 닿으면 그 자리에 고정된다. (메인은 기존처럼 헤더가 따라다닌다)
   서브메뉴를 얼마나 올릴지는 theme/basic/doje/js/layout.js 가 스크롤에 맞춰 정한다. */
.isSub header{position: absolute; z-index: 10;}   /* 서브메뉴(z-index 9)보다 위 - 모바일 전체메뉴(.gMenu)가 헤더 안에 있어서 */
/* 모바일 전체메뉴가 열려 있는 동안은 헤더를 화면 위에 붙여 둔다 (조금 스크롤한 상태에서 열어도 닫기 버튼이 보이게) */
body.is-menu-open header{position: fixed; top: 0;}
.isSub .subNavi{will-change: transform; transition: box-shadow .2s ease;}
.isSub .subNavi.is-stuck{box-shadow: 0 2px 10px rgba(0,0,0,.06);}

/* [doje] 서브메뉴가 화면 위에 고정되면(.is-stuck) 왼쪽에 로고를 보여 준다 - 헤더 로고와 같은 자리.
   로고는 theme/basic/doje/js/layout.js 가 헤더 로고를 복제해 넣는다(.subNavi-logo).
   로고 자리만큼 서브메뉴 내용(.inner)을 오른쪽으로 민다 - 넓은 화면(1850px 이상)은 원래 여백 안에 들어가 밀리지 않는다.
     로고 위치  = 헤더 .inner_lg 기준: max(0, (100vw-1920)/2) + 20px
     제목 위치  = .inner 기준:         max(0, (100vw-1630)/2) + padding-left
     필요 여백  = 로고 위치 + 로고 폭 + 32px                                   */
.isSub .subNavi-logo{position: absolute; top: 50%; left: calc(max(0px, (100vw - 1920px) / 2) + 20px); width: 90px; z-index: 1;
    opacity: 0; visibility: hidden; transform: translate(-12px, -50%); transition: opacity .25s ease, transform .25s ease, visibility .25s;
    filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(2025%) hue-rotate(343deg) brightness(97%) contrast(90%);}
.isSub .subNavi-logo img{display: block; width: 100%; height: auto;}
.isSub .subNavi.is-stuck .subNavi-logo{opacity: 1; visibility: visible; transform: translate(0, -50%);}
.isSub .subNavi .inner{transition: padding-left .25s ease;}
.isSub .subNavi.is-stuck .inner{padding-left: max(20px, calc(max(0px, (100vw - 1920px) / 2) + 142px - max(0px, (100vw - 1630px) / 2)));}

@media screen and (max-width: 768px) {
    .isSub .subNavi-logo{width: 56px;}
    .isSub .subNavi.is-stuck .inner{padding-left: 96px;}   /* 20 + 로고 56 + 20 */
}