@charset "utf-8";

#content {overflow: hidden;}

.contactWrap {position:relative; padding:8rem 0;}
.contactWrap img.bg_img {position: absolute; top:0; right:-18rem;}

.contactWrap form {display: block; width:100%; position: relative; z-index:2;}

.contactWrap .contactTitle {width:100%;}
.contactWrap .contactTitle h2 {font-size:3.4rem; color:var(--color-gray-800); font-weight:700; letter-spacing:-0.05em; line-height:4.4rem;}
.contactWrap .contactTitle span {font-size:1.8rem; color:var(--color-gray-700); font-weight:500; letter-spacing:-0.03em; line-height:2.8rem; display: block; margin-top:2.4rem; word-break: keep-all;}

.contactWrap .contactForm {width:100%; margin-top:6.4rem; border-top:2px solid var(--color-gray-700);}
.contactWrap .contactForm .form {width:100%;}
.contactWrap .contactForm .form dl {width:100%; display:flex; align-items: center; padding:1.6rem; border-bottom:1px solid var(--color-gray-200); flex-wrap:wrap;}
.contactWrap .contactForm .form dl.typeForm {display:none;}
.contactWrap .contactForm .form dl.show {display: flex;}
.contactWrap .contactForm .form dl dt {width:16rem; display:flex; align-items: center;}
.contactWrap .contactForm .form dl dt p {font-size:1.4rem; color:var(--color-gray-700); font-weight:500; line-height:2rem; position: relative;}
.contactWrap .contactForm .form dl dt p.ess::after {content:" *"; font-size:1.4rem; color:var(--color-alert); font-weight:500; line-height:2rem;}

.contactWrap .contactForm .form dl dd {width:calc(100% - 16rem); position: relative;}
.contactWrap .contactForm .form dl dd input[type=text] {width:100%; max-width:40rem; height:4rem; padding:0 1.2rem; font-size:1.4rem; color:var(--color-gray-800); font-weight:500; line-height:2rem; border:1px solid var(--color-gray-400); border-radius:0.4rem;}
.contactWrap .contactForm .form dl dd input[type=text]::placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd input[type=text]::-moz-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd input[type=text]:-ms-input-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd input[type=text]::-webkit-input-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd input[type=text]:focus {border-color:var(--color-gray-700);}
.contactWrap .contactForm .form dl dd input.datepickerInput {pointer-events: auto; user-select: none;}

.contactWrap .contactForm .form dl dd textarea {width:100%; height:8rem; padding:1.2rem; font-size:1.4rem; color:var(--color-gray-800); font-weight:500; line-height:2rem; border:1px solid var(--color-gray-400); border-radius:0.4rem; resize:none;}
.contactWrap .contactForm .form dl dd textarea::placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd textarea::-moz-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd textarea:-ms-input-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd textarea::-webkit-input-placeholder {font-size:1.4rem; color:var(--color-gray-400); font-weight:500;}
.contactWrap .contactForm .form dl dd textarea:focus {border-color:var(--color-gray-700);}

.contactWrap .contactForm .form dl dd input[type=text].err,
.contactWrap .contactForm .form dl dd textarea.err {border-color:var(--color-alert);}

.contactWrap .contactForm .form dl dd ul.radio_list {width:100%;}
.contactWrap .contactForm .form dl dd ul.radio_list li {width:100%; display:flex;}
.contactWrap .contactForm .form dl dd ul.radio_list li + li {margin-top:0.8rem;}
.contactWrap .contactForm .form dl dd ul.radio_list li label {cursor: pointer; display:flex; align-items: center;}
.contactWrap .contactForm .form dl dd ul.radio_list li label input {display:none;}
.contactWrap .contactForm .form dl dd ul.radio_list li label em {display: block; font-size:1.4rem; color:var(--color-gray-500); font-weight:500; line-height:2rem; position: relative; padding-left:2.4rem; background:url("../svg/contact/radio_off.svg")no-repeat left center; background-size:1.5rem; word-break: keep-all;}
.contactWrap .contactForm .form dl dd ul.radio_list li label em span {color:var(--color-gray-700);}
.contactWrap .contactForm .form dl dd ul.radio_list li label input:checked + em {background-image:url("../svg/contact/radio_on.svg");}

/* 파일 업로드 스타일 */
.contactWrap .contactForm .form dl dd .attach_box {width: 100%;}
.contactWrap .contactForm .form dl dd .attach_box .list-files {width: 100%; display: flex; align-items: center; margin-bottom: 1.6rem;}
.contactWrap .contactForm .form dl dd .attach_box .list-files:first-child {margin-bottom: 1.6rem;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box {display: flex; align-items: center;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fakeFileTxt {width: 24rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; color: var(--color-gray-600); font-weight: 500; line-height: 2rem; border: 1px solid var(--color-gray-400); border-radius: 0.4rem; background-color: var(--color-gray-50); cursor: not-allowed;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fileDiv {position: relative; margin-left: 0.8rem;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fileDiv .realFile {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fileDiv .buttonImg {height: 4rem; padding: 0 1.6rem; font-size: 1.4rem; color: var(--color-white); font-weight: 500; line-height: 2rem; background-color: var(--color-gray-600); border: none; border-radius: 0.4rem; cursor: pointer; transition: all 0.2s;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box {margin-left: 0.8rem;}
.contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box .file_btn {display: inline-block; height: 4rem; padding: 0 1.6rem; font-size: 1.4rem; color: var(--color-action); font-weight: 600; line-height: 4rem; border: 1px solid var(--color-action); border-radius: 0.4rem; text-decoration: none; cursor: pointer; transition: all 0.2s;}
.contactWrap .contactForm .form dl dd .attach_box .tip_txt {font-size: 1.3rem; color: var(--color-gray-500); font-weight: 400; line-height: 1.8rem; margin-top: 0.8rem;}


.contactWrap .contactForm .form dl dd .referenceImg {width:100%;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl {width:100%; display:flex; align-items:center; flex-wrap:wrap;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn {position: relative;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn input[type=file] {position: absolute; top:0; left:0; opacity:0; z-index:2; width:100%; height:100%;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn input[type=file]::-webkit-file-upload-button {cursor:pointer;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn button {font-size:1.4rem; color:var(--color-action); font-weight:700; line-height:2rem; text-decoration: underline; text-underline-offset:0.2rem; background: transparent; position: relative; z-index:1; cursor: pointer;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadStatus {display:flex; font-size:1.4rem; color:var(--color-gray-400); font-weight:500; line-height:2rem; margin-left:0.8rem;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .fileInfo {font-size:1.4rem; color:var(--color-gray-400); font-weight:500; line-height:2rem; margin-left:0.6rem; display:none;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .fileInfo .fileBar {margin-right:0.6rem;}

.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList {width:100%;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList:has(.upFileBox) {margin-top:1.6rem;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list {width:100%; overflow: hidden;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .swiper-slide {width: fit-content; padding-right:0.8rem;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .swiper-slide:last-child {padding:0;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox {width:16rem; height:16rem; border-radius:0.8rem; overflow: hidden; -webkit-radial-gradient(white, black); isolation: isolate; position: relative;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox .img {width:100%; height:100%; display:flex; align-items: center; justify-content: center;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox .img img {display:block; width:100%; height:100%; object-fit: cover;}
.contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox button {position: absolute; top:0.8rem; right:0.8rem; width:1.5rem; height:1.5rem; border-radius:100%; background:url("../svg/product/ic_delete.svg")no-repeat center rgba(8,4,4,0.6); background-size:0.9rem; cursor: pointer;}

.contactWrap .contactForm .form dl dd .agree {width:100%;}
.contactWrap .contactForm .form dl dd .agree .all_agree {width:100%; display:flex;}
.contactWrap .contactForm .form dl dd .agree .all_agree label {cursor: pointer;}
.contactWrap .contactForm .form dl dd .agree .all_agree label input {display:none;}
.contactWrap .contactForm .form dl dd .agree .all_agree label em {display: block; font-size:1.4rem; color:var(--color-gray-700); font-weight:500; line-height:2rem; position: relative; padding-left:2.5rem;}
.contactWrap .contactForm .form dl dd .agree .all_agree label em::before {content:""; width:1.6rem; height:1.6rem; border:2px solid var(--color-gray-200); box-sizing: border-box; position: absolute; top:0.2rem; left:0; background:url("../svg/common/chk_off.svg")no-repeat center; background-size:1rem; border-radius:0.4rem;}
.contactWrap .contactForm .form dl dd .agree .all_agree label input:checked + em::before {background-image:url("../svg/common/chk_on.svg"); background-color:var(--color-action); border-color:var(--color-action);}

.contactWrap .contactForm .form dl dd .agree ul {width:100%; margin-top:1.6rem;}
.contactWrap .contactForm .form dl dd .agree ul li {width:100%;}
.contactWrap .contactForm .form dl dd .agree ul li + li {margin-top:1.6rem;}
.contactWrap .contactForm .form dl dd .agree ul li .cont {width:100%;}
.contactWrap .contactForm .form dl dd .agree ul li .cont p {font-size:1.4rem; color:var(--color-gray-700); font-weight:500; line-height:2rem;}
.contactWrap .contactForm .form dl dd .agree ul li:has(.required) .cont p em {font-weight:700;}
.contactWrap .contactForm .form dl dd .agree ul li .chk {width:100%; margin-top:0.4rem; display:flex; align-items: center; flex-wrap:wrap; gap:0.4rem;}
.contactWrap .contactForm .form dl dd .agree ul li .chk label {cursor: pointer;}
.contactWrap .contactForm .form dl dd .agree ul li .chk label input {display:none;}
.contactWrap .contactForm .form dl dd .agree ul li .chk label em {display:block; font-size:1.4rem; color:var(--color-gray-700); font-weight:500; line-height:2rem; position: relative; padding-left:2.3rem; word-break: keep-all;}
.contactWrap .contactForm .form dl dd .agree ul li .chk label em::before {content:""; width:1.3rem; height:100%; position: absolute; top:0; left:0; -webkit-mask:url("../svg/contact/ic_chk.svg")no-repeat top 0.5rem left; -moz-mask:url("../svg/contact/ic_chk.svg")no-repeat top 0.5rem left; -o-mask:url("../svg/contact/ic_chk.svg")no-repeat top 0.5rem left; -ms-mask:url("../svg/contact/ic_chk.svg")no-repeat top 0.5rem left; mask:url("../svg/contact/ic_chk.svg")no-repeat top 0.5rem left; -webkit-mask-size:100%; -moz-mask-size:100%; -o-mask-size:100%; -ms-mask-size:100%; mask-size:100%; background-color:var(--color-gray-200);}
.contactWrap .contactForm .form dl dd .agree ul li .chk label input:checked + em::before {background-color: var(--color-action);}
.contactWrap .contactForm .form dl dd .agree ul li .chk a {font-size:1.4rem; color:var(--color-gray-700); font-weight:500; line-height:2rem; text-decoration: underline; text-underline-offset:0.2rem;}

.contactWrap .contactForm .btn {width:100%; display:flex; justify-content: center; margin-top:6.4rem;}
.contactWrap .contactForm .btn button {width:100%; max-width:24rem; height:5.8rem; border-radius:10rem; font-size:2rem; color:var(--color-white); font-weight:600; letter-spacing:-0.05em; line-height:3rem; background-color:var(--color-gray-800); cursor: pointer;}


#dateCalendar {position: absolute; display:none;}
#dateCalendar.popupShow {display: block;}


@media (hover: hover) {
    .contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn button,
    .contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox button,
    .contactWrap .contactForm .form dl dd .agree ul li .chk a,
    .contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fileDiv .buttonImg,
    .contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box .file_btn,
    .contactWrap .contactForm .btn button {transition:all 0.2s;}

    .contactWrap .contactForm .form dl dd .referenceImg .uploadCtrl .uploadBtn:hover button {opacity:0.5;}
    .contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox button:hover {background-color:rgba(8,4,4,0.3);}
    .contactWrap .contactForm .form dl dd .agree ul li .chk a:hover {opacity:0.5;}
    .contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box .fileDiv .buttonImg:hover {background-color: var(--color-gray-700);}
    .contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box .file_btn:hover {background-color: var(--color-action); color: var(--color-white);}
    .contactWrap .contactForm .btn button:hover {background-color:var(--color-action);}
}
@media (max-width: 1300px) {
    .contactWrap .contactTitle h2 {font-size:3.2rem; line-height:4.2rem;}
}
@media (max-width: 1200px) {
    .contactWrap {padding:7rem 0;}
    .contactWrap .contactTitle h2 {font-size:3rem; line-height:4rem;}
    .contactWrap .contactTitle span {font-size:1.7rem; line-height:2.7rem; margin-top:2rem;}
    
}
@media (max-width: 1023px) {
    .contactWrap {padding:6rem 0;}
    .contactWrap img.bg_img {display:none;}
    .contactWrap .contactTitle h2 {font-size:2.8rem; line-height:3.8rem;}
    .contactWrap .contactTitle span {font-size:1.6rem; line-height:2.6rem; margin-top:1.6rem;}
    .contactWrap .contactForm {margin-top:6rem;}
    .contactWrap .contactForm .btn {margin-top:6rem;}
    .contactWrap .contactForm .btn button {max-width:22rem; height:5.5rem; font-size:1.9rem; line-height:2.9rem;}
}
@media (max-width: 767px) {
    .contactWrap {padding:5rem 0;}
    .contactWrap .contactTitle h2 {font-size:2.6rem; line-height:3.6rem;}
    .contactWrap .contactForm {margin-top:5rem;}
    .contactWrap .contactForm .form dl {padding:1.6rem 0;} 
    .contactWrap .contactForm .form dl dt {width:12.4rem;}
    .contactWrap .contactForm .form dl dd {width:calc(100% - 12.4rem);}
    .contactWrap .contactForm .form dl dd input[type=text] {max-width:none;}
    
    .contactWrap .contactForm .form dl dd ul.radio_list li label em {background-position:left top 0.3rem;}
    .contactWrap .contactForm .form dl dd ul.radio_list li label em span {display: block;}
    .contactWrap .contactForm .form dl dd .referenceImg .uploadFileList .js_upload_file_list .upFileBox {width:12rem; height:12rem;}

    .contactWrap .contactForm .btn {margin-top:5rem;}
    .contactWrap .contactForm .btn button {max-width:20rem; height:5.4rem; font-size:1.8rem; line-height:2.8rem;}
}
@media (max-width: 600px) {
    .contactWrap {padding:4.2rem 0;}
    .contactWrap .contactTitle h2 {font-size:2.4rem; line-height:3.4rem;}
    .contactWrap .contactTitle span {font-size:1.5rem; line-height:2.5rem; margin-top:1.4rem;}
    .contactWrap .contactForm {margin-top:4rem;}
    .contactWrap .contactForm .form dl {padding:2.4rem 0;}
    .contactWrap .contactForm .form dl dt {width:100%; margin-bottom:1rem;}
    .contactWrap .contactForm .form dl dd {width:100%;}

    /* 모바일에서 파일 업로드 스택 형태로 변경 */
    .contactWrap .contactForm .form dl dd .attach_box .list-files {flex-direction: column; align-items: stretch;}
    .contactWrap .contactForm .form dl dd .attach_box .list-files .input_file_box {max-width: none; margin-bottom: 0.8rem;}
    .contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box {margin-left: 0; text-align: center;}
    .contactWrap .contactForm .form dl dd .attach_box .list-files .add_btn_box .file_btn {width: 100%; text-align: center;}

    .contactWrap .contactForm .btn {margin-top:4.2rem;}
    .contactWrap .contactForm .btn button {max-width:18rem; height:4.8rem; font-size:1.7rem; line-height:2.8rem;}

    #dateCalendar {position: fixed; top:50%!important; left:50%!important; z-index:10002; width:36rem; transform: translate(-50%,-50%);}
    
}
@media (max-width: 479px) {
    .contactWrap {padding:3.6rem 0;}
    .contactWrap .contactTitle h2 {font-size:2.2rem; line-height:3.2rem;}
    .contactWrap .contactTitle span {font-size:1.4rem; line-height:2rem; margin-top:1.2rem;}
    .contactWrap .contactForm {margin-top:3rem;}
    .contactWrap .contactForm .btn {margin-top:3.6rem;}
    .contactWrap .contactForm .btn button {max-width:none; height:5rem; font-size:1.6rem; line-height:2.6rem; border-radius:1.2rem;}

    #dateCalendar {position: fixed; top:auto!important; bottom:0!important; left:0!important; transform:none; z-index:10002; width:100%;}
}
@media (max-width: 420px) {
    .contactWrap {padding:3.2rem 0;}
    .contactWrap .contactTitle h2 {font-size:2rem; line-height:3rem;}
    .contactWrap .contactForm {margin-top:2.4rem;}
    .contactWrap .contactForm .btn {margin-top:3rem;}
    .contactWrap .contactForm .btn button {font-size:1.5rem; line-height:2.5rem; border-radius:1rem;}
}