/* 공통으로 잡힌거 조절 */
._contact{position: relative;}

._quick_contact {display: none !important;}
._contact .bg{position: absolute;}
._contact .bg._left{left: -30vw;top: -130px;}
._contact .bg._right{right: -15vw;bottom: -30vw;}
@media screen and (max-width: 1280px) {
    ._contact .bg._left{left: -50vw;top: 0;}
    ._contact .bg._right{right: -30vw;bottom: -40vw;}
}
@media screen and (max-width: 1024px) {
    ._contact .bg._left{left: -60vw;top: 0;}
    ._contact .bg._right{right: -50vw;}
}


._contact h3{
    font-size: 52px;
    line-height: calc(72 / 52);
    margin-bottom: calc(40 / 52 * 1em);
}
/*  */


._contact .formBx{display: flex;justify-content: space-around;}
._contact .formBx .left .top > div{overflow: hidden;}
._contact .formBx .left .top p{
    font-size: 18px;font-weight: 300;color: #000;line-height: calc(30 / 18);
}

._contact .formBx .left .bottom{margin-top: 110px;}
._contact .formBx .left .bottom p{
    font-size: 22px;font-weight: 600;color: #000;line-height: calc(33 / 22);
    margin-bottom: 1em;
}

._contact .formBx .left .bottom .marqueeBx{
    /* background-color: #eceff2; */
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    padding: 30px 0;box-sizing: border-box;
    max-width: 568px;
}
._contact .formBx .left .bottom .marqueeBx .marqueeArea{
    display: flex;
}
._contact .formBx .left .bottom .marqueeBx .marquee{
    display: flex;
    gap: 38px;
    /* border: 1px solid #000;box-sizing: border-box; */
    animation: marquee 30s linear infinite;
    padding-right: 38px;
}
._contact .formBx .left .bottom .marqueeBx .marquee > div{
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex: 0 0 auto; */
}
._contact .formBx .left .bottom .marqueeBx .marquee > div img{
    max-width: unset; max-height: 50px;
}



@keyframes marquee{
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

._contact .formBx .right{max-width: 820px;width: 100%;}
._contact .formBx .right .form{width: 100%;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 40px;box-sizing: border-box;
}
._contact .formBx .right .form .row{display: flex;gap: 25px;margin-bottom: 30px;width: 100%;}
._contact .formBx .right .form .checkBx .row{flex-direction: column;gap: 0px;margin-bottom: 0;}
._contact .formBx .right .form .row > div{width: 100%;}
._contact .formBx .right .form .row h4{font-size: 17px;font-weight: 600;color: #000;}
._contact .formBx .right .form .row h4::after{content: '*';color: #4d01ce;}
._contact .formBx .right .form .row h4.no_after::after{content: '';display: none;}

._contact .formBx .right .form .row .flx{display: flex;align-items: center;gap: 10px;position: relative;}
._contact .formBx .right .form .row .flx span{font-size: 14px;font-weight: 300;color: #949494;position: absolute;left: 60px;display: flex;align-items: flex-start;gap: 3px;}
._contact .formBx .right .form .row input{width: 100%;padding: .8em 1.2em;border-radius: 7px;border:1px solid #d1d1d1;color: #9a9a9a;font-size: 17px;font-weight: 400;box-sizing: border-box;margin-top: 15px;}

._contact .formBx .right .form .row input::placeholder{font-weight: 400;color: #9a9a9a;}
._contact .formBx .right .form .row .selectBox input{cursor: pointer;}

._contact .formBx .right .form .row textarea{width: 100%;padding: .8em 1.2em;border-radius: 7px;border:1px solid #d1d1d1;color: #9a9a9a;font-size: 17px;font-weight: 400;box-sizing: border-box;margin-top: 15px;resize: none;min-height: 144px;}

._contact .formBx .right .form .row textarea placeholder{font-weight: 400;}
._contact .formBx .right .form .row textarea::placeholder{font-weight: 400;color: #9a9a9a;}

._contact .formBx .right .form .row > div .selectBox{position: relative;cursor: pointer;}
._contact .formBx .right .form .row > div .selectBox i {display: flex; align-items: center; justify-content: center; font-size: 20px; transition: .4s;position: absolute;top: 48%;right: 5%;color: #000;}

/* border i 추가 */
._contact .formBx .right .form .row > div .selectBox._border i {right: 4%;}

._contact .formBx .right .form .row > div .selectBox.active i {transform: scaleY(-1);}
._contact .formBx .right .form .row > div .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; padding-top: 2px; display: none;}
._contact .formBx .right .form .row > div .selectBox .optWrap ul {
    /* max-height: 150px;  */
    overflow-y: auto;  width: 100%; background: #fff;border-radius: calc(7/16*1em);position: relative;z-index: 2;
    border: 1px solid #d1d1d1;
}
._contact .formBx .right .form .row > div .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
._contact .formBx .right .form .row > div .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #333; border-radius: 10px;}
._contact .formBx .right .form .row > div .selectBox .optWrap ul li span {font-size: calc(17/17*1em); padding: calc(11/17*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;color: #9a9a9a;}
._contact .formBx .right .form .row > div .selectBox .optWrap ul li:hover span {background: #eceff2;}


/* ._contact .right .checkBx{margin-bottom: 50px;} */
._contact .right .checkBx .row .radio_group{margin-bottom: 10px;}
._contact .right .checkBx .row .radio_group .radio_pill {display: flex;gap: 4px;align-items: flex-start;}
._contact .right .checkBx .row .radio_group input{display: none;}
._contact .right .checkBx .row .radio_group i {font-size: 18px;color: #8e8e8e;}
._contact .right .checkBx .row .radio_group p {font-size: 16px;font-weight: 400;color: #000;line-height: 1.3;}
._contact .right .checkBx .row .radio_group:first-child p::after{content: '*';color: #4d01ce;}
._contact .right .checkBx .row .radio_group p a {color: var(--purple); display: inline-block;}
#personal:checked + .radio_pill i::before {content: "\e92d";color: var(--purple);}
#marketing:checked + .radio_pill i::before {content: "\e92d";color: var(--purple);}

._contact .right .checkBx .row .radio_group .txtBx span{
    font-size: .8em;font-weight: 400;color: #000;line-height: 1.3;margin-top: 5px;
    display: block;
    padding-left: 22px;
}

._contact ._moreBtn{margin-top: 30px;}

@media screen and (max-width: 1600px) {
    ._contact h3{font-size: clamp(48px, 48 / 1440 * 100vw, 52px);}
    ._contact .formBx .left .bottom .marqueeBx{max-width: clamp(480px, 480 / 1440 * 100vw, 568px);}

    ._contact .formBx .right{max-width: clamp(750px, 750 / 1440 * 100vw, 820px);}

}
@media screen and (max-width: 1440px) {
    ._contact h3{font-size: clamp(42px, 42 / 1280 * 100vw, 48px);}
    ._contact .formBx .left .bottom .marqueeBx .marquee > div {
        /* width: 7em; */
    }
    ._contact .formBx .left .bottom .marqueeBx{padding: 15px 0;}
    ._contact .formBx .left .bottom p{font-size: clamp(20px, 20 / 1280 * 100vw, 22px);}

    ._contact .formBx .right {
        max-width: clamp(680px, 680 / 1280 * 100vw, 750px);
    }
    ._contact .formBx .right .form .row h4{font-size: 16px;}
    ._contact .formBx .right .form .row input {font-size: 16px;}
    ._contact .formBx .right .form .row textarea {font-size: 16px;}
    ._contact .formBx .right .form .row > div .selectBox .optWrap ul li span{
        font-size: 16px;
    }
    ._contact .formBx .right .form .row .flx span {
        font-size: 13px;left: 50px;
    }
}
@media screen and (max-width: 1280px) {
    ._contact .formBx .left{max-width: clamp(320px, 320 / 1024 * 100vw, 420px);}
    ._contact h3{font-size: clamp(38px, 38 / 1024 * 100vw, 42px);}
    ._contact .formBx .left .top p{font-size: clamp(16px, 16 / 1024 * 100vw, 18px);}
    ._contact .formBx .left .top p br{display: none;}
    ._contact .formBx .left .bottom{margin-top: 70px;}
    ._contact .formBx .left .bottom .marqueeBx .marquee > div img{
        max-height: 40px;
    }

    ._contact .formBx .right{max-width: clamp(580px, 580 / 1024 * 100vw, 680px);}
    ._contact .formBx .right .form{padding: 20px;}
    ._contact .formBx .right .form .row {gap: 15px;}
    ._contact .formBx .right .form .row .flx span {white-space: normal;font-size: 12px;}

    ._contact .formBx .right .form .row h4 {
        font-size: 15px;
    }
    ._contact .formBx .right .form .row input {
        font-size: 15px;
    }
    ._contact .formBx .right .form .row textarea {
        font-size: 15px;
    }
    ._contact .formBx .right .form .row > div .selectBox .optWrap ul li span{
        font-size: 15px;
    }
    ._contact .right .checkBx .row .radio_group p {font-size: 15px;}
}
@media screen and (max-width: 1024px) {
    ._contact h3{font-size: clamp(32px, 32 / 1024 * 100vw, 38px);}
    ._contact .formBx .right .form .row h4{font-size: clamp(14px, 14 / 820 * 100vw, 15px);}
    ._contact .formBx .right .form .row input {font-size: clamp(12px, 12 / 820 * 100vw, 15px);}
    ._contact .formBx .right .form .row textarea {font-size: clamp(12px, 12 / 820 * 100vw, 15px);}
    ._contact .formBx .right .form .row > div .selectBox .optWrap ul li span{
        font-size: clamp(12px, 12 / 820 * 100vw, 14px);
    }
    ._contact .formBx .left .bottom .marqueeBx .marquee > div img{
        max-height: 30px;
    }



    ._contact .formBx .right .form .row .flx span {font-size: 11px;white-space: normal;}
    ._contact .right .checkBx .row .radio_group p {font-size: 14px;}

    ._contact .formBx .right .form .row > div .selectBox i {font-size: clamp(18px, 18 / 820 * 100vw, 20px);right: 2%;}

    ._contact .formBx .right{max-width: clamp(400px, 400 / 820 * 100vw, 580px);}
    ._contact .formBx .right .form .row {gap: 10px;}
}
@media screen and (max-width: 820px) {
    ._contact h3{font-size: clamp(28px, 28 / 500 * 100vw, 32px);}
    ._contact .formBx{flex-direction: column;gap: 40px;}
    ._contact .formBx .left .top p br{display: block;}
    ._contact .formBx .left .bottom .marqueeBx{max-width: unset;}
    ._contact .formBx .left{max-width: unset;}
    ._contact .formBx .right{max-width: unset;}


    ._contact .formBx .right .form .row h4 {
        font-size: clamp(14px, 14 / 500 * 100vw, 16px);
    }
    ._contact .formBx .right .form .row input {
        font-size: clamp(14px, 14 / 500 * 100vw, 16px);
    }
    ._contact .formBx .right .form .row input::placeholder{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
    ._contact .formBx .right .form .row textarea {
        font-size: clamp(14px, 14 / 500 * 100vw, 16px);
    }
    ._contact .formBx .right .form .row textarea::placeholder{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
    ._contact .formBx .right .form .row > div .selectBox .optWrap ul li span{
        font-size: clamp(14px, 14 / 500 * 100vw, 16px);
    }
    ._contact .formBx .right .form .row > div .selectBox i{
        font-size: clamp(16px, 16 / 500 * 100vw, 18px);
    }
    ._contact .right .checkBx .row .radio_group p{
        font-size: clamp(14px, 14 / 500 * 100vw, 16px);
    }
}
@media screen and (max-width: 500px) {
    ._contact h3{font-size: clamp(24px, 24 / 360 * 100vw, 28px);}
    ._contact .formBx .left .top p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    ._contact .formBx .left .top p br{display: none;}

    ._contact .formBx .left .bottom p{font-size: clamp(18px, 18 / 360 * 100vw, 20px);}

    ._contact .formBx .right .form .row{flex-direction: column;margin-bottom: 20px;gap: 20px;}

}
@media screen and (max-width: 360px) {
    ._contact .right .checkBx .row .radio_group .txtBx span br{display: none;}
}