/* BASIC css start */
/* Uneedcomms Keepgrow CSS */
#keepgrowLogin #formWrap .loginBtn, #keepgrowLogin #formWrap .nomemberLoginBtn, #keepgrowLogin #memberLogin .redirectBtn { color:#fff !important; }

.swiper_newsban{height:40px; position:relative; background:var(--Ypoint); display:none;}
.swiper_newsban .swiper-wrapper .swiper-slide a{color:var(--brown); width:100%; text-align:center; display:inline-block; padding:13px 0; font-size:14px; line-height:1; letter-spacing:0.2px; font-weight:400;}
.swiper_newsban .swiper-wrapper .swiper-slide a strong{font-weight:bold;}
.swiper_newsban .clsbtn{width:12px; position:absolute; top:15px; right:15px; z-index:999;}

#wrap #layout_header { background: transparent;}
#wrap.scroll #layout_header { background: var(--headerBg);}

.searchBox {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: calc(100% - 30px);
}
/* 메인 검색창 - 숨김 상태 */
.header__search {
    width: calc(100% - 45px);
    position: fixed;
    top: 0;
    left: 0; /* 기준점 설정 */
    height: 100vh;
    padding: 17px 15px;
    transition: transform 100s ease-in-out;
    transform: translateX(-100%);
    z-index: 9999;
}

/* 슬라이드 인 (노출) */
.header__search.open {
    transform: translateX(0);
}


/* 검색창 상단 */
.search_top {
    display: flex;
    justify-content: space-between;
}

.search_top .header__search-btn {
    border: none;
}
  
.search_top .layout-side__login-container {
display: flex;
}

.search_top .layout-side__login-container a {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.48px;
color: var(--black800);
}

.search_top .layout-side__login-container a:last-of-type {
color: var(--black600);
position: relative;
padding-bottom: 30px;
}

.search_top .layout-side__login-container a input { border:none;}

.search_top .line {
    width: 1px;
    height: 12px;
    background: var(--inputLIne);
    margin: 2px 10px;
}

.inOutBox {
    position: absolute;
    left: 50%;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.42px;
    color: var(--white);
    background: var(--Ypoint);
    border-radius: 100px;
    padding: 5px 10px;
    white-space: nowrap;
    transform: translate(-50%, 0);
    animation: _floating 0.5s alternate infinite;
    transition: 0.3s;
}

@keyframes _floating {
    0% {
        bottom: -10px;
    }

    100% {
        bottom: -5px;
    }
}

.inOutBox::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 12px;
    background: url(/design/skinfood/skinfood/images/wib/MO/common/side_icon.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -7px);
}

/* 검색창 */
.header__search-container {
    position: relative;
}
.header__search-container input[type="text"] {
    width: 100%;
    border-bottom: 1px solid var(--black800);
    border-radius: 0;
    font-size: 16px;
    letter-spacing: -0.48px;
}

.mob-search-icon{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}


/* BASIC css end */