@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html,body{
    font-family: 'Noto Sans KR', sans-serif;
}
img{
    vertical-align:top;
    width:100%;
}
h1{
    display:none;
}
section{
    position:relative;
    max-width:780px;
    margin:0px auto;
}
.m{    
    display:none;
}
.none{
    display:none;
}

.form{
    font-size:21px;
    background:#fff;
    padding:50px 30px 0 30px;
}
.form h2{
    padding:20px;
    color:#fff;    
    text-align:center;
    border-radius:20px 20px 0 0;
}
.form h2 img{
    max-width:356px;
}
.form h2 span{
    color:#fffa72;
}
.form select,
.form input{
    padding-left:10px;
    background:#f2f2f2;
}
.form label{
    color:#444;
    font-weight:bold;
}
.form label:nth-of-type(1){
    display:inline-block;
    width:15%;
    text-align:left;
}
.form>div{
    padding:5% 0;
}
.form>div>div{
    margin-bottom:20px;
}
.form .textbox.on input{
    display:none;
}
.form .textbox .success{
    display:none;
    background:#003975;
    color:#fff;
    padding:5px;
    border-radius:5px;
    margin-left:5%;
    box-shadow:2px 2px 4px #555;
}
.form .textbox.on .success{
    display:inline-block;
}
.form .textbox input,
.form .selectbox select{
    border:0;
    outline:none;
    padding-left:20px;
    border-radius:30px;
    margin-left:5%;
    font-size:1em;
    line-height:3em;    
    height:3em;
}
.form .textbox input::placeholder{
    font-size:0.8em;    
}
.form .textbox input{
    width:79%;    
}
.form .textbox.phone input{
    width:79%;    
}
.form .textbox.phone input:not(:nth-of-type(1)){
    margin:0;    
}
.form .selectbox {    
    position:relative;  
}
.form .selectbox select{
    width:79%;  
    font-size:0.8em;
    appearance:none;
}
.form .selectbox:after{
    content:'';
    position:absolute;
    top:50%;
    right:40px;
    transform:translateY(-50%) rotate(45deg);
    width:15px;
    height:15px;
    border-right:solid 3px #2b2642;
    border-bottom:solid 3px #2b2642;
}
.form .radiobox label:nth-of-type(2){
    margin-left:5%;
}
.form .radiobox input,
.form .checkbox input{
    display:none;
}
.form .radiobox label,
.form .checkbox label{
    vertical-align:middle;
}
.form .checkbox .check,
.form .radiobox .check{
    display:inline-block;
    vertical-align:middle;
}
.form .radiobox input:checked + .check,
.form .checkbox input:checked + .check{
    position:relative;
}
.form .radiobox .check{
    width:39%;
    height:3em;
    line-height:3em;
    color:#ababab;
    text-align:center;
    border-radius:30px;
    background-color:#eaeaea;
}
.form .radiobox input:checked + .check{
    color:#fff;
    background-color:#003975;
}
.form .checkbox label:nth-of-type(1){
    width:inherit;
    margin-right:2%;
}
.form .checkbox{
    position:relative;
}
.form .checkbox .check{
    width:30px;
    height:30px;
    border:2px solid #000;
    border-radius:50%;
}
.form .checkbox input:checked + .check{
    border:0;
    background-image:url('../images/check.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:60%;
    background-color:#003975;
}
.form .checkbox button{    
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    background:#fff;
    color:#646079;
    font-size:1em;
    border:0;
    border-bottom:1px solid #646079;
    vertical-align:middle;
}
.form .checkbox button:after{
    content:'';
    position:absolute;
    top:50%;
    right:-15px;
    transform:translateY(-50%) rotate(45deg);
    width:5px;
    height:5px;
    border-right:solid 2px #2b2642;
    border-bottom:solid 2px #2b2642;
}

.form .submit {
    margin-top:30px;
}
.form .submit button{
    width:100%;
    font-size:1.5em;
    font-weight:bold;
    height:3em;
    line-height:3em;
    color:#fff;
    border:0;
    border-radius:10px;
    background-color:#003975;
    background-image:url(../images/submit_text.png);
    background-repeat:no-repeat;
    background-position:center center;
    box-shadow:0px 10px 15px rgba(0,0,0,0.3);
}
.readme{
    background-color:#eee;
    text-align:center;
    padding: 5%;
}
.readme h2,
.readme p{
    margin:0 auto;
}
.readme h2{
    padding-bottom:50px;
}
.readme p{
    text-align:left;
    font-size: 14px;
}
footer{
    background:#3e3e3e;
    color:#c8c8c8;
    max-width:780px;
    margin: 0 auto;
}
footer>div{
    width:720px;
    padding:30px 0;
    margin:0 auto;
}
footer h2{
    filter:grayscale(1);
    display:inline-block;
    padding-right:30px;
}
footer .ft_text{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    padding-left:30px;
}
footer .ft_text:after{
    content:'';
    position:absolute;
    top:0px;
    left:0px;
    width:1px;
    height:100%;
    background:#878787;
}

.modal{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;   
    z-index:9999; 
}
.modal .bg{    
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}
.modal .con{
    position:absolute;
    top:50%;
    left:50%;
    width:1080px;    
    max-height:95%;
    transform:translate(-50%,-50%);
    padding:20px;
    color:#333;
    background:#fff;
    overflow:auto;
    overscroll-behavior:contain;
}
.modal .con h2{
    padding:5% 0;
    border-bottom:1px solid #999;
    font-size:2.5em;
    text-align:center;
}
.modal .con>p{
    width:95%;
    line-height:2em;
    padding:2% 0;
    margin:0 auto;
}
.modal .con>p{
    border-bottom:1px solid #999;
}
.modal .con>div{    
    width:95%;
    line-height:2em;
    padding:2% 0;
    margin:0 auto;
}
.modal .con>div h3{
    position:relative;
    padding-left:15px;
    margin-bottom:10px;
    font-size:1.5em;
    color:#333;
}
.modal .con>div h3:after{
    content:'';
    position:absolute;
    top:50%;
    left:0px;
    width:10px;
    height:10px;
    transform:translateY(-50%);
    border-radius:50%;
    background-color:#333;
}
.modal .con>div p{
    padding-left:20px;
}
.modal button{
    background:#fff;
    position:absolute;
    top:20px;
    right:20px;   
    width:2.5em;
    height:2.5em; 
    border:0;    
}

.termsArea {height:120px; margin:10px 0 10px 0; padding:10px 20px; border:1px solid #e3e3e3; overflow:auto; font-size: 1em;}
.termsArea:after {height:30px; display:block; content:"";}
.termsArea h3 {font-size:15px; margin:0 0 10px 0; padding-bottom:5px; text-align:left; border-bottom:1px solid #e8e8e8;}
.termsArea .terms {font-size: 13px;}

.submit #info {font-size: 16px; letter-spacing: -1px;}

@media all and (max-width:1080px){
    .modal .con{
        width:95%;
    }
}
@media all and (max-width:780px){
    .form {
        font-size:18px;
    }
    footer h2{
        width:25%;
        padding-right:10px;
    }
    footer>div{
        font-size:14px;
        width:95%;
        text-align:center;
    }
    footer .ft_text{
        padding-left:10px;
        width:60%;
        text-align:left;
    }
    .readme {
        padding: 20px;
    }
    .readme h2{
        font-size: 14px;
        padding-bottom:20px;
    }
    .readme h2, .readme p{
        width:95%;
    }
    .readme p{
        font-size: 12px;
    }    
    .modal .con{
        padding:50px 20px 20px;
    }
    .modal .con h2{
        font-size:1.5em;
    }
    .modal .con p{
        font-size:14px;
    }
    .modal .con>div h3{
        font-size:1em;
    }
    .modal .con>div p{
        padding:0;
    }
    .termsArea .h3 {
        font-size: 1em;
    }    
    .termsArea .terms {
        font-size: 11px;
    }
}
@media all and (max-width:520px){
    .form {
        font-size:16px;
        padding:10px;
    }
    .form label:nth-of-type(1){
        width:15%;
    }
    .form .check label:nth-of-type(1){   
        width:20%;
    }
    .form .textbox input,
    .form .textbox.phone input,
    .form .selectbox select{
        width:75%;
    }
    .form .radiobox .check{
        width:35%;
    }
    .form .submit button{
        border-radius:5px;
    }
    .modal .con{
        padding:50px 20px 20px;
    }
}
@media all and (max-width:430px){
    .form{
        font-size:3vw;
    }
    footer h2{
        width:35%;
    }
    .form .selectbox:after{
        top:45%;
    }
    .form .checkbox .check{
        width:20px;
        height:20px;
        border:2px solid #000;
        border-radius:50%;
    }
    .submit #info {
        font-size: 11px;
        letter-spacing: -1px;
    }
}