@charset "utf-8";
/*
------------------------------------------------------------------------------------------------------------------------
폼메일 쓰기 스타일
------------------------------------------------------------------------------------------------------------------------
*/

input:focus {
    outline:none;
    -webkit-tap-highlight-color : transparent;
}

textarea:focus {
    outline:none;
    -webkit-tap-highlight-color : transparent;
}


#loadingAnimation {
    position: fixed;
    width: 100%;
    height:100%;
    left: 0;
    top: 0;
    background:rgba(0,0,0,0.5);
    }

#loadingAnimation .loading_wrap {
    text-align: center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#loadingAnimation .loading_wrap img {max-width: 150px;}

#loadingAnimation .loading_wrap .txt {
    font-size:28px;
    font-weight:600;
    color:#fff;
    padding-top:25px;
}

.contact-page-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 5rem 5rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    font-size: 50px;
    font-weight: 800;
}

.chk_box2 input[type="checkbox"] {display: none;}
.chk_box2 input[type="checkbox"]+label {
    display: inline-block;
    padding: 8px 16px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    }

.chk_box2 input[type="checkbox"]:checked+label {
    background:var(--main-color) !important;
    border:2px solid var(--main-color) !important;
    color:#fff !important;
    border-radius: 50% !important;
    transition:all 0.3s !important;
    }

.chk_box3 input[type="checkbox"] {display: none;}
.chk_box3 input[type="checkbox"]+label {
    display: inline-block;
    padding: 8px 16px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    }

.chk_box3 input[type="checkbox"]:checked+label {
    background:var(--black-color) !important;
    border:2px solid var(--black-color) !important;
    color:#fff !important;
    border-radius: 50% !important;
    transition:all 0.3s !important;
    }

#formmail-write .form-group.line_file {padding:10px 0;}
#formmail-write .form-group.line_file .left,
#formmail-write .form-group.line_file .right {height:100px; border-bottom:3px solid #333; padding-bottom:15px; display: flex; flex-direction: column; justify-content: center;}

#formmail-write .form-group.line_file .right {justify-content: flex-end;}

#formmail-write .form-group.line_file .right .captcha_title {font-size:20px; font-weight:600;}
#formmail-write .form-group.line_file .right .captcha_cont {padding-top:12px;}


#formmail-write .form-group.line_file .left label {padding-bottom:0rem;}

#formmail-write .form-group.line_file .left input[type=file]::file-selector-button {
    background:#fff;
    cursor: pointer;
    border:2px dashed #333;
    padding:8px 12px;
    font-weight:600;
    font-size:15px;
    margin-right:15px;

    &:hover {
        background: rgb(77, 77, 77);
        color: #fff;
    }
}


#formmail-write { position:relative; max-width:1280px; padding:0 5rem 7rem 5rem; margin:0 auto; font-size:18px }
#formmail-write .chkbox_wrap {padding-bottom:3rem;}
#formmail-write .chkbox_wrap .chk_box2 {display: flex; gap:1rem;}
#formmail-write .chkbox_wrap .chk_box2 .checkbox_label {width: 120px; height:120px; display: flex; justify-content: center; align-items: center; padding:0; border-radius: 0; font-size:18px; font-weight:600; background:#fff; border:2px solid #333; transition:all 0.3s;}
#formmail-write .chkbox_wrap .chk_box2 .checkbox_label:hover {
    border-radius: 50%;
}
#formmail-write .chkbox_wrap .chk_box3 {display: flex; gap:1rem;}
#formmail-write .chkbox_wrap .chk_box3 .checkbox_label {width: 120px; height:120px; display: flex; justify-content: center; align-items: center; padding:0; border-radius: 0; font-size:18px; font-weight:600; background:#fff; border:2px solid #333; transition:all 0.3s;}
#formmail-write .chkbox_wrap .chk_box3 .checkbox_label:hover {
    border-radius: 50%;
}
#formmail-write .chkbox_wrap .check_01 {padding-bottom:1rem; font-size:20px; font-weight:600;}
#formmail-write .chkbox_wrap .check_02 {padding:2rem 0 1rem 0; font-size:20px; font-weight:600;}
#formmail-write .form-group { display:flex; margin-bottom:20px; align-items: center; justify-content: space-between; }
#formmail-write .form-group .left {display: flex;}
#formmail-write .form-group .left,
#formmail-write .form-group .right {width: 47%;}
#formmail-write .form-group.line_01 {padding-bottom:3rem;}
#formmail-write .form-group.line_01 input {font-size:20px; line-height: 40px; font-weight:600; background:#f9f9f9;}
#formmail-write .form-group.line_01 input::placeholder {font-size:20px; line-height: 40px; font-weight:600; color:#333;}
#formmail-write .form-group.line_02 {padding-bottom:3rem;}
#formmail-write .form-group.line_02 textarea {font-size:20px; line-height: 40px; font-weight:600; background:#f9f9f9;}
#formmail-write .form-group.line_02 textarea::placeholder {font-size:20px; line-height: 40px; font-weight:600; color:#333;}
#formmail-write .files {font-size:22px; font-weight:600;}
#formmail-write .form-group.line_file {}
#formmail-write .form-group.line_file .left label {font-size:20px; font-weight:600;}
#formmail-write .form-group .form-control-file {border:0; font-weight:600; padding-top:1rem; font-size:15px; color:#ff8b2f; width: 100%;}
#formmail-write .form-group .form-control-file button {border:0; font-weight:600;}
#formmail-write .form-group>label { padding:0 20px; width:20% }
#formmail-write .form-group>div { width:100% }
#formmail-write .form-group.col4>label { width:20% }
#formmail-write .form-group.col4>div { width:30% }
#formmail-write .form-group .form-control { width:100%; padding:8px 10px 8px 15px; border-bottom:3px solid #333; border-top:0; border-left: 0; border-right: 0; border-radius: 0 !important; height:auto;}
#formmail-write .form-footer { padding-top:50px; text-align: center; }
#formmail-write .btn_submit { padding:10px 20px; font-size:1.2em; height:auto}
#formmail-write .check-list { position:absolute; right:0; top:-30px }

#formmail-write .privacy-of-use-title {font-size:22px; font-weight:600; padding:30px 0 15px 0;}
#formmail-write .privacy-of-use {font-size:16px; font-weight:600; padding:15px 15px 15px 25px;  border:2px solid #333; overflow-y:auto }
#formmail-write .privacy-of-use li {list-style: none; padding:5px 0 5px 15px; position: relative;}
#formmail-write .privacy-of-use li::before {
    content: '-';
    position:absolute;
    top:3px;
    left:0;
    
}
#formmail-write .privacy-of-use .cont {margin-bottom:15px;}
#formmail-write .privacy-of-use h4 {margin-bottom: 5px}
#formmail-write .privacy-of-use dl { padding:10px 0}
#formmail-write .privacy-of-use dl dt { font-weight: 600}
#formmail-write .privacy-of-use dl dd { margin-left: 20px}
#formmail-write .privacy-of-use ul { margin-left:20px }
#formmail-write .privacy-of-use ul li { margin-top:5px }
#formmail-write .privacy-of-use table { width:100%; border-collapse: collapse }
#formmail-write .privacy-of-use table th,
#formmail-write .privacy-of-use table td { border:1px solid rgb(226,226,226); padding:5px }
#formmail-write .privacy-of-use table th { background:rgb(245,245,247) }

.privacy-of-use-check {padding:20px 10px 0 0; color:#333; font-size:16px; font-weight:600; padding-right:15px; display: flex; align-items: center; }

.privacy-of-use-check input[type="checkbox"] {display: none;}

.privacy-of-use-check input[type="checkbox"]+label {
    width: 45px;
    height:25px;
    position: relative;
    display: inline-block;
    margin-left:20px;
}

.privacy-of-use-check input[type="checkbox"]+label::before {
    display: inline-block;
    width: 45px;
    height:23px;
    background:#fff;
    position: relative;
    border-radius: 20px;
    border:2px solid #333;
    content: '';
}

.privacy-of-use-check input[type="checkbox"]+label::after {
    position: absolute;
    width: 16px;
    height:16px;
    top:5px;
    left:5px;
    background:#333;
    border-radius: 50%;
    content: '';
    transition:all 0.3s;
}
.privacy-of-use-check input[type="checkbox"]:checked+label {
}

.privacy-of-use-check input[type="checkbox"]:checked+label::after {
    position: absolute;
    width: 16px;
    height:16px;
    top:5px;
    left:25px;
    background:#fff;
    border-radius: 50%;
    content: '';
    transition:all 0.3s;
}

.privacy-of-use-check input[type="checkbox"]:checked+label::before {
    display: inline-block;
    width: 45px;
    height:25px;
    background:var(--black-color);
    position: relative;
    border-radius: 20px;
    border:1px solid var(--black-color);
    content: '';
}


.contact_btn {background-color:#fff; color:#333; padding:15px 30px; transition:all 0.3s; font-weight:600; border:2px dashed #333; cursor:default;}
.contact_btn.btn_color {background-color:#000 !important; color:#fff !important; padding:15px 30px; transition:all 0.3s !important; font-weight:600; border:2px solid #333 !important; cursor: pointer !important;}  



@media screen and (max-width:926px) {
    .contact-page-inner {
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
        padding: 5rem 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
        font-size: 36px;
        font-weight: 800;
    }


    #loadingAnimation .loading_wrap img {
        max-width: 130px;
    }

    #loadingAnimation .loading_wrap .txt {
        font-size: 22px;
        font-weight: 400;
        color: #fff;
        padding-top: 35px;
    }


    #formmail-write {padding:0 25px;}
    #formmail-write .chkbox_wrap .chk_box2 {flex-wrap: wrap; justify-content: space-between;}
    #formmail-write .chkbox_wrap .chk_box2 .checkbox_label {width: 46%; height:50px;}
    #formmail-write .chkbox_wrap .chk_box2 .checkbox_label:hover {width: 46%; height:50px; border-radius: 0 !important;}
    #formmail-write .chkbox_wrap .chk_box2 input[type="checkbox"]:checked+label {border-radius: 0 !important;}
    #formmail-write .chkbox_wrap .chk_box3 {flex-wrap: wrap; justify-content:  space-between;}
    #formmail-write .chkbox_wrap .chk_box3 .checkbox_label {width: 46%; height:50px;}
    #formmail-write .chkbox_wrap .chk_box3 .checkbox_label:hover {width: 46%; height:50px; border-radius: 0 !important;}
    #formmail-write .chkbox_wrap .chk_box3 input[type="checkbox"]:checked+label {border-radius: 0 !important;}
    #formmail-write .form-group.line_01 {flex-direction: column; gap:2.5rem; margin:0;}
    #formmail-write .form-group .left,
    #formmail-write .form-group .right {width: 100%;}

    #formmail-write .form-group.line_file {flex-direction: column; gap:0.5rem;}
    #formmail-write .form-group.line_file .left {padding-bottom:0;}

    #formmail-write .form-footer {padding-bottom:50px;}
}