@media all and (min-width:0px) and (max-width:411px){
    #login_screen {
        width: 100%;
        height: 550px;
    }

    #login_screen_mid {
        position: relative;
        margin: 0px auto;
        width: 80%;
        height: 500px;
    }

    #login_screen_mid_0 {
        width: 100%;
        height: 50px;
    }

    #login_screen_mid_1 {
        width: 100%;
        margin-top:20px;
    }

    #login_screen_mid_1 > p {
        color: #07345e;
        font-size: 24px;
        font-weight: 1000;
    }
    .login_member {
        width: 80%;
        display: block;
        margin: 0px auto;
        /*margin-top: 20px;*/
    }

    .login_member > input[type=text], .login_member > input[type=password], .login_member > input[type=submit] {
        position: relative;
        margin: 15px auto;
        padding:5px;
        width: calc(100% - 10px); /* 원하는 너비 설정 */
        height: 30px; /* 높이값 초기화 */
        line-height: normal; /* line-height 초기화 */
        font-family: inherit; /* 폰트 상속 */
        border: 1px solid #07345e;
        border-radius: 0.5em;
        outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */
        -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    .login_member > input[type=submit] {
        background-color: #07345e;
        width:calc(100% + 2px);
        height:40px;
        border: 0px;
        color: #fff;
    }

    .login_member > input[type=submit]:hover {
        background-color: rgb(32, 146, 180);
    }

    .login_member > input[type=checkbox] {
        position: relative;
    }

    .login_member > .login_vertical {
        clear: both;
        margin: 15px auto;
    }

    .login_member > .login_vertical > a {
        font-size: 15px;
        color: #07345e;
    }

    .login_nonmember {
        width: 400px;
        height: 500px;
        display: none;
        margin: 0px auto;
        margin-top: 50px;
        background-color: red;
    }

    #login_screen_mid_2 {
        position: absolute;
        left: 550px;
        width: 550px;
        height: 600px;
        background-color: #224;
    }
}
@media all and (min-width:411px) and (max-width:768px){
    #login_screen {
        width: 100%;
        height: 550px;
    }

    #login_screen_mid {
        margin: 0px auto;
        width: 80%;
        height: 500px;
    }

    #login_screen_mid_0 {
        width: 100%;
        height: 50px;
    }

    #login_screen_mid_1 {
        width: 100%;
        margin-top:20px;
    }

    #login_screen_mid_1 > p {
        color: #07345e;
        font-size: 28px;
        font-weight: 1000;
    }
    .login_member {
        width: 80%;
        display: block;
        margin: 0px auto;
        margin-top: 25px;
    }

    .login_member > input[type=text], .login_member > input[type=password], .login_member > input[type=submit] {
        position: relative;
        margin: 15px auto;
        padding:5px;
        width: calc(100% - 10px); /* 원하는 너비 설정 */
        height: 30px; /* 높이값 초기화 */
        line-height: normal; /* line-height 초기화 */
        font-family: inherit; /* 폰트 상속 */
        border: 1px solid #07345e;
        border-radius: 0.5em;
        outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */
        -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    .login_member > input[type=submit] {
        background-color: #07345e;
        width:calc(100% + 2px);
        height:40px;
        border: 0px;
        color: #fff;
    }

    .login_member > input[type=submit]:hover {
        background-color: rgb(32, 146, 180);
    }

    .login_member > input[type=checkbox] {
        position: relative;
    }

    .login_member > .login_vertical {
        clear: both;
        margin: 15px auto;
    }

    .login_member > .login_vertical > a {
        font-size: 15px;
        color: #07345e;
    }

    .login_nonmember {
        width: 400px;
        height: 500px;
        display: none;
        margin: 0px auto;
        margin-top: 50px;
        background-color: red;
    }

    #login_screen_mid_2 {
        position: absolute;
        left: 550px;
        width: 550px;
        height: 600px;
        background-color: #224;
    }
}
@media all and (min-width:768px) and (max-width:1024px){
    #login_screen {
        width: 100%;
        height: 600px;
    }

    #login_screen_mid {
        margin: 0px auto;
        width: 768px;
        height: 600px;
    }

    #login_screen_mid_0 {
        width: 100%;
        height: 50px;
    }

    #login_screen_mid_1 {
        width: 100%;
    }

    #login_screen_mid_1 > p {
        color: #07345e;
        font-size: 30px;
        font-weight: 1000;
        margin-bottom: 50px;
        margin-left:10%;
    }
    .login_member {
        width: 400px;
        height: 500px;
        display: block;
        margin: 0px auto;
        margin-top: 50px;
    }

    .login_member > input[type=text], .login_member > input[type=password], .login_member > input[type=submit] {
        position: relative;
        margin: 15px auto;
        padding:5px;
        width: 390px; /* 원하는 너비 설정 */
        height: 30px; /* 높이값 초기화 */
        line-height: normal; /* line-height 초기화 */
        font-family: inherit; /* 폰트 상속 */
        border: 1px solid #07345e;
        border-radius: 0.5em;
        outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */
        -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    .login_member > input[type=submit] {
        background-color: #07345e;
        width:402px;
        height:40px;
        border: 0px;
        color: #fff;
    }

    .login_member > input[type=submit]:hover {
        background-color: rgb(32, 146, 180);
    }

    .login_member > input[type=checkbox] {
        position: relative;
    }

    .login_member > .login_vertical {
        clear: both;
        margin: 15px auto;
    }

    .login_member > .login_vertical > a {
        font-size: 15px;
        color: #07345e;
    }

    .login_nonmember {
        width: 400px;
        height: 500px;
        display: none;
        margin: 0px auto;
        margin-top: 50px;
        background-color: red;
    }

    #login_screen_mid_2 {
        position: absolute;
        left: 550px;
        width: 550px;
        height: 600px;
        background-color: #224;
    }
}
@media all and (min-width:1024px) and (max-width:1152px){
    #login_screen {
        width: 100%;
        height: 700px;
    }

    #login_screen_mid {
        position: relative;
        margin: 0px auto;
        width: 1024px;
        height: 600px;
    }

    #login_screen_mid_0 {
        width: 1024px;
        height: 50px;
    }

    #login_screen_mid_1 {
        position: absolute;
        width: 550px;
        height: 600px;
    }

    #login_screen_mid_1 > p {
        color: #07345e;
        font-size: 30px;
        font-weight: 1000;
        margin-bottom: 50px;
    }

    .login_member {
        width: 400px;
        height: 500px;
        display: block;
        margin: 0px auto;
        margin-top: 50px;
    }

    .login_member > input[type=text], .login_member > input[type=password], .login_member > input[type=submit] {
        position: relative;
        margin: 15px auto;
        padding:5px;
        width: 390px; /* 원하는 너비 설정 */
        height: 30px; /* 높이값 초기화 */
        line-height: normal; /* line-height 초기화 */
        font-family: inherit; /* 폰트 상속 */
        border: 1px solid #07345e;
        border-radius: 0.5em;
        outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */
        -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    .login_member > input[type=submit] {
        background-color: #07345e;
        width:402px;
        height:40px;
        border: 0px;
        color: #fff;
    }

    .login_member > input[type=submit]:hover {
        background-color: rgb(32, 146, 180);
    }

    .login_member > input[type=checkbox] {
        position: relative;
    }

    .login_member > .login_vertical {
        clear: both;
        margin: 15px auto;
    }

    .login_member > .login_vertical > a {
        font-size: 15px;
        color: #07345e;
    }

    .login_nonmember {
        width: 400px;
        height: 500px;
        display: none;
        margin: 0px auto;
        margin-top: 50px;
        background-color: red;
    }

    #login_screen_mid_2 {
        position: absolute;
        left: 550px;
        width: 550px;
        height: 600px;
        background-color: #224;
    }
}
@media all and (min-width:1152px) {
    #login_screen {
        width: 100%;
        height: 700px;
    }

    #login_screen_mid {
        position: relative;
        margin: 0px auto;
        width: 1100px;
        height: 600px;
    }

    #login_screen_mid_0 {
        width: 1100px;
        height: 50px;
    }

    #login_screen_mid_1 {
        position: absolute;
        width: 550px;
        height: 600px;
    }

    #login_screen_mid_1 > p {
        color: #07345e;
        font-size: 30px;
        font-weight: 1000;
        margin-bottom: 50px;
    }

    .login_member {
        width: 400px;
        height: 500px;
        display: block;
        margin: 0px auto;
        margin-top: 50px;
    }

    .login_member > input[type=text], .login_member > input[type=password], .login_member > input[type=submit] {
        position: relative;
        margin: 15px auto;
        padding:5px;
        width: 390px; /* 원하는 너비 설정 */
        height: 30px; /* 높이값 초기화 */
        line-height: normal; /* line-height 초기화 */
        font-family: inherit; /* 폰트 상속 */
        border: 1px solid #07345e;
        border-radius: 0.5em;
        outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */
        -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    .login_member > input[type=submit] {
        background-color: #07345e;
        width:402px;
        height:40px;
        border: 0px;
        color: #fff;
    }

    .login_member > input[type=submit]:hover {
        background-color: rgb(32, 146, 180);
    }

    .login_member > input[type=checkbox] {
        position: relative;
    }

    .login_member > .login_vertical {
        clear: both;
        margin: 15px auto;
    }

    .login_member > .login_vertical > a {
        font-size: 15px;
        color: #07345e;
    }

    .login_nonmember {
        width: 400px;
        height: 500px;
        display: none;
        margin: 0px auto;
        margin-top: 50px;
        background-color: red;
    }

    #login_screen_mid_2 {
        position: absolute;
        left: 550px;
        width: 550px;
        height: 600px;
        background-color: #224;
    }
}