@charset "utf-8";

/* 전체 + pc */
.starfield-wrap {
    width: 100%;
}
.bg-full {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100%;
}
.pc-only {
    position: fixed;
    z-index: 0;
    left: calc(50vw - 685px);
    width: 100%;
    max-width: 685px;
    height: 100%;
}
.pc-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}
.pc-inner h1 {
    font-size: 2.2rem;
    font-weight: lighter;
    line-height: 4rem;
}
.pc-inner h1 b {
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: -1.36px;
}
.pc-inner h1 .logo {
    display: block;
    margin-top: 2rem;
    width: 28.9rem;
}
.pc-inner .bottom-desc {
    display: flex;
    flex-direction: column; /* [D]24.10.29 추가 */
    align-items: flex-start; /* flex-end; */ /* [D]24.10.29 수정 */
    margin: 18rem 0 8rem;
}
.pc-inner .bottom-desc  div {
    flex-shrink: 0;
}
.pc-inner .bottom-desc > div {
    margin-right: 3rem;
}
.pc-inner .bottom-desc > div > p {
    font-size: 1.6rem;
    font-weight: lighter;
}
.pc-inner .bottom-desc > div > p b {
    font-size: 1.6rem;
    font-weight: bold;
}
.pc-inner .bottom-desc > div > p + p {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    font-weight: lighter;
}

/* [D]24.10.29 추가 */
.pc-inner .bottom-desc .bottom-desc_top {
    display: flex;
    align-items: center;
}
.pc-inner .bottom-desc .bottom-desc_top .qr {
    width: 9rem;
    height: 9rem;
    margin-right: 1.5rem;
}
.pc-inner .bottom-desc .bottom-desc_top .qr > img {
    width: 100%;
}
.pc-inner .bottom-desc .bottom-desc_top p {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: -0.32px;
}
.pc-inner .bottom-desc .bottom-desc_top p b {
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: -0.32px;
}
.pc-inner .bottom-desc .bottom-desc_top p span {
    font-size: 1.3rem;
    font-weight: normal;
    letter-spacing: -0.26px;
}
.pc-inner .bottom-desc .pc_sns_icon {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}
/* // [D]24.10.29 추가 */

/* [D]24.10.29 삭제 */
/* .pc-inner .bottom-desc > .qr > img {
    width: 11rem;
    height: 11rem;
} */

.pc-inner .bottom-desc > .qr > img {
    width: 11rem;
    height: 11rem;
}

/* 모바일 wrap */
.m-wrap {
    position: relative;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100%;
    min-width: 320px;
    height: calc(100vh - 15rem);
    background-color: var(--color-white);
}
@media only screen and (min-width: 1024px) {
    .bg-full {
        background: #F5F0E4 url("../images/common/bg_full_pc.svg") 50% 50% repeat;
    }
    .m-wrap {
        margin: 0 0 0 50vw;
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
    .m-wrap > header,
    .m-wrap > .tab-bar,
    .menu-wrap {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 1023px) {
    .starfield-wrap {
        width: 100%;
        height: 100%;
    }
    .m-wrap {
        height: 100%;
    }
    .bg-full {
        display: none;
    }
    .pc-only {
        display: none;
    }
}

/* 모바일 - 헤더 */
.m-wrap > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 110;
    padding: env(safe-area-inset-top) 2rem 0;
    width: 100%;
    height: 4.9rem;
    background-color: var(--color-white);
}
.m-wrap > header h2 {
    overflow: hidden;
    width: calc(100% - 2.2rem);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: -0.03rem;;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-wrap > header h2 img {
    height: 2.8rem;
}
.m-wrap > header .btn-back {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_back.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.m-wrap > header .btn-change-store {
    padding-left: 1.8rem;
    background: url("../images/ico/ico_location.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.m-wrap > header .btn-menu-all {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/ico/ico_menu_all.svg") 50% 50% no-repeat;
    background-size: 100%;
}

/* 모바일 - 푸터 */
.m-wrap > footer {
    position: relative;
    z-index: 50;
    padding: 1rem 2rem 7.5rem;
    width: 100%;
    height: auto;
    min-height: 15rem;
    background-color: var(--color-black);
}
.m-wrap > footer a,
.m-wrap > footer button {
    color: var(--color-white);
    font-size: 1.3rem;
}
.m-wrap > footer small {
    display: block;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: lighter;
    letter-spacing: -0.017rem;
}
.m-wrap > footer > div > a > b {
    color: #ff3762;
}
.m-wrap > footer .narrow {
    letter-spacing: -1px;
}

/* 모바일 - 퀵 메뉴*/
.m-wrap > .quick-menu {
    display: none;
    position: fixed;
    z-index: 800;
    right: 0;
    bottom: 9rem;
    padding-right: calc( 2rem + env(safe-area-inset-right) );
    height: 5rem;
    text-align: right;
}
.m-wrap > .quick-menu .btn-top {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    background: url("../images/btn/btn_top.svg") 50% 50% no-repeat;
    background-size: 100%;
}
@media only screen and (min-width: 1024px) {
    .m-wrap > .quick-menu {
        right: auto;
        width: 375px;
    }
}

/* 모바일 - 하단 플로팅 버튼 영역 */
/* [D]23.04.13 한유진 - 수정 start */
.m-wrap > .bottom-btn {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    z-index: 899;
    padding: 0 0 env(safe-area-inset-bottom);
    width: 100%;
    height: 6.5rem;
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    background-color: var(--color-white);
}
/* [D]23.04.17 추가 start */
.m-wrap > .bottom-btn.detail-btn {
    padding: .9rem 1.5rem .9rem .8rem;
    border-top: 1px solid var(--color-white);
    border-bottom: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}
/* [D]23.04.17 추가 end */
@media only screen and (min-width: 1024px) {
    .m-wrap > .bottom-btn {
        width: 375px;
    }
}
.m-wrap > .bottom-btn .btn-add-wish-footer {
    width: 6rem;
    height: 4.6rem;
    background: url("../images/ico/ico_heart4.svg") 50% 50% no-repeat;
    background-size: 2.3rem;
    padding: 0;
}
.m-wrap > .bottom-btn .btn-add-wish-footer.active {
    background-image: url("../images/ico/ico_heart4_active.svg");
}
.m-wrap > .bottom-btn .btn-add-wish-footer + button {
    width: calc(100% - 6.7rem);
    height: 4.6rem;
    line-height: 4.6rem;
    border-radius: .8rem;
    margin-left: auto;
    font-size: 1.6rem;
}
.m-wrap > .bottom-btn .btn-add-wish-footer + button:disabled {
    background-color: var(--color-gray500);
    color: var(--color-white);
    pointer-events : none;
}
/* [D]23.04.13 한유진 - 수정 end */

/* 모바일 - 탭바 */
.m-wrap > .tab-bar {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    z-index: 900;
    padding: 0 1.5rem;
    padding: env(safe-area-inset-top) 1.5rem env(safe-area-inset-bottom) 1.5rem;
    width: 100%;
    height: calc(6.5rem + env(safe-area-inset-bottom));
    background-color: var(--color-white);
    box-shadow: 0 -1px 35px 0 rgba(0, 0, 0, 0.1);
}
.m-wrap > .tab-bar .btn-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 25%;
    text-align: center;
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"] {
    width: 2.5rem;
    height: 2.5rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-home"] {
    background-image: url("../images/ico/ico_tabbar_home.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-home"][class*="-active"] {
    background-image: url("../images/ico/ico_tabbar_home_active.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-search"] {
    background-image: url("../images/ico/ico_tabbar_search.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-search"][class*="-active"] {
    background-image: url("../images/ico/ico_tabbar_search_active.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-wish"] {
    background-image: url("../images/ico/ico_tabbar_wish.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-wish"][class*="-active"] {
    background-image: url("../images/ico/ico_tabbar_wish_active.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-my"] {
    background-image: url("../images/ico/ico_tabbar_my.svg");
}
.m-wrap > .tab-bar .btn-tab [class^="ico-tabbar"][class*="-my"][class*="-active"] {
    background-image: url("../images/ico/ico_tabbar_my_active.svg");
}
.m-wrap > .tab-bar .btn-tab > [class^="ico-tabbar"] + span {
    margin-top: 0.3rem;
    font-size: 1.3rem;
    font-weight: lighter;
}

/* 모바일 - 컨텐츠 영역 */
.m-wrap > main {
    position: relative;
    padding-top: 5rem;
    width: 100%;
    min-height: calc(100vh - 23rem);
    background-color: var(--color-white);
}
.m-wrap > main > section {
    padding: 2rem 2rem 3rem 2rem;
}
.m-wrap > main > section.line {
    border-top: 10px solid var(--color-gray100);
}
.m-wrap > main > section.line2 {
    border-top: 10px solid var(--color-gray100);
    border-bottom: 10px solid var(--color-gray100);
}

/* 헤더 - 전체 메뉴 */
.menu-wrap {
    display: flex;  /* [D]23.10.13 추가 */
    flex-direction: column;  /* [D]23.10.13 추가 */
    position: fixed;
    top: -1000%;
    z-index: 1100;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    -webkit-transition: top cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
	transition: top cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
}
.menu-wrap.active {
    top: 0;
}
.menu-wrap .btn-close-menu {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_close_popup.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.menu-wrap .btn-logout {
    width: 2rem;
    height: 2rem;
    background: url("../images/btn/btn_logout.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.menu-wrap .btn-login {
    width: 2rem;
    height: 2rem;
    background: url("../images/btn/btn_login.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.menu-wrap .menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.menu-wrap .menu-top li {
    flex: 7rem 1 1;
 }
.menu-wrap .menu-top .btn-go-menu {
    display: block;
    padding-top: 0.3rem;
    width: 100%;
    height: 7.4rem;
    font-size: 1.3rem;
    text-align: center;
}
.menu-wrap .menu-top .btn-go-menu:before {
    display: block;
    margin: 0 auto 0.2rem;
    width: 4rem;
    height: 4rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
}
.menu-wrap .menu-top li:nth-of-type(1) .btn-go-menu:before {
    background-image: url("../images/ico/ico_menu_search.svg");
}
.menu-wrap .menu-top li:nth-of-type(2) .btn-go-menu:before {
    background-image: url("../images/ico/ico_menu_my.svg");
}
.menu-wrap .menu-top li:nth-of-type(3) .btn-go-menu:before {
    background-image: url("../images/ico/ico_menu_cs.svg");
}
.menu-wrap .menu-top li:nth-of-type(4) .btn-go-menu:before {
    background-image: url("../images/ico/ico_menu_event.svg");
}
.menu-wrap .list-menu {
    overflow-y: auto;
    padding: 0 2rem;
    height: 100%;  /* [D]23.10.13 수정 */
    border-top: 10px solid var(--color-gray100);
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray200) rgba(255,255,255,0);
}
.menu-wrap .list-menu::-webkit-scrollbar,
.menu-wrap .list-menu::-webkit-scrollbar-track,
.menu-wrap .list-menu::-webkit-scrollbar-track-piece,
.menu-wrap .list-menu::-webkit-scrollbar-thumb {
    width: 1rem;
    background: rgba(255,255,255,0);
}
.menu-wrap .list-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0);
}
.menu-wrap .list-menu > li {
    padding: 3rem 0;
    border-top: 1px dotted var(--color-gray300);
}
.menu-wrap .list-menu > li:first-child {
    border-top: 0;
}
.menu-wrap .list-menu > li dl dt {
    padding-bottom: 2rem;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: bold;
}
.menu-wrap .list-menu dd .menu-sub {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem 0;
}
.menu-wrap .list-menu dd .menu-sub > li {
    flex-shrink: 0;
    width: 25%;
    text-align: center;
    cursor: pointer;
}
.menu-wrap .list-menu dd .menu-sub > li > a {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    font-weight: lighter;
    letter-spacing: -1px;
    text-align: center;
}
.menu-wrap .list-menu dd .menu-sub > li > span {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem;
    width: 5.8rem;
    height: 5.8rem;
    border-radius: 50%;
    border: 1px solid var(--color-gray200);
    text-align: center;
}
.menu-wrap .list-menu dd .menu-sub > li > span > img {
    width: 3rem;
    height: 3rem;
}
/*
.menu-wrap .list-menu dd .menu-sub > li > a:before {
    display: block;
    margin: 0 auto 1rem;
    width: 5.8rem;
    height: 5.8rem;
    border-radius: 50%;
    border: 1px solid var(--color-gray200);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 3rem;
    content: "";
}
.menu-wrap .list-menu > li:nth-of-type(1) .menu-sub > li:nth-of-type(1) a:before {
    background-image: url("../images/ico/ico_menu_sub_my.svg");
}
.menu-wrap .list-menu > li:nth-of-type(1) .menu-sub > li:nth-of-type(2) a:before {
    background-image: url("../images/ico/ico_menu_sub_my2.svg");
}
.menu-wrap .list-menu > li:nth-of-type(1) .menu-sub > li:nth-of-type(3) a:before {
    background-image: url("../images/ico/ico_menu_sub_my3.svg");
}
.menu-wrap .list-menu > li:nth-of-type(1) .menu-sub > li:nth-of-type(4) a:before {
    background-image: url("../images/ico/ico_menu_sub_my4.svg");
}
.menu-wrap .list-menu > li:nth-of-type(2) .menu-sub > li:nth-of-type(1) a:before {
    background-image: url("../images/ico/ico_menu_sub_cs.svg");
}
.menu-wrap .list-menu > li:nth-of-type(2) .menu-sub > li:nth-of-type(2) a:before {
    background-image: url("../images/ico/ico_menu_sub_cs2.svg");
}
.menu-wrap .list-menu > li:nth-of-type(2) .menu-sub > li:nth-of-type(3) a:before {
    background-image: url("../images/ico/ico_menu_sub_cs2.svg");
}
.menu-wrap .list-menu > li:nth-of-type(3) .menu-sub > li:nth-of-type(1) a:before {
    background-image: url("../images/ico/ico_menu_sub_community.svg");
}
.menu-wrap .list-menu > li:nth-of-type(3) .menu-sub > li:nth-of-type(2) a:before {
    background-image: url("../images/ico/ico_menu_sub_community2.svg");
}
*/

/* 헤더 - 점포 변경 */
.swiper.list-change-store {
    overflow: hidden;
    margin-bottom: 1rem;
    height: auto; /* [D]23.08.09 추가 */
    max-height: 27rem; /* [D]23.08.09 추가 */
}
.swiper.list-change-store .swiper-slide {
    height: 9rem !important;
}
.swiper.list-change-store li .btn-change-store {
    width: 100%;
    height: 9rem;
    border-radius: 12px;
    font-size: 1.8rem;
    font-weight: lighter;
    text-align: center;
}
.swiper.list-change-store li .btn-change-store small {
    display: block;
    font-size: 1.3rem;
    font-weight: lighter;
}
/* [D]23.08.09 신규 추가 start */
.swiper.list-change-store li .btn-change-store i {
    display: block;
    font-size: 1rem;
    font-weight: lighter;
}
/* [D]23.08.09 신규 추가 end */
.swiper.list-change-store li.active .btn-change-store {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.swiper.list-change-store li.active .btn-change-store small {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: bold;
}

/* 푸터 - 제휴문의 */
.contact-addr {
    margin-top: 4rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background-color: var(--color-gray100);
}
.contact-addr {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    margin-top: 4rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-gray100);
}
.contact-addr dt {
    flex: 1 1 6.8rem;
    width: 6.8rem;
    color: var(--color-gray500);
    font-size: 1.3rem;
    font-weight: lighter;
}
.contact-addr dd {
    flex: 1 1 calc(100% - 6.8rem);
    width: calc(100% - 6.8rem);
    color: var(--color-gray500);
    font-size: 1.5rem;
    font-weight: lighter;
}
.contact-addr dd a {
    text-decoration: underline;
    font-weight: lighter;
}

/* 푸터 - 클래스검색 */
/*
.recommendation-word .btn-word {
    width: 100%;
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 5.2rem;
    text-align: left;
}
*/
.search-class-pop {
    margin: 0 -2rem;
}
.search-class-pop .f-input.search-class {
    padding: 0 2rem;
}
.search-class-pop .f-input.search-class > input {
    padding-left: 1rem;
    border-bottom-width: 5px;
}
.search-class-pop .f-input.search-class .btn-search-input {
    right: 2rem; /* [D]22.11.15 수정1, 2 - 2로 적용해주시면 됩니다.*/
}
.search-class-pop .f-input.search-class .btn-del-input {
    right: 7rem; /* [D]22.11.15 수정2 */
}
.search-class-pop > h2 {
    position: relative;
    margin: 5rem 0 1.5rem;
    padding-left: 2.2rem;
    font-size: 2rem;
    font-weight: bold;
}
.search-class-pop > h2:first-of-type {
    margin-top: 4rem;
}
.search-class-pop > h2 > span {
    display: block;
    font-weight: lighter;
}
.search-class-pop > h2:before {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 1.2rem;
    height: 0.1rem;
    background-color: var(--color-black);
    content: "";
}
.latest-wrap {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 4.6rem;
    z-index: 10;
    padding: 1.5rem 2rem 2rem;
    width: calc(100% - 4rem);
    border: 1px solid var(--color-black);
    border-top: 0;
    background-color: var(--color-white);
}
.latest-wrap .latest-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.latest-wrap .latest-top > h2 {
    font-size: 1.3rem;
}
.latest-wrap .latest-top > .btn-word-all {
    font-size: 1.3rem;
    font-weight: bold;
}
.latest-wrap .latest-list {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2rem;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 2.1rem;
}
.latest-wrap .latest-list::-webkit-scrollbar {
    height: 0;
}
.latest-wrap .latest-list::-webkit-scrollbar,
.latest-wrap .latest-list::-webkit-scrollbar-thumb,
.latest-wrap .latest-list::-webkit-scrollbar-track {
    background: transparent;
}
.latest-wrap .latest-list li {
    flex-shrink: 0;
}
.latest-wrap .latest-list li .btn-word-select {
    margin-right: 0.3rem;
    font-size: 1.5rem;
}
.latest-wrap .latest-list li .btn-word-del {
    width: 1.1rem;
    height: 1.1rem;
    background: url("../images/btn/btn_close_popup.svg") 50% 50% no-repeat;
    background-size: 100%;
}
@media only screen and (min-width: 1024px) {
    .latest-wrap .latest-list {
        height: 2.4rem;
    }
    .latest-wrap .latest-list::-webkit-scrollbar {
        height: 0.3rem;
    }
    .latest-wrap .latest-list::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 10px;
    }
    .latest-wrap .latest-list::-webkit-scrollbar-track {
        background-color: #fff;
    }
}

/* 푸터 - 마이찜 */
.my-wish li {
    margin-bottom: 2rem;
}
.my-wish li .card-box {
    position: relative;
    z-index: 1;
    padding: 2rem;
}
.my-wish li .card-box [class^="btn-delete"] {
    display: block;
    position: absolute;
    z-index: 5;
    top: 1.5rem;
    right: 1.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_close_popup.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.my-wish li .card-box [class^="btn-delete"][class*="-fin"] {
    z-index: 3;
    background-image: url("../images/btn/btn_close_popup_white.svg");
}
.my-wish li .card-box .label-group {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.my-wish li .card-box .dimmed {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 15px;
    background-color: rgba(0,0,0,0.4);
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: lighter;
    text-align: center;
}

/* 로그인 - 하단 */
.login-util {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 2rem;
}
.login-util a {
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: 1.9rem;
    text-align: center;
}

/* 마이찜 */
.my-wish-wrap {
    margin-top: 2rem;
}

/* 22.10.12 한유진 추가 - 오픈 전 페이지 */
.h-layout {
    padding-top: 0 !important;
    height: 100vh !important;
}
.landing-bg {
    background: url('../images/common/landing_bg.png') no-repeat 50% 50% / cover;
}
.landing-top {
    height: 57%;
}
.landing-btm {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 43%;
    background: url('../images/common/landing_hand.png') no-repeat 50% 2rem / 100%;
}
.landing-btm > p {
    text-align: right;
    margin: 4rem 3rem 0 0;
}
.landing-btm > .txt-wrap {
    margin-top: 4.5rem;
}
.f-ba::before  {
    content: '';
    display: inline-block;
    width: 6.8rem;
    height: 1px;
    vertical-align: middle;
    background: var(--color-beige);
    margin-right: 1rem;
}
.f-ba::after {
    content: '';
    display: inline-block;
    width: 6.8rem;
    height: 1px;
    vertical-align: middle;
    background: var(--color-beige);
    margin-left: 1rem;
}

@media only screen and (min-width: 320px) and (max-width: 1023px) {
    .h-layout {
        padding-top: 0 !important;
        height: 100% !important;
    }
}

@media only screen and (min-width: 420px) and (max-width: 1023px) {
    .landing-top {
        height: 50%;
    }
    .landing-btm {
        background: none;
        height: 50%;
    }
    .landing-btm > p {
        text-align: center;
        margin: 1rem 0 0;
    }
}

@media only screen and (min-width: 375px) and (max-width: 420px) {
    .landing-top {
        height: 50%;
    }
    .landing-btm {
        height: 50%;
    }
    .landing-btm > .txt-wrap {
        margin-top: 15%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
    .landing-top {
        height: 45%;
    }
    .landing-btm {
        height: 55%;
    }
    .landing-btm > .txt-wrap {
        margin-top: 10%;
    }
    .landing-btm > p {
        margin: 2rem 3rem 0 0;
    }
}

/* 23.12.27 한유진 추가 - 수원점 오픈 전 페이지 */
.landing-bg-suwon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('../images/main/landing_bg_suwon.webp') no-repeat center / 100%;
}
.landing-bg-suwon .img-wrap {
    max-width: 20rem;
}
.landing-bg-suwon .landing-tit {
    font-size: 2rem;
    font-weight: bold;
    line-height: 2.6rem;
    margin-top: 4rem;
    letter-spacing: -0.04rem;
}
.landing-bg-suwon .landing-tit span {
    color: #2e6358;
}
.landing-bg-suwon .landing-txt {
    font-size: 1.5rem;
}
.landing-bg-suwon .landgin-txt-typ2 {
    width: 100%;
}
.landing-bg-suwon .btn-set .btn-medium {
    background: #143028;
    color: var(--color-white);
}