/* BASIC css start */

.container {
    margin-top: 185px;
}


/* 로그인 관련 */
.login-wrap { max-width: 440px; width:100%; margin:0 auto; padding-bottom: 120px; }
.login-wrap .page-title-wrap { text-align: left; }
.login-wrap .page-title-wrap h2 { line-height: 32px; }
.login-wrap .page-title-wrap p { padding-top: 6px; }
.login-wrap .form-textfield { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.login-wrap .form-textfield input { width: 100%; }
.login-wrap .form-check { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 12px; }
.login-wrap .form-check .form-check-label { margin-right: 16px; font-size: .875rem; white-space: nowrap; }
.login-wrap .btn-link { display: flex; align-items: center; justify-content: center; }
.login-wrap .btn-link a { position: relative; color: var(--cw-heading-color); padding: 0 20px; font-size: .875rem; text-decoration: none; }
.login-wrap .btn-link a:not(:last-child)::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-block; width:1px; height: 14px; background: var(--cw-color-30); content: ''; }
.login-wrap .btn-login { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; }
.login-wrap .btn-order { padding: 24px 0; }
.login-wrap .btn-order .btn-primary { width: 100%; }
.login-wrap .sns-wrap { padding-top: 60px; }
.login-wrap .form-check-label { margin-right: 12px; }
.login-wrap .form-check-input { float: left; margin-right: 8px; }
.MS_login_id,
.MS_login_pw { height: inherit !important; }
.login-wrap .link-join { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; color: var(--cw-heading-color); }
.login-wrap .link-join a { color: var(--cw-heading-color); text-decoration: underline; }

/* sns */
.sns-wrap .sns-title { position: relative; color: var(--cw-color-70); font-size: .875rem; }
.sns-wrap .sns-title::before { display: block; height: 1px; background: var(--cw-color-30); content: ''; }
.sns-wrap .sns-title span { position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); text-align: center; padding: 0 10px; background: var(--cw-color-white); }
.sns-wrap .sns-btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: center; padding: 40px 0; }
.sns-wrap .sns-btns li { display: flex; gap: 5px; align-items: center; justify-content: center; flex-direction: column; }
.sns-wrap .sns-btns li a { width: 44px; height: 44px; border-radius: 50%; font-size: 0; }
.sns-wrap .sns-btns li a.kakaotalk { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_kakao.svg') no-repeat 50% 50%; background-color: #fee500; }
.sns-wrap .sns-btns li a.naver { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_naver.svg') no-repeat 50% 50%; background-color: #03cf5d; }
.sns-wrap .sns-btns li a.facebook { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_facebook.svg') no-repeat 50% 50%; background-color: #1877f2; }
.sns-wrap .sns-btns li a.apple { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_apple.svg') no-repeat 50% 50%; background-color: #121212; }

/* sns 최근 로그인 */
.sns-wrap .sns-btns span { display: inline-block; width: 80px; height: 28px;}


/* 태블릿 */
@media (min-width: 768px) and (max-width: 991.98px) {
    footer,
    .fixed-menu--md { display: none !important; }
}

/* 모바일 */
@media (max-width: 767.98px) {
    footer,
    .fixed-menu--md { display: none !important; }
    .login-wrap .form-check { gap: 8px 20px; margin-right: 0; }
    .login-wrap .form-check .form-check-label:last-child { margin-right: 0; }
    .login-wrap .form-check .form-check-label { font-size: .813rem; }
    
}

/* 띠배너 추가됨에 따라 헤더 스타일 추가 수정 */
#header.scroll #topbanner{transform: translateY(0%);max-height: 45px;opacity: 0;pointer-events: none;}
#header.scroll.click.show .open-menu-wrap, .open-menu-wrap[aria-hidden="false"] {top:105px !important;}
#header.scroll.click.show.is-fixed .open-menu-wrap, .open-menu-wrap[aria-hidden="false"] {top:60px !important;}

#topbanner {
    transition: transform .35s ease, max-height .35s ease, opacity .25s ease;
    overflow: hidden;    /* 높이가 줄어들 때 내용물이 삐져나오지 않게 함 */
    max-height: 200px;   /* 실제 배너 높이보다 넉넉하게 설정 */
    opacity: 1;
}
/* 스크롤이 내려갔을 때 배너를 숨김 */
#header.is-fixed #topbanner {
    max-height: 0 !important;   /* 높이를 0으로 줄임 */
    opacity: 0 !important;      /* 투명하게 만듦 */
    padding-top: 0 !important;  /* 패딩이 있다면 이것도 제거 */
    padding-bottom: 0 !important;
    margin: 0 !important;       /* 여백 제거 */
}
/* 헤더를 상단에 고정하고 싶다면 */
#header.is-fixed {
   /* position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;*/
}

/* 모바일: 띠배너 추가됨에 따라 헤더 스타일 추가 수정 */
@media (max-width: 768px) {
    .header-container--md.scroll {
        top: 45px !important;
    }
    .header-container--md.scroll {
        top: 45px !important;
        z-index: 9999;
    }
    .header-container--md.scroll.is-fixed {
        top: 0px !important;
    }
    .header-container--md.scroll.is-fixed + .m-search-area, .side-menu-wrap.active {
        top: 50px!important;
        padding-top: 0;
    }
    .header-container--md.scroll + .m-search-area, .side-menu-wrap.active {
        top: 94px!important;
    }
    .header-container--md {z-index: 9999;}
    .header-container--md.scroll.is-fixed {top: 45px;}
    .scroll.is-fixed + .side-menu-wrap.active {top: 46px !important;}
    .side-menu-wrap {z-index: 100 !important;}
}

/* BASIC css end */