/* 
input height size
xs 28 / sm 36 / md 40 / lg 48
*/
/* width */
.w_xs { width: 56px !important; }
.w_sm { width: 90px !important;  }
.w_md { width: 120px !important; }
.w_lg { width: 240px !important; }
.w_xl { width: 600px !important;}
.w_2xl { width: 800px !important;}

/* margin */
.form-mgl { margin-left: 8px !important;}
.form-mgr { margin-right: 8px !important;}

/* etc */
.form-slash { position: relative; padding-left: 12px !important;}
.form-slash::before { content: ' '; position: absolute; left: 0; top: 50%; transform: translateY(-50%);  width: 1px; height:14px; background-color: var(--gray-400);}

/* wrap */
.form-wrap-inner { display: inline-block;}
.form-wrap-inner > li { display: inline-block;}
.form-wrap-inner > li.d_b
.form-wrap-inner > li + li { margin-left: 8px;}

.form-wrap-inner.thin > li + li { margin-left: 0;}
.form-wrap-inner.d_b > li + li  { display: block; margin-left:0; margin-top: 4px;}
.form-wrap-inner.inner_fixed li { width: 200px; }
/* 
.form-wrap-inner.flex-inner { display: flex;}
.form-wrap-inner > li { display: auto; flex-grow: 1;} 
*/
.form-wrap-inner.sub span { color: var(--gray-700); font-size: 1.4rem;}
.form-wrap-inner.sub .label_right { margin-left: 0;}

input:read-only:hover { border-color: var(--gray-300) !important; }
input:read-only:focus { outline: none;}

textarea,
select,
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=url],
input[type=number],
input[type=date]{  
    box-sizing: border-box;
    padding: 0 8px; color: var(--gray-900);
    border: 1px solid var(--gray-300); 
    font-weight: 400; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
    transition: border .3s;
}
textarea:hover,
select:hover,
input[type=tel]:hover,
input[type=time]:hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=date]:hover {  
     border-color: var(--gray-600); 
}
select { padding: 0 16px 0 8px; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { 
    -webkit-appearance: none; margin: 0; 
}
button,select, textarea, 
input[type="text"], 
input[type="password"], 
input[type="search"],
input[type="number"], 
input[type="date"], 
input[type="datetime"],
input[type="email"], 
input[type="tel"],
input[type="submit"]{ 
    -webkit-border-radius:0; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none;	 
}

textarea::placeholder,
input::-webkit-input-placeholder{ color: var(--gray-500); }

textarea:focus,
select:focus,
input:focus { outline-color: var(--primary-500);}


/* label  */
.label_top { display: block; margin-bottom: 4px;}
.label_right { margin-left: 4px; }
.label_left { margin-right: 4px; }


/* input style */
input[type=tel], 
input[type=time], 
input[type=text], 
input[type=password],
input[type=search], 
input[type=email], 
input[type=file], 
input[type=url], 
input[type=number], 
input[type=date], 
select,
.filebox > input {
    height: 32px; border-radius: 5px !important;
}
input[disabled] { background-color:var(--gray-100); }
input[disabled]:hover { border-color: var(--gray-200); cursor: not-allowed; }
html input[type=button] { border-radius: 5px !important;}

/* select */
select{	min-width:100px; background-image: url(/images/icon/icon_select_arrow_line.svg); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px auto !important;}
select::-ms-expand { display: none; }


/* text , select  clear (ie 10~)*/
input::-ms-clear,
input::-ms-reveal{ display:none;}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{ display:none; }

/* radio,checkbox,switch */
.el_radio,
.el_checkbox,
.el_checkbox_all{ position: relative; font-size: inherit; display: inline-block;}

.el_radio + .el_radio { margin-left: 12px;}
.el_checkbox + .el_checkbox { margin-left: 12px;}

.el_radio > input[type="radio"],
.el_checkbox > input[type="checkbox"],
.el_checkbox_all > input[type="checkbox"] { display: none;}

.el_radio > input[type="radio"] + label,
.el_checkbox > input[type="checkbox"] + label,
.el_checkbox_all > input[type="checkbox"] + label { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; cursor: pointer; transform: translateY(-1px); }

.el_radio > input[type="radio"] + label:hover:before,
.el_checkbox > input[type="checkbox"] + label:hover:before,
.el_checkbox_all > input[type="checkbox"] + label:hover:before { border-color: var(--primary-500); }

.el_radio > input[type="radio"] + label:before,
.el_checkbox > input[type="checkbox"] +label:before,
.el_checkbox_all > input[type="checkbox"] +label:before { content: ' '; position: absolute; top: 0; left: 0; display: inline-block; width: 15px; height: 15px; border: 1px solid var(--gray-600); }

.el_radio > input[type="radio"] + label:after,
.el_checkbox > input[type="checkbox"] +label:after { content: ' '; position: absolute; display: none; }
.el_checkbox_all > input[type="checkbox"] +label:after { content: ' '; position: absolute;}

.el_radio > input[type="radio"]:checked + label:after,
.el_checkbox > input[type="checkbox"]:checked +label:after { display: block; }

/* radio */
.el_radio > input[type="radio"] + label:before{ border-radius: 50%; }
.el_radio > input[type="radio"] + label:after { top: 3px; left: 3px; width: 9px; height: 9px;border-radius: 50%; background-color: var(--primary-500); }
.el_radio > input[type="radio"][disabled]  + label:before{ background-color: var(--gray-100); border-color:  var(--gray-400); }
.el_radio > input[type="radio"]:checked + label:before { border: 1px solid var(--primary-500); }
.el_radio > input[type="radio"]:checked[disabled] + label:before { border: 1px solid var(--primary-200); }
.el_radio > input[type="radio"]:checked[disabled] + label:after { background-color: var(--primary-200); }

/* checkbox */
.el_checkbox > input[type="checkbox"] + label:before { border-radius: 3px; }
.el_checkbox > input[type="checkbox"] + label:after { top: 1px; left: 5px;width: 5px; height: 10px; transform: rotate(0deg); transition: all .3s; border-width: 0 2px 2px 0; border-style: solid; border-color: #fff; }
.el_checkbox > input[type="checkbox"]:checked + label:before { border-color: var(--primary-500); background-color: var(--primary-500); }
.el_checkbox > input[type="checkbox"]:checked + label:after { transform: rotate(45deg);}
.el_checkbox > input[type="checkbox"]:checked[disabled] + label:before { border-color: var(--primary-200); background-color: var(--primary-200);}

/* #allCheck */
.el_checkbox_all { margin-left: 16px; }
.el_checkbox_all > input[type="checkbox"] + label:before { border: transparent; }
.el_checkbox_all > input[type="checkbox"] + label:after { top: -1px; left: 3px; width: 8px; height: 13px; transform: rotate(0deg); transition: all .3s; border-width: 0 2px 2px 0; border-style: solid; border-color: var(--gray-400); transform: rotate(45deg); }
.el_checkbox_all > input[type="checkbox"]+ label:hover:after,
.el_checkbox_all > input[type="checkbox"]:checked + label:after { border-color: var(--primary-500);}

/* disabled */
.el_radio > input[type="radio"][disabled] + label,
.el_checkbox > input[type="checkbox"][disabled] + label { cursor: not-allowed; color: var(--primary-200); }
.el_radio > input[type="radio"][disabled] + label:hover,
.el_radio > input[type="radio"][disabled] + label:before,
.el_radio > input[type="radio"][disabled] + label:after,
.el_checkbox > input[type="checkbox"][disabled] + label:hover,
.el_checkbox > input[type="checkbox"][disabled] + label:before,
.el_checkbox > input[type="checkbox"][disabled] + label:after { cursor: not-allowed; }
.el_radio > input[type="radio"][disabled] + label:hover:before,
.el_checkbox > input[type="checkbox"][disabled] + label:hover:before { border: 1px solid var(--gray-400); }


/* colorchip */
.el_colorchip { padding: 3px 0 7px; box-sizing: content-box; }
.el_colorchip label + label { margin-left: 4px;}
.el_colorchip input[type='radio'],
.el_colorchip input[type='checkbox'] { position: relative; width: 20px; height: 20px; appearance: none; }
.el_colorchip input[type='radio']:checked ,
.el_colorchip input[type='checkbox']:checked { appearance: none;}
.el_colorchip input[type='radio']::before,
.el_colorchip input[type='checkbox']::before { content: ' '; display: inline-block; width: 20px; height: 20px; background-color: #fff; border: 1px solid var(--gray-400); }
.el_colorchip input[type='radio']:checked::after,
.el_colorchip input[type='checkbox']:checked::after { content: ' '; position: absolute; top: 3px; left: 7px; width: 6px; height: 10px; transform: rotate(45deg); transition: all .3s; border-width: 0 2px 2px 0; border-style: solid; border-color: #fff;}
.el_colorchip .light input[type='radio']:checked::after,
.el_colorchip .light input[type='checkbox']:checked::after { border-color: #000;}

.el_colorchip .red input[type='radio']::before,
.el_colorchip .red input[type='checkbox']::before { background-color: red;  }
.el_colorchip .orange input[type='radio']::before,
.el_colorchip .orange input[type='checkbox']::before { background-color: orange;  }
.el_colorchip .yellow input[type='radio']::before,
.el_colorchip .yellow input[type='checkbox']::before { background-color: yellow;  }
.el_colorchip .green input[type='radio']::before,
.el_colorchip .green input[type='checkbox']::before { background-color: yellowgreen;  }
.el_colorchip .blue input[type='radio']::before,
.el_colorchip .blue input[type='checkbox']::before { background-color: dodgerblue;  }
.el_colorchip .indigo input[type='radio']::before,
.el_colorchip .indigo input[type='checkbox']::before { background-color: darkblue;  }
.el_colorchip .purple input[type='radio']::before,
.el_colorchip .purple input[type='checkbox']::before { background-color: purple;  }
.el_colorchip .pink input[type='radio']::before,
.el_colorchip .pink input[type='checkbox']::before { background-color: deeppink;  }
.el_colorchip .brown input[type='radio']::before,
.el_colorchip .brown input[type='checkbox']::before { background-color: darkgoldenrod }
.el_colorchip .beige input[type='radio']::before,
.el_colorchip .beige input[type='checkbox']::before { background-color: lightgoldenrodyellow; }
.el_colorchip .white input[type='radio']::before,
.el_colorchip .white input[type='checkbox']::before { background-color: white;  }
.el_colorchip .gray input[type='radio']::before,
.el_colorchip .gray input[type='checkbox']::before { background-color: lightgray;  }
.el_colorchip .black input[type='radio']::before,
.el_colorchip .black input[type='checkbox']::before { background-color: black;  }

/* switch */
.el_switch,
.el_switch > span,
.el_switch > span:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.el_switch_label { vertical-align: top; }
.el_switch { display: inline-block; font-size: inherit; height: 2.4rem; position: relative; }
.el_switch > span { 
    position: relative; top: 0;left: 0;display: inline-block;
    width: 4.4rem; height: 2.4rem; 
    background-color: var(--gray-400);
    -webkit-border-radius: 0.8em; border-radius: 0.8em;
-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;  cursor: pointer;
}
.el_switch > span:before{
    content:' '; display: block; position: absolute; left: .2rem; top: .2rem;
    width: 2rem; height: 2rem;
    background-color: #fff; -webkit-border-radius: 50%; border-radius: 50%;
    -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.el_switch > input[type="checkbox"]{ display:none; }
.el_switch > input[type="checkbox"][disabled] + span{ cursor: not-allowed; background-color: var(--gray-200); }
.el_switch > input[type="checkbox"]:checked + span{ background-color: var(--primary-500); }
.el_switch > input[type="checkbox"]:checked + span:before{ left:50%; }
.el_switch > input[type="checkbox"]:checked[disabled] + span{ background-color: var(--gray-200); }

/* date */
.el_date { position: relative; display: inline-block; }
.el_date > input { cursor: default; width: 120px;}
.el_date > i.icon { position: absolute; top: 50%; right: 0; transform: translate(-12px,-50%); display: inline-block; width: 16px; height: 16px; background-image: url(/images/icon/icon_date.png); pointer-events: none;}

/* textarea */
.el_textarea > textarea { max-width: 600px; height: 32px; min-height: 32px; padding: 4px 8px; border-radius: 5px; resize: none;}
.el_textarea .is_resize { resize: vertical;}
.el_textarea .text-limit { display: inline-block; margin-left: 4px; color: var(--gray-500); font-size: 1.2rem;}
.el_textarea .text-limit .text-count { color: var(--primary-500);}
.el_textarea .text-limit .text-count.waring{ color: var(--sub-red-500);}


/* file */
.filebox > input { min-width: 380px; max-width: 800px; display: inline-block; border: 1px solid transparent; padding: 0 8px;  -webkit-border-radius:0; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: top; }
.filebox > input:focus { outline: none; }
.filebox > input:hover{ border-color: transparent !important;}
.filebox label { display: inline-block; height: 32px; line-height: 32px; padding: 0 16px;  color: #fff; background-color: var(--sub-bluegray-500); border:none;  border-radius: 4px; cursor: pointer; transition: background-color .3s; }
.filebox label:hover { background-color: var(--sub-bluegray-600); }
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }

/* image */
.imagebox { margin: 4px 0;}
.imagebox > .imagelist { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;}
.imagebox > .imagelist > li { overflow: hidden; position: relative; width: 150px; height: 150px; border: 2px solid var(--gray-300); border-radius: 5px;}
.imagebox > .imagelist > li > img { width: 100%; }
.imagebox > .imagelist > li > .imagebox-delete { opacity: 0; position: absolute; left: 50%; top: 50%; width: 60px; padding: 0 4px; transform: translate(-50%,-50%); transition: all .3s;}
.imagebox > .imagelist > li:hover { border-color: var(--sub-red-500);}
.imagebox > .imagelist > li:hover > .imagebox-delete { opacity: 1; }

/* image */
.bigImagebox { margin: 4px 0;}
.bigImagebox > .imagelist { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;}
.bigImagebox > .imagelist > li { overflow: hidden; position: relative; width: 280px; height: 350px; border: 2px solid var(--gray-300); border-radius: 5px;}
.bigImagebox > .imagelist > li > img { width: 100%; }
.bigImagebox > .imagelist > li > .imagebox-delete { opacity: 0; position: absolute; left: 50%; top: 50%; width: 60px; padding: 0 4px; transform: translate(-50%,-50%); transition: all .3s;}
.bigImagebox > .imagelist > li:hover { border-color: var(--sub-red-500);}
.bigImagebox > .imagelist > li:hover > .imagebox-delete { opacity: 1; }