.contact{word-break: keep-all;
}
.contact .s1 .img_area{
    position: relative;
    min-height: 500px;
}
.contact .s1 .img_area::before{
    content: '';
    display: block;
    padding-bottom: calc(850/1920*100%);
}
.contact .s1 .img_area img{
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
    object-fit: cover;
}


.contact .s1 .img_area ._txtBx{position: absolute; bottom:5%; left:5%; z-index:41;color:#fff; font-size:90px; font-weight:400; line-height:1.2; display:block; font-family: var(--font2);}


.contact .s1{
    padding-top: var(--header_h);
    box-sizing: border-box;
    background-color: #fff;
    color: #fff;
    font-family: var(--font);
    letter-spacing: -0.02em;
}

.contact .s1 .txtBx{color: #000;}
.contact .s1 .txtBx h3{
    font-size: 70px;font-weight: 400;
    line-height: calc(80 / 70);
    font-family: var(--font);
}
.contact .s1 .txtBx p{
    font-size: 24px;font-weight: 500;
    line-height: calc(40 / 24);
    margin-top: calc(40 / 36 * 1em);
    font-family: 'Pretendard';
}
.contact .s1 .infoBx{margin-top: 110px;}
.contact .s1 .infoBx .row{display: flex;}
.contact .s1 .infoBx .row > div{
    display: flex;flex-direction: column;gap: 10px;
}
.contact .s1 .infoBx .row .left{
    min-width: 250px;
}
.contact .s1 .infoBx .row:first-child{margin-bottom: 50px;}
.contact .s1 .infoBx .row em{
    display: block;
    font-size: 26px;font-weight: 400;color: #000;
    font-family: var(--font);
}
.contact .s1 .infoBx .row span{
    display: block;
    font-size: 20px;font-weight: 400;color: #000;
    font-family: 'Pretendard';
    line-height: calc(34 / 20);
}
.contact .s1 .infoBx .row .conBx{display: flex;gap: 18px;}
.contact .s1 .infoBx .row .conBx i{
    font-size: 20px;color: #000;
    line-height: calc(34 / 20);
}
.contact .s1 .wrap{
    display: flex;align-items: flex-start;justify-content: space-between;
    margin-top: 180px;
}
.contact .s1 .formArea{
    max-width: 700px;width: 100%;
}
.contact .s1 .formBx{
    background-color: #f7f7f7;padding: 60px 50px;box-sizing: border-box;
    border-radius: 20px;
}
.contact .s1 .formBx .tit{}
.contact .s1 .formBx .tit p{
    font-size: 50px;color: #000;font-weight: 400;
    margin-bottom: calc(55 / 50 * 1em);
}
.contact .s1 .formBx .row {
    font-size: 26px;font-weight: 400;margin-bottom: 50px;color: #000;
    position: relative;
    display: flex;
    align-items: center;
    gap: .5em;
    border-bottom: 1px solid rgba(221, 221, 221, 0.4);
    padding-bottom: 10px;
}
.contact .s1 .formBx .row.no_flex{display: block;border-bottom: none;margin-bottom: 0;}
.contact .s1 .formBx .row.no_flex h4{margin-bottom: 18px;}
.contact .s1 .formBx .row h4{font-family: var(--font);white-space: nowrap;}
.contact .s1 .formBx .row em{padding-left: 5px;font-family: var(--font);}
.contact .s1 .formBx .row input {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    color: #000;
    font-size: .85em;
    font-weight: 400;
    cursor: pointer;
    /* font-size: inherit; */
}
.contact .s1 .formBx .row textarea {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    background-color: rgba(221, 221, 221, 0.1);
    border: none;
    color: #000;
    background-color: #dddddd;
    font-size: .85em;
    font-weight: 400;
    cursor: pointer;
    resize: none;
    min-height: 180px;
    border-radius: 20px;
    /* font-size: inherit; */
}
.contact .s1 .checkBx{
    font-family: 'Pretendard', sans-serif;
    display: flex;
}
.contact .s1 .checkBx .row{margin-bottom: 0;}
.contact .s1 .checkBx .row .uploadType .radio_pill {display: flex;gap: 4px;align-items: center;}
.contact .s1 .checkBx .row .uploadType i {font-size: 20px;color: #000;line-height: 1.3;}
.contact .s1 .checkBx .row .uploadType span {font-size: 16px;font-weight: 400;color: #000;line-height: 1.3;letter-spacing: -0.04em;}
#personal:checked + .radio_pill i::before { content: "\e92d";color: #000;}

/* btnBx */
.s1 .btnBx{
    display: flex;
    margin-top: 25px;
}
.s1 .btnBx a{
    display: block;
    padding: calc(10 / 20 * 1em) calc(30 / 20 * 1em);
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--font);
    letter-spacing: -0.02em;
}

.contact .s2{padding: 150px 0;box-sizing: border-box;}

.contact .s2 .tit h4{
    font-size: 70px;font-weight: 400;
    padding-bottom: calc(40 / 70 * 1em);
    font-family: var(--font);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.contact .s2 .row{
    padding: 60px 0;box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;letter-spacing: -0.04em;
    display: flex;
}
.contact .s2 .row:nth-child(3){
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.contact .s2 .row > em{
    display: block;
    font-size: 40px;font-weight: 600;
    max-width: 530px;
    width: 100%;
}
.contact .s2 .row .txtBx p{font-size: 20px;font-weight: 400;line-height: calc(34 / 20);}
.contact .s2 .row .txtBx p strong{
    font-size: inherit;font-weight: 600;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* .contact .s2 .row .txtBx .line{
    width: 100%;max-width: 30px;height: 2px;background-color: #000;
    margin: 25px 0;
} */
.contact .s2 .row .txtBx a{
    display: flex;align-items: center;gap: 4px;font-size: 20px;
    margin-top: calc(15 / 20 * 1em);
    margin-bottom: calc(15 / 20 * 1em);
}
.contact .s2 .row .txtBx a span{
    font-size: inherit;font-weight: 600;font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.04em;
}
.contact .s2 .row .txtBx a i.xi-arrow-right{
    transform: translateY(-2px);rotate: -45deg;
}
.contact .s2 .row .txtBx .desc p{
    display: flex;font-size: 16px;font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    align-items: center;
	align-items: flex-start;
}
.contact .s2 .row .txtBx .desc em{
    display: block; white-space: nowrap;
}
.contact .s2 .row .txtBx .desc em span{
    margin: 0 4px;
}
.contact .s2 .row .txtBx .desc span{
    font-size: 16px;font-weight: 400;
    line-height: calc(26 / 16);
}

.contact .s2 .mapArea {
    margin-top: 80px;
    height: 400px;
    position: relative;
}

.contact .s2 .mapArea .root_daum_roughmap {
    width: 100%;
    height: 100% !important;
}

.contact .s2 .mapArea .root_daum_roughmap,
.contact .s2 .mapArea .root_daum_roughmap .wrap_map,
.contact .s2 .mapArea .root_daum_roughmap iframe {
    width: 100% !important;
    height: 100% !important;
}

/* UI 제거 */
.root_daum_roughmap .cont .section.lst,
.root_daum_roughmap .wrap_controllers {
    display: none !important;
}


@media screen and (max-width: 1680px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(80px, 80 / 1440 * 100vw, 90px);
    }
    .contact .s1 .txtBx h3{
        font-size: clamp(60px, 60 / 1440 * 100vw, 70px);
    }
    .contact .s1 .txtBx p{
        font-size: clamp(22px, 22 / 1440 * 100vw, 24px);
    }
    .contact .s1 .infoBx .row span{
        font-size: clamp(18px, 18 / 1440 * 100vw, 20px);
    }
    .contact .s1 .infoBx .row .left {
        min-width: 220px;
    }
    .contact .s1 .formBx .tit p{
        font-size: clamp(45px, 45 / 1440 * 100vw, 50px);
    }
    .contact .s1 .formBx .row, .contact .s1 .infoBx .row em{
        font-size: clamp(24px, 24 / 1440 * 100vw, 26px);
    }

    .contact .s2 .tit h4{
        font-size: clamp(60px, 60 / 1440 * 100vw, 70px);
    }
    .contact .s2 .row > em{
        font-size: clamp(36px, 36 / 1440 * 100vw, 40px);
    }
}
@media screen and (max-width: 1440px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(70px, 70 / 1280 * 100vw, 80px);
    }
    .contact .s1 .txtBx h3{
        font-size: clamp(50px, 50 / 1280 * 100vw, 60px);
    }
    .contact .s1 .formArea {
        max-width: clamp(600px, 600 / 1280 * 100vw, 700px);
    }
    .contact .s1 .formBx .tit p{
        font-size: clamp(40px, 40 / 1280 * 100vw, 45px);
    }
    .contact .s1 .formBx .row{
        font-size: clamp(22px, 22 / 1280 * 100vw, 24px);
    }


    .contact .s2 .tit h4{font-size: clamp(55px, 55 / 1280 * 100vw, 60px);}
    .contact .s2 .row > em {
        max-width: clamp(400px, 400 / 1280 * 100vw, 530px);
        font-size: clamp(32px, 32 / 1280 * 100vw, 36px);
    }
    .contact .s2 .row .txtBx p{font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}
    .contact .s2 .row .txtBx a{font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}
}
@media screen and (max-width: 1280px){

    .contact .s1 .img_area ._txtBx{
        font-size: clamp(60px, 60 / 1024 * 100vw, 70px);
    }
    .contact .s1 .txtBx h3{
        font-size: clamp(40px, 40 / 1024 * 100vw, 50px);
    }
    .contact .s1 .txtBx p{font-size: clamp(20px, 20 / 1024 * 100vw, 22px);}
    .contact .s1 .infoBx .row em{font-size: clamp(22px, 22 / 1024 * 100vw, 24px);}
    .contact .s1 .infoBx .row span{font-size: clamp(16px, 16 / 1024 * 100vw, 18px);}
    .contact .s1 .infoBx .row .left {min-width: clamp(170px, 170 / 1024 * 100vw, 200px);}

    .contact .s1 .formArea{max-width: clamp(500px, 500 / 1024 * 100vw, 600px);}
    .contact .s1 .formBx .tit p{font-size: clamp(35px, 35 / 1024 * 100vw, 40px);}
    .contact .s1 .formBx .row{font-size: clamp(20px, 20 / 1024 * 100vw, 22px);}
    .s1 .btnBx a{
        font-size: clamp(18px, 18 / 1024 * 100vw, 20px);
    }

    .contact .s2 .tit h4{font-size: clamp(50px, 50 / 1024 * 100vw, 55px);}
    .contact .s2 .row > em{
        max-width: clamp(220px, 220 / 1024 * 100vw, 400px);
        font-size: clamp(28px, 28 / 1024 * 100vw, 32px);
    }

}
@media screen and (max-width: 1024px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(50px, 50 / 820 * 100vw, 60px);
    }
    .contact .s1 .wrap{
        flex-direction: column;
        gap: 60px;
        margin-top: 100px;
    }
    .contact .s1 .infoBx{margin-top: 60px;}
    .contact .s1 .formArea{max-width: unset;}


    .contact .s2{padding: 100px 0;}
    .contact .s2 .tit h4{font-size: clamp(45px, 45 / 820 * 100vw, 55px);}
    .contact .s2 .row{
        flex-direction: column;
        gap: 20px;
    }
    .contact .s2 .row > em{font-size: clamp(24px, 24 / 820 * 100vw, 28px);}
}
@media screen and (max-width: 820px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(40px, 40 / 500 * 100vw, 50px);
    }
    .contact .s1 .txtBx h3{
        font-size: clamp(35px, 35 / 500 * 100vw, 40px);
    }
    .contact .s1 .txtBx p{font-size: clamp(18px, 18 / 500 * 100vw, 20px);}
    .contact .s1 .formBx{padding: 40px;}
    .contact .s1 .formBx .tit p{font-size: clamp(35px, 35 / 500 * 100vw, 40px);}

    .contact .s2 .row{padding: 40px 0;}
    .contact .s2 .row > em{font-size: clamp(22px, 22 / 500 * 100vw, 24px);}
    .contact .s2 .row .txtBx p{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .contact .s2 .row .txtBx a{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .contact .s2 .row .txtBx .desc p{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
    .contact .s2 .row .txtBx .desc span{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}

}
@media screen and (max-width: 500px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(35px, 35 / 360 * 100vw, 40px);
    }
    .contact .s1 .wrap{margin-top: 60px;}
    .contact .s1 .txtBx h3{font-size: clamp(30px, 30 / 360 * 100vw, 35px);}
    .contact .s1 .txtBx p{font-size: clamp(16px, 16 / 360 * 100vw, 18px);}
    .contact .s1 .infoBx .row{flex-direction: column;gap: 20px;}
    .contact .s1 .infoBx .row:first-child{margin-bottom: 20px;}

    .contact .s1 .formBx{padding: 30px;}
    .contact .s1 .formBx .tit p{font-size: clamp(28px, 28 / 360 * 100vw, 35px);}
    .contact .s1 .formBx .row{
        font-size: clamp(18px, 18 / 360 * 100vw, 20px);
        margin-bottom: 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: unset;
        padding: unset;
    }

    .contact .s1 .formBx .row input{padding-left: unset;padding-bottom: 4px;}
    .contact .s1 .checkBx .row{margin-bottom: 0;}
    .contact .s1 .checkBx .row .uploadType i{
        font-size: clamp(18px, 18 / 360 * 100vw, 20px);
    }
    .contact .s1 .checkBx .row .uploadType span{
        font-size: clamp(14px, 14 / 360 * 100vw, 16px);
    }
    .s1 .btnBx a{
        font-size: clamp(16px, 16 / 360 * 100vw, 18px);
    }


    .contact .s2 .tit h4{font-size: clamp(40px, 40 / 360 * 100vw, 45px);}
    .contact .s2 .row .txtBx p{font-size: 15px;}
    .contact .s2 .row .txtBx p br{display: none;}
    .contact .s2 .row .txtBx a{font-size: 15px;}
}
@media screen and (max-width: 360px){
    .contact .s1 .img_area ._txtBx{
        font-size: clamp(28px, 28 / 280 * 100vw, 35px);
    }
    .contact .s1 .txtBx h3{
        font-size: clamp(26px, 26 / 280 * 100vw, 30px);
    }
    .contact .s1 .infoBx .row em{
        font-size: clamp(20px, 20 / 280 * 100vw, 22px);
    }
    .contact .s1 .checkBx .row .uploadType .radio_pill{
        align-items: flex-start;
    }
}



/* complete */
.contact.complete .s1{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 100px 0;
    box-sizing: border-box;
}
.contact.complete .s1 .txtBx h3{font-size: 100px;}
.contact.complete .s1 .txtBx p{font-size: 30px;}
.contact.complete .s1 .btnBx{
    justify-content: center;
}
.contact.complete .s1 .btnBx a{
    max-width: 170px;
    width: 100%;
    margin-top: 60px;
}
.contact.complete .s1 .txtBx p br._mo{display: none;}

@media screen and (max-width: 1680px){
    .contact.complete .s1 .txtBx h3{font-size: clamp(80px, 80 / 1440 * 100vw, 100px);}
}
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1280px){
    .contact.complete .s1 .txtBx h3{font-size: clamp(60px, 60 / 1024 * 100vw, 80px);}
    .contact.complete .s1 .txtBx p{font-size: clamp(26px, 26 / 1024 * 100vw, 30px);}
    .contact.complete .s1 .btnBx a{margin-top: 20px;}
}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 820px){
    .contact.complete .s1 .txtBx h3{font-size: clamp(45px, 45 / 500 * 100vw, 60px);}
    .contact.complete .s1 .txtBx p{font-size: clamp(22px, 22 / 500 * 100vw, 26px);}
}
@media screen and (max-width: 500px){
    .contact.complete .s1 {height: 95vh;}
    .contact.complete .s1 .txtBx h3{font-size: clamp(35px, 35 / 360 * 100vw, 45px);}
    .contact.complete .s1 .txtBx p{font-size: clamp(18px, 18 / 360 * 100vw, 22px);}
    .contact.complete .s1 .txtBx p br._mo{display: block;}

}
@media screen and (max-width: 360px){}