.contact{background-color: #000;overflow: hidden;}
.contact .txtBx{}
.contact .txtBx > div{overflow: hidden;}
.contact .txtBx h3{
    font-size: 48px;font-weight: 600;color: #fff;
    margin-top: calc(20/48*1em);
}
.contact .txtBx p{
    font-size: 20px;font-weight: 400;color: rgba(255,255,255,0.8);
    margin-top: calc(15/20*1em);
    line-height: 1.3;
}
.contact .txtBx p br.max-500{display: none;}

section{
    padding-top: 340px;padding-bottom: 150px;box-sizing: border-box;width: 100%;
    position: relative;
}
section .bg{position: absolute;z-index: 0;pointer-events: none;
}
/* section .bg img{width: 100%;height: 100%;object-fit: contain;} */
section .bg._1{top: -13vw;right: -10vw;}
section .bg._2{bottom: -5vw;left: -10vw;}

.contact .cont{display: flex;justify-content: space-between;}
.contact .cont .left{}
.contact .cont .left > div{overflow: hidden;}
.contact .cont .left h3{
    font-size: 80px;color: #fff;font-weight: 500;font-family: 'Roboto';
    line-height: calc(100/80);
}
.contact .cont .left p{
    font-size: 20px;color: rgba(255,255,255,0.8);font-weight: 400;
    margin-top: calc(35/20*1em);
    line-height: 1.3;
}
.contact .cont .left p br.max-500{display: none;}
.contact .cont .left .infoBx{margin-top: calc(40/17*1em);font-size: 17px;}
.contact .cont .left .infoBx div{display: flex;align-items: center;gap: 10px;
    color: #fff;
    margin-bottom: calc(15/17*1em);
}
.contact .cont .left .infoBx div:last-child{margin-bottom: 0;}

.contact .cont .right{max-width: 800px;width: 100%;}
.contact .cont .right .formBx .row{margin-bottom: 35px;width: 100%;}
.contact .cont .right .formBx .row._flx{display: flex;gap: 40px;}
.contact .cont .right .formBx .row._flx > div{width: 100%;}
.contact .cont .right .formBx .row:last-child{margin-bottom: 0;}
.contact .cont .right .formBx .row h4{
    font-size: 20px;color: #fff;font-weight: 600;
    margin-bottom: calc(15/20*1em);
}
.contact .cont .right .formBx .row label input { 
    width: 100%;
    padding: 1em 1.8em;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    /* color: rgba(255,255,255,0.5); */
    font-size: 17px;
    font-weight: 400;
}
.contact .cont .right .formBx .row label input:focus{ color: #fff; }
.contact .cont .right .formBx .row label input::placeholder{color: rgba(255,255,255,0.5);font-size: 17px;font-weight: 400;}

.contact .cont .right .formBx .row label textarea {
    width: 100%;
    padding: 1em 1.8em;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.5);
    /* color: rgba(255,255,255,0.5); */
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    min-height: 200px;
    resize: none;
}
.contact .cont .right .formBx .row label textarea:focus{ color: #fff; }
.contact .cont .right .formBx .row label textarea::placeholder{color: rgba(255,255,255,0.5);font-size: 17px;font-weight: 400;}


/* selectBox */
.selectBox {font-size: 17px; cursor: pointer; position: relative; display: flex; align-items: center; width: 100%; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; border-radius: 30px; padding: 1em 1.8em;} 

.selectBox input {color: inherit; background: none; cursor: pointer; width: 100%; border: none; padding: 0;color: rgba(255,255,255,0.5);font-size: 17px;}
.selectBox input::placeholder{color: rgba(255,255,255,0.5);font-size: 17px;font-weight: 400;}
.selectBox i {display: flex; align-items: center; justify-content: center; font-size: 18px; transition: .4s;color: rgba(255,255,255,0.5);}
.selectBox.active i {transform: scaleY(-1);}
.selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; padding-top: 2px; display: none;z-index: 11;}
.selectBox .optWrap ul {
    /* max-height: 150px;  */
    overflow-y: auto;  width: 100%; background: #dfdede; padding: 5px 0; border-radius: calc(7/16*1em);}

.selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #333; border-radius: 10px;}
.selectBox .optWrap ul li span {font-size: 17px; padding: .8em 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.selectBox .optWrap ul li:hover span {background: #aaa;}
.selectBox.selected input { color: #fff;}

.contact .cont .right .checkBx{margin-top: 20px;}
.contact .cont .right .checkBx .row{margin-bottom: 12px;}
.contact .cont .right .checkBx .row:last-child{margin-bottom: 0;}
.contact .cont .right .checkBx .row > div{
    display: flex;gap: 8px;align-items: center;
    color: rgba(255,255,255,0.3);}
.contact .cont .right .checkBx .row > div > div{display: flex;gap: 8px;}    
.contact .cont .right .checkBx .row > div i{}
.contact .cont .right .checkBx .row > div span{cursor: pointer;}
.contact .cont .right .checkBx .row > div a{
    background-color: #565656;
    font-size: 12px;
    color: #9a9a9a;
    padding: .4em .6em;
    box-sizing: border-box;
    border-radius: 10px;
}

.contact .cont .right .checkBx .row > div i.active {color: #e32d21}
.contact .cont .right .checkBx .row.active span {color: #fff;}

.contact .cont .right .btnBx{margin-top: 40px;display: flex;justify-content: flex-end;}
.contact .cont .right .btnBx .submit{
    display: flex;gap: 10px;align-items: center;justify-content: space-between;
    background-image: linear-gradient(-50deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    color: rgb(0, 0, 0);
    /* background-color: #000; */
    /* color: #fff; */
    padding: 1em 1.2em;
    box-sizing: border-box;
    border-radius: 30px;
    max-width: 131px;
    width: 100%;
    /* border: 1px solid #fff; */
    /* transition: background-color 0.3s ease, border-color 0.3s ease; */
}
/* background-image: linear-gradient(-50deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    color: rgb(0, 0, 0); */
.contact .cont .right .btnBx .submit span{white-space: nowrap;}

/* .contact .cont .right .btnBx .submit:hover{background-color: #e32d21;border: 1px solid #e32d21;} */
.contact .cont .right .btnBx .submit:hover{
    color: rgb(255, 255, 255);
    background-image: linear-gradient(-50deg, rgb(227, 45, 33) 0%, rgb(255, 152, 49) 100%);
}


@media screen and (max-width: 1680px) {
    .contact .txtBx h3{font-size: clamp(42px, 42 / 1440 * 100vw, 48px);}


    section{padding-top: 250px;}

    section .bg._1{right: -18vw;}
    section .bg._2{left: -15vw;}
    .contact .cont .left h3{font-size: clamp(72px, 72 / 1440 * 100vw, 80px);}
    .contact .cont .right{max-width: clamp(650px, 650 / 1440 * 100vw, 800px);}
}
@media screen and (max-width: 1440px) {
    .contact .txtBx h3{font-size: clamp(38px, 38 / 1280 * 100vw, 42px);}
    .contact .cont .left h3{font-size: clamp(64px, 64 / 1280 * 100vw, 72px);}
    .contact .cont .right{max-width: clamp(550px, 550 / 1280 * 100vw, 600px);}
}
@media screen and (max-width: 1280px) {

    section .bg._1{right: -25vw;}
    section .bg._2{left: -30vw;}
    /* section .bg img{object-fit: scale-down;} */

    .contact .txtBx h3{font-size: clamp(34px, 34 / 1024 * 100vw, 38px);}
    .contact .txtBx p{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}

    .contact .cont .left h3{font-size: clamp(48px, 48 / 1024 * 100vw, 64px);}
    .contact .cont .left p{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}
    .contact .cont .right .formBx .row h4{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}
    /* form */
    .contact .cont .right .formBx .row label input{font-size: 16px;}
    .selectBox{font-size: 16px;}
    .selectBox input{font-size: 16px;}
    .selectBox i{font-size: 16px;}
    .selectBox .optWrap ul li span{font-size: 16px;}
    .contact .cont .right .formBx .row label textarea{font-size: 16px;}
    .contact .cont .right .formBx .row label input::placeholder{font-size: 16px;}
    .contact .cont .right .formBx .row label textarea::placeholder{font-size: 16px;}



    
    .contact .cont .right .formBx .row._flx {gap: 20px;}
    .contact .cont .right{max-width: clamp(450px, 450 / 1024 * 100vw, 550px);}
}
@media screen and (max-width: 1024px) {
    .contact .txtBx h3{font-size: clamp(30px, 30 / 820 * 100vw, 34px);}


    section {padding-top: 120px;}
    section .bg{max-width: 90%;}
    .contact .cont{flex-direction: column;gap: 80px;}
    .contact .cont .left h3 {font-size: clamp(42px, 42 / 820 * 100vw, 48px);}
    .contact .cont .right{max-width: unset;}
}
@media screen and (max-width: 820px) {
    .contact .txtBx h3{font-size: clamp(26px, 26 / 500 * 100vw, 30px);}
    .contact .txtBx p{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}

    section .bg._1{top: -5vw;right: -35vw;}
    section .bg._2 {bottom: -20vw;left: -10vw;}
}
@media screen and (max-width: 500px) {
    .contact .txtBx h3{font-size: clamp(22px, 22 / 360 * 100vw, 26px);}
    .contact .txtBx p br.max-500{display: block;}


    .contact .cont .left h3 {font-size: clamp(36px, 36 / 500 * 100vw, 42px);}
    .contact .cont .left p {font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .contact .cont .left p br.max-500{display: block;}

    .contact .cont .left .infoBx{font-size: 16px;}

    .contact .cont .right .formBx .row._flx{flex-direction: column;gap: 35px;}
    .contact .cont .right .formBx .row h4 {font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .contact .cont .right .formBx .row label input {font-size: 14px;}
    .selectBox input{font-size: 14px;}
    .selectBox i{font-size: 14px;}
    .selectBox .optWrap ul li span{font-size: 14px;}
    .contact .cont .right .formBx .row label textarea{font-size: 14px;}
    .contact .cont .right .formBx .row label input::placeholder{font-size: 14px;}
    .contact .cont .right .formBx .row label textarea::placeholder{font-size: 14px;}

    .contact .cont .right .checkBx .row > div span{font-size: 14px;}
    .contact .cont .right .checkBx .row > div a{font-size: 10px;}

    .contact .cont .right .btnBx .submit{font-size: 14px;max-width: 100px;}
}
@media screen and (max-width: 360px) {

    .contact .cont .left h3 {font-size: clamp(32px, 32 / 360 * 100vw, 36px);}
    .contact .txtBx p {font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
    .contact .cont .left p {font-size: clamp(14px, 14 / 280 * 100vw, 16px);}

    .contact .cont .right .checkBx .row > div{flex-direction: column;align-items: flex-start;}
}

/* contact popup */

body.noScroll{overflow: hidden;}
.popupBx{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    word-break: keep-all;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popupBx.active{opacity: 1;visibility: visible;pointer-events: auto;}
.popupBx .inn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 1080px;
    background: #fff;
    padding: 40px;
    border-radius: 10px;
}
.popupBx .close{position: absolute;top: 20px;right: 20px;cursor: pointer;z-index: 9999;}
.popupBx .close i{font-size: 22px;color: #000;}

.popupBx .txtBx > h2{font-size: 24px;color: #000;font-weight: 600;margin-bottom: 40px;line-height: 1.3;}
.popupBx .txtBx > p{font-size: 16px;color: #000;font-weight: 400;margin-bottom: 40px;line-height: 1.3;}
.popupBx .scrollBx {
    height: 400px;
    overflow-y: auto;
    padding: 20px;
    background: #f8f8f8;
}
.popupBx .scrollBx > em{font-size: 18px;color: #000;font-weight: 600;margin-bottom: 20px;display: block;}
.popupBx .scrollBx > p{font-size: 16px;color: #000;font-weight: 400;line-height: 1.2;}
.popupBx .scrollBx > p span{display: flex;gap: 4px;margin-bottom: 5px;}
.popupBx .scrollBx > p span small{white-space: nowrap;}
.popupBx .scrollBx > p.p_margin{margin-top: 25px;}
.popupBx .scrollBx > em.e_margin{margin-top: 40px;}
.popupBx .scrollBx > p span.s_margin{margin-bottom: 12px;}
.popupBx .scrollBx ._bold{font-weight: 700;margin-bottom: 5px;}
.popupBx .txtBx > h2 br.max-360{display: none;}
@media screen and (max-width: 1024px) {
    .popupBx .txtBx > h2{font-size: clamp(22px, 22 / 820 * 100vw, 24px);}
}
@media screen and (max-width: 820px) {
    .popupBx .inn{box-sizing: border-box;padding: 25px;width: 90%;}
    .popupBx .txtBx > h2{font-size: clamp(20px, 20 / 500 * 100vw, 22px);}
    .popupBx .txtBx > p{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
    .popupBx .scrollBx {
        height: 250px;
    }
    .popupBx .scrollBx > em{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .popupBx .scrollBx > p{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
}
@media screen and (max-width: 500px) {
    .popupBx .scrollBx ._column{flex-direction: column;gap: 4px;}
}
@media screen and (max-width: 360px) {

    .popupBx .txtBx > h2{font-size: clamp(18px, 18 / 280 * 100vw, 20px);}
    .popupBx .close i{font-size: clamp(18px, 18 / 280 * 100vw, 22px);}
    .popupBx .close{top: 15px;right: 15px;}
    .popupBx .txtBx > h2 br.max-360{display: block;}
}


/* complete */

.complete{background-color: #000;
    display: flex;align-items: center;justify-content: center;
    text-align: center;
}
.complete .s01{
    width: 100%;height: 100vh;
    padding: 120px 0;box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.complete .completeBx{width: 100%;position: relative;z-index: 9;}
.complete .completeBx .top small{font-size: 20px;color: #fff;font-weight: 500; font-family: 'Roboto';}
.complete .completeBx .top h3{
    font-size: 48px;color: #fff;font-weight: 600;
    line-height: 1.3;
    margin-top: calc(20/48*1em);
}
.complete .completeBx .top h3 br.max-500{display: none;}
.complete .completeBx .top p{
    font-size: 20px;color: rgba(255,255,255,0.8);
    margin-top: calc(20/20*1em);
    margin-bottom: calc(80/20*1em);
    line-height: 1.3;
}
.complete .completeBx .top p br.max-500{display: none;}
.complete .completeBx .bottom{display: flex;gap: 20px;align-items: center;justify-content: center;}
.complete .completeBx .bottom a{
    display: flex;gap: 10px;align-items: center;justify-content: space-between;
    color: #fff;
    padding: 1em 1.5em;
    box-sizing: border-box;
    border-radius: 30px;
    font-size: 16px;
    border: 1px solid #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.complete .completeBx .bottom a span{}
.complete .completeBx .bottom a i{padding-left: .5em;}

.complete .completeBx .bottom a:hover{
    background-color: #e32d21;
    border: 1px solid #e32d21;
}

.complete .bg{
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    pointer-events: none;
}

@media screen and (max-width: 1680px) {
    .complete .completeBx .top h3{font-size: clamp(42px, 42 / 1680 * 100vw, 48px);}
}
@media screen and (max-width: 1440px) {
    .complete .completeBx .top h3{font-size: clamp(38px, 38 / 1440 * 100vw, 42px);}
}
@media screen and (max-width: 1280px) {
    .complete .completeBx .top small{font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}
    .complete .completeBx .top h3{font-size: clamp(32px, 32 / 1280 * 100vw, 38px);}
    .complete .completeBx .top p{font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}
}
@media screen and (max-width: 1024px) {
    .complete .s01{padding: 80px 0;}
}
@media screen and (max-width: 820px) {
    .complete .s01{height: 70vh;}
    .complete .completeBx .top small{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .complete .completeBx .top h3{font-size: clamp(28px, 28 / 500 * 100vw, 32px);}
    .complete .completeBx .top p{font-size: clamp(16px, 16 / 500 * 100vw, 18px);margin-bottom: calc(40/18*1em);}

    .complete .completeBx .bottom a{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}

}
@media screen and (max-width: 500px) {
    .complete .completeBx .top small{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    .complete .completeBx .top h3{font-size: clamp(22px, 22 / 360 * 100vw, 28px);}
    .complete .completeBx .top p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}



    .complete .completeBx .bottom{flex-direction: column;}
    .complete .completeBx .bottom a{min-width: 175px;}
    /* .complete .completeBx .top h3 br.max-500{display: block;} */
    .complete .completeBx .top p br.max-500{display: block;}
}
@media screen and (max-width: 360px) {
    .complete .completeBx .top h3 br.max-500{display: block;}
    .complete .completeBx .top p{font-size: clamp(13px, 13 / 280 * 100vw, 14px);}
}