.contact .contact-content {padding: 165px 0 0; --inputHeight: 60;}
.contact .contact-content .title {font-size: 70px; font-family: 'disol_headline'; letter-spacing: -0.025em; color: #fff; margin-bottom: calc(60/70*1em); text-align: center;}
.contact .contact-content .formBox {padding-top: 80px;}
.contact .contact-content .formBox .fieldWrap {display: flex; flex-direction: column;}
.contact .contact-content .formBox .fieldWrap dl {display: flex; flex-direction: column; align-items: flex-start;}
.contact .contact-content .formBox .fieldWrap dl dt {font-size: 24px; font-family: 'disol_headline'; letter-spacing: -0.025em; color: #fff; margin-bottom: calc(15/24*1em);}
.contact .contact-content .formBox .fieldWrap dl + dl dt {margin-top: calc(40/24*1em);}
.contact .contact-content .formBox .fieldWrap dl dt small {font-size: 20px; letter-spacing: -0.025em;}
.contact .contact-content .formBox .fieldWrap dl dd {display: flex; align-items: center; width: 100%;}
.contact .contact-content .formBox .fieldWrap dl dd .input {box-sizing: border-box; color: #fff; width: 100%; height: calc(var(--inputHeight)/18*1em); background: transparent; border-radius: calc(10/18*1em); border: 1px solid #ffffff34; padding: 0 calc(30/18*1em); font-size: 18px;  }
.contact .contact-content .formBox .fieldWrap dl dd .input input {font-weight: 400; width: 100%; height: 100%; background: transparent; border: none; outline: none; color: #fff; font-size: inherit; letter-spacing: inherit;}

.contact .contact-content .formBox .fieldWrap dl dd .selectBox {cursor: pointer; position: relative; display: flex; align-items: center; box-sizing: border-box;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox input {color: inherit; background: none; cursor: pointer; width: 100%; border: none; padding: 0;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox i {color: #fff; opacity: .4; display: flex; align-items: center; justify-content: center; font-size: calc(16/18*1em); transition: .4s;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox.active i {transform: scaleY(-1);}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; display: none; margin-top: 2px;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap ul {max-height: 150px; overflow-y: auto; color: var(--placeholderColor); width: 100%; background: #353535; padding: 5px 0; border-radius: calc(7 / 18* 1em);}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #f6ad3c; border-radius: 10px;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap ul li span {font-size: 14px; color: #fff; padding: calc(10/16*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.contact .contact-content .formBox .fieldWrap dl dd .selectBox .optWrap ul li:hover span {background: #f6ad3c;}

.contact .contact-content .formBox .fieldWrap dl.email dd .input {width: calc(340/18*1em);}
.contact .contact-content .formBox .fieldWrap dl.email dd .emailHead {display: inline-flex; align-items: center;}
.contact .contact-content .formBox .fieldWrap dl.email dd .emailHead span {margin: 0 calc(20/18*1em); color: #fff;}
.contact .contact-content .formBox .fieldWrap dl.email dd .emailTail {display: flex; align-items: center; justify-content: space-between; flex-grow: 1;}
.contact .contact-content .formBox .fieldWrap dl.email dd .emailTail .input {color: var(--placeholderColor);}

.contact .contact-content .formBox .fieldWrap dl dd .textarea {height: 200px; padding: calc(15/18*1em) calc(30/18*1em);}
.contact .contact-content .formBox .fieldWrap dl dd .textarea textarea {height: 100%; width: 100%; background: transparent; border: none; outline: none; color: #fff; font-size: inherit; letter-spacing: inherit; resize: none;}


/* .contact .contact-content .formBox .fieldWrap .privacy {padding: 0 calc(60/1080*100%);} */
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap {display: flex; align-items: center; justify-content: flex-end; cursor: pointer; margin-top: calc(20/16*1em); font-size: 16px;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap input[type="checkbox"] {display: none;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap label .checkBox {font-size:inherit; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; margin-right: 3px;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap label .checkBox i.xi-check-circle {display: none;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap input[type="checkbox"]:checked + label .checkBox i {color: #f6ad3c;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-radiobox-blank {display: none;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-circle {display: block;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap .lbl {display: flex; align-items: center;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap .lbl p {font-size:inherit; font-weight: 400; font-size: inherit; line-height: 1em; color: #fff; margin-right: 8px;}
.contact .contact-content .formBox .fieldWrap .privacy .checkWrap .lbl small {font-weight: 400; font-size: 12px; color: #ccc; padding: calc(5/12*1em); background: #6d6d6d; cursor: pointer;}

.contact .contact-content .formBox .btn-wrap {padding-top: 70px; display: flex; align-items: center; justify-content: center;}
.contact .contact-content .formBox .btn-wrap .btn {display: inline-block; padding: calc(25/20*1em) calc(80/20*1em); background: transparent; color: #fff; border: 1px solid #fff; outline: none; border-radius: calc(10/20*1em); font-size: 20px; font-weight: 700; cursor: pointer; font-family: 'disol_ragular'; }


.contact .contact-content .faq {padding-top: 220px;}
.contact .contact-content .faq .search {max-width: 640px; margin: 0 auto; height: calc(var(--inputHeight)/18*1em); font-size: 18px; padding: 0 calc(19/18*1em); letter-spacing: -0.02em; color: #fff; border: 1px solid #ffffff34; border-radius: calc(10/18*1em); display: flex; align-items: center; justify-content: space-between;}
.contact .contact-content .faq .search input {padding-right: calc(10/18*1em); font-weight: 400; width: 100%; height: 100%; background: transparent; border: none; outline: none; color: #fff; font-size: inherit; letter-spacing: inherit; }
.contact .contact-content .faq .search .btn-search {display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; outline: none; color: var(--placeholderColor); font-size: inherit; letter-spacing: inherit; cursor: pointer;}

.contact .contact-content .faq .faq-list {margin-top: 70px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding-top: 1px;}
.contact .contact-content .faq .faq-list li {cursor: pointer; transition: background .4s; background: #000; font-size: 24px; padding: 0 calc(30/24*1em) 0 calc(85/24*1em);}
.contact .contact-content .faq .faq-list li + li {border-top: 1px solid rgba(255, 255, 255, .2);}
.contact .contact-content .faq .faq-list li.open {background: #151515;}
.contact .contact-content .faq .faq-list li dl {display: flex; flex-direction: column;}
.contact .contact-content .faq .faq-list li dl dt {position: relative; font-size: inherit; color: #fff; margin: calc(50/24*1em) 0; display: flex; justify-content: space-between; align-items: flex-start;}
.contact .contact-content .faq .faq-list li dl dt span {font-size: calc(40/24*1em); font-family: 'disol_headline'; letter-spacing: -0.025em; color: #fff; position: absolute; right: 100%; top: 0%; line-height: calc(24/40*1em); padding-right: calc(25/40*1em);}
.contact .contact-content .faq .faq-list li dl dt p {word-break: keep-all; padding-right: calc(10/24*1em); flex-grow: 1; letter-spacing: -0.02em; line-height: 1.4;}
.contact .contact-content .faq .faq-list li dl dt i {transition: .4s;}
.contact .contact-content .faq .faq-list li.open dl dt i {transform: scaleY(-1);}
.contact .contact-content .faq .faq-list li dl dd {display: none; padding-bottom: calc(50/18*1em); font-size: 18px;}
.contact .contact-content .faq .faq-list li:first-child dl dd {display: block;}
.contact .contact-content .faq .faq-list li dl dd p {font-size: inherit; color: #fff; letter-spacing: -0.02em; line-height: calc(30/18*1em); opacity: .7;}



.contact .contact-content .location {padding-top: 220px;}
.contact .contact-content .location .map_wrap {width: 100%; overflow: hidden; color: #fff; position: relative;}
.contact .contact-content .location .map_wrap #map {width: 100%; height: 360px; background: #fff; filter: saturate(0) invert(1);}
.contact .contact-content .location .map_wrap p {display: flex; align-items: center; justify-content: center; padding: calc(20/24*1em); font-size: 24px; font-weight: 600; color: #fff; }
.contact .contact-content .location .map_wrap p i {margin-right: calc(10/18*1em); font-size: 18px;}

.contact .contact-content .location .map_wrap .map_api_box {width: 100%; height: 100%;}
.contact .contact-content .location .map_wrap .map_api_box .wrap_map {height: 100%;}
.contact .contact-content .location .map_wrap .map_api_box .wrap_controllers {display: none;}
.contact .contact-content .location .map_wrap .map_api_box .cont {display: none;}

/* 반응형 스타일 */
@media screen and (max-width: 1440px) {
    .contact .contact-content {padding: 140px 0 0;}
    .contact .contact-content .title {font-size: 60px;}
    .contact .contact-content .formBox {padding-top: 70px;}
    .contact .contact-content .faq {padding-top: 180px;}
    .contact .contact-content .location {padding-top: 180px;}
}

@media screen and (max-width: 1280px) {
    .contact .contact-content {padding: 100px 0 0; --inputHeight: 55;}
    .contact .contact-content .title {font-size: 55px; margin-bottom: calc(50/55*1em);}
    .contact .contact-content .formBox {padding-top: 60px;}
    .contact .contact-content .formBox .fieldWrap dl dt {font-size: 22px;}
    .contact .contact-content .formBox .fieldWrap dl dt small {font-size: 18px;}
    .contact .contact-content .formBox .btn-wrap {padding-top: 60px;}
    .contact .contact-content .formBox .btn-wrap .btn {font-size: 18px;}
    .contact .contact-content .faq {padding-top: 160px;}
    .contact .contact-content .faq .faq-list li {font-size: 22px;}
    .contact .contact-content .faq .faq-list li dl dd {font-size: 16px;}
    .contact .contact-content .location {padding-top: 160px;}
    .contact .contact-content .location .map_wrap p {font-size: 22px;}
}

@media screen and (max-width: 1024px) {
    .contact .contact-content {padding: 80px 0 0; --inputHeight: 50;}
    .contact .contact-content .title {font-size: 48px; margin-bottom: calc(40/48*1em);}
    .contact .contact-content .formBox {padding-top: 50px;}
    .contact .contact-content .formBox .fieldWrap dl dt {font-size: 20px;}
    .contact .contact-content .formBox .fieldWrap dl dt small {font-size: 16px;}
    .contact .contact-content .formBox .fieldWrap dl dd .input {font-size: 16px;}
    .contact .contact-content .formBox .fieldWrap dl.email dd .input {width: calc(280/16*1em);}
    .contact .contact-content .formBox .fieldWrap dl dd .textarea {height: 180px;}
    .contact .contact-content .formBox .btn-wrap {padding-top: 50px;}
    .contact .contact-content .formBox .btn-wrap .btn {font-size: 16px; padding: calc(20/16*1em) calc(60/16*1em);}
    .contact .contact-content .faq {padding-top: 140px;}
    .contact .contact-content .faq .search {font-size: 16px;}
    .contact .contact-content .faq .faq-list {margin-top: 50px;}
    .contact .contact-content .faq .faq-list li {font-size: 20px; padding: 0 calc(25/20*1em) 0 calc(70/20*1em);}
    .contact .contact-content .faq .faq-list li dl dt span {font-size: calc(36/20*1em);}
    .contact .contact-content .location {padding-top: 140px;}
    .contact .contact-content .location .map_wrap #map {height: 320px;}
    .contact .contact-content .location .map_wrap p {font-size: 20px; padding: calc(15/20*1em);}
}

@media screen and (max-width: 820px) {
    .contact .contact-content {padding: 80px 0 0; --inputHeight: 45;}
    .contact .contact-content .title {font-size: 40px; margin-bottom: calc(35/40*1em);}
    .contact .contact-content .formBox {padding-top: 40px;}
    .contact .contact-content .formBox .fieldWrap dl dt {font-size: 18px;}
    .contact .contact-content .formBox .fieldWrap dl dt small {font-size: 14px;}
    .contact .contact-content .formBox .fieldWrap dl + dl dt {margin-top: calc(30/18*1em);}
    .contact .contact-content .formBox .fieldWrap dl dd .input {font-size: 15px; padding: 0 calc(20/15*1em);}
    .contact .contact-content .formBox .fieldWrap dl.email dd {flex-direction: column; align-items: flex-start;}
    .contact .contact-content .formBox .fieldWrap dl.email dd .input {width: 100%; margin-bottom: 10px;}
    .contact .contact-content .formBox .fieldWrap dl.email dd .emailHead {width: 100%;}
    .contact .contact-content .formBox .fieldWrap dl.email dd .emailTail {width: 100%; gap: 0.3em;}
    .contact .contact-content .formBox .fieldWrap dl dd .textarea {height: 150px;}
    .contact .contact-content .formBox .fieldWrap .privacy .checkWrap {font-size: 14px;}
    .contact .contact-content .formBox .btn-wrap {padding-top: 40px;}
    .contact .contact-content .faq {padding-top: 120px;}
    .contact .contact-content .faq .search {max-width: 100%; font-size: 15px;}
    .contact .contact-content .faq .faq-list {margin-top: 40px;}
    .contact .contact-content .faq .faq-list li {font-size: 18px; padding: 0 calc(20/18*1em) 0 calc(60/18*1em);}
    .contact .contact-content .faq .faq-list li dl dt span {font-size: calc(28/18*1em);}
    .contact .contact-content .faq .faq-list li dl dt {margin: calc(40/18*1em) 0;}
    .contact .contact-content .faq .faq-list li dl dd {font-size: 15px;}
    .contact .contact-content .location {padding-top: 120px;}
    .contact .contact-content .location .map_wrap #map {height: 280px;}
    .contact .contact-content .location .map_wrap p {font-size: 18px;}
}

@media screen and (max-width: 500px) {
    .contact .contact-content {padding: 60px 0 0; --inputHeight: 40;}
    .contact .contact-content .title {font-size: 32px; margin-bottom: calc(30/32*1em);}
    .contact .contact-content .formBox {padding-top: 30px;}
    .contact .contact-content .formBox .fieldWrap dl dt {font-size: 16px;}
    .contact .contact-content .formBox .fieldWrap dl dt small {font-size: 12px;}
    .contact .contact-content .formBox .fieldWrap dl + dl dt {margin-top: calc(25/16*1em);}
    .contact .contact-content .formBox .fieldWrap dl dd .input {font-size: 14px; padding: 0 calc(15/14*1em);}
    .contact .contact-content .formBox .fieldWrap dl dd .textarea {height: 120px;}
    .contact .contact-content .formBox .fieldWrap .privacy .checkWrap {font-size: 13px; justify-content: flex-start;}
    .contact .contact-content .formBox .btn-wrap {padding-top: 30px;}
    .contact .contact-content .formBox .btn-wrap .btn {font-size: 15px; padding: calc(15/15*1em) calc(40/15*1em);}
    .contact .contact-content .faq {padding-top: 100px;}
    .contact .contact-content .faq .search {font-size: 14px;}
    .contact .contact-content .faq .faq-list {margin-top: 30px;}
    .contact .contact-content .faq .faq-list li {font-size: 16px; padding: 0 calc(15/16*1em) 0 calc(50/16*1em);}
    .contact .contact-content .faq .faq-list li dl dt span {font-size: calc(28/16*1em);}
    .contact .contact-content .faq .faq-list li dl dt {margin: calc(30/16*1em) 0;}
    .contact .contact-content .faq .faq-list li dl dd {font-size: 14px; padding-bottom: calc(30/14*1em);}
    .contact .contact-content .location {padding-top: 100px;}
    .contact .contact-content .location .map_wrap #map {height: 240px;}
    .contact .contact-content .location .map_wrap p {font-size: 16px; padding: calc(12/16*1em);}
}

@media screen and (max-width: 360px) {
    .contact .contact-content {padding: 50px 0 0; --inputHeight: 38;}
    .contact .contact-content .title {font-size: 28px; margin-bottom: calc(25/28*1em);}
    .contact .contact-content .formBox {padding-top: 0px;}
    .contact .contact-content .formBox .fieldWrap dl dt {font-size: 15px;}
    .contact .contact-content .formBox .fieldWrap dl dt small {font-size: 11px;}
    .contact .contact-content .formBox .fieldWrap dl + dl dt {margin-top: calc(20/15*1em);}
    .contact .contact-content .formBox .fieldWrap dl dd .input {font-size: 13px;}
    .contact .contact-content .formBox .fieldWrap dl dd .textarea {height: 100px;}
    .contact .contact-content .formBox .fieldWrap .privacy .checkWrap {font-size: 12px;}
    .contact .contact-content .formBox .fieldWrap .privacy .checkWrap .lbl small {font-size: 10px;}
    .contact .contact-content .formBox .btn-wrap {padding-top: 25px;}
    .contact .contact-content .formBox .btn-wrap .btn {font-size: 14px; padding: calc(12/14*1em) calc(30/14*1em);}
    .contact .contact-content .faq {padding-top: 80px;}
    .contact .contact-content .faq .search {font-size: 13px;}
    .contact .contact-content .faq .faq-list {margin-top: 25px;}
    .contact .contact-content .faq .faq-list li {font-size: 15px; padding: 0 calc(12/15*1em) 0 calc(40/15*1em);}
    .contact .contact-content .faq .faq-list li dl dt span {font-size: calc(24/15*1em);}
    .contact .contact-content .faq .faq-list li dl dt {margin: calc(25/15*1em) 0;}
    .contact .contact-content .faq .faq-list li dl dd {font-size: 13px;}
    .contact .contact-content .location {padding-top: 80px;}
    .contact .contact-content .location .map_wrap #map {height: 200px;}
    .contact .contact-content .location .map_wrap p {font-size: 15px; padding: calc(10/15*1em);}
}