/* BASIC css start */
.login_btn.login__btn.cta.cta--yellow{
    border-radius: 0;
    -webkit-appearance: none;
    width: auto !important;
    display: block;}

/* html 에서 옮긴 css */
.keyboard_guide {
    position: relative;
    padding: 5px 5px 3px 5px;
    min-height: 10px;
    text-align: center;
}

.keyboard_guide a[href='#keyboard_specialchars'] {
    float: right;
    color: #999;
    margin-left: 10px;
}

.keyboard_guide a[href='#keyboard_specialchars'].opened {
    color: #000
}

.keyboard_guide a[href='#keyboard_specialchars'] span {
    padding-left: 3px;
    font-size: 7px;
}

.keyboard_guide a[href='#keyboard_hangul'] {
    float: right;
    color: #999
}

.keyboard_guide a[href='#keyboard_hangul'].opened {
    color: #000
}

.keyboard_guide a[href='#keyboard_hangul'] span {
    padding-left: 3px;
    font-size: 7px;
}

.keyboard_guide_img .keyboard_hangul {
    display: None;
    margin: 23px auto 0 auto;
    width: 290px;
    height: 80px;
    background: url('/design/skinfood/mobile_skinfood/images/common/keyboard.gif') no-repeat;
    background-size: 100% auto
}

.keyboard_guide_img .keyboard_specialchars {
    display: None;
    margin: 23px auto 0 auto;
    width: 290px;
    height: 55px;
    background: url('/design/skinfood/mobile_skinfood/images/common/keyboard.gif') no-repeat 0 -85px;
    background-size: 100% auto;
    display: none;
}
/* html 에서 옮긴 css */

/* wib css 추가 */
#layout_body {
    margin: 20px 15px 127px;
    text-align: center;
}

/* 로고 */
.service-card__icon {
    margin-bottom: 40px;
}

/* 탭 타이틀 */
.login__tab-list {
    display: inline-flex;
    width: 100%;
}

.login__tab-list li {
    width: 50%;
    line-height: 46px;
    background: var(--itemBg);
    border: 1px solid var(--white600);
}

.login__tab-list li:first-child {
    margin-right: -1px;
}

.login__tab-list li span {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: -0.42px;
    color: var(--black800);
}

/* 활성화 탭 */
.login__tab-list li.login__tab-item--active {
    background: var(--white);
    border: 1px solid #B7B7B7;
}

.login__tab-list li.login__tab-item--active span {
    font-weight: 500;
}

/* 로그인 폼 */
.login-form {
    margin: 20px 0 50px;
}

.login-form .login__input {
    display: flex;
    flex-flow: column;
    gap: 10px 0;
}

.login-form input {
width: 100%;
  height: 55px;
  border: 1px solid var(--inputLIne) ;
  border-radius: 5px;
  color: var(--black);
  padding: 0 0 0 15px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
}

.login-form input::placeholder {
  color: var(--black500);
}

/* 아이디저장 & 보안접속 */
.login__save-id {
    display: flex;
    margin: 20px 0 40px;
    gap: 0 10px;
}

.login__save-id input {
    border: none;
    border-radius: 0;
}

/* 로그인 버튼 */
.blackBtn,
.grayBtn {
    display: block;
    width: 100%;
}

/* 비회원 주문주회 */
#tab2 input {
    width: 100%;
}

#tab2 .login_form_box {
    margin: 20px 0 40px;
}

#tab2 input[name="order_name"] {
    margin-bottom: 10px;
}

#tab2 .login__btn-wrap {
    margin-top: 40px;
}

#tab2 .grayBtn {
    margin-top: 10px;
    color: var(--black700);
}

/* 회원가입 & ID/PW찾기 */
.login__btn-list {
    display: inline-flex;
    margin: 20px 0 0;
    gap: 0 30px;
}

.login__btn-list li {
    position: relative;
}

.login__btn-list li a {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: var(--black800);
}

.login__btn-list li:first-child:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: var(--black500);
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.login__btn-list li:last-child a {
    color: var(--black500);
}

/* 또는 */
.orLine {
    margin-bottom: 40px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: var(--black500);
    position: relative;
}

.orLine::after {
    content: '';
    display: inline-block;
    width: calc(50% - 22px);
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--black500);
}
.orLine::before {
    content: '';
    display: inline-block;
    width: calc(50% - 22px);
    height: 1px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--black500);
}

/* sns 로그인 */
.sns_login_ul {
    display: flex;
    gap: 10px 0;
    flex-flow: column;
}

.sns_login_ul a img {
    width: 100%;
}

/* BASIC css end */