/*페이지 로딩*/
#loading-screen {position: fixed;width: 100%;height: 100%;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index:99999;}
.spinner {border: 2px solid rgba(0, 0, 0, .1);border-top-color: var(--main-color);border-radius: 50%;width: 50px;height: 50px;animation: spin 0.5s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 상단메뉴 */
#hd{position: sticky;z-index:200;width:100%;background: #fff;}
#hd.off{z-index: 1;}
#hd:before {content: "";display: block;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 100%;}
#tnb{background: #F7F7F7;}
#hd_wrapper{padding:20px 0;border-bottom: 1px solid #e6e6e6;}

/* 헤더메뉴 */
#header{position:sticky;right: 0;left: 0;z-index: 999;background: #fff;transition: all 0.5s;}
#header.header-fixed{position:fixed;top:-100%;}
#header.header-fixed.top0{top:-176px;}
#hd_admin > li > a {display: inline-block;padding: 5px 10px;border: 1px solid #eaeaea;border-radius: 10px;font-size: 14px;min-width: 80px;font-family: 'Pretendard';font-weight:700;text-align: center;background: #fff;}
#hd_qnb{place-content: flex-end;}
#hd_qnb li {position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px;font-size: 12px;}
#hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_qnb li:not(:last-child):before {content: "";display: block;position: absolute;top: 3px;right: 0;width: 1px;height: 11px;background: #dfdfdf;}
#hd_qnb li a {display:inline-block;color:#888}

/* 로고 */
#logo {position: absolute;left: 50%;transform: translateX(-50%);}
#logo > a {display: block;width: 15rem;}
#logo > a > img {display: block;width: 100%;height: auto;object-fit: cover;}

/* 검색창 */
#hd_sch {position:relative;}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_sch_wr {position: relative;width: 100%;}
#hd_sch #sch_str {padding: 0 60px 0 20px;width: 100%;height: 48px;border-radius: 0;border: 2px solid var(--main-color);background:#fff;box-sizing: border-box;}
#hd_sch #sch_submit {position: absolute;top: 0;right: 12px;width: 32px;height: 48px;border: none;background-color: transparent;cursor:pointer;}
#hd_sch input[type="text"]:focus {border-color: #333;}
#hd_sch .h-search-autocomplete {position: absolute;top: calc(100% + 10px);left: -4px;z-index: 20;width: 100%;}
#hd_sch .search-word-cont {display:none;position: absolute;top: calc(100% + 10px);left: -4px;z-index: 20;padding:29px 30px;border-radius: 10px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.05);width: 100%;}
#hd_sch .search-word-head {display: flex;justify-content: space-between;align-items: center;}
#hd_sch .search-word-head > h4 {line-height: 19px;}
#hd_sch .search-word-head > button {font-size: 15px;line-height: 18px;color: #888;border-bottom: 1px solid #888;height: auto;padding: 0;}
#hd_sch .search-word-cont .word-wrap {display: flex;justify-content: space-between;width: 100%;}
#hd_sch .search-word-cont .word-wrap > ul > li {width: 100%;justify-content: space-between;display: flex;align-items: center;padding-top: 10px;}
#hd_sch .search-word-cont .search-word-list{width: 100%;}
#hd_sch .search-word-cont .search-word-list .deleteOne > span{font-size: 0;position: relative;}
#hd_sch .search-word-cont .search-word-list .deleteOne > span:before {content: "\e921";display: block;font-family:xeicon;font-size: 16px;color: #ccc;}
#hd_sch .immybox_results{position: absolute;top: calc(100% + 10px);z-index: 20;padding: 20px 0;border-radius: 10px;border: 1px solid #e4e4e4;background: #fff;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.05);width: calc(100% + 7px);max-height: 470px;overflow-y: auto;}
#hd_sch .immybox_results::-webkit-scrollbar {width: 5px;}
#hd_sch .immybox_results::-webkit-scrollbar-thumb {background-color: rgb(0,0,0);}
#hd_sch .immybox_results::-webkit-scrollbar-track {background-color: rgba(0,0,0,0.1);}
#autocomplete-results > li {padding: 10px 30px;overflow: hidden;line-height: 19px;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;transition: all .3s;}
#autocomplete-results > li:hover{background: #fafafa;}
#autocomplete-results > li .highlight {color: var(--main-color);font-family: 'Pretendard';font-weight:700;}

/* 콜센터 박스 */
#hd-call {display: flex;align-items: center;justify-content: center;perspective: 800px;}
#hd-call .hd-call-inner {position: relative;transform-style: preserve-3d;animation: hdCallFlip 3s ease-in-out infinite;}
#hd-call .hd-call-top {display: flex;align-items: center;gap: 5px;}
#hd-call .hd-call-icon {display: flex;align-items: center;justify-content: center;width: 2.5rem;height: 2.5rem;border-radius: 50%;background-color: var(--main-color);flex-shrink: 0;}
#hd-call .hd-call-icon i {font-size: var(--main-title03);color: #fff;}
#hd-call .hd-call-number {display: flex;justify-content: space-between;font-size: var(--main-title02);font-weight: 700;color: var(--main-color);width: 100%;}
#hd-call .hd-call-time {color: #555;text-align: center;padding-left: 2rem;}
#hd-call .hd-call-front, #hd-call .hd-call-back {backface-visibility: hidden;-webkit-backface-visibility: hidden;}
#hd-call .hd-call-back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotateX(180deg);}
#hd-call .hd-call-back .hd-call-number {font-size: var(--main-title03);color: #000;white-space: nowrap;}
@keyframes hdCallFlip {
    0%   { transform: rotateX(0deg); }
    40%  { transform: rotateX(0deg); }
    50%  { transform: rotateX(180deg); }
    90%  { transform: rotateX(180deg); }
    100% { transform: rotateX(360deg); }
}

/* 우측메뉴 */
#hd-util {gap:15px;}
#hd-util > li > a{position:relative;display:block;font-size: 14px;color: #666;text-align: center;}
#hd-util > li > a:before {content: '';display: block;font-family:xeicon;margin-bottom:6px;color:#000;font-size: 30px;text-align:center;}
#hd-util > li.search > a:before{content:"\e97a";}
#hd-util > li.logout > a:before{content:"\e972";}
#hd-util > li.mypage > a:before{content:"\e9f5";}
#hd-util > li.admin > a:before{content:"\e986";}
#hd-util > li.login > a:before{content:"\e963";}
#hd-util > li.register > a:before{content:"\e9f5";}
#hd-util > li.shop_cart > a:before{content:"\e9fb";}
#hd-util > li.shop_cart .count{display:block;position: absolute;top: -3px;right: -3px;width: 18px;height: 18px;background: var(--main-color);font-size: 11px;color: #fff;text-align: center;border-radius: 50%;line-height:1.75;}
#hd-util .register-bubble { position: absolute;left: 50%;transform: translateX(-50%);width: 88px;height: 25px;border-radius: 50px;background: var(--main-color);color: #fff;font-size: 14px; letter-spacing: -0.42px;text-wrap: nowrap;text-align: center;line-height: 25px;display: block;font-family: 'Pretendard';font-weight:500;box-shadow:5px 5px 20px #ddd;animation: floating 0.8s linear 0s infinite alternate;transition: all 0.3s;}
#hd-util .register-bubble:after {content: "";display: block;position: absolute;top: 0;left: 50%;transform: translate(-50%,-7px);width: 0;height: 0;border-style: solid;border-width: 0 7px 10px 7px;border-color: transparent transparent var(--main-color) transparent;}
@keyframes floating {
    0% {margin-top: 0px;}
    100% {margin-top: 5px;}
}

/* gnb */
.gnb-container{background: var(--main-color);}
.gnb-container > div {align-items: center;}
#hd_menu {position:relative;width:100%;height:60px;}
.hd_menu {height:100%;display:flex;align-items: center;place-content: center;}
.hd_menu li {position:relative;width:auto;height:100%;}
.hd-menu-ico {position: absolute;top: 50%;right: -37%;transform: translateY(-50%);color:#F21C35;}
#menu_open {padding: 0 1rem;color: #fff;background: var(--main-color);height: 100%;width:140px;}

/*1차메뉴*/
#gw-gnb {display:flex;align-items: center;place-content: center;width: calc(100% - 140px);}
#gw-gnb > li {flex:1;padding:0 15px;position:relative;text-align:center;width:auto;height:100%;}
#gw-gnb > li > a {position:relative;display:flex;align-items:center;place-content:center;gap:0.5rem;color:#fff;font-weight:600;width:100%;max-width:150px;height: 100%;line-height: 1.5;white-space:nowrap;margin:0 auto;transition: ally 0.3s;}
#gw-gnb > .gnb-1dli > a > span {display: inline-block;position: relative}
#gw-gnb > .gnb-1dli > a > span:after {content: "";display: block;position: absolute;left: 0;bottom: -3px;background: #fff;transform-origin: 100% 50%;transform: scale3d(0, 1, 1);transition: transform .3s;width: 100%;height: 1px;}
#gw-gnb > .gnb-1dli  > a:hover > span:after,
#gw-gnb > .gnb-1dli.active > a > span:after {color: var(--main-color);transform-origin: 0 50%;transform: scale3d(1, 1, 1);}
#gw-gnb > .gnb-1dli:last-child > a > span{background:linear-gradient(90deg, #FFFFFF 0%, #FFD1C1 30%, #FF9E80 65%, #FF8A80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 200%;animation: fruitbox 5s ease-in-out infinite alternate;filter: drop-shadow(0 2px 8px rgba(255,200,150,.35));}

/*2차메뉴*/
#gw-gnb .gnb-dep02{position:absolute;top:60px;left: 50%;transform:translateX(-50%);z-index:99;width: 140px;text-align:left;visibility:hidden;opacity:0;transition:opacity 0.2s cubic-bezier(0.4, 0, 1, 1);}
#gw-gnb .gnb-dep02 > ul{padding: 1rem;box-shadow: 0 0 10px 0 #0000000F;display: flex;flex-direction: column;align-items: flex-start;box-sizing: border-box;border-radius: 16px;border: 1px solid #E9E9E9;background: #fff;}
#gw-gnb .gnb-dep02 > ul > li{position:relative;opacity:0; transition:all 0s 0s;}
#gw-gnb .gnb-dep02 > ul > li > a{position: relative;display:block;padding:0.5rem 0;font-weight:500;font-size:15px;transition:all 0.3s;}

/*3차메뉴*/
#gw-gnb .gnb-dep03 {margin-bottom: 0.5rem;}
#gw-gnb .gnb-dep03 > li > a{display:block;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: -0.4px;color: rgba(0, 0, 0, 0.6);width: 100%;box-sizing: border-box;text-align:left;}
#gw-gnb .gnb-dep03 > li:not(:last-child) > a{margin-bottom: 0.5rem;}

/*활성화*/
#gw-gnb .gnb-dep02.open {visibility:visible; opacity:1;}
#gw-gnb .gnb-dep02.open > ul > li{opacity:1; transition:all 0.8s ease-in-out;}
#gw-gnb .has-gnb-dep03:hover:before{color: var(--main-color);}
#gw-gnb .gnb-dep03 > li > a:hover{color: var(--main-color);}
#gw-gnb .gnb-dep02 > ul > li > a.active{color: var(--main-color);}


/* category */
#category {display:block !important;position:fixed;top:0;left:-31.78vw;width:31.78vw;height:100vh;background:#fff;z-index:1000;transition:left 0.7s cubic-bezier(.64,0,.36,1);}
#category.open{left: 0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none; height: calc(var(--vh, 1vh) * 100);max-height: -webkit-fill-available;padding-bottom: env(safe-area-inset-bottom, 20px);}

/* iOS Safari 추가 대응 */
@supports (-webkit-touch-callout: none) {
    #category.open {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}
#category .cate{padding:20px 0;border-top:9px solid #f5f5f5;border-bottom: 1px solid #eee;}
#category .cate-arrow {position: absolute;top:50%;right:15px;transform: translateY(-50%);display: flex;flex-direction: column;align-items: center;place-content: center;width: 30px;height: 30px;background:#fff;border: 1px solid #eaeaea;border-radius: 50%;}
#category .cate_li_1{margin:0 15px 15px;cursor: pointer;border:1px solid #eee;border-radius:10px;}
#category .cate_li_1:last-child {margin-bottom: 0;}
#category .cate_li_1_a {padding: 0.5rem;display: flex;align-items: center;gap: 0.5rem;position: relative;width: 100%;font-family: 'Pretendard';font-weight: 700;}
#category .cate_li_1_a > a{display: flex;align-items: center;gap: 5px;width: 100%;height: 100%;}
#category .cate_li_1:last-child .cate_li_1_a > a{background: linear-gradient(90deg, #FFE8E0 0%, #D1654E 40%, #A53F33 70%, #EE463C 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 200%;animation: fruitbox 5s ease-in-out infinite alternate;filter: drop-shadow(0 2px 8px rgba(255,200,150,.35));}
#category .sub_cate {display:none;overflow:hidden;background: #f8f8f8;border-radius:0 0 5px 5px;cursor:pointer;}
#category .cate_li_2_a {display:block;position:relative;width:100%;font-family: 'Pretendard';font-weight:700;}
#category .cate_li_2 {position:relative;}
#category .cate_li_2 a {padding:10px 15px;display:block;position:relative;cursor:pointer;color: #666;font-size:14px;}
#category .cate_li_2 .cate-li-2-arrow:before{font-family:xeicon; content: "\e914"; position:absolute; top:50%; right:15px; font-size:20px; transform:translateY(-50%);}
#category .cate_li_2.active .cate_li_2_a > a{color:#fff;background: var(--main-color);}
#category .cate_li_2.active .cate-li-2-arrow:before{content: "\e91b";color: #fff;}
#category .cate_li_3{display:none;padding:10px; background-color:#aaa; }
#category .cate_li_3 a{display:block; padding:8px 0; color:#fff;}
#category .cate_li_3 a:before{display:inline-block; content:"-"; margin-right:5px;}
#category .close_btn {position:absolute;top:0;right:0;width:80px;height:80px;color:#000;border:0;vertical-align:top;font-size:18px}
#category_all_bg {opacity:0;visibility:hidden;background:rgba(0,0,0,0.7);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999;transition:all .5s ease-in-out;}
#category_all_bg.open {opacity:1;visibility:visible;}
#category .no-cate{text-align:center;padding: 30px 0;color: #333;}

/* login/join */
#category .nav-member{gap:15px;position:relative;padding:28px 15px 22px 15px;border-bottom: 1px solid #eee;color:#555;}
#category .nav-member > li > a {position:relative;display:flex;align-items:center;font-size: 14px;color: #555;text-align: center;}
#category .nav-member > li > a:before {content: '';display: block;font-family:xeicon;color:#000;font-size: 30px;text-align:center;}
#category .nav-member > li.logout > a {color: #111;font-size: var(--main-text01);}
#category .nav-member > li.logout > a:before{content:"\e972";}
#category .nav-member > li.theme-admin {display: flex;gap: 5px;}
#category .nav-member > li.theme-admin > a{padding: 5px;border-radius: 10px;border: 1px solid #eaeaea;}
#category .nav-member > li.login > a:before{content:"\e963";}
#category .nav-member > li.register > a:before{content:"\e9f5";}
#category .register-bubble {display:none;position: absolute;top:100%;left: 50%;transform: translateX(-50%);width: 88px;height: 25px;border-radius: 50px;background: var(--main-color);color: #fff;font-size: 14px; letter-spacing: -0.42px;text-wrap: nowrap;text-align: center;line-height: 25px;font-family: 'Pretendard';font-weight:500;box-shadow:5px 5px 20px #ddd;animation: floating 0.8s linear 0s infinite alternate;transition: all 0.3s;}
#category .register-bubble:after {content: "";display: block;position: absolute;top: 0;left: 50%;transform: translate(-50%,-7px);width: 0;height: 0;border-style: solid;border-width: 0 7px 10px 7px;border-color: transparent transparent var(--main-color) transparent;}

/* 하단 메뉴 */
#category .gw-contact {margin: 20px;padding: 15px;border: 1px solid #eee;border-radius: 10px;font-size:var(--main-title03);}
#category .gw-contact .gw-contact-ico{color: var(--main-color);}
#category .gw-contact .gw-contact-num{display:flex;justify-content:space-between;color: var(--main-color);width: calc(100% - 26px);}
#category .gw-contact .gw-text {font-size: 14px;color: #666;line-height: 1.5;}
#category .kakao-link > a {width: 15rem;display: block;}
#category .kakao-link > a > img {width: 100%;}
#category .nav-community-box{padding-bottom:30px;border-top:9px solid #f5f5f5;}
#category .gw-link-box{margin:0 15px;}
#category .gw-link-box > li {flex:1;}
#category .gw-link-box > li > a {padding: 18px 0;display: block;position:relative;border-bottom:1px solid #eee;}
#category .link-arrow {position: absolute;top: 50%;right: 0;transform: translateY(-50%);color: #ccc;}

/*검색창 모달*/
#gw-search-modal {display:none;position: fixed;left: 0;top: 0;z-index: 100;width: 100vw;height: 100vh;background: #fff;}
#gw-search-modal.on{display: block;z-index: 200;}
#gw-search-modal .gw-search-modal {margin:0 auto;display: flex;align-items: center;place-content: center;flex-direction:column;width: 820px;height: 100%;}
#gw-search-modal .gw-search-modal > div{position: relative;width:100%;align-items: flex-start;}
#gw-search-modal .gw-search-input-box > form{position: relative;width:100%;}
#gw-search-modal #gw-sch-input {width: 100%;height: 70px;padding: 0 60px 0 20px;color: #666;border-radius: 100px;outline: none !important;border: 1px solid #ddd;}
#gw-search-modal #gw-sch-input::placeholder{color: #828282;font-family:'Pretendard';font-weight:600;font-size: var(--main-title04);}
#gw-search-modal .closeBtn {position: absolute;top: 50%;right: -60px;transform: translateY(-50%);display: flex;flex-direction:column;justify-content:center;align-items:center;width: 40px;height: 40px;overflow:hidden;margin:0 auto;border-radius:50%;background: #111;color: #fff;filter: drop-shadow(0px 2px 7px rgba(0,0,0,0.1));}
#gw-search-modal #gw-sch-submit {margin:0 30px;position: absolute;top: 0;right: 0;width: 32px;height: 70px;border: none;background-color: transparent;color:#111;cursor:pointer;}
#gw-autocomplete-results {display:none;position: absolute;top: calc(100% + 10px);left: -4px;z-index: 20;padding: 29px 30px;border-radius: 10px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.05);width: 100%;height:470px;overflow-y: auto;}
#gw-autocomplete-results::-webkit-scrollbar {width: 5px;}
#gw-autocomplete-results::-webkit-scrollbar-thumb {background-color: rgb(0,0,0);}
#gw-autocomplete-results::-webkit-scrollbar-track {background-color: rgba(0,0,0,0.1);}
#gw-autocomplete-results > .immybox_choice {padding: 10px;overflow: hidden;line-height: 19px;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;transition: all .3s;}
#gw-autocomplete-results > .immybox_choice:hover {background: #fafafa;}
#gw-autocomplete-results > li > .highlight {color: var(--main-color);font-family: 'Pretendard';font-weight:700;}

#gw-search-modal .gw-search-ranking-box > div{padding:0 30px;flex: 1;overflow: hidden;}
#gw-search-modal .gw-search-ranking-box > div + div { border-left: 1px solid #e5e5e5; }
#gw-search-modal .gw-search-ranking-box .gw-title{font-size:var(--main-title04);font-family: 'Pretendard';font-weight:600;}
#gw-search-modal .gw-search-ranking-box .gw-delete-all{font-size: 15px;font-family: 'Pretendard';font-weight:600;line-height: 18px;color: #888;border-bottom: 1px solid #888;height: auto;padding: 0;}
#gw-search-modal .gw-search-recent-list > li {width: 100%;justify-content: space-between;display: flex;align-items: center;padding-top: 10px;}
#gw-search-modal .gw-search-recent-list > li > a{display:inline-block;color:#444; line-height: 100%; padding: 5px 0; font-family:'Pretendard';font-weight:600;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;width:90%;}
#gw-search-modal .gw-search-recent-list .gw-delete {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 20px;height: 20px;overflow: hidden;border-radius: 50%;background: #ddd;color: #fff;}
#gw-search-modal .gw-search-recent-list .gw-delete > span{font-size: 0;position: relative;}
#gw-search-modal .gw-search-recent-list .gw-delete > span:before {content: "\e921";display: block;font-family:xeicon;font-size: 12px;color: #fff;}
#gw-search-modal .gw-search-lately-list li + li{margin-top:10px;}
#gw-search-modal .gw-search-lately-list > li > a{display: flex;align-items:center;color:#444;}
#gw-search-modal .gw-search-lately-list .gw-num {display:inline-block;font-family: "Outfit", sans-serif; font-weight: 600;font-size: 14px;min-width: 20px;}
#gw-search-modal .gw-search-lately-list .gw-text{display:inline-block !important;line-height: 100%; padding: 5px 0; font-family:'Pretendard';font-weight:600;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;width:100%;}
#gw-search-modal .gw-search-lately-list > li:nth-child(1) a,
#gw-search-modal .gw-search-lately-list > li:nth-child(2) a,
#gw-search-modal .gw-search-lately-list > li:nth-child(3) a{color:var(--main-color);}

/*인기검색어*/
#hot-list-container{border-right:none;border-left:none;height: auto;}
#hot-list-container .search_hot_list{width:294px;}

/*tnb*/
#category .tnb-mobile-box {display: block;padding: 30px 0;border-top: 9px solid #f5f5f5;}
#category .tnb-mobile-box > ul{padding:0 15px;flex-wrap: wrap;gap:10px;}
#category .tnb-mobile-box > ul > li{width:calc((100% - 10px)/2);text-align:center;box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.10);border-radius:7px;}
#category .tnb-mobile-box > ul > li > a{display:block;padding:14px 0;font-weight:500;}
#tnb .kakao-link > a{display: block;height: 40px;}
#tnb .kakao-link > a > img{height: 100%;object-fit: cover;}

/*gw-mob-hd*/
#gw-mob-hd{display: none;}