@charset "utf-8";
/* form.css */

/* ************************ 기본셋팅 ************************ */

.hidden {display:none;}
:focus {outline:0;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}

input[type='checkbox'] { position: absolute; left: -9999px; }
input[type='checkbox']+label { padding: 3px 30px; padding-left: 30px; background: url(../images/common/icon_checkOff.svg) no-repeat 0 50%; background-size:20px; cursor: pointer; }
input[type='checkbox']:checked+label { background-image: url(../images/common/icon_checkOn.svg);}

input[type="radio"] {vertical-align: middle; appearance: none; }
input[type="radio"] {position: absolute; left: -9999px;}
input[type='radio']+label { padding: 3px 10px; padding-left: 25px; background: url(../images/common/icon_checkOff.svg) no-repeat 0 50%; cursor:pointer; background-size:20px;}
input[type='radio']:checked+label {background-image: url(../images/common/icon_checkOn.svg);}

select {
	-webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
	height:40px; line-height:38px; border-radius:5px;
	padding:0 40px 0 12px; border:1px solid var(--border1); cursor:pointer; background:#fff url(../images/common/selectArrow.png)calc(100% - 15px) 50% /auto no-repeat;

}
select::-ms-expand { display: none; } /* IE 10, 11의 네이티브 화살표 숨기기 */
select option {color:inherit;}
select [selected] {color:inherit;}
select :selected {color:inherit;}
select ::selected {color:inherit;}
::-moz-selection  {color:#666;}
::selection {color:#fff; background:#3366ff;}

textarea {padding:10px 12px; line-height:1.4; min-height:120px; border:1px solid #e5e5e5; resize:none; width:100%;}
label {vertical-align:middle; line-height:40px;}
input[type="text"],
input[type="password"],
input[type=number] {max-width:100%; padding:0 12px;height:40px; line-height:38px; border:1px solid var(--border1);}
input[readonly] {background-color:#f7f7f7;}
button {cursor:pointer; background:transparent; padding:0;}

input[type="file"] {width:100%;}
.autoCode {display:inline-block; margin-right:10px;}

/* 파일박스 */
/* .filebox {display:flex; gap:0 !important;} */
.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0; visibility:hidden;
}
.filebox label {
    display: inline-block;
    padding:0 20px; border-radius:5px;
    color: #fff; text-align:center;
    vertical-align: middle;
    background-color:#333; white-space:nowrap;
    cursor: pointer; width:125px;
    height: 40px; line-height:40px;
    margin-left: 5px;
}
.filebox .upload-name {
    display: inline-block;
    height: 40px; border-radius:5px;
    padding: 0 10px;
    vertical-align: middle;
    border: 1px solid var(--border1);
	width:70%;
    color: #000;
}
.filebox .currFile {padding:10px 0 0;}

/* ************************ //END 기본셋팅 ************************ */


/* ************************ 데스크탑 (1025~) ************************ */

.calBtn {width:40px; height:40px; background:url(../images/common/i-cal-black.svg)center /80% no-repeat; display:inline-block; vertical-align:middle;}

/* ***** radiobox ***** */
.radiobox {}
.radiobox label {cursor:pointer;}
.radiobox [type='radio'] {cursor:pointer;}
.radiobox .ib {display:inline-block;}

/* radio::type1 */
.radiobox.type1 {}
.radiobox.type1 label {color:#000; padding-right:40px;}
.radiobox.type1 [type='radio'] {width:15px; height:15px; border:3px solid var(--border1); border-radius:50%;}
.radiobox.type1 [type='radio']:checked {border:5px solid var(--pink);}
/* radio::type2 */
.radiobox.type2 {display:flex; flex-wrap:wrap; margin-top:-5px;}
.radiobox.type2 .radio {display:inline-block; margin:10px 10px 0 0;}
.radiobox.type2 label {padding:10px 20px; border:1px solid var(--border1); border-radius:100px; background:#fff;}
.radiobox.type2 label:hover {background:#f1f1f1;}
.radiobox.type2 [type='checkbox'],
.radiobox.type2 [type='radio'] {position:absolute; z-index:-9999999;}
.radiobox.type2 [type='checkbox']:checked,
.radiobox.type2 [type='radio']:checked {background:#000;}
.radiobox.type2 [type='checkbox']:checked+label,
.radiobox.type2 [type='radio']:checked+label {background:var(--green); color:#fff;}
.radiobox.type2 [type='checkbox'][disabled]+label,
.radiobox.type2 [type='radio'][disabled]+label {background-color:#e5e5e5; color:#888; border-color:transparent;}
/* radio::type3 */
.radiobox.type3 [type='checkbox'],
.radiobox.type3 [type='radio'] {position:absolute; opacity:0;}
/* .radiobox.type3 [type='checkbox'], */
/* .radiobox.type3 [type='radio'] {} */
.radiobox.type3 [type='checkbox']+label,
.radiobox.type3 [type='radio']+label {margin-right:15px; line-height:35px;padding:3px 0px; padding-left:25px;  background:url(../images/common/i-check.svg) left 1px no-repeat; cursor:pointer;}
.radiobox.type3 [type='checkbox']:checked+label,
.radiobox.type3 [type='radio']:checked+label {background-image:url(../images/common/i-check-on.svg);}

/* ***** //END radiobox ***** */
form .flexBox {display:flex; gap:10px; flex-wrap:wrap; width:100%;}
form .flexBox .notice {padding-left:0 !important;}
form .flexBox.width input[type="text"],
form .flexBox.width input[type="password"],
form .flexBox.width input[type="number"] {width:400px;}

/* searchBox */
.searchBox.type1 {background:#f5f5f5; padding:20px 40px; border-radius:5px;}
.searchBox.type1 .inputWrap {display:flex; gap:5px;}
.searchBox.type1 .inputWrap label {color:#000; padding-right:10px;}
.searchBox.type1 .inputWrap input {}
.searchBox.type1 .inputWrap a {width:40px; height:40px; background:#333 url(../images/common/i-calender.png) no-repeat center; line-height:40px; border-radius:3px;}
.searchBox.type1 .inputWrap button {padding:0 20px;background:var(--green2); color:#fff; border-radius:3px;}

/* ***** formType ***** */

.join .msg_box {margin-bottom:50px; font-size:16px; padding:30px; border-radius:10px; background:#f9f9f9 url(../images/common/i-notice02.png) no-repeat right 30px center;}
/* form::type1 */
form.type1 {}
form.type1 .msg_box {margin-bottom:50px; font-size:16px; padding:30px; border-radius:10px; background:#f9f9f9 url(../images/common/i-notice02.png) no-repeat right 30px center;}
form.type1 .formWrap {}
form.type1 .formWrap+.formWrap {margin-top:50px;}
form.type1 .formBox {border-top:1px solid #000; line-height:1.5;}
form.type1 .inputWrap {display:flex; border-bottom:1px solid #ddd; width:100%;}
form.type1 .inputWrap>p {position:relative; padding:20px 35px; width:230px; color:#000; background:#f9f9f9; transform:var(--textRotate); font-weight:500;}
form.type1 .inputWrap.essential>p:after {position:absolute; left:20px; top:20px; content:'*'; display:inline-block; font-weight:400; color:#f30000}
form.type1 .inputWrap fieldset {padding:20px; min-height:76px; background:#fff; width:calc(100% - 230px)}
form.type1 .inputWrap fieldset .btnDate {display:inline-block; width:38px; height:36px; margin-left:5px; border-radius:5px; background:#333 url(../images/common/i-calender.png) no-repeat center; vertical-align:middle;}
form.type1 .inputWrap fieldset .btnAddress { display:inline-block; padding:0 15px; height:36px; margin-left:5px; margin-bottom:5px; font-size:14px; color:#fff; line-height:36px; border-radius:5px; background:#333;}
form.type1 .inputWrap .notice {font-size:15px; color:var(--green2); display:inline-block; padding-left:20px; line-height:1.2;}
form.type1 .inputWrap.inputPhon input {width:80px !important;}
form.type1 .inputWrap.inputPhon span {padding:0 5px;}
form.type1 .inputWrap.autoInput .text {display:inline-block; font-size:18px; font-weight:400;}
form.type1 .inputWrap.autoInput .text span {font-size:22px; font-weight:bold; color:#3e9eff; font-style:italic; text-decoration:underline; padding:0 3px;}
form.type1 .inputWrap.autoInput input {display:inline-block; margin-left:20px; width:300px !important}
form.type1 .inputWrap.inputEmail input {width:500px !important}
form.type1 .inputWrap>fieldset #input-address-numb {display:inline-block;}
form.type1 .inputWrap>fieldset #input-address {width:100%; display:block; margin-top:5px;}
form.type1 .inputWrap>fieldset #input-address-detail {width:100%; display:block; margin-top:5px;}

/* form::type2 */
form.type2 {}
form.type2 .formGroup {display:flex;  flex-direction:column; gap:10px;}
form.type2 .inputGroup {padding:14px 30px; display:flex; border:1px solid var(--border1); border-radius:10px;}
form.type2 .inputGroup .label {width:90px; color:var(--green); font-weight:500; transform:var(--textRotate); display:flex; align-items:center;}
form.type2 .inputGroup fieldset {width:calc(100% - 90px);}
form.type2 .inputGroup fieldset [type='text'] {width:150px;}
form.type2 .inputGroup fieldset select {width:150px;}

/* ***** //END form ***** */


/* 달력 */
.mobileCal .mobileCalPopup {display:none;}
.mobileCal .mobileCalPopup {z-index:999999;position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, .5)}
.mobileCal .mobileCalPopup .bg {}
.mobileCal .mobileCalPopup .mobileCalFrame {z-index:9992; position:fixed; text-align:center; max-width:90%;}
.mobileCalInner { padding:50px 30px; color:#000; font-weight:400; border-radius:10px; background:#fff;}
.mobileCalInner select {margin-right:10px; border-radius:5px; border:1px solid #ddd;}
.mobileCalInner select:focus {outline:none;}
.mobileCalInner select+select {margin-left:15px; color:#000}
.mobileCalInner .btn_box {text-align:center; margin-top:30px;}
.mobileCalInner .btn_box ul {display:inline-block;}
.mobileCalInner .btn_box ul:after {clear:both; content:''; display:block;}
.mobileCalInner .btn_box ul li {display:inline-block; float:left; margin:0 5px;}
.mobileCalInner .btn_box ul li a {display:inline-block; font-size:15px; border-radius:3px; padding:5px 20px; background:#333; color:#fff}
.mobileCalInner .btn_box ul li:first-child a {background:var(--darkBlue)}


/* ************************ 태블릿 이하(~1024) ************************ */
@media screen and (max-width:1024px) {
	textarea {min-height:100px;}
	
	/* 파일박스 */
	.filebox .upload-name {width:calc(100% - 135px);}
	.filebox label {}
	
	
	form .flexBox {}
	form .flexBox.width input[type="text"],
	form .flexBox.width input[type="password"],
	form .flexBox.width input[type="number"] {width:100%;}

	/* ***** formType ***** */
	
	/* form::type1 */
	form.type1 {}
	form.type1 .formWrap
	form.type1 .formWrap+.formWrap {margin-top:40px;}
	form.type1 .formBox {}
	form.type1 .inputWrap {display:block;}
	form.type1 .inputWrap>p {width:100%; padding:15px 30px; background:#f1f1f1;}
	form.type1 .inputWrap.essential>p:after {left:20px; top:10px;}
	form.type1 .inputWrap fieldset {padding:20px; width:100%;}
	form.type1 .inputWrap fieldset .btnDate {}
	form.type1 .inputWrap fieldset .btnAddress {}
	form.type1 .inputWrap .notice {width:100%; margin-top:5px; padding-left:0; line-height:1.3;}
	form.type1 .inputWrap fieldset.national {}
	form.type1 .inputWrap fieldset.national>div {display:block;}
	form.type1 .inputWrap.inputPhon input {}
	form.type1 .inputWrap.inputPhon span {}
	form.type1 .inputWrap.autoInput .text {}
	form.type1 .inputWrap.autoInput .text span {}
	form.type1 .inputWrap.autoInput input {}
	
	form.type1 .inputWrap.inputEmail input {width:calc(100% - 88px) !important}
	form.type1 .inputWrap.inputEmail.eng input {width:calc(100% - 180px) !important}
	form.type1 .inputWrap>fieldset #input-address-numb {max-width:136px;}
	form.type1 .inputWrap>fieldset #input-address {}
	form.type1 .inputWrap>fieldset #input-address-detail {}
	
		

	/* form::type2 */
	form.type2 {}
	
	
	/* 달력 */
	.mobileCalInner select {}
	
	
	

}






/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {
	
	select {padding:0 30px 0 10px; background-position:calc(100% - 10px) 50%; background-size:10px;}
	input[type="text"], 
	input[type="password"], 
	input[type=number] {padding:0 10px;}
	
	/* ***** formType ***** */
	form .flexBox {gap:0;}
	/* form::type1 */
	form.type1 {}
	form.type1 .formWrap {}
	form.type1 .formWrap+.formWrap {margin-top:30px;}
	form.type1 .formBox {}
	form.type1 .inputWrap {}
	form.type1 .inputWrap>p {padding:10px 20px; }
	form.type1 .inputWrap.essential>p:after {left:7px; top:7px;}
	form.type1 .inputWrap fieldset {padding:10px 14px;}
	form.type1 .inputWrap fieldset .btnDate {}
	form.type1 .inputWrap fieldset .btnAddress {}
	form.type1 .inputWrap .notice {}
	form.type1 .inputWrap fieldset.national .addInput {}
	form.type1 .inputWrap fieldset.national .addInput .space {height:5px;}
	form.type1 .inputWrap fieldset.national .addInput .ib {display:block;}
	form.type1 .inputWrap fieldset.national .addInput input {}
	form.type1 .inputWrap.inputPhon select {width:73px !important;}
	form.type1 .inputWrap.inputPhon input {width:73px !important;}
	form.type1 .inputWrap.inputPhon span {padding:0;}
	form.type1 .inputWrap.autoInput .text {}
	form.type1 .inputWrap.autoInput .text span {}
	form.type1 .inputWrap.autoInput input {width:100% !important; margin:10px 0 0;}
		

	/* form::type2 */
	form.type2 {}
	
	
	/* searchBox */
	.searchBox.type1 {padding:0; background:transparent; }
	.searchBox.type1 .inputWrap {flex-wrap:wrap;}
	.searchBox.type1 .inputWrap label {}
	.searchBox.type1 .inputWrap input {}
	.searchBox.type1 .inputWrap a {}
	.searchBox.type1 .inputWrap button {line-height:40px;}
	
	
	/* 달력 */
	.mobileCalInner select { margin-right:5px;}
	.mobileCalInner select+select {margin-left:10px;}
	
	
	
	

}