@charset "UTF-8";

.radio_list_area {}
.radio_list_area .list {font-size: 0;}
.radio_list_area .list.tr {text-align: right;}
.radio_list_area .list li {display: inline-block; margin: 0 15px 0 0; vertical-align: middle;}
.radio_list_area .list li:last-child {margin: 0;}

/* radio style 1 */
.radio_area {font-size: 0;}
.radio_area label {display: block; cursor: pointer;}
.radio_area label .radio_inp {display: inline-block; position: relative; width: 14px; height: 14px; margin: 0 10px 0 0; border: 1px solid #cdcdcd; padding: 0; background-color: #ffffff; border-radius: 50%; vertical-align: middle; cursor: pointer;}
.radio_area label .radio_inp:checked {border: 1px solid #316aa5; background-color: inherit;}
.radio_area label .radio_inp:before {display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: #ffffff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; transition: 0.3s ease-in-out;}
.radio_area label .radio_inp:checked:before {width: 8px; height: 8px; background-color: #316aa5;}
.radio_area label .text  {display: inline-block; font-weight: 400; font-size: 16px; line-height: 28px; color: #000000; vertical-align: middle;}
/*.radio_area label .radio_inp:checked + .text {color: #ff0000;}*/


/* chk style 1 */
.chk_area {font-size: 0;}
.chk_area label {display: block;}
.chk_area label .inp_chk {display: inline-block; position: relative; width: 18px; height: 18px; margin: 0 10px 0 0; border: 2px solid #c4c4c4; padding: 0; background-color: #ffffff; cursor: pointer; vertical-align: middle; transition: 0.3s ease-in-out;}
.chk_area label .inp_chk:checked {border: 2px solid #ff0000; background-color: #ff0000;}
.chk_area label .inp_chk:before {display: none; content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 9px; background-image: url('../../../../images/home/kor/user/board/chk.png'); background-size: 12px 9px; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: 0.3s ease-in-out;}
.chk_area label .inp_chk:checked:before {display: block; width: 12px;}
.chk_area label .text {display: inline-block; font-weight: 400; font-size: 16px; line-height: 28px; color: #000000; vertical-align: middle;}

/* chk style 2 */
.chk_area2 {display: inline-block; vertical-align: top;}
.chk_area2 label {position: relative; z-index: 1; padding-left: 20px; cursor:pointer; vertical-align: top;}
.chk_area2 .vchkbox {display: block; position: absolute; left: 0; top: 50%; z-index: 1; width: 16px; height: 16px; border: 1px solid #cacaca; background-color: #fff; font-size: 12px; text-align: center; transform: translateY(-50%);}
.chk_area2 .vchkbox > i {display: none; color: #2295fe; margin-top: 1px; margin-left: 1px; vertical-align: top; font-weight: 700;}
.chk_area2 input:checked + label .vchkbox {border-color: #2295fe;}
.chk_area2 input:checked + label .vchkbox > i {display: block;}
.chk_area2 input:focus + label .vchkbox {outline:1px dotted #000; outline:-webkit-focus-ring-color auto 5px;}


@keyframes chk_inp {
  0% {
    top: 0; height: 2px;
  }

  10% {
    top: 50%;
  }

  75% {
    top: 50%; width: 40%; background-color: #ff0000; transform: rotate(45deg);
  }

  100% {
    top: 50%; width: 40%; background-color: #ff0000; transform: rotate(45deg);
  }

}

@keyframes chk_inp2 {
  0% {
    bottom: 0; height: 2px;
  }

  10% {
    bottom: 50%;
  }

  75% {
    bottom: 50%; width: 70%; background-color: #ff0000; transform: rotate(-45deg);
  }

  100% {
    bottom: 50%; left: 4px; width: 70%; background-color: #ff0000; transform: rotate(-45deg);
  }

}