@charset "utf-8";

/************************************************************** 
	input / select /checkbox / radio button 등 form 과 관련된 스타일 정의
	작성일 : 2024.01 / 작성자 : ㈜넥스미디어      
**************************************************************/

/* 
  ie10 이상의 브라우저에서 input type="textbox" 에 포커스가 있을 경우 
  텍스트를 삭제할 수 있는 x 버튼이 자동으로 보이는 현상 숨김처리
*/
input[type=text]::-ms-clear { display: none; }

/********************************************
    SELECT BOX
********************************************/
select {
  border: 1px solid #eeeeee; 
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;
  background: #fff;
  color: var(--default_txt_color);
  padding: 10px 20px;
  background: url('../../images/regist_arrow02.png') no-repeat 95% 50% #fff;
  color: #666666; 
  font-size: 16px;
}
/* .select-wrapper {position: relative; display: inline-block; padding-right: 40px;} */
/* .select-wrapper:before {
  content: "\e874";
  display: inline-block;
  font-family:Linearicons-Free;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 15px;
  top: 5px;
  pointer-events: none;
  z-index: 1;
  font-size: 16px;
  color: #222;
} */

/********************************************
    INPUT BOX
********************************************/
input[type="text"], 
input[type="password"],
input[type="number"]  {  
    border: 1px solid #eeeeee;
    background: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    color: #666666; 
    font-size: 16px;
}
input[type="text"]::placeholder{color: #666666; font-weight: 300;}


/* select::-ms-expand {
    display: none;
}
.select-wrapper.iestyle {padding-right: 0; margin-right: 40px;}
.select-wrapper.iestyle:before { content: '';}
 */





/* @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .select-wrapper.iestyle {padding-right: 40px !important; margin-right: 0;}
  .select-wrapper.iestyle:before { content: "\f0d7" !important;}
} */
.filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}
.filebox label {
    display: inline-block;
    padding: .3em 1.5em;
    color: #222;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fff;
    cursor: pointer;
    border:1px solid #aaaaaa;
    margin-left: 2rem;
    font-size: 1.5rem;
}
.filebox .upload-name {
    display: inline-block;
    padding: .5em .75em;
    font-size: inherit;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #fff;
    border-bottom-color: #aaa;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*
  Radio & Checkbox
*/
input[type=checkbox].checkbox{
  opacity:0;
  position:absolute;
  z-index:12;
  width:20px;
  height:20px;
  cursor:pointer;
  margin:0;
  padding:0;
}
input[type=radio].radio{
  opacity:0;
  position:absolute;
  z-index:12;
  width:20px;
  height:20px;
  cursor:pointer;
  margin:0;
  padding:0;
}
input[type=checkbox].checkbox:checked,
input[type=checkbox].checkbox:focus,
input[type=radio].radio:checked,
input[type=radio].radio:focus {
  outline:none !important;
}
input[type=checkbox].checkbox+.label,
input[type=radio].radio+.label {
  position:relative;
  z-index:11;
  display:inline-block;
  margin:0 2px 0 0;
  font-weight:normal;
  vertical-align: top;
  width: 22px;
  height: 22px;
}
input[type=checkbox].checkbox+.label::before {
  font-family:fontAwesome;
  font-weight:normal;
  font-size:17px;
  color:#fff;  
  background-color:#fff;
  border:1px solid #eeeeee; 
  border-radius:0;
  display:inline-block;
  text-align:center;
  vertical-align:middle;
  height:20px;
  min-width:20px;
  margin-right:1px;
  content: '\f00c';
  line-height: 20px;
}
input[type=radio].radio+.label::before {  
  border:1px solid #acacac; 
  border-radius:0;
  display:flex;
  align-items: center;
  justify-content: center;
  height:20px;
  min-width:20px;
  margin-right:1px; 
  content: '';
}
input[type=checkbox].checkbox:checked+.label:before {
  display:inline-block;
  content:"\f00c";
  border:1px solid #252525; 
  background-color:#fff;
  color: #252525;
}
input[type=radio].radio:checked+.label::after {
  display:inline-block;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #001961;
  margin: auto;
}

input[type=checkbox].checkbox:hover+.label::before,
input[type=checkbox].checkbox+.label:hover::before,
input[type=radio].radio:hover+.label::before,
input[type=radio].radio+.label:hover::before {
 border:1px solid #252525; 
}
input[type=checkbox].checkbox:active+.label::before,
input[type=checkbox].checkbox:checked:active+.label::before,
input[type=radio].radio:active+.label::before,
input[type=radio].radio:checked:active+.label::before {
  box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1);
}
input[type=checkbox].checkbox:disabled+.label::before,
input[type=checkbox].checkbox[disabled]+.label::before,
input[type=checkbox].checkbox.disabled+.label::before,
input[type=radio].radio:disabled+.label::before,
input[type=radio].radio[disabled]+.label::before,
input[type=radio].radio.disabled+.label::before{
  background-color:#f0f0f0 !important;
  border-color:#c9c9c9 !important;
  box-shadow:none !important;
  color:#bbb;
}
input[type=radio].radio+.label::before {
  border-radius:100%;
}

input[type=checkbox].checkbox.switch {
  width:6rem;
  height:3rem;
}
input[type=checkbox].checkbox.switch+.label {
  margin:0 4px;
  min-height:3rem;
}
input[type=checkbox].checkbox.switch+.label::before {
  content:"ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
  float:left;
  overflow:hidden;
  box-sizing:border-box;
  margin-right:0px;
  padding:0px;
  width:6rem;
  height:3rem;
  line-height:28px; 
  background-color:#889fae;
  border:1px solid #6d899c;
  border-radius:2px;
  box-shadow:none;
  color:#fff;
  font-family:Arial, Helvertica, sans-serif;
  font-size:11px;
  font-weight:bold;
  text-align:left;
  text-indent:-3rem;
  transition:all 0.4s ease;
}
input[type=checkbox].checkbox.switch+.label::after {
  content:"??????";
  position:absolute;
  top:0px;
  left:0px;
  box-sizing:border-box;  
  padding:4px 0px 0px;
  width:3rem;
  height:3rem;
  background: #f7f7f7; 
  background: linear-gradient(to bottom,  #f7f7f7 0%,#e5e5e5 100%); 
  border-top:1px solid #e4e4e4;
  border-right:none;
  border-bottom:1px solid #c3c3c3;
  border-left:1px solid #cecece;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  border-top-left-radius:2px;
  border-bottom-left-radius:2px;  
  color:#5b6a73;
  font-family:Arial, Helvertica, sans-serif;
  font-size:1rem;
  font-weight:lighter;
  line-height:18px;
  text-align:center;
  text-shadow:-1px 0 0 rgba(0,0,0,0.2);
  transition:all 0.4s ease;
}
input[type=checkbox].checkbox.switch:checked+.label::before {
  text-indent:0.5rem;
  background-color:#5791d7;
  border-color:#4b79ad;
}
input[type=checkbox].checkbox.switch:checked+.label::after {
  left:32px;
  border-right:1px solid #cecece;
  border-left:none;
  border-top-right-radius:2px;
  border-bottom-right-radius:2px;
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
}
input.checkbox.readonly[type="checkbox"] + .label:before,
input.radio.readonly[type="radio"] + .label:before {
  background:#e1e1e1;
}


/* 
  input placeholder
*/
input::placeholder {
  color: #c2c2c6;
  font-family: 'Noto Sans KR';
  font-weight: 100; 
}