/* A A A : A : A : A : */ #sub_Formmail{ width : 100%; height : auto; display : flex; align-items : center; justify-content : center; padding : 0 40px 4em; font-size : 20px; font-family : "SUIT"; flex-direction : column; padding-top : calc(4em + 120px); background-image : url("../../../../Image/viewWrapBack.png"); background-size : 100% auto; background-position : center top; background-repeat : no-repeat;} #sub_Formmail .titWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : flex-start; margin-bottom : 5em; font-size : inherit; max-width : 1600px;} #sub_Formmail .titWrap .line { width : 0.37em; font-size : inherit; background : #000; } #sub_Formmail .titWrap .titBox { width : auto; height : auto; display : flex; flex-direction : column; align-items : flex-start; font-size : 1.6em; padding : 0.25em 0; margin-left : 0.8em;} #sub_Formmail .titWrap .titBox p { font-size : inherit; line-height : 1em; letter-spacing : 0.2em;} #sub_Formmail .titWrap .titBox p:nth-child(2) { margin : 0.5em 0;} #sub_Formmail .titWrap .titBox p.light { font-weight : 300; color : #555;} #sub_Formmail .titWrap .titBox p.bold { font-weight : 600; } #sub_Formmail form { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : space-between; max-width : 1600px; flex-wrap : wrap;} #sub_Formmail form .inputWrap { width : 45%; height : auto; display : flex; flex-direction : column; max-width : 500px;} #sub_Formmail form .inputBox { width : 100%; height : auto; display : flex; align-items : center; margin-bottom : 1.5em; } #sub_Formmail form .inputBox.textarea { align-items : baseline; margin-bottom : 0;} #sub_Formmail form .inputBox .inputTit { font-size : clamp(14px,1.3vw,15px); color : #555; font-weight : 500; line-height : 1em; width : 6em;} #sub_Formmail form .inputBox .inputValueWrap { width : calc(100% - 6em); border : 1px solid #00000066; border-radius : 12px; align-items : center; font-size : clamp(14px,1.3vw,15px); padding : 0 1em; display : flex;} #sub_Formmail form .inputBox .inputValueWrap.btn { border-radius : unset; border : none; display : flex; flex-direction : column; align-items : flex-start; width : auto; padding : 0; cursor : pointer;} #sub_Formmail form .inputBox .inputValueWrap svg { color : #00000066; font-size : 1.5em;} #sub_Formmail form .inputBox .inputValueWrap input { font-size : inherit; padding : 1em; border : none; outline : none; width : 60%; flex-grow : 1; font-family : "SUIT";} #sub_Formmail form .inputBox .inputValueWrap textarea { font-size : inherit; padding : 1em 0; border : none; outline : none; width : 60%; flex-grow : 1; font-family : "SUIT"; height : min(55vw,250px);} #sub_Formmail form .inputBox.personal { margin : 1em 0 1.2em;} #sub_Formmail form .inputBox.personal .inputValueWrap { border : none; padding : 0; width : auto; line-height : 1em; cursor : pointer; white-space : nowrap;} #sub_Formmail form .inputBox.personal .inputValueWrap input { flex-grow : unset; margin : 0; margin-right : 0.5em; width : auto;} #sub_Formmail form .inputBox.personal #personalInfoBtn { font-size : 14px; background : #777; color : #fff; padding : 0.2em 1em; margin-left : 0.5em; cursor : pointer; transition : .2s; white-space : nowrap;} #sub_Formmail form .inputBox.personal #personalInfoBtn:hover { background : #333; transition : .2s;} #sub_Formmail form .inputBox .inputValueWrap #submit { font-size : 18px; font-weight : 500; font-family : "Noto Sans Kr"; color : #555; cursor : pointer; } #sub_Formmail form .inputBox .inputValueWrap .arrow { width : 5em; height : 2px; background : #555; position : relative; transition : .2s;} #sub_Formmail form .inputBox .inputValueWrap .arrow::after { content : ""; width : 2px; height : 1.5em; background : #555; position : absolute; bottom : 0.1em; right : 0; transform : rotate(-45deg); transform-origin : right bottom;} #sub_Formmail form .inputBox .inputValueWrap.btn:hover .arrow { margin-left : 1em; transition : .2s;} #sub_Formmail form .mapWrap { width : 50%; height : auto; margin-left : 5%; flex-grow : 1;} #sub_Formmail #personalBack { width : 100vw; height : 100vh; position : fixed; top : 0; left : 0; background : #0000008a; z-index : 50; opacity : 0; transition : .2s; pointer-events : none; } #sub_Formmail #personalBack.on { opacity : 1; pointer-events : auto; transition : .2s;} #sub_Formmail #personalInfoTextWrap { width : 90vw; height : 60vh; display : flex; justify-content : center; position : fixed; top : 55%; left : 50%; transform : translate(-50%,-50%); flex-direction : column; z-index : 51; opacity : 0; transition : .2s; pointer-events : none; max-width : 1200px;} #sub_Formmail #personalInfoTextWrap.on { opacity : 1; pointer-events : auto; transition : .2s;} #sub_Formmail #personalInfoTextWrap .textWrap { background : #fff; font-size : 12px; overflow : auto; width : 100%; height : 100%; padding : 1.5em 1em;} #sub_Formmail #personalInfoTextWrap .textWrap p { font-size : inherit; line-height : 1.4em; word-break : keep-all;} #sub_Formmail #personalInfoTextWrap .textWrap p.text { font-size : 1.1em; font-weight : 500; margin-bottom : 1em;} #sub_Formmail #personalInfoTextWrap .textWrap p.tit { font-size : inherit; font-weight : 500; margin-bottom : 0.3em; margin-top : 1em;} #sub_Formmail #personalInfoTextWrap .textWrap p.subText { font-size : inherit; padding-left : 1em;} #sub_Formmail #personalInfoTextWrap .closeBtn { width : 100%; display : flex; justify-content : space-between; color : #fff; background : #000; align-items : center; padding : 1em 0.5em; position : relative; } #sub_Formmail #personalInfoTextWrap .closeBtn span { font-size : 16px; flex-grow : 1; text-align : center; } #sub_Formmail #personalInfoTextWrap .closeBtn svg { font-size : 20px; position : absolute; top : -1.2em; right : 0.2em; cursor : pointer;} #sub_Formmail form .inputBox.personal.coin { margin : 0.5em 0 0;} #sub_Formmail form .inputBox.personal.coin .coinText { font-size : 14px; color : #ff0000;} @media(max-width : 1024px){ /* A A A : A : A : A : */ #sub_Formmail { font-size : 16px; padding-top : calc(4em + 70px);} #sub_Formmail .titWrap { margin-bottom : 3em;} #sub_Formmail form { flex-direction : column; } #sub_Formmail form .mapWrap { order : 1; width : 100%; aspect-ratio : 2 / 1; margin-left : 0; max-height : 340px;} #sub_Formmail form .inputWrap { width : 100%; order : 2; max-width : unset; margin-top : 2em;} #sub_Formmail form .inputBox .inputTit { width : 5em;} #sub_Formmail form .inputBox.personal { order : 3;} #sub_Formmail form .inputBox.btn { order : 4;} } @media(max-width : 640px){ #sub_Formmail { font-size : 14px; padding : 0 20px 2.5em; padding-top : calc(2.5em + 60px); } #sub_Formmail .titWrap { margin-bottom : 2.2em;} #sub_Formmail form .mapWrap { aspect-ratio : 1 / 1; max-height : unset;} #sub_Formmail form .inputBox { flex-direction : column; align-items : flex-start;} #sub_Formmail form .inputBox .inputTit { margin-bottom : 0.7em;} #sub_Formmail form .inputBox .inputValueWrap { width : 100%;} #sub_Formmail form .inputBox .inputValueWrap.btn { width : 100%; background : #99999966; border-radius : 7px; align-items : center;} #sub_Formmail form .inputBox.btn .inputTit { display : none;} #sub_Formmail form .inputBox .inputValueWrap #submit { color : #555; padding : 0.5em 0;} #sub_Formmail form .inputBox .inputValueWrap .arrow { display : none;} #sub_Formmail form .inputBox.personal { flex-direction : row; justify-content : flex-start; align-items : center; margin : 1.5em 0 2em;} #sub_Formmail form .inputBox.personal .inputTit { display : none;} } @media(max-width : 370px) { #sub_Formmail form .inputBox.personal { flex-direction : column; margin : 1em 0 1.2em;} #sub_Formmail form .inputBox.personal #personalInfoBtn { margin : 0; margin-top : 0.5em;} } @media(max-width : 374px) { #sub_Formmail { padding : 2em 20px; padding-top : calc(2em + 60px);} #sub_Formmail .titWrap { margin-bottom : 1.5em;} #sub_Formmail .titWrap .titBox { font-size : 1.4em; margin-left : 0.6em;} } }