body
{
    background-color: #222;
    height: 100vh;
    /* /* 배경이미지(background-image 연습 */
    /* background-image: url(https://i.pinimg.com/736x/e7/6b/9e/e76b9e75a74b211793f03d9813ac375e.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: contain; */
    /* 배경이미지 설정 통합 (특정 대상에 대한 선택자가 1개일 때)*/
    /*  background : #222 url(https://i.pinimg.com/736x/e7/6b/9e/e76b9e75a74b211793f03d9813ac375e.jpg) 
                no-repeat center 0 / contain; */
    /* background : 색상, 경로 반복 위치 / 크기; */
}
/* 로그인 */
#login_wrap 
{
    width: 500px; 
    /* 정렬, 크기, 여백 등 값을 빠르게 체크하기 위한 목적으로 헥사코드가 아닌 
        테스트용도란 뜻으로 영문명으로 색상을 입력하면서 배경색 및 테두리를 진행하고
        최종 디자인 후 해당 값을 모두 제거한다. */
    margin: auto;    
    padding: 97px 0 0;
}
#login_wrap h1 
{    
    text-align: center;
    margin: 0 0 87px;
}
#login_wrap h1 a {}
#login_wrap h1 a img {}
/* 텝 메뉴 */
#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: #fff;}
#login_wrap .tab_menu .active 
{
     /* 활성화 */   
    display: inline-block;
    padding:0 0 10px; 
    border-bottom: 3px solid#1ED760;
    /* a inline 태그는 여백&크기 인식을 못해서 겹침현상이 발생한다
    해결 방법 : display: inline-block; */
}
/* sign in */
#login_wrap .sign_in_contents {}
#login_wrap .sign_in_contents #login_frm{}

#login_wrap .sign_in_contents #login_frm .id_pw_g{}
#login_wrap .sign_in_contents #login_frm .id_pw_g li
{
    background-color: #fff;
    padding: 25px 40px; /* 상하25, 좌우40 */
    border-radius: 36px;    
}
#login_wrap .sign_in_contents #login_frm .id_pw_g li:nth-child(1){margin: 0 0 14px;}
#login_wrap .sign_in_contents #login_frm .id_pw_g li .id_pw{width: 100%;}
#login_wrap .sign_in_contents #login_frm .id_pw_g li #user_name{}
#login_wrap .sign_in_contents #login_frm .id_pw_g li #user_pw{}

#login_wrap .sign_in_contents #login_frm .login_status{margin: 31px 0;}
#login_wrap .sign_in_contents #login_frm .login_status #login_y 
{
    margin-right: 10px;
    /* input checkbox 또는 radio는 디자인을 다양하게 할 수 없기 때문에 태그를 준비하되 
    CSS 디자인결과에서 보이지 않도록 숨겨두고 별도로 이미지를 준비해야 된다 */
    display: none;
    margin-bottom: 33px;
}
#login_wrap .sign_in_contents #login_frm .login_status #login_y:checked+span
{
    /* 체크박스가 선택 됐을 때(활성화) */
    background-image: url(../images/check_on_box.svg);
}
#login_wrap .sign_in_contents #login_frm .login_status .chk_bg 
{
    /* 이미지태그(img->html)는 삽입과 동시에 크기 인식 */
    /* 배경이미지 cSS는 크기자동인식x 필요한 모든 값을 수동입력*/
    /* 활성화(노랑) 비활성화(흰색) */
    background-image: url(../images/check_off_box.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left top;
    width:24px; height:24px;
    display: inline-block;    
}
#login_wrap .sign_in_contents #login_frm .login_status label 
{
    color: #fff;
    display: inline-block;
    transform: translateY(-5px);
}

#login_wrap .sign_in_contents #login_frm .btn_forget {}
#login_wrap .sign_in_contents #login_frm .btn_forget #sign_in_btn
{    
    background-color: #1ED760;  
    width: 100%; height: 73px;    
    border-radius: 36.5px;    
    margin-bottom: 14px;
}
#login_wrap .sign_in_contents #login_frm .btn_forget .forget_pw
{    
    text-align: center;    
}

#login_wrap .sign_in_contents #login_frm .btn_forget #sign_in_btn,
#login_wrap .sign_in_contents #login_frm .btn_forget .forget_pw
{
    display: block;
    color: #fff;
}

/* sign up */
#login_wrap .sign_up_contents {}