/* A A A : A : A : A : */ #xi_form { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; font-size : min(1.6vw,18px); font-family : "Noto Sans Kr"; background : linear-gradient(to bottom, #002f47 70%, #fff 70%); padding : 4em 0 2em;} #xi_form .wrap { width : 95%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; max-width : 1200px; gap : 2em;} #xi_form .wrap .formTitWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 1.5em;} #xi_form .wrap .formTitWrap .titWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 0.7em;} #xi_form .wrap .formTitWrap .titWrap img { width : auto; height : 1.5em;} #xi_form .wrap .formTitWrap .titWrap p { font-size : 2em; line-height : 1em; font-weight : 600; color : #fff;} #xi_form .wrap .formTitWrap .textWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center;} #xi_form .wrap .formTitWrap .textWrap p { color : #faebd7; line-height : 1em;} #xi_form .wrap .formTitWrap .xiForm_imageWrap { width : 100%; height : auto; text-align : center; display : inline-block;} #xi_form .wrap .formTitWrap .xiForm_imageWrap img { width : 90%; max-width : 500px;} #xi_form .wrap .formTitWrap .telWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; gap : 2em;} #xi_form .wrap .formTitWrap .telWrap a { line-height : 1em; color : #fff; font-size : 1.2em;} #xi_form .wrap .formTitWrap .telWrap a span { font-weight : 600; line-height : inheirt;} #xi_form .wrap .formTitWrap .telWrap a span.small { font-size : 0.8em; } #xi_form #xiForm { width : 90%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; max-width : 600px; border-radius : 17px; background : #fff; box-shadow : 0px 0px 12px 0px #00000070; padding : 3em 2em 2em; gap : 1em;} #xi_form #xiForm .inputListWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-wrap : wrap; gap : 2em; } #xi_form #xiForm .inputListWrap .inputList { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; gap : 0.5em; position : relative;} #xi_form #xiForm .inputListWrap .inputList .warning { color : red; position : absolute; top : calc(100% + 0.2em); left : 3.5em; display : flex; align-items : flex-start; opacity : 0;} #xi_form #xiForm .inputListWrap .inputList .warning span { font-size : 12px;} #xi_form #xiForm .inputListWrap .inputList.half { width : calc(50% - calc(1.5em / 2));} #xi_form #xiForm .inputListWrap .inputList.date { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; padding-left : 1em; gap :1em;} #xi_form #xiForm .inputListWrap .inputList .name { width : 3em;} #xi_form #xiForm .inputListWrap .inputList.date .name { width : 100%;} #xi_form #xiForm .inputListWrap .inputList input { width : calc(100% - 3.5em); color : #777;} #xi_form #xiForm .inputListWrap .inputList input.textInput { height : 2em; display : flex; align-items : center; justify-content : center; padding : 0 0.5em; border : 1px solid #e5e5e5; background : #f7f7f7; border-radius : 7px;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap .dateWrap { width : calc(50% - calc(0.5em / 2)); height : auto; display : flex; align-items : center; justify-content : flex-start; gap : 0.3em;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap .inputName { width : 2.5em; color : #555;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap input, #xi_form #xiForm .inputListWrap .inputList.date .inputWrap select { width : calc(100% - 3em); color : #777;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap select { height : 2em; padding : 0em 0.5em; font-size : inherit; -webkit-appearance: none; /* iOS Safari */ background : #fff; border-radius : 7px; -moz-appearance: none; /* Firefox */ appearance: none; outline : none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.7em center; background-size: 1em;} #xi_form #xiForm .line { width : 100%; height : 1px; background : #ddd; margin : 1.3em 0 0.3em;} #xi_form #xiForm .agreeWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; gap : 1em; font-size : 0.85em;} #xi_form #xiForm .agreeWrap input { display : none;} #xi_form #xiForm .agreeWrap label { width : auto; height : auto; display : flex; align-items : center; justify-content : center; gap : 0.4em; cursor : pointer;} #xi_form #xiForm .agreeWrap label .checkBox { width : 1em; height : 1em; border : 1px solid #999; border-radius : 3px; display : flex; align-items : center; justify-content : center; } #xi_form #xiForm .agreeWrap label .checkBox svg { color : #002f47; opacity : 0;} #xi_form #xiForm .agreeWrap label:hover .text { text-decoration : underline;} #xi_form #xiForm .agreeWrap input:checked ~ label .checkBox svg { opacity : 1;} #xi_form #xiForm .agreeWrap #personal { line-height : 1em; padding : 0.5em 1em; color : #fff; background : #777; transition : .2s; cursor : pointer;} #xi_form #xiForm .agreeWrap #personal:hover { background : #555; transition : .2s;} #xi_form #xiForm button { line-height : 1em; padding : 0.7em 2.1em; color : #fff; background : #002f47; transition : .2s; cursor : pointer; font-family : "Noto Sans kr"; margin-top : 1em; border-radius : 7px;} #xi_form #xiForm button:hover { background : #4d6e7f; transition : .2s;} @media(max-width:1024px){ /* A A A : A : A : A : */ #xi_form { font-size : min(2.6vw,16px);} } @media(max-width:640px){ /* A A A : A : A : A : */ #xi_form { font-size : max(14px,3vw);} #xi_form #xiForm .inputListWrap { gap : 1.5em;} #xi_form .wrap .formTitWrap .telWrap { flex-direction : column; gap : 0.5em;} #xi_form #xiForm { width : 95%; padding : 2em 1em 2em;} #xi_form #xiForm .inputListWrap .inputList { flex-direction : column; align-items : flex-start;} #xi_form #xiForm .inputListWrap .inputList .warning { left : 0;} #xi_form #xiForm .inputListWrap .inputList .name, #xi_form #xiForm .inputListWrap .inputList input { width : 100%;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap { flex-direction : column; align-items : flex-start; padding-left : 0.5em;} #xi_form #xiForm .inputListWrap .inputList.date .inputWrap .dateWrap { width : 100%;} #xi_form #xiForm .agreeWrap { flex-direction : column; gap : 0.3em;} } /* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* person_info */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .popupWrap_personInfo ,.popupWrap_emailInfo { display : none; cursor : move; text-align : center; width : 70%; height : auto; margin-left : 15%; margin-top : 85px; position : fixed; left : 0; top : 0; z-index : 999999999; } .popupWrap_personInfo.on { display : block;} #popupBack { width : 100vw; height : 100vh; background : #000000c7; display : none; position :fixed; top : 0; left : 0; z-index : 100;} #popupBack.on { display : block;} .popupWrap_personInfo .MovePopupWrap ,.popupWrap_emailInfo .MovePopupWrap { overflow : auto; background-color : rgba(255,255,255,0.85); text-align : left; padding : 10px 2%; width : 100%; height : 550px; display : inline-block; } .popupWrap_personInfo .MovePopupWrap .popup_title ,.popupWrap_emailInfo .MovePopupWrap .popup_title { width : 100%; height : auto; display : inline-block; padding : 15px 0px; text-align : center; background-color : #000; margin-bottom : 15px; } .popupWrap_personInfo .MovePopupWrap .popup_title p ,.popupWrap_emailInfo .MovePopupWrap .popup_title p { font-size : 20px; font-weight : 500; color : #fff; } .popupWrap_personInfo .MovePopupWrap .popup_contents ,.popupWrap_emailInfo .MovePopupWrap .popup_contents { overflow : visible; width : 100%; height : auto; display : inline-block; } .popupWrap_personInfo .MovePopupWrap .popup_contents p ,.popupWrap_emailInfo .MovePopupWrap .popup_contents p { font-size : 14px; } .popupWrap_personInfo #popup_close_personInfo ,.popupWrap_emailInfo #popup_close_emailInfo { width : 150px; height : auto; padding : 10px 5px; font-size : 15px; background : #fff;} .familiySite { width:100%; height:auto; display: inline-block; text-align : center; margin-top : 30px;} .familiySite select.footerSelect { -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance : none; appearance : none; background-color : rgba(0,0,0,0); height:auto; text-align:center; padding: 5px 30px; border: 1px solid #666; font-family: inherit; border-radius: 0px; color:#fff; font-size:15px; /* 마지막 선택 요소 가운데 정렬 */ text-align: center; text-align-last: center; -moz-text-align-last: center; } .familiySite select.footerSelect:hover { background-color:#353535; } .familiySite select.footerSelect:focus { background-color:#353535; outline: none; } .familiySite select.footerSelect option.Selectbanner { color : #999; font-size : 13px; } .familiySite select.footerSelect option.Selectspace { font-size : 0.2rem; } .familiySite select.footerSelect::-ms-expand { display : none; } .familiySite select.footerSelect * { background-color : #353535; } @media(max-width : 1024px){ .popupWrap_personInfo, .popupWrap_emailInfo { margin : 0; width : 80vw; transform : translate(-50%,-50%); top: 50%; left : 50%;} .popupWrap_personInfo .MovePopupWrap ,.popupWrap_emailInfo .MovePopupWrap { height : 60vh; } }