/* BASIC css start */
body {padding-top:0 !important;}
#head_box,
#footer {display:none;}

/* 로그인 상단 */
.log-top {display:flex; justify-content:space-between; max-width:460px; height:60px; align-items:center; margin:0 auto; border-bottom:1px solid #EAEAEA; margin-bottom:28px;}

/* 로그인 탭 */
.log-tab {}
.log-tab ul {display:flex; background:#F7F7F7; border-radius:12px; overflow:hidden;}
.log-tab ul li {flex:1; text-align:center;}
.log-tab ul li a {display:block; line-height:52px; border-radius:12px; overflow:hidden; color:#616161;}
.log-tab ul li.on a {background:#000; color:#fff; font-weight:600;}

/* 로그인 관련 */
.login-wrap { max-width: 460px; width:100%; margin:0 auto;}
.login-wrap .title {text-align: center;}
.login-wrap .title h2 {font-weight: 500; font-size: 20px; letter-spacing: -3%; padding:24px 0 6px;}
.login-wrap .title h3 {font-weight: 900; font-size: 31px; letter-spacing: -1%; text-align: center;}
.login-wrap .title h3 svg { height: 37px; width: 100%; }
.login-wrap .title p {color:#777777;}
.login-wrap .form-textfield { display: flex; flex-direction: column; padding-top: 16px; }
.login-wrap .form-textfield input { width: 100%; border-radius:0; border:none; border-bottom:1px solid #ddd; padding:0; height:53px;}
.login-wrap .form-check { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 24px; }
.login-wrap .form-check .form-check-label { margin-right: 16px; font-size: .813rem; white-space: nowrap; display: flex; align-items: center;}
.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-login a {line-height:52px; border-radius: 8px; font-weight:500;}
.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; }

/* 카카오 로그인 */
.kakao-login {background:#ffeb00 url(/design/hippier/img/common/kakao_ic.svg)no-repeat 20px center; line-height:54px; text-align:center; border-radius:8px; margin:24px 0 28px; font-size:16px; letter-spacing:-2%; font-weight:500;}

/* 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 (max-width: 1024px) {
    .log-top {width: calc(100% - 26px);}
    .log-tab ul li a {font-size:15px;}
}

/* 태블릿 */
@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; }
}

/* BASIC css end */