body {background-color: #222;
/* 배경이미지 연습*/
/* background-image: url(https://i.pinimg.com/1200x/ce/8e/30/ce8e3057f50af37bcf0ba54462929e85.jpg);
background-repeat: no-repeat;
background-position:center 0;
background-size: contain;
height: 100vh;
/* 배경이미지 통합(특정 대상에 대한 선택자가 1개일 때 ) */
/* background: yellowgreen url(https://i.pinimg.com/1200x/ce/8e/30/ce8e3057f50af37bcf0ba54462929e85.jpg) repeat center / contain; */
/* background : 색상 경로 반복 위치 / 크기; */ 
}
/* 로그인시작 4 */
#login_wrap {
    width: 500px; 
    /* 정렬,크기,여백 등 값을 빠르게 체크하기 위한 목적으로 헥사코드가 아닌 테스트 용도란 뜻으로 영문으로 색상을 입력하면서
    배경색 및 테두리를 진행하고 최종 디자인 후 해당 값을 모두 제거한다.*/
   /*  border: 2px solid aqua;  *//* 제거 */
    margin: 0 auto; /* 상하 (0) 좌우 (auto) */
    padding: 97px 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_in,
#login_wrap .tab_menu #sign_up{
    color: white;
    font-weight: 500;
    font-size: 1.25rem;
} /* in+up그룹 */
#login_wrap .tab_menu .active{
    display:inline-block ;
    border-bottom: 3px solid #1ED760;
    padding: 0 0 10px;
    /* a inline 태그는 여백이나 크기 인식을 못하고 겹침현상이 발생한다.
    ->해결-> dispaly: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: #FFF;
    padding: 25px 40px;
    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_id{}
#login_wrap .sign_in_contents #in_frm .id_pw_g li #user_pw{} 
/* id_pw_g 끗 */
#login_wrap .sign_in_contents #in_frm .login_status{

    margin: 31px 0;
}
#login_wrap .sign_in_contents #in_frm .login_status #login_y {
    margin: 0 10px 0 0; /* 상,우,하,좌 */
    /* input checkbow or 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);
    width: 24px; height:24px ;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: left top;
    display: inline-block;
}
#login_wrap .sign_in_contents #in_frm .login_status label{
    color: #FFF;
    transform: translateY(-7px);
    display: inline-block;
}
/* 로그인 상황 끗 */
#login_wrap .sign_in_contents #in_frm .btn_forget{

}
#login_wrap .sign_in_contents #in_frm .btn_forget #sign_in_btn{ 
    font-weight: 700;
    background-color: #1ED760;
    color: #FFF;
    display: block;
    width: 100%; height: 73px;
    border-radius: 36.5px;
    margin: 0 0 14px;
}
#login_wrap .sign_in_contents #in_frm .btn_forget .forget_pw{
    text-align: center;
    display: block;
    color: #FFF;
}
/* SIGN_UP 1*/
#login_wrap .sign_up_contents {}