/*! header */
#header { position: sticky; top:0; left: 0; width: 100%; padding: 0; z-index: 99;transition: 0.4s; } 
#header.hide { transform: translate(0,-100%) !important; } 

/* header top-baner */
#wrap.off { transition: padding 0.4s; } 
.header__top-banner { display: flex; overflow: hidden; height: 48px; align-items: center; text-align: center; font-size: 16px; border-radius: 0; background: #231F20; color: #fff; } 
.header__top-banner .swiper { } 
.header__top-banner .swiper .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; line-height: 1.4; padding: 0 40rem; } 
.header__top-banner .swiper .swiper-wrapper .swiper-slide .close { position: absolute; top:50%; right: 10rem; transform: translate(0,-50%); cursor: pointer; line-height: 1; } 
.header__top-banner .swiper .swiper-wrapper .swiper-slide .close svg { width: 16rem; opacity: 0.5; } 
.header__top-banner a { line-height: 2rem; }
.header__top-banner a > span { display: inline-flex; width:89px; height: 28px; margin-left: 20px; padding-right: 26px; padding-left: 14px; border-radius: 99px; background-color: #2589F3; background-image: url(https://mincare.cafe24.com/web/img/common/top_banner_arrow_right.png); background-repeat: no-repeat; background-position: right 6px center; font-weight: 600; font-size: 14px; color: #fff; align-items: center; justify-content: center; }

.header__inner { display: flex;align-items: center; margin: 0; padding: 0 60rem; border-radius: 0; background: #0F0F0F; } 
.header.on .header__inner { background: rgba(255, 255, 255, 1); }
.header_box { display: flex; width: 100%; max-width: 1520px; margin: 0 auto; align-items: center; justify-content: space-between; }
.header-nav { display: flex; align-items: center; gap: 30px; width: 100%; max-width: 880px; }
.header_box .contact_box { display: flex; width: 127px; height: 44px; border-radius: 6px; background-color: #1B8AFF; font-weight: 600; font-size: 18px; color: #fff; align-items: center; justify-content: center; }
.header_box .contact_box:hover { background-color: #fff; color: #1b8aff;}
.header-logo { width: 173px; } 
.header__logo a{display: block;font-size: 0;}

.header__category { flex: 1; margin-left: auto; }
.header__category > div { display: flex; align-items: center; justify-content: center; }
.header__category > div > ul {display: flex; align-items: center; width: 100%; max-width: 880px; }
.header__category > div > ul > li { display: flex; align-items: center; justify-content: center; position: relative; flex: 1; width: 100%; padding: 0 5px; font-weight: 500; font-size: 18px; }
.header__category > div > ul > li > a { position: relative; color: #fff; line-height: 70px; transition: 0.4s; }
.header__category > div > ul > li > a > span {display: inline-block;position: absolute;top: 50%;left: calc(100% + 10rem);transform: translateY(-50%);;}
.header__category > div > ul > li > a > span > svg {width: 15rem;vertical-align: middle;}
.header__category > div > ul > li.on > a,
.header__category > div > ul > li:hover > a {color: var(--color-primary);}
.header__category > div > ul > li.on > a > span > svg,
.header__category > div > ul > li:hover > a > span > svg {transform: rotate(180deg);}
.header__category > div > ul > li > ul {position: absolute;top: 80%;left: 50%;transform: translateX(-50%);width: max-content; min-width: 137rem; padding: 25rem 20rem; background-color: rgba(50, 50, 50, 0.8); color: #fff;text-align: center; border-radius: 13px; opacity: 0;visibility: hidden;transition: .4s; backdrop-filter: blur(5px);}
.header__category > div > ul > li.on > ul,
.header__category > div > ul > li:hover > ul {opacity: 1;visibility: visible;}
.header__category > div > ul > li > ul > li {font-size: 17rem;margin-bottom: 25rem;font-weight: 400;}
.header__category > div > ul > li > ul > li:last-child {margin-bottom: 0;}
.header__category > div > ul > li > ul > li > a {position: relative;}
.header__category > div > ul > li > ul > li > a::after {content: "";display: block;position: absolute;bottom: 0;left: 0;width: 0;height: 1rem;background: #333;transition: .4s;}
.header__category > div > ul > li > ul > li > a:hover::after {width: 100%;}
.header__category .iel-home { display: none; }
#header.top .header__category > div > ul > li > ul {transition: .4s;}
#header.top .header__category > div > ul > li:hover > ul {transition: .4s;}
#header.top .header__category > div > ul > li > ul > li > a::after {background: #ddd;}

.header__nav {display: none;}
.header__category > div > .contact_box { display: none; }


.header__category-mask {position: absolute;top: 100%;left: 0;width: 100%; background: rgba(255,255,255,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0;visibility: hidden; transition: .4s;z-index: 1;}
.header__category-mask.on {opacity: 1;visibility: visible;}
#header.top .header__category-mask {opacity: 0 !important;visibility: hidden !important;}

.header__search-button {width: 56rem;line-height: 56rem; margin-left: 5rem;border-radius: 7rem;background: rgb(26, 26, 26,.7);text-align: center;}
.header__search-button > svg {width: 24rem;stroke: #fff;vertical-align: middle;transform: translateY(-2rem);}

.logo-mo { display: none; }

@media all and (max-width:1366px) {
    .header__inner {padding: 0 30rem;}
}

@media all and (max-width:1023px) {
    #header {padding: 0 0;}
    .header-nav { display: none; }
    .header__top-banner { height: 37px; border-radius: 0 0; font-size: 15px; }
    .header__top-banner a > span  { width: 78px; height: 21px; font-size: 12px; background-size: 16px 16px; }
    
    .header__inner {padding: 20rem 30rem;margin: 0 0;border-radius: 0; background-color: #fff; }
    .header__category {display: none; }
    .header__nav {display: flex; position: relative; width: 25px; height: 9px; margin-left: auto; padding: 9.5px 6px; cursor: pointer; flex-direction: column; justify-content: space-between; box-sizing: content-box; }
    .header__nav > span { display: block; width: 100%; height: 2px; background-color: #404040; }
    /*.header__nav > span:nth-child(2) {transform: translateY(calc(-50% + 6rem));width: 78%;}*/
    .header__nav > svg {width: 25px; vertical-align: middle;}
    
    .logo-pc { display: none; }
    .logo-mo { display: block; }
    
    .header_box > .contact_box { display: none; }

}

@media screen and (max-width: 768px) {
.header-logo { width: 139px; } 
}

@media all and (max-width:660px) {
    /*
    .header__top-banner {font-size: 13rem;}
    .header__top-banner a > span {width: 70rem;line-height: 21rem;margin-left: 5rem;font-size: 11rem;}
    */
    .header__logo img { width: 120px; }
	.header__inner { padding: 18px 20px; }
}




.header__search { position: absolute; top:calc(100% + 1rem); z-index: 99; opacity: 0; visibility: hidden; transform: translateY(5rem); transition: transform 0.3s cubic-bezier(0.4,0.4,0.000,1.0),opacity 0.3s cubic-bezier(0.4,0.4,0.000,1.0),visibility 0.3s cubic-bezier(0.4,0.4,0.000,1.0); background: #fff; width: 100%; border-bottom: 1rem solid #e8e8e8; padding: 50rem 0; } 
.header__search.on { opacity: 1; visibility: visible; transform: translateY(0); } 
.header-search__inner { width: 780rem; margin: 0 auto; } 
.header-search__inner .search-form { margin-bottom: 30rem; } 
.header-search__inner .search-form #searchBarForm { } 
.header-search__inner .search-form #searchBarForm > div { display: flex; align-items: center; border-bottom: 2rem solid #000; padding-bottom: 13rem; } 
.header-search__inner .search-form #searchBarForm > div > div { font-size: 0; } 
.header-search__inner .search-form #searchBarForm > div > div svg { width: 24rem; height: 24rem; } 
.header-search__inner .search-form #searchBarForm > div > input[type="text"] { border: none; font-size: 16rem; width: 100%; } 
.header-search__inner .search-form #searchBarForm > div > input[type="text"]::placeholder { color: #b8b8b8; } 

.header-search__inner .search-keyword { display: flex; margin-bottom: 30rem; } 
.header-search__inner .search-keyword > div { width: 50%; } 
.header-search__inner .search-keyword > div > p { margin-bottom: 15rem; } 
.header-search__inner .search-keyword .xans-search-hotkeyword > ul { display: flex; gap:6rem; flex-wrap: wrap; padding-right: 20rem; } 
.header-search__inner .search-keyword .xans-search-hotkeyword > ul > li { padding: 10rem 20rem; border-radius: 22rem; border: 1rem solid #ebebeb; font-size: 14rem; } 
.header-search__inner .search-keyword .recent-keyword > ul { } 
.header-search__inner .search-keyword .recent-keyword > ul > li { display: flex; font-size: 14rem; color: #949494; align-items: center; margin-bottom: 8rem; } 
.header-search__inner .search-keyword .recent-keyword > ul > li:last-child { margin-bottom: 0; } 
.header-search__inner .search-keyword .recent-keyword > ul > li .keyword { margin-right: auto; color: #000; } 
.header-search__inner .search-keyword .recent-keyword > ul > li .date { font-size: 13rem; } 
.header-search__inner .search-keyword .recent-keyword > ul > li .close { width: 18rem; height: 18rem; background: url(/maeng/images/icons/close.svg)no-repeat center center / 100% auto; cursor: pointer; margin-left: 10rem; opacity: 0.4; } 

@media all and (max-width: 860px){
 .header__search { padding-inline: 27rem; } 
 .header-search__inner { width: 100%; } 
 .header-search__inner .search-form #searchBarForm > div { border-bottom: 1rem solid #000; } 
 .header-search__inner .search-form #searchBarForm > div > div svg { width: 18rem; height: 18rem; } 
 .header-search__inner .search-keyword { display: block; } 
 .header-search__inner .search-keyword > div { width: 100%; } 
 .header-search__inner .search-keyword .xans-search-hotkeyword { margin-bottom: 38rem; padding-bottom: 38rem; border-bottom: 1rem solid #e8e8e8; } 
 }


 
 @media all and (max-width:660px){
 .header__top-banner .swiper .swiper-wrapper .swiper-slide { padding: 0 10rem; } 
 .header__top-banner .swiper .swiper-wrapper .swiper-slide .close { right: 5rem; } 
 }




/*! side-menu */
.side-menu { position: fixed; top:0; left: -100%; z-index: 9999; width: 100%; max-width: 440px; height: calc(var(--vh, 1vh)* 100); background-color: #fff; box-shadow: 0rem 0rem 16rem rgb(50 50 50 / 12%); overflow-y: scroll; transition: left .4s; } 
.side-menu.on { left: 0; } 
.side-menu::-webkit-scrollbar { display: none; } 
.side-menu-header { display: flex; align-items: center; justify-content: space-between; height: 98px; padding: 0 32px; }
.side-menu__close { width: 16px; height: 16px; cursor: pointer; }
.side-menu__close img { width: 16px; }


/* side-menu : 카테고리 */
.side-menu__category { } 
/* side-menu : 카테고리 - 대분류 */
.side-menu__category > div > ul { } 
.side-menu__category > div > .contact_box { display: flex; width: 100%; height: 44px; border-radius: 6px; background-color: #1B8AFF; font-weight: 600; font-size: 18px; color: #fff; align-items: center; justify-content: center; }
.side-menu__category > div > .contact_box:hover { background-color: #fff; color: #1B8AFF; }
.side-menu__category > div > ul > li { } 
.side-menu__category > div > ul > li > a { display: flex; align-items: center; justify-content: space-between; padding: 28.5px 30px 28.5px 32px; border-top: 1px solid #E8E8E8; font-weight: 500; font-size: 17px; color: #323232; transition: .4s;} 
.side-menu__category > div > ul > li > a.on {color: var(--color-primary);}
.side-menu__category > div > ul > li > a > span { transition: .4s;} 
.side-menu__category > div > ul > li > a.on > span {transform: rotate(180deg);color: var(--color-primary);}
.side-menu__category > div > ul > li > a > span > svg { width: 24rem; vertical-align: middle; opacity: 0.7; } 
/* side-menu : 카테고리 - 중분류 */
.side-menu__category > div > ul > li > ul { display: none; padding-bottom: 28.5px; } 
.side-menu__category > div > ul > li > ul > li {} 
.side-menu__category > div > ul > li > ul > li:last-child {margin-bottom: 0;}
.side-menu__category > div > ul > li > ul > li > a { display: block; padding: 11px 32px; font-size: 15.5px; color: #323232; line-height: 18px; letter-spacing: -0.02em; }
.side-menu__category .iel-home { display: flex; align-items: center; justify-content: space-between; padding: 30px 26px 30px 32px; background-color: #313332; }
.side-menu__category .iel-home .left { display: flex; align-items: center; gap: 7.5px; font-weight: 500; font-size: 16.5px; color: #fff; line-height: normal;  }
.side-menu__category .iel-home .right-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.side-menu__category .iel-home .right-arrow img { width: 10px; }