@charset "UTF-8";

.form-popup {width: 100%; border-top: 8px solid var(--highlight); background-color:#FFFFFF; position: relative; z-index: 100;}

.form-popup .pop-top {position: relative; padding: 25px 50px; border-bottom:1px solid #dfdfdf; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.form-popup .pop-top .logo-area {width: 198.82px; height: 26.52px;}
.form-popup .pop-top .logo-area .logo {width: 100%; height: 100%; display: block; object-fit: contain;}
.form-popup .pop-top .close {top: 50%; transform: translateY(-50%);}

.form-popup .cont{padding: 50px;}
.form-popup .cont .form-table {width: 100%;}
.form-popup .cont .form-table tr {width: 100%;}
.form-popup .cont .form-table tr td {width: 100%; padding: 10px 0;}
.form-popup .cont .form-table tr:first-child td {padding-top: 0;}
.form-popup .cont .form-table tr .td-name, 
.form-popup .cont .form-table tr .td-contact {
    display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-wrap: wrap;
}
.form-popup .cont .form-table tr .td-checkbox {position: relative; padding: 6px 0 0;}
.form-popup .cont .form-table tr td input, 
.form-popup .cont .form-table tr td select, 
.form-popup .cont .form-table tr td textarea,
.form-popup .cont .form-table tr td .privacy-of-use {
    width: 100%; border: 1px solid #dfdfdf; padding: 10px 20px;
}
.form-popup .cont .form-table tr td .input-name, 
.form-popup .cont .form-table tr td .select, 
.form-popup .cont .form-table tr td .input-email, 
.form-popup .cont .form-table tr td .input-tel {
    width: calc((100% - 20px)/2);
}
.form-popup .cont .form-table tr td .input-name, .form-popup .cont .form-table tr td .input-email {margin-right: 20px;}
.form-popup .cont .form-table tr td textarea {height: 200px;}

.form-popup .cont .btn-area {width: 100%; padding: 50px 0 0; text-align: center;}
.form-popup .cont .btn-area .btn-submit {width: 100%; max-width: 200px; height: 50px; border-radius: 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.2px; color: #fff; background: var(--highlight); margin: 0 auto;}

.form-popup input[type=checkbox] + label {justify-content: end;}





@media screen and (max-width:480px){
    .form-popup .pop-top {padding: 25px 16px;}
    .form-popup .cont {padding: 30px 16px;}
    .form-popup .cont .form-table tr .td-name, 
    .form-popup .cont .form-table tr .td-contact {flex-wrap: wrap;}
    .form-popup .cont .form-table tr td .input-name,
    .form-popup .cont .form-table tr td .select,
    .form-popup .cont .form-table tr td .input-email,
    .form-popup .cont .form-table tr td .input-tel {width: 100%;}
    .form-popup .cont .form-table tr td .input-name, 
    .form-popup .cont .form-table tr td .input-email {margin-right: 0; margin-bottom: 20px;}
}