._contactus{}
._contactus .cont{padding-bottom: 180px;box-sizing: border-box;}
._contactus .tabArea{margin-top: 45px;width: 100%;}


/* 카테고리 체크 박스 */
.category_check{
    display: flex; margin-top: 45px;
    gap: 30px; justify-content: center;
}
.category_check label{
    max-width: 320px; width: 100%; cursor: pointer;
}
.category_check label input{
    display: none;
}
.category_check label > div{
    border: 1px dashed var(--red);
    border-radius: 20px; width: 100%;
    padding: 30px 0; box-sizing: border-box;
    transition: background-color 0.3s;
    font-size: 20px;
    font-weight: 700;
    color: #484848;
    font-family: 'museosans';
    display: flex; align-items: center; justify-content: center; gap: 15px;
}
.category_check label .imgBx{width: calc(22/20*1em); height: calc(22/20*1em); position: relative;}
.category_check label .imgBx img{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    transition: opacity 0.3s;
}
.category_check label .imgBx img.w{opacity: 0;}
.category_check label .imgBx img.d{}
.category_check label p{}


/* 호버 */
.category_check label:hover > div{background-color: var(--red); color: #fff; border-style: solid;}
.category_check label:hover .imgBx img.w{opacity: 1;}
.category_check label:hover .imgBx img.d{opacity: 0;}

/* 체크 */
.category_check label input:checked + div{background-color: var(--red); color: #fff; border-style: solid;}
.category_check label input:checked + div .imgBx img.w{opacity: 1;}
.category_check label input:checked + div .imgBx img.d{opacity: 0;}




._contactus .formBx{margin-top: 45px;width: 100%;}
._contactus .formBx .row{margin-bottom: 35px;}
._contactus .formBx .row.n2{border-bottom: 1px solid #6a6a6a;padding-bottom: 40px;margin-bottom: 0;}
._contactus .formBx .row:last-child{margin-bottom: 0;}
._contactus .formBx .row.flx{display: flex;align-items: flex-start;gap: 30px;}
._contactus .formBx .row.flx > div{width: 100%;}
._contactus .formBx .row h4{
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    color: #000;
}
._contactus .formBx .row h4 em{
    color: #b51f28;
}
._contactus .formBx .row input, ._contactus .formBx .row textarea{width: 100%;border: 1px solid #eeeeee;border-radius: 7px;padding: calc(15/17*1em);box-sizing: border-box;
font-size: 17px;font-weight: 300;
}
._contactus .formBx .row input::placeholder{color: #858585;}
._contactus .formBx .row textarea::placeholder{color: #858585;}

._contactus .formBx .row label{
    display: flex;flex-direction: column;gap: 10px;width: 100%;
}

/* 제품 체크박스 */
._contactus .formBx .row .product_check{
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px;
}
._contactus .formBx .row .product_check label{
    width: calc((100% - (12px * 6)) / 7);
}
._contactus .formBx .row .product_check label input{
    display: none;
}
._contactus .formBx .row .product_check label div{
    width: 100%;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 7px;
    padding: calc(15 / 17 * 1em);
    box-sizing: border-box;
    font-size: 17px;
    font-weight: 300;
    color: #858585;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
._contactus .formBx .row .product_check label div p{}

/* 호버 */
._contactus .formBx .row .product_check label div:hover{
    background-color: #ff5912; color: #fff;
}

/* 체크 */
._contactus .formBx .row .product_check label input:checked + div{
    background-color: #ff5912; color: #fff;
}



._contactus .formBx .row textarea{height: 200px;resize: none;}

._contactus .formBx .row .file { }
._contactus .formBx .row .fileUpLoad { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 15px;align-items: center;}
._contactus .formBx .row .file .btn { position: relative; cursor: pointer; display: inline-block; }
._contactus .formBx .row .file .btn.hide { display: none; }
._contactus .formBx .row .file .btn input { display: none; }
._contactus .formBx .row .file .btn div { width: 138px; height: 44px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; border: 1px solid #828282; box-sizing: border-box; }
._contactus .formBx .row .file .btn:hover div { background-color: #ff5912; color: #fff; border-color: transparent; }
._contactus .formBx .row .file .btn div i { }
._contactus .formBx .row .file .btn div p { }
._contactus .formBx .row .file .name { display: none; font-size: 17px; line-height: 1.3; gap: 4px; }
._contactus .formBx .row .file .name.show { display: flex; }
._contactus .formBx .row .file .name p { text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
._contactus .formBx .row .file .name i { height: 1.3em; display: flex; align-items: center; justify-content: center; cursor: pointer; color: red; }

._contactus .formBx .row .captcha{display: flex;gap: 15px; align-items: center; margin-top: 15px;}
._contactus .formBx .row .captcha .imgBx{position: relative; width: 90px;}
._contactus .formBx .row .captcha .imgBx::before {
	content:''; display: block; padding-bottom: calc(20/60*100%);
}
._contactus .formBx .row .captcha .imgBx img{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
}
._contactus .formBx .row.n2 input{
    max-width: 100px;border: 1px solid #6d6d74;
    border-radius: 0;
    padding: calc(10 / 17 * 1em);
}
._contactus .formBx .row .subTxt{display: flex;gap: 4px;margin-top: 20px;
font-size: 17px;font-weight: 300;color: #858585;line-height: 1.3;}
._contactus .formBx .row .subTxt a{font-weight: 700;}


/* 개인정보처리 방침 */
._contactus .formBx .row .privacy_check { cursor: pointer; display: flex; align-items: flex-start; flex-direction: row;line-height: 1.3; gap: 8px; box-sizing: border-box;padding-top: 20px;}
._contactus .formBx .row .privacy_check input { display: none; }
._contactus .formBx .row .privacy_check .ico { height: 1.1em; display: flex; align-items: center; }
._contactus .formBx .row .privacy_check .ico i {color : #858585; }
._contactus .formBx .row .privacy_check .ico i:nth-child(1) { }
._contactus .formBx .row .privacy_check .ico i:nth-child(2) { display: none; }
._contactus .formBx .row .privacy_check input:checked + .ico i:nth-child(1) { display: none; }
._contactus .formBx .row .privacy_check input:checked + .ico i:nth-child(2) { display: block; color: #000; }
._contactus .formBx .row .privacy_check p { }
._contactus .formBx .row .privacy_check .flexBx{ display: flex; align-items: center; gap: 16px; }
._contactus .formBx .row .privacy_check .flexBx span{ font-size: 16px; color: #858585; font-weight: 600;  }



/* 제출 btn */
._contactus .submitBx{display: flex;justify-content: flex-end;margin-top: 20px;}
._contactus .submitBx .q_btn {
    width: 100%;
    max-width: 220px;
    height: calc(76/20*1em);
    display: flex; align-items: center; justify-content: center;
    background: #e6e6e6;
    color: #000;
    font-family: 'museosans';
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.025em;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
._contactus .submitBx .q_btn .circle {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-50%, -50%) scale(0);
    width: calc(640/20*1em);
    height: calc(640/20*1em);
    border-radius: 50%;
    background: #b51f28;
}
@media screen and (min-width: 821px) {
    ._contactus .submitBx .q_btn:hover {
        /* background: #fff; */
        color: #fff;
    }
}

._contactus .submitBx .q_btn i {
    font-size: calc(20/20*1em);
    position: absolute;
    right: calc(25/22*1em);
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 1;
}
._contactus .submitBx .q_btn span {
    position: relative;
    z-index: 1;
}


@media screen and (max-width: 1680px) {
    ._contactus .category_check label a span{font-size: clamp(18px, 18 / 1440 * 100vw, 20px);}
    ._contactus .submitBx .q_btn{font-size: clamp(18px, 18 / 1440 * 100vw, 20px);}
}
@media screen and (max-width: 1440px) {
    .category_check{gap: 20px;}
    .category_check label{max-width: 270px;}
    .category_check label > div{border-radius: 10px; padding: 22px 0; font-size: 18px; gap: 10px;}
}
@media screen and (max-width: 1280px) {
    ._contactus .formBx .row .product_check{gap: 10px;}
    ._contactus .formBx .row .product_check label{width: calc(100% / 5 - (10px * 4 / 5));}

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

    .category_check{gap: 10px;}
    .category_check label{max-width: 200px;}
    .category_check label > div{padding: 22px 0; font-size: 16px; }

    ._contactus .formBx .row h4{font-size: 16px;}
    ._contactus .formBx .row input, ._contactus .formBx .row textarea{font-size: 16px;}

    ._contactus .formBx .row .file .btn div{font-size: 16px;}
    ._contactus .formBx .row.n2{flex-direction: column;}
    ._contactus .formBx .row .subTxt{font-size: 16px;}

    ._contactus .submitBx .q_btn{font-size: clamp(16px, 16 / 820 * 100vw, 18px);}
}
@media screen and (max-width: 820px) {

    ._contactus .cont {padding-bottom: 120px;}

    ._contactus .formBx .row.flx{flex-direction: column;}

    ._contactus .formBx .row .product_check{gap: 6px 10px;}
    ._contactus .formBx .row .product_check label{width: calc(100% / 3 - (10px * 2 / 3));}
    ._contactus .formBx .row .product_check label div{font-size: 14px; border-radius: 4px;}

    ._contactus .submitBx .q_btn {max-width: 180px;height: calc(65/20*1em);}
}
@media screen and (max-width: 500px) {

    .category_check{gap: 6px; flex-direction: column;}
    .category_check label{max-width: unset; flex: 1;}
    .category_check label > div{padding: 16px 0; font-size: 14px; border-radius: 4px;}

    ._contactus .formBx .row h4{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}

    ._contactus .formBx .row .product_check{gap: 6px;}
    ._contactus .formBx .row .product_check label{width: calc(100% / 2 - (6px * 1 / 2));}
    ._contactus .formBx .row .product_check label div{font-size: 12px;}

    ._contactus .formBx .row input, ._contactus .formBx .row textarea{font-size: clamp(14px, 14 / 360 * 100vw, 16px);
        font-size: clamp(14px, 14 / 360 * 100vw, 16px);
    }
    ._contactus .formBx .row .file .btn div{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    ._contactus .formBx .row .subTxt{font-size: clamp(14px, 14 / 360 * 100vw, 16px);
        flex-direction: column;
    }
    ._contactus .formBx .row .privacy_check p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}

    ._contactus .submitBx .q_btn{font-size: clamp(14px, 14 / 360 * 100vw, 16px);
        max-width: 160px;
        height: calc(55/20*1em);
    }
    ._contactus .formBx .row .privacy_check .flexBx{ flex-direction: column; gap: 4px; align-items: flex-start;}
    ._contactus .formBx .row .privacy_check .flexBx span{ font-size: 14px; font-weight: 500; }
}
@media screen and (max-width: 360px) {}

/* _direction */
._direction .cont{margin-top: 160px; margin-bottom: 150px;}
._direction h3{margin-bottom:30px; font-size:49px; color:#B2B2B2; letter-spacing:-0.03em; font-family:"museo-sans"; font-weight:700; line-height:1.13; text-align:left;}
._direction h3 span{
    display:inline-block;
    color:#010101;
    background: linear-gradient(90deg, #010101 0%, #B2B2B2 0%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
._direction .d-flex{display:flex; }
._direction .map_area{width:71.5%; border-radius:30px; overflow:hidden; }
._direction .map_area iframe{width:100%; height:530px; display:block; }
._direction .location{margin-left:auto; width:27.3%; display:flex; flex-direction: column; justify-content: space-between;}
._direction .location ul{padding-left:20px;}
._direction .location ul li{margin-bottom:30px;}
._direction .location ul li h4{display:flex; align-items: center; font-size:24px; color:var(--red); letter-spacing:-0.03em; font-family:"museo-sans"; font-weight:700; line-height:1.13;}
._direction .location ul li h4:before{width:10px; aspect-ratio: 1/1; background-color: var(--red); border-radius:50%; display:block; content:''; margin-right:10px;}
._direction .location ul li p{margin-top:20px; font-size:18px; color:#000; letter-spacing:-0.03em; font-family:"museo-sans"; font-weight:500; line-height:1.5;}

@media screen and (max-width:1440px){
    ._direction h3{font-size:42px;}
    ._direction .location ul li h4{font-size:22px;}
    ._direction .location ul li p{font-size:17px;}
}

@media screen and (max-width:1280px){
    ._direction h3{font-size:38px;}
    ._direction .location ul li h4{font-size:20px;}
    ._direction .location ul li p{font-size:16px;}
}

@media screen and (max-width:1024px){
	._direction .cont{margin-top: 100px; margin-bottom: 100px;}
    ._direction h3{font-size:34px;}
    ._direction .location ul li h4{font-size:18px;}
    ._direction .location ul li p{font-size:15px;}
}

@media screen and (max-width:820px){
    ._direction h3{font-size:30px;}
    ._direction .location ul li h4{font-size:16px;}
    ._direction .location ul li p{font-size:14px;}
    ._direction .d-flex{flex-direction: column; gap:30px; }
    ._direction .map_area{width:100%;}
    ._direction .location{margin-left:0; width:100%;}
}

@media screen and (max-width:500px){
	._direction .cont{margin-top: 80px; margin-bottom: 80px;}
    ._direction h3{font-size:26px;}
	._direction .location ul{padding-left: 8px;}
    ._direction .location ul li h4{font-size:14px;}
    ._direction .location ul li p{font-size:13px; margin-top: 10px;}
    ._direction .map_area iframe{height:300px;}
}

@media screen and (max-width:360px){
    ._direction h3{font-size:24px;}
    ._direction .location ul li h4{font-size:13px;}
    ._direction .location ul li p{font-size:12px;}
}