body {
    background-color:#222;
    height:100vh;
    /* 배경이미지(background-image) 연습 */
    /*  background-image:url(https://i.pinimg.com/1200x/a2/40/10/a240104e305185a1a253f42ced8bebe1.jpg);
    background-repeat:no-repeat;
    background-position:center 0;
    background-size:cover; */
    /* 배경이미지 통합(특정 대상에 대한 선택자가 1개일 때 사용) */
    /* background:#222 url(https://i.pinimg.com/1200x/a2/40/10/a240104e305185a1a253f42ced8bebe1.jpg) no-repeat center 0 / contain; */
    /* 통합 순서 작성법 : 색깔 ->경로 ->반복 ->위치 / ->크기;  ##순서는 무조건 지켜야함!! */ 
}
/* 로그인 시작 (태그를 다 작성해야함) */
#login_wrap {
    width:500px; 
    /* 정렬, 크기, 여백 등 값을 빠르게 체크하기 위한 목적으로 헥사코드가 아닌 테스트용도란 뜻으로 영문명으로 색상을 입력하면서 배경색 및 테두리를 진행하고 최종 디자인 후 해당 값을 모두 제거한다. */
    /* border:2px solid aqua; */ /* 제거(테스트 값) */
    margin: 0 auto; /* 상하(0) 좌우(auto) */
    /* 어떤 크기로 화면을 보는 것와 상관없이 항상 가운데에 지정 */
    padding:97px 0 0;/* 상(97) 좌우(0) 하(0) */
}
#login_wrap h1 {
    text-align:center;
    /* text-align 해석 : h1 자식, 자손 중 인라인 요소(단순 글자 포함, 인라인 태그까지)를 가운데로 보내기 */
    margin:0 0 87px;
}
#login_wrap h1 a {}
#login_wrap h1 a  img {}
/* 탭메뉴 4, class를 작성할때에는 # id를 작성할때에는 .*/
#login_wrap .tab_menu {
    text-align:center;
    margin:0 0 55px;
}
#login_wrap .tab_menu #sign_in {margin-right:130px; /* 왼쪽에서 오른쪽에서 간격을 준 것이기때문에 margin(바깥쪽)을 사용하는 것 */}
#login_wrap .tab_menu #sign_up {}
#login_wrap .tab_menu #sign_in,
#login_wrap .tab_menu #sign_up {
    font-size:1.25rem; color:#fff;
} /* 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 */
#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 {
    padding:25px 40px; /* 상하(25) 좌우(40) */
    border-radius:36.5px;
    background-color:#FFF;
}
#login_wrap .sign_in_contents #in_frm .id_pw_g li:first-child {margin:0 0 14px;}
/* li와 li의 사이만 떨어트리기위해서는 값을 적용할려는 태그 첫번째를 수열로 만들어준다.*/
#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 {
    /* 체크박스가 선택됐을때(활성화) `+` 형제를 사용할때 */
    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);
    width:24px; height:24px;
    /* 크기가 제한되어 있어서 반복하지 않는 것! */
    display:inline-block;
    /* inline는 인식하지않기때문에 블록으로 변환해줘야한다.
    ->display(사용)  */
    background-repeat:no-repeat;
    background-size:24px; /* 배경이미지 크기 */
    background-position:left top; /* 요소 이미지 크기 */
}
#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 {
    color:#FFF;
    display:block; text-align:center;
} 
/* 로그인이 안될때 */
/* SIGN UP 1 */
#login_wrap .sign_up_contents {}