body{
    background-color: #222;
    height: 100vh;
    /* 배경이미지(background-image) 연습 */
    /* background-image:url(https://i.pinimg.com/736x/34/66/50/34665033de6f8adfaf07f317db1be6c9.jpg); */
    /* background-repeat:no-repeat; */
    /* background-position: center; */
    /* background-size: contain; */
    /* 배경이미지 통합(특정 대상에 대한 선택자가 1개일 때) */
    /* background:#222 url(https://i.pinimg.com/736x/34/66/50/34665033de6f8adfaf07f317db1be6c9.jpg) repeat left 0 / 100px auto; */
    /* 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{
    color: #fff; text-size: 1.25rem;
}
#login_wrap .tab_menu .active{
    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{}
/* id pw */
#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;/* 상하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 status */
#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;/* 상(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;
    background-repeat:no-repeat;
    background-size: 24px;
    background-position: left top;
    display: inline-block;
}
#login_wrap .sign_in_contents #in_frm .login_status label{
    color: #fff;
    display: inline-block;
    transform: translateY(-7px);
}
/* btn_forget */
#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;
    width: 100%; height: 73px; border-radius: 36.5px;
    display: block; font-weight: 700; margin: 0 0 14px;
}
#login_wrap .sign_in_contents #in_frm .btn_forget .forget_pw{
    display: block; text-align: center;
    color: #fff;
}
/* SIGN UP 1 */
#login_wrap .sign_up_contents{}