@charset "utf-8";
@import url("../xboard/skin/default_/style.css");

#list_search { text-align:left; background:#f9f9f9; padding:19px 20px;}
#list_search::after { content:""; display:block; clear:both; }
#list_search .search_flexbox { display:flex; justify-content:center; flex-wrap:wrap; }
#list_search .sgroup1 {  background:#f9f9f9;  margin-right:20px; width:calc(100% - 400px); display:flex; box-sizing:border-box; flex-wrap:wrap; }
#list_search .sgroup1::after { content:""; display:block; clear:both; }
#list_search .ls_line { margin:5px 0px;  box-sizing:border-box; }
#list_search .ls_line1 { width:40%; }
#list_search .ls_line2 { width:60%; }
#list_search .ls_line3 { clear:both; width:40%;}
#list_search .ls_line4 { width:60%; }
#list_search .ls_line::after { content:""; display:block; clear:both; }
#list_search .ls_line p { float:left; font-size:16px; padding:0 15px 0 25px; color:#333; font-weight:500; background:url(../data_files/skin/skin_res_1/images/sub/h5_dot.png) left 14px no-repeat; line-height:37px;}
#list_search .ls_line div { float:left; }
#list_search .ls_line5 { align-self:center; width: 350px;
    height: 50px;
    display: block;
    border-radius: 150px;
    overflow: hidden;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.12);
    z-index: 1;
    position: relative; }
#list_search .ls_line5::after { content:""; display:block; clear:both; }
#list_search .ls_line5 div { float:none; }
#list_search .ls_line5 input:focus { outline:none; }
#list_search .ls_line5 .input2 { float:left; display:block; width:calc(100% - 50px); height:50px; line-height:50px; border:0 none; padding:0 50px 0 30px; box-sizing:border-box; background:#fff url(../data_files/skin/skin_res_1/images/main/k_arrow.png) right 30px center no-repeat; font-size:16px; color:#333; position:relative;}
#list_search .ls_line5 .list_search_btn2 { float:right; display:block; width:50px; height:50px; border:0 none; cursor:pointer; text-indent:-99999px; background:#333 url(../data_files/skin/skin_res_1/images/main/k_search.png) center center no-repeat;}





label.ra_style {  position:relative; display:inline-block; line-height:35px; vertical-align:top; cursor:pointer; margin-right:6px; }
label.ra_style input[type=radio] { opacity:0; margin-right:5px; width:20px; }
label.ra_style span {-webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position:absolute; left:0; top:8px; width:20px; height:20px;  transition: all 0.15s ease-out 0s;
  box-sizing:border-box;
  border:1px solid #dce0e5;
  box-sizing:border-box;
  background: #fff;
  color: #fff;
  overflow:hidden;
  cursor: pointer;
  display: inline-block;
  outline: none;
  border-radius:50%;
  
  z-index: 1; }

label.ra_style input[type=radio]:checked + span { border:6px solid #169fff; }

label.ck_style { position:relative; display:inline-block; line-height:37px; vertical-align:top; cursor:pointer; font-size:14px; margin:0 15px 0 0; }
label.ck_style input[type=checkbox] { opacity:0; margin-right:10px; }
label.ck_style span { -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position:absolute; left:0px; top:8px; width:21px; height:21px;  transition: all 0.15s ease-out 0s;
  background:#eff6ff;
  border:1px solid #BBC1E1;
  box-sizing:border-box;
  background: #fff;
  color: #fff;
  overflow:hidden;
  cursor: pointer;
  display: inline-block;
  outline: none;
  z-index: 5; border-radius:5px; }

label.ck_style input[type=checkbox]:checked + span { background:#275EFE; border:1px solid #275EFE; }

label.ck_style input[type=checkbox] + span::before { content:""; display:block; width:0px; height:0px; border:2px solid transparent; border-right:2px solid #fff; border-bottom:2px solid #fff; position:absolute; left:5px; top:1px; transform:rotate(45deg); opacity:0; transition:all 0.4s; }
label.ck_style input[type=checkbox]:checked + span::before { opacity:1; width:4px; height:8px;}

/*자원봉사참여*/
.vol_table { width:100%; border-collapse:collapse; border-bottom:1px solid #ddd; border-top:2px solid #333; margin:20px 0 0; }
.vol_table th { font-size: 16px;
    text-align: center;
    padding: 12px 5px;
    font-weight: 500;
    color: #333;
    position: relative;
    vertical-align: middle; background: #fff;
    border-bottom: 1px solid #ddd; }
.vol_table tbody tr:hover td { background:#f9f9f9; }
.vol_table tbody tr td { border-bottom:1px solid #ddd; font-size:15px; padding:7px 5px; }
.vol_table tbody tr td.vl_num_line { text-align:center; font-weight:500; color:#333; border-right:1px solid #ddd; font-size:16px; }
.vol_table tbody tr td.vl_num_line span.vl_num { display:block; width:85px; height:30px; line-height:30px; border-radius:150px; margin:5px auto 0; background:#e2ecff; }
.vol_table tbody tr td.name { padding:15px 20px 15px; }
.vol_table tbody tr td.name:hover {  }
.vol_table tbody tr td.name a { }
.vol_table tbody tr td.name p { font-weight:500; color:#333; font-size:16px; word-break:keep-all; padding:0px 0 12px; border-bottom:1px dashed #ddd; margin-bottom:7px; }
.vol_table tbody tr td.name dl { line-height:30px; }
.vol_table tbody tr td.name dl::after { content:""; display:block; clear:both; }
.vol_table tbody tr td.name dl dt { float:left; position:relative; padding:0 0 0 15px; font-weight:500; color:#333;}

.vol_table tbody tr td.name dl dt::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 12px;
    background: #0099ff;
}

.vol_table tbody tr td.name dl dd { float:right; width:calc(100% - 90px); }


@media all and (max-width:1024px) {

.vol_table tbody tr td.name p { word-break:break-all; }
#list_search .sgroup1 {  background:#f9f9f9;  margin:0 0 15px 0; width:100%; display:flex; box-sizing:border-box; flex-wrap:wrap; }
#list_search .sgroup1::after { content:""; display:block; clear:both; }
#list_search .ls_line { margin:5px 0px;  box-sizing:border-box; }
#list_search .ls_line div { max-width:100%; box-sizing:border-box; }
#list_search .ls_line4 div .input1 { width:45%; }
#list_search .xb_select { width:auto; box-sizing:border-box; max-width:100%; }
#list_search .ls_line1 { width:100%; }
#list_search .ls_line2 { width:100%; }
#list_search .ls_line3 { clear:both; width:100%;}
#list_search .ls_line4 { width:100%; }
#list_search .ls_line::after { content:""; display:block; clear:both; }
#list_search .ls_line p { float:left; }
#list_search .ls_line5 { align-self:center; width: 100%;
     }

}