css 체크박스꾸미기 , 체크박스 커스텀

<div class="policy-check">
          <div class="chbox">
            <input type="checkbox" id="chbx_policy" />
            <label for="chbx_policy">개인정보동의서</label>
          </div>
          <div class="cont">
            텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역텍스트영역역
          </div>
        </div>
        <!-- //개인정보동의서 -->

 

.policy-check {
    margin-top: 20px;
    .chbox {
      position: relative;

      input[id="chbx_policy"] {
        display: none;
      }
      input[id="chbx_policy"] + label {
        cursor: pointer;
        height: 150px;
      }
      input[id="chbx_policy"] + label::before {
        position: absolute;
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        right: 0px;
        top: 4px;
        border: 1px solid #999999;
      }
      input[id="chbx_policy"]:checked + label::before {
        background-color: $purple;
        width: 16px;
        height: 16px;
      }
    }
    .cont {
      margin-top: 8px;
      background-color: $thinsky;
      padding: 8px;
      @extend %ftColorgray;
      height: 200px;
      overflow: auto;
    }
  }