/* ************************************************************************************ */
/************* Media Query *************/

@media(max-width:640px) {
    header {
        position:fixed;
        width:100%;
        height:65px; 
        opacity:0.97;
        background-color:#ffffff;
    
        z-index:3;
    }

    .LogIn {
        width:90%;
        height:420px;
        margin:0 auto;
        margin-top:130px;
        text-align: center;
        /*background-color:#f8f8fa;*/
    }
    
    .LogIn > h2{
        font-size: 40px;
        color: #6A24FE;
        margin-bottom: 30px;
    }

    #login-form > input{
        width: 300px;
        height: 48px;
        padding: 0 10px;
        font-size: 20px;
        box-sizing: border-box;
        margin-bottom: 16px;
        border: none;
        border-bottom: solid #aaaaaa 1px;
        position: relative;
        background: none;
    }
    #login-form > input::placeholder{
        color: #D2D2D2;
    }
    #login-form > input[type="button"]{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--button-bg-color);
        color: var(--button-color);
        
        margin: 0;
        padding: 0.5rem 1rem;
        
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        
        border: none;
        border-radius: 4px;
        
        display: inline-block;
        width: auto;
        
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        
        cursor: pointer;
        
        transition: 0.5s;
        color:white;
        background-color: #42a5f5;
        font-size: 16px; 
        width: 300px;        
    }
    #Join-form {
        margin-top: 10px;
        text-align: center;
    }
    #Join-form > input{
        width: 290px;
        height: 38px;
        padding: 0 10px;
        box-sizing: border-box;
        border: none;
        border-bottom: solid #aaaaaa 1px;
        position: relative;
        background: none;
        margin-top: 3px;     
    }
    #Join-form > input::placeholder{
        color: #D2D2D2;
    }
}

@media(min-width:640px) {
    header {
        position:fixed;
        width:100%;
        height:65px;
        opacity:0.97;
        background-color:#ffffff;

        z-index:3;
    }

    .LogIn {
        width:80%;
        height:626px;
        margin:0 auto;
        margin-top:200px;
        text-align: center;
        /*background-color:#f8f8fa;*/
    }

    .LogIn > h2{
        font-size: 40px;
        color: #6A24FE;
        margin-bottom: 30px;
    }
    
    #login-form > input{
        width: 300px;
        height: 48px;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 16px;
        font-size: 20px;
        border: none;
        border-bottom: solid #aaaaaa 1px;
        position: relative;
        background: none;
    }
    #login-form > input::placeholder{
        color: #D2D2D2;
    }
    #login-form > input[type="button"]{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--button-bg-color);
        color: var(--button-color);
        
        margin: 0;
        padding: 0.5rem 1rem;
        
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        
        border: none;
        border-radius: 4px;
        
        display: inline-block;
        width: auto;
        
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        
        cursor: pointer;
        
        transition: 0.5s;
        color:white;
        background-color: #42a5f5;
        font-size: 16px; 
        width: 300px;        
    }
    #Join-form {
        margin-top: 10px;
        text-align: center;
    }
    #Join-form > input{
        width: 290px;
        height: 38px;
        padding: 0 10px;
        font-size: 20px;
        box-sizing: border-box;
        border: none;
        border-bottom: solid #aaaaaa 1px;
        position: relative;
        background: none;
        margin-top: 3px;     
    }
    #Join-form > input::placeholder{
        color: #D2D2D2;
    }
}
/* ************************************************************************************ */

html, body {
    width:100%;
    height:100%; 
    margin:0px; 
    padding:0px; 
    font-size:16px;
}

img {
    border:0;
}

#wrapper {
    width:auto;
    height:auto;
    /*background-image:url(../IMG/bg/bg_striped_pattern2560x1440.png);*/
    background-repeat:repeat;
    background-size:cover;
    background-attachment:fixed;
}

main {
    width:100%;
    height:100%; 
}

section {
    height:100%;
    width:100%;
}

/************* Section1 *************/