body {
    background-color: #222;
    height:100vh;
    /* 배경이미지(background-image) 연습 */
    /* background:#222 url(https://i.pinimg.com/736x/97/41/ae/9741aef2f8eb2ca83405f5a295fa833f.jpg) no-repeat center 0 / contain;
    background-image: url(https://i.pinimg.com/736x/97/41/ae/9741aef2f8eb2ca83405f5a295fa833f.jpg);
    background-repeat: no-repeat;
    background-position : center 0;
    background-size :contain; */
    /* 배경이미지 통합 (특정 대상에 대한 선택자가 1개일 때)*/
    /* background:색상 경로 반복 위치 / 크기; */
}
/* 로그인 시작 */
#login_wrap {
    width: 500px;
    /* 정렬,크기,여백 등 값을 빠르게 체크하기 위한 목적으로
    헥사코드가 아닌 헥사코드가 아닌 테스트 용도란 뜻으로 영문명으로 
    색상을 입력하면서 배경색 및 테두리를 진행하고 최종 디자인 후 
    해당 값을 모두 제거한다. */
    /* background-color: aqua; */ /* 나중에 제거 */
    margin:0 auto; /* 상하(0) 좌우(auto) */
    padding: 97px 0 0; 
}
#login_wrap h1 {
    text-align: center;
    /* text-align */
    margin: 0 0 87px;   
}
#login_wrap h1 a {}
#login_wrap h1 a img{

}
/* 탭 메뉴 */
#login_wrap .tap_menu {
    text-align: center;
    margin: 0 0 55px;
}
#login_wrap .tap_menu #sign_in,
#login_wrap .tap_menu #sign_up {
    font-size: 1.25rem;
    color: #fff;}
#login_wrap .tap_menu #sign_in {margin-right: 136px;
}
#login_wrap .tap_menu #sign_up {
}
#login_wrap .tap_menu .active {
    border-bottom: 3px solid #1ed760;
    padding:0 0 10px;
    /* a inline태그는 여백&크기 인식을 못하고 겹침현상 발생
    (border-bottom을 padding으로 10px을 줬는데 margin으로 떨어트린
    값이 겹쳐짐)
    해결-> display:block 또는 inline-block */
    display:inline-block;
}
/* SIGN IN */
#login_wrap .sign_in_contents {}
#login_wrap .sign_in_contents #in_frm {}
#login_wrap .sign_in_contents #in_frm .id_pw_g {margin-bottom:31px;}
#login_wrap .sign_in_contents #in_frm .id_pw_g li {
    background-color: #fff;
    padding: 25px 40px;
    border-radius: 36.5px;
     }
#login_wrap .sign_in_contents #in_frm .id_pw_g li:first-child {
    margin-bottom:18px;}
#login_wrap .sign_in_contents #in_frm .id_pw_g li .name_pw {width: 100%;
} /* 아이디 비번 공통 */
#login_wrap .sign_in_contents #in_frm .id_pw_g li #user_name {
} /* 아이디 */
#login_wrap .sign_in_contents #in_frm .id_pw_g li #user_pw {
} /* 비번 */
#login_wrap .sign_in_contents #in_frm .login_status {
    margin-bottom:31px;
}   
#login_wrap .sign_in_contents #in_frm .login_status #login_y {
    margin-right: 10px;
    /* input checkbox 또는 radio는 디자인을 다양하게 할 수 없기 때문에
    태그는 준비하되 CSS 디자인결과에서 보이지 않도록 숨겨두고 별도로 이미지를
    준비해서 디자인한다. */
    display: none;
}
#login_wrap .sign_in_contents #in_frm .login_status #login_y:checked+span {
    /* 체크박스가 선택 됐을 때 (활성화)*/
    background-image: url(../images/check_box.svg);
}
#login_wrap .sign_in_contents #in_frm .login_status label {
    color:#fff;
    transform:translateY(-6px);
    display: inline-block;
}
#login_wrap .sign_in_contents #in_frm .login_status label {}
#login_wrap .sign_in_contents #in_frm .login_status .chk_bg {
    /* html 이미지태그는 삽입과 동시에 크기 인식 */
    /* css배경이미지는 크기자동인식(x), 필요한 모든 값은 수동입력 */
    /* 활성화(노랑) 비활성화(흰색) */
    background-image: url(../images/check_off.svg);
    background-repeat: no-repeat;   
    background-size: 24px;
    background-position:0 0;
    width:24px; height:24px;
    display: inline-block;
}   
#login_wrap .sign_in_contents #in_frm .btn_forget {}
#login_wrap .sign_in_contents #in_frm .btn_forget #sign_in_btn {
    padding: 27px 0;
    display: block; width: 100%;
    font-weight: 700;
    height: 73;
    background-color: #1ed760; color: #fff;
    border-radius: 36.5px;
    margin-bottom:14px;
    text-align: center;
}
#login_wrap .sign_in_contents #in_frm .btn_forget .forget_pw {
    color: #fff;
    display: block;
    text-align: center;
}
/* SIGN UP */
#login_wrap .sign_up_contents {}