body {
    background-color: #222;
    height: 100vh;
/*     background: #222 url(https://i.pinimg.com/1200x/dd/7a/64/dd7a649d2d7dfd046b30c32954097dcc.jpg) no-repeat center 0 / contain;
    배경이미지(background-image) 연습
    background-image: url(https://i.pinimg.com/1200x/dd/7a/64/dd7a649d2d7dfd046b30c32954097dcc.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: contain;
    /* 배경이미지 통합(특정 대상에 대한 선택자가 1개일 때)
    background:색상 경로 반복 위치 / 크기; */
}   
/* 로그인 시작 (4) */
#login_wrap {
    width: 500px;
    /* 정렬, 크기, 여백 등 값을 빠르게 체크하기 위한 목적으로 헥사코드가 아닌
    테스트용도란 뜻으로 영문명으로 색상을 입력하면서 배경색 및 테두리를 진행하고
    최종 디자인 후 해당 값을 모두 제거한다. */
    margin: 0 auto;/* 상하(0) 좌우(auto) */
    padding: 97px 0 0;/* 상(97) 좌우(0) 하(0) */
}
#login_wrap h1 {
    margin: 0 0 87px;
    text-align: center;
    /* text-align 해석 : h1의 자식, 자손 중 인라인 요소
    (단순 글자 포함, 인라인 태그까지)를 가운데로 보내기 */
}
#login_wrap h1 a {}
#login_wrap h1 a img {}
/* 탭메뉴 (4) */
#login_wrap .tab_menu {
    text-align: center;
    margin: 0 0 55px;
}
#login_wrap .tab_menu #sign_in {margin-right: 136px;}
#login_wrap .tab_menu #sign_up {}
#login_wrap .tab_menu #sign_in,
#login_wrap .tab_menu #sign_up {
    font-size: 1.25rem;
    color: white;
}/* in+up 그룹 */
#login_wrap .tab_menu .active {
    border-bottom:3px solid #1ED760;
    padding: 0 0 10px;
    display: inline-block;
    /* a inline 태그는 여백&크기 인식을 못하고 겹침현상 발생 -> 해결 ->
    -> display:block 또는 inline-block ; */
}/* 활성화 */
/* SIGN IN (13) */
#login_wrap .sign_in_contents {
}
#login_wrap .sign_in_contents #in_frm {}
#login_wrap .sign_in_contents #in_frm .id_pw_g {
}
#login_wrap .sign_in_contents #in_frm .id_pw_g li {
    background-color: white;
    padding: 25px 40px;/* 상하(25) 좌우(40) */
    border-radius: 36.5px;
}
#login_wrap .sign_in_contents #in_frm .id_pw_g li:first-child {margin: 0 0 14px;}
#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: 31px 0;/* 상하(31) 좌우(0) */
}
#login_wrap .sign_in_contents #in_frm .login_status #login_y {
    margin: 0 10px 0 0;/* 상(0) 우(10) 하(0) 좌(0) */
    /* input checkbox 또는 radio는 디자인을 다양하게 할 수 없기 때문에
    태그는 준비하되 CSS 디자인결과에서 보이지 않도록 숨겨두고
    별도로 이미지를 준비해서 디자인한다. */
    display: none;/* 시각적으로만 안보이게 하기, 태그는 존재함 */
}
#login_wrap .sign_in_contents #in_frm .login_status #login_y:checked+span {
    /* 체크박스가 선택됐을때(활성화) 형제 span 디자인 */
    background-image: url(../images/check_on.svg);
}
#login_wrap .sign_in_contents #in_frm .login_status .chk_bg {
    /* 이미지 태그는 삽입과 동시에 크기 인식 */
    /* 배경이미지 CSS는 크기 자동인식(x), 필요한 모든 값은 수동입력 */
    /* 활성화(노랑) 비활성화(흰색) */
    background-image: url(../images/check_off.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left top;
    width:24px ; height:24px ;
    display: inline-block;
}
#login_wrap .sign_in_contents #in_frm .login_status label {
    color: #fff;
    display: inline-block;
    transform: translateY(-6px);
}
#login_wrap .sign_in_contents #in_frm .btn_forget {}
#login_wrap .sign_in_contents #in_frm .btn_forget #sign_in_btn {
    background-color: #1ED760;
    color: #fff;
    display: block;
    font-weight: 700;
    margin: 0 0 14px;
    width: 100%;
    height: 73px;
    border-radius: 36.5px;
}
#login_wrap .sign_in_contents #in_frm .btn_forget .forget_pw {
    text-align: center;
    color:#fff ;
    display: block;
}
/* SIGN UP (1) */
#login_wrap .sign_up_contents {}