/*----------------------------------
    custome select 
----------------------------------*/

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family:'Noto Sans KR', Arial, sans-serif;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: #fff;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 13px;
  right: 15px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: #97a2b0 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active { background: #f7fbfc;}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #4e9fac transparent;
  top: 8px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  font-size: 12px;
  color: #575d69;
  padding: 7px 16px;
  border: 0;
  cursor: pointer;
}
/*border radius*/
.select-selected { border-radius: 20px; border: 0; height: 30px;}
.select-items div { border: none; padding-top: 2px; padding-bottom: 2px;}
/*style items (options):*/
.select-items {
  position: absolute;
 /* background-color: DodgerBlue;*/
  top: 32px;
  left: 0;
  right: 0;
  z-index: 1520;
    border-radius: 10px;
    border: 0px solid #ccc;
    background: #fff;
    -webkit-box-shadow: 0 0 5px rgba(154,193,193,0.5);
            box-shadow: 0 0 5px rgba(154,193,193,0.5);
     color: #5d5d5d;
}
.select-items div:first-child { border-radius: 10px 10px 0 0;}
.select-items div:last-child { border-radius: 0 0 10px 10px;}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .select-items div.same-as-selected {
  background-color: #ecf5f7;
    color: #4e9fac;
    font-weight: 500;
}


/*----------------------------------
    custome check/radio 
----------------------------------*/
.check-wrap { margin-bottom: 20px;}
/*custome checkbox*/
.checkbox-group { display: block; position: relative; /*margin-bottom: 12px;*/ cursor: pointer; font-size: 13px; font-weight: normal; text-align: left; padding-left: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #545454; text-align: left;}
/* Hide the browser's default checkbox */
.checkbox-group input { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; z-index: 1039; width: 100%;}
/* Create a custom checkbox */
.checkmark { position: absolute; top: 1px; left: 0; height: 14px; width: 14px; background: #fff; border: 1px solid #ccc; border-radius: 0; z-index: 1038;}
/* When the checkbox is checked, add a blue background */
.checkbox-group input:checked ~ .checkmark { background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 0;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after { content: ""; position: absolute; display: none; z-index: 1500;}
/* Show the checkmark when checked */
.checkbox-group input:checked ~ .checkmark::after { display: block;}
/* Style the checkmark/indicator */
.checkbox-group .checkmark::after { left: 3px; top: 0px; width: 6px; height: 9px; border: solid #6d89a3; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}


/*custome radio*/
/* Customize the label (the radio-group) */
.radio-group { display: inline-block; float: left; position: relative; margin-right: 16px; padding-left: 19px; cursor: pointer; font-size: 12px; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* Hide the browser's default radio button */
.radio-group input { position: absolute; opacity: 0;}

/* Create a custom radio button */
.radio-group .checkmark { position: absolute; top: 0; left: 0; height: 15px; width: 15px; background-color: #dbe2ea; border-radius: 50%;}

/* On mouse-over, add a grey background color */
.radio-group:hover input ~ .checkmark { background-color: #dbe2ea;}

/* When the radio button is checked, add a blue background */
.radio-group input:checked ~ .checkmark { background-color: #6bacb7;}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-group .checkmark:after { content: ""; position: absolute; display: none;}

/* Show the indicator (dot/circle) when checked */
.radio-group input:checked ~ .checkmark:after { display: block;}

/* Style the indicator (dot/circle) */
.radio-group .checkmark:after { top: 5px; left: 5px; width: 5px; height: 5px; border-radius: 50%; background-color: white;}