/* body {font-family : "Nanum Gothic", Verdana, sans-serif; width : auto; height : auto;} */
form {height: 100%;}
img {border : 0px; 
    /* width : 100%; height : auto; */
}
#header {height : auto; margin-top:15px;}
#logo {margin-left : 15%;}
.logoImg {width : 15%; margin-right:48.7%;}
.comInfo {width : 15%; vertical-align: bottom;}
#backgroundImg { margin-left: -100px; max-height: 800px; max-width: 1600px;}
#content {height : auto;}
#footer{height: auto; font-size : 10px; font-family: BatangChe; color : gray; margin-left : 15%; margin-top:10px;}
#footer span {text-align: left;}
/* .backgroundImg {text-align: center;} */
/* .backgroundImg img{width : 66.5%; height: 100%;} */
/* #memoryChk{margin-left : 44px;} */
/* .loginDiv {width : 450px; height : 120px; text-align:center; margin:0px auto; margin-top : 45px;} */
/* .remember_id {height: 20px; padding-top:10px; text-align: left; font-size : 14px} */
/* input[type=text] {width : 200px; height : 25px; border-radius : 5px; vertical-align: middle;} */
/* input[type=password] {width : 200px; height : 25px; border-radius : 5px;} */
/* input[type=button] {width: 155px; height : 80px; border-radius : 5px; cursor: pointer; height: 80px; border : 1px solid gray; font-size : 20px; background-color : white; box-shadow: 1px 1px 3px inset gray;} */
* label { display: inline-block; width: 100px;}



.bg {
    position: relative;
    top: 20px;
    margin: 0 auto;
    max-height: 100%;
    max-width: 90%;
    min-height: 85px;
    border-bottom: 5px solid #4fe801;
    /* opacity: 0.55; */
}
.bg1 {
    position: relative;
    top: 20px;
    margin: 0 auto;
    max-height: 100%;
    max-width: 90%;
    min-height: 85px;
    border-bottom: 5px solid #4fe801;
    margin-top: -10px;
}
/* .loginbox::before {
        display: inline-block;
        content: "";
        height:  100%;
        vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 5px 5px gray;
        width: 420px;
        height: 300px;
        background-color: white;
        padding: 30px 50px;
} */
/* .loginbox {
    display: inline-block;
    vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 5px 5px gray;
        width: 420px;
        height: 300px;
        background-color: white;
        padding: 30px 50px;
} */
.img_wraper {
    margin: -10px 0 10px 0;
    text-align: center;
}
#radioBtn {
    padding-top: 20px;
}
#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}
.prefix {
    width:25%;
    height:33px; 
    float:left; 
    vertical-align: middle; 
    background-color: gainsboro; 
    border: 1px solid green; 
    margin: 3px 0; 
    padding: 5px 0 5px 0;
    font-weight: 800;
}
.idpass {
    width:90%;
    margin: 3px 5px 5px 5px;
    font-size: 1em;
    padding: 0.4em;
    border-radius: 0.3125em;
    border-width: 1px;
    border-style: solid;
}
.img1 {
    display: block;
    margin: 0px auto; 
    width: auto;
    /* width:232px;
    vertical-align: middle; 
    background-color: gainsboro; 
    border: 1px solid gainsboro; 
    padding: 5px 0 5px 0; */
}
.txt {
    font-size: 2em;
}

@media all and (min-width:0px) and (max-width:768px) {
    * label { display: inline-block; width: 80px;}
    #idRememberlab {width: 120px;}
    #footer {text-align: center; margin-left: 0%;}
    #login_box {
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 5px 5px gray;
        /* position: relative;  */
        width: 310px;
        height: 265px;
        background-color: white;
        padding: 10px;
        /* margin: auto; */
        /* top: 300px; */
        /* left: 1060px; */
        margin-top: 100px;
    }
    #title01 {width: 100%;}
    body {background-image: none;}
    * input[type=text] { display: inline-block; width: 150px;}
    * input[type=password] { display: inline-block; width: 150px;}
}
@media all and (min-width:768px) and (max-width:1024px) {
    .logoImg {width : 20%; margin-right:48.7%;}
    .comInfo {width : 20%; vertical-align: bottom;}
        * label { display: inline-block; width: 65px;}
    #idRememberlab {width: 120px;}
    #footer {text-align: center; margin-left: 0%;}
    #login_box {
        /* float: right;
        position: absolute; 
        top: 15%;
        right: 5%; */
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 5px 5px gray;
        width: 320px;
        height: 280px;
        background-color: white;
        padding: 30px 35px;
        position: sticky;
        top: 400px;
        left: 1060px;
    }
    #title01 {width: 0px;}
    body {
        width: 100%;
        height: 950px;;
        background-color: #fff;
        background-image: url( "../Images/HarryPhoto_background1.jpg?v=1" );
        background-repeat: no-repeat;
        background-position: top left;   
        background-size: auto;
    }
    * input[type=text] { display: inline-block; width: auto;}
    * input[type=password] { display: inline-block; width: auto;}
}

@media all and (min-width:1025px) {
    #footer {font-size : 12px; text-align: center; margin-left: 0%;}
    #backgroundImg { height: 80%; }
    #login_box {
        /* float: right;
        position: absolute; 
        top: 25%;
        right: 15%; */
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 5px 5px gray;
        width: 420px;
        height: 300px;
        background-color: white;
        padding: 30px 35px;
        position: sticky;
        top: 400px;
        left: 1060px;
    }
    #title01 {width: 0px;}
    body {
        width: 100%;
        height: 950px;;
        background-color: #fff;
        background-image: url( "../Images/HarryPhoto_background1.jpg?v=1" );
        background-repeat: no-repeat;
        background-position: top left;   
        background-size: auto;
    }
    * input[type=text] { display: inline-block; width: auto;}
    * input[type=password] { display: inline-block; width: auto;}
}