/* ******************** check style ******************** */


.check-input-box {
  display:inline-block;
}

.check-box-wrap {
  margin-bottom:10px;
}

//
// [ 센터별 ]
// smt 장비 : .check-smt
// 재직자교육 : .check-cec
// 현장실습 : .check-intern
// 회의실 예약 : .check-kpubic
// 산학연 행사 : .check-sanhak



input[type="checkbox"].check-box {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;
  & + label {
    display: inline-block; position: relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none; margin-right:30px; font-size:1.4rem; letter-spacing:-0.05em; color:#555; line-height:18px;
    &:before {
      content: ' '; display: inline-block; width: 18px; height: 18px; line-height: 18px; margin: -2px 7px 0 0; text-align: center; vertical-align: middle; border: 1px solid #aaa; border-radius: 3px; background:url("../../img/common/check.svg")no-repeat center; background-size:13px 10px; background-color:#fff;
    }
  }
  &:checked {
    & + label {
      &:before {
        content: ' '; color: #333; background-color:#000; border-color:#000;
      }
    }
  }
  &.check-smt {
    & + label {
      &:before {background-color:#fff; border-color: var(--pink-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--pink-color); border-color:var(--pink-color);
        }
      }
    }
  }
  &.check-cec {
    & + label {
      &:before {background-color:#fff; border-color: var(--blue-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--blue-color); border-color:var(--blue-color);
        }
      }      
    }
  }
  &.check-intern {
    & + label {
      &:before {background-color:#fff; border-color: var(--sky-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--sky-color); border-color:var(--sky-color);
        }
      }
    }
  }
  &.check-kpubic {
    & + label {
      &:before {background-color:#fff; border-color: var(--purple-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--purple-color); border-color:var(--purple-color);
        }
      }
    }
  }
  &.check-sanhak {
    & + label {
      &:before {background-color:#fff; border-color: var(--orange-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--orange-color); border-color:var(--orange-color);
        }
      }
    }
  }
  &.check-amic {
    & + label {
      &:before {background-color:#fff; border-color: var(--green-color);}
    }
    &:checked {
      & + label {
        &:before {
          background-color:var(--green-color); border-color:var(--green-color);
        }
      }
    }
  }
}


/* ******************** radio style ******************** */

.check-input {
  position: relative;
  &.inline {
    display:inline-block;
  }
  input[type="radio"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;
    & + label {
      display: inline-block; position: relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none; margin-right:15px; font-size:1.3rem; letter-spacing:-0.05em; color:#555; line-height:12px;
    }
    & + label:before {
      content: ''; display: inline-block; width: 14px; height: 14px; line-height: 14px; margin: -4px 7px 0 0; text-align: center; vertical-align: middle; border: 1px solid #cacece; border-radius: 30px; background-image:url("../../img/common/radio.svg"); background-size: 6px 6px; background-position:center; background-repeat:no-repeat; background-color:#cbd0d8;
    }
    &:checked {
      & + label:before {
        content: ' '; color: #333; background-color:var(--main-color); border-color:var(--main-color);
      }
    }
    &:disabled {
      & + label {
        color:#bbb; cursor:no-drop;
      }
    }
  }
}

/* 테이블-form */

.form-wrap {
  .check-input {  
    input[type="radio"] {    
      & + label:before {
        background-image:url("../../../img/common/radio.svg");margin: 0px 7px 0 0; 
      }    
    }
  }
  input[type="checkbox"].check-box {  
    & + label {  
      font-size:1.3rem; line-height:26px;
      &:before {
        background:url("../../img/common/check.svg")no-repeat center; width: 13px; height: 13px;background-size: 8px 8px; margin-right: 4px;
      }
    }
  }
}  

.normal-check-list {
  ul {
    padding-top: 5px;
    &:first-child {
      padding-top: 0;
    }
    li {
      float: left; width: 20%;
    }
  }
  &.and ul li {
    width: 23%; margin-top: 2px;
    label.mg-right-8 { 
      margin-right: 8px;
    }
  }
}

@media (max-width: 1200px) {
  .normal-check-list.and ul li {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .normal-check-list.and ul li {
    width: 100%;
  }
}