@charset 'utf-8';

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------ㅋ
* @File Name: layout.css
* @Description : layout
* @Create Date: 2024-07-18
* @Last Update Date: N/A
* @History: N/A
* ====================================================================*/

/* ====================== */
/* interval */
/* ====================== */
.ta-center {text-align:center;}
.ta-right {text-align:right;}
.ta-left {text-align:left;}

.btn-area {display:flex;gap:12px;margin-top:14px;justify-content: end;}

.w-full {width:100%;}
.w-half {width:50%;}
.w-300 {width:300px;}

.mr-20 {margin-right:20px;}

/* ====================== */
/* input */
/* ====================== */
/* file upload */
.upload-container {
    display:inline-flex;
    margin-right:10px;
    border: 1px solid #ccc;
    width: 400px;
    text-align: center;
    border:1px solid #B7B7B7;
    border-radius:8px;
    overflow:hidden;
    font-size:14px;
    align-items:center;
}
.upload-label {padding:10px 15px;border-right:1px solid #B7B7B7;background:#E8E8E8;cursor:pointer;}
.upload-msg {color:#FF5656;font-size:14px;}
.upload-name {padding:0 45px;}
.upload-list {margin:20px 0 8px;padding-left:24px;}
.upload-list .upload-file {margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.upload-list .upload-file-name {display:inline-block;font-size:14px;}
.upload-list .btn-file-cancel {border-radius:4px;background:#2960F6 url(../images/btn_file_cancel.svg) no-repeat center;background-size:10px auto;font-size:0;text-indent:-9999px;overflow:hidden;width:16px;height:16px;display:inline-block;}
.upload-list .upload-file:last-child {margin-bottom:0;}

/* radio */
.radio {position:relative;display:inline-flex;text-align:left;vertical-align:middle;}
.radio input {position:absolute;left:0;top:0;height:100%;border:none;background:transparent;z-index:2;}
.radio label {display:inline-flex;word-break:break-word;align-items:center;gap:8px;}
.radio label i {display:block;position:relative;width:20px;height:20px;border:1px solid #B7BBBF;border-radius:100%;box-sizing:border-box;transition:all 0.2s ease;flex:none;}
.radio label i:before {content: '';position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:100%;background:#fff;transform:translate(-50%, -50%);}
.radio input:checked + label i {border-color:#2960F6;background:#2960F6;}
.radio input:checked + label i:before {background:#fff;}
.radio input:disabled + label i {border-color:#CFD2D7;background:#fff;}
.radio input:disabled + label {color:#CFD2D7;}
.radio input:checked:disabled + label {color:#CFD2D7;}
.radio input:checked:disabled + label i {border-color:#A3B7FF;background:#A3B7FF;}
.radio input:checked:disabled + label i:before {background:#fff;}

/* check */
.checkbox {position:relative;display:inline-flex;text-align:left;vertical-align:middle;}
.checkbox input {position:absolute;left:0;top:0;height:100%;border:none;background:transparent;z-index:2;}
.checkbox label {display:inline-flex;word-break:break-word;align-items:center;gap:8px;font-size:14px;}
.checkbox label i {display:block;position:relative;width:20px;height:20px;border:1px solid #B7BBBF;border-radius:4px;box-sizing:border-box;transition:all 0.2s ease;flex:none;background-color:#fff;}
.checkbox label i:before {content: '';position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%);background:center;background-size:18px auto;}
.checkbox input:checked + label i:before {background-image: url(../images/checkbox.svg);}


/* input */
input[type='text'],
input[type='date'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
textarea {padding:1px 14px;width:100%;height:36px;font-size:14px;vertical-align:middle;border:1px solid #B7B7B7;color:#333D4B;box-sizing:border-box;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:8px;outline:0 none;transition:all 0.3s ease;}
textarea {height:auto;resize:none;padding:14px;line-height:1.45;}
input[type='date'] {width:142px;}

input[type='text'].theme-gray,
input[type='date'].theme-gray,
input[type='tel'].theme-gray,
input[type='email'].theme-gray,
input[type='number'].theme-gray,
input[type='password'].theme-gray,
input[type='search'].theme-gray,
textarea.theme-gray {border:0;background-color:#F9FAFB;}

input[type='text']:focus,
input[type='date']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
textarea:focus {border-color:#2960F6;}

select {position:relative;outline:none;padding:0 40px 0 14px;height:36px;font-size:14px;border:1px solid #CFD2D7;border-radius:4px;overflow:hidden;z-index:1;background:url(../images/select.png) no-repeat calc(100% - 12px)  center;}
select:focus {border-color: #2960F6;}
select.theme-gray {border:0;background-color:#F9FAFB;}



/* ====================== */
/* table */
/* ====================== */
.tls {background-color:#F9FAFB;border-radius:8px;overflow:hidden;}
.tls table {width:100%;border:0;border-collapse:collapse;border-radius:8px;overflow:hidden;text-align:center;}
.tls table thead {font-size:16px;font-weight:600;border-bottom:8px solid #fff;}
.tls table thead tr {overflow:hidden;}
.tls table thead tr th {padding:15px 10px;}
.tls table tbody {font-size:16px;color:#333D4B;font-weight:300;}
.tls table tbody tr td {padding:15px 10px;}
.tls table tbody tr td .btn-small {margin-left:5px;}
.tls table tbody tr td a {color:#3C8DFF;}
.tls table tbody tr.fixing td:first-child {position: relative;}
.tls table tbody tr.fixing td:first-child:before {content:'';display:inline-block;position:absolute;left:20px;top:50%;width:20px;height:20px;background:url(../images/fixing_checked.svg) no-repeat center;background-size:contain;transform:translateY(-50%);}

.tws {background-color:#F9FAFB;border-radius:8px;overflow:hidden;}
.tws table {width:100%;border:0;border-collapse:collapse;border-radius:8px;overflow:hidden;text-align:left;}
.tws table tbody {font-size:16px;color:#333D4B;font-weight:500;}
.tws table tbody th {padding:18px 34px;font-weight:600;}
.tws table tbody td {padding:18px 18px 18px 0;}
.tws table tbody tr {border-bottom:10px solid #fff;}
.tws table tbody tr:last-child {border-bottom:0;}


/* ====================== */
/* button */
/* ====================== */
.btn-small {display:inline-flex;height:28px;align-items:center;padding:0 12px;font-size:13px;font-weight:500;border-radius:6px;justify-content:center;}
.btn-medium {display:inline-flex;height:36px;align-items:center;padding:0 24px;font-size:14px;font-weight:500;border-radius:8px;justify-content:center;}
.btn-large {display:inline-flex;height:50px;align-items:center;padding:0 24px;font-size:16px;font-weight:500;border-radius:8px;justify-content:center;}

.btn-blue {background:#2960F6;color:#fff;}
.btn-gray {background:#333D4B;color:#fff;}
.btn-green {background: #3CB371; color: #fff;}
.btn-white {background:#fff;color:#333D4B;border:1px solid #333D4B;}


/* ====================== */
/* pagination */
/* ====================== */
.pagination {display:flex;margin-top:23px;gap:12px;justify-content:center;}
.pagination-item {color:#A3A3A3;font-weight:500;font-size:16px;}
.pagination-item.active {color:#2960F6;}


/* ====================== */
/* modal */
/* ====================== */

/* 모달 */
.modal {position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.4);display:none;width:100%;height:100%;overflow: hidden;}
.modal.active {display:flex;z-index:100;align-items:center;justify-content:center;}
.btn-modal-close {width:38px;height:38px;display:block;text-indent:-9999px;font-size:0;background:url(../images/btn_modal_close.svg) no-repeat center;background-size:contain;position:absolute;right:0;top:-48px}
.modal-box {display:flex;position:relative;text-align: center;padding:24px 24px 20px;width:480px;background-color:#fff;border-radius:25px;flex-direction:column;}
.modal-title {margin-bottom:30px;font-size:20px;font-weight:700;}
.modal-contents {margin-bottom:30px;max-height:66vh;overflow: auto;}
.modal-contents::-webkit-scrollbar {width: 6px;}
.modal-contents::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 10px;}
.modal-contents::-webkit-scrollbar-thumb {background: #bbb;border-radius: 10px;}
.modal-contents::-webkit-scrollbar-thumb:hover {background: #ddd;}
.modal-contents select {width:100%;}
.modal-btn {display:flex;gap:10px;}

.form-set {text-align:left;}
.form-row {margin-bottom:20px;}
.form-row:last-child {margin-bottom:0;}
.form-row > label {font-size:14px;margin-bottom:10px;display:block;}
.form-msg {font-size:14px;margin-top:7px;}
.form-col {display:flex;gap:10px;flex-wrap:wrap;}
.form-col > .form-row {flex:1 1 40%;}

.modal-question-create .modal-box {width:500px;}
.modal-question-create .checkbox label {font-size:14px;gap:6px;}
.modal-question-create .checkbox label i {width:20px;height:20px;}

.check-label {margin-bottom:10px;}
.check-label > label {font-size:14px;}
.check-label .checkbox {margin-left:8px;}
.check-list {display:flex;gap:5px 12px;flex-wrap:wrap;flex:none;width:100%;}
.checkbox-all {margin-bottom:5px;}
.check-list.col5 {display:grid;grid-template-columns: repeat(5, 1fr);}
.quality-set {display:flex;gap:8px;align-items:center;}