@charset "utf-8";

.community_container{
  padding:40px 40px 60px 40px;
  display: flex;
  flex-direction: column;
  gap:40px;
}

.community_container .community_title_top{
  border-bottom: 1px solid var(--Gray-10,#F0F1F4);
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap:12px;
}

.community_container .community_title_top.no_border{
  border-bottom: none;
}

.community_container .community_title_top .community_menu{
  color:var(--Gray-60,#676D79);
}

.community_container .community_title_top .community_title{
  display :flex;
  gap:12px;
  align-items: center;
  color:var(--Gray-90,#303236);
  flex-wrap: wrap;
}

.community_container .community_title_top .community_title > .before_badge{
  color:var(--Gray-50,#858B97);
}

.community_container .community_title_top .community_info_wrap{
  display: flex;
  gap:16px;
  align-items : center;
  color:var(--Gray-60,#676D79);
  flex-wrap : wrap;
}

.community_container .community_title_top .community_info_wrap .community_reg_user{
  display: flex;
  gap:6px;
  align-items: center;
}

.community_container .community_title_top .community_info_wrap .community_reg_user .avatar{
  width:23px;
  height:23px;
}

.community_container .community_title_top .community_info_wrap .view_cnt{
  background-image: url(/ilos/images/icon/view_gray_60.png);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-left: 22px;
}

.community_container .community_body .attach_container{
  margin-top:80px;
}
  
.community_answer_container {
  display: flex;
  padding: 28px 60px 60px 60px;
  flex-direction: column;
  gap: 20px;
  background-color: var(--Gray-10, #F0F1F4);
}

.community_answer_container .community_answer_wrap{
  background-color: var(--Gray-0);
  padding: 32px;
  border-radius: var(--Corner-radius-10, 10px);  
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
}

.search_option_wrap{
  display: none;
  flex-wrap:wrap;
  padding: 20px 28px;
  gap:20px;
  border-radius: var(--Corner-radius-10, 10px);
  background-color: var(--Gray-0, #FFF);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); 
  margin-bottom: 20px; 
  justify-content: flex-start;
  align-items: center;
}

.search_option_wrap.show{
  display: flex;
}

.search_option_wrap .search_btn_box{
  display: flex;
  flex-wrap : wrap;
  gap:8px;
}

.search_option_wrap .search_middle_line{
  height: 24px;
  width:1px;
  background-color: var(--Gray-20 ,#E1E4E9);
}

.community_list_box{
  display: flex;
  flex-direction: column;
  gap:12px;
}

.community_qna_top{
  color:var(--Gray-60 ,#676D79);
}

.board_list_container .board_list_wrap.community_qna{
  gap:10px;
}

.board_list_container .board_list_wrap.community_qna .board_list_bottom .unsolve{
  color:var(--Error,#FF444E);
}

.board_list_container .board_list_wrap.community_qna .board_list_bottom .solve{
  color:var(--Gray-40,#ACB0B9);
}

.board_list_container .community_list_box .board_list_top .board_title > .before_badge{
  color:var(--Gray-50,#858B97);  
}

.community_search_container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.community_search_container .qna_switch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.community_search_container .community_search_filter {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
}

.community_search_container .community_search_filter > button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--Gray-50, #858B97);
  cursor: pointer;
}

.community_search_container .community_search_filter > button.selected {
  color: var(--Gray-90, #303236);
}

.community_search_container .community_search_filter > button.selected > span {
  color: var(--Primary-50, #E31B54);
}

.community_search_container .community_search_filter > hr {
  all: unset;
  flex: 0 0 1px;
  width: 1px;
  height: 12px;
  background-color: var(--Gray-30, #CCCFD7);
}

.community_search_container .base_search_input {
  flex: 0 0 auto;
  width: 300px;
}

section.lecture_contents .menu_header {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

section.lecture_contents .menu_header .menu_header_top{
  flex: 1 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer_container .answer_list_wrap .answer_list .answer_body.community_answer_body{
  margin:12px 0px 12px 0px;
  padding :0px 12px;
}

/*전체설문*/
.survey_title{
  color: var(--Gray-80, #43454C);
  vertical-align: top;  
}

.survey_title .icon_text{
  color: var(--Gray-40, #ACB0B9);
  background-image: url(/ilos/images/icon/success_solid_gray_40.png);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 22px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 4px;
  height: 26px;  
}

.survey_title .icon_text.done{
  color: var(--Success, #00B86B);
  background-image: url(/ilos/images/icon/success_solid.png);  
}

.survey_badge{
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--Corner-radius-4, 4px);
  background: var(--opacity-gray-1005, rgba(28, 29, 32, 0.05));  
  color: var(--Gray-60, #676D79);
}

.survey_date_info_box{
  display: flex;
  align-items: center;
  gap: 7px 16px;
  flex-wrap: wrap; 
}

.survey_date_info_box .survey_date_info{
  display: flex;
  align-items: center;
  gap: 8px;    
  color: var(--Gray-80, #43454C);
}

.survey_date_info_box .survey_date_info .title{
  color: var(--Gray-50, #858B97);
}

.survey_date_info_box .survey_date_info .dday{
  color: var(--Primary-50, #E31B54);
}

.survey_list_bottom{
  gap:15px 8px;
}

.survey_bottom{
  display: flex;
  flex-direction: column;
  gap: var(--Corner-radius-16, 16px);
  padding: 23px 32px;
  border-radius: var(--Corner-radius-6, 6px);
  background-color: var(--Gray-5, #F9F9FB);  
  color: var(--Gray-90, #303236);
}

.survey_bottom .survey_bottom_inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Corner-radius-16, 16px);
  color: var(--Gray-70, #565A61);  
  margin-bottom: 10px;
}

.survey_bottom .inner_title_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.survey_bottom .survey_bottom_inner .no_submit{
  color: var(--Error, #FF444E);
  background-size: 15px 15px;
  background-position: center left;
  background-repeat: no-repeat;
  padding-left: 26px;  
  background-image: url(/ilos/images/icon/error.png);  
}

.survey_bottom .survey_bottom_inner .complete{
  color: var(--Gray-90, #303236);
  background-size: 16px 16px;
  background-position: center left;
  background-repeat: no-repeat;
  padding-left: 26px;
  background-image: url(/ilos/images/icon/success_solid.png);  
}

.answer_container .answer_list_wrap .answer_list .answer_btn_box{
  margin-top: 20px; 
  text-align: center;
}

@media screen and (max-width: 1180px) {
  section.lecture_contents .menu_header{
    margin: 28px 24px 28px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Corner-radius-16, 16px);  
  }  
  .community_search_container {
    padding-left: 24px;
    padding-right: 24px;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap : 10px;
  }
  .community_search_container .qna_switch,
  .community_search_container .icon_btn {
    order:3;
  } 
  
  .community_search_container .base_search_input {
    width: 100%;
    order: 1;
    flex:0 0 auto;
  }
  
  .community_search_container .community_search_filter {
    gap: 4px 16px;
    order: 2;
    flex-wrap: wrap;
  }
  
  .search_option_wrap {
    margin:24px;
    padding : 16px;
    gap : 12px;
  }
  
  .search_option_wrap .search_btn_box > button.gray_tab{
    white-space: nowrap;
  }  
  
  .community_container{
    padding : 20px 16px;
    gap:20px;
  }  
  
  .community_container .community_title_top{
    padding-bottom: 10px;
  }
  
  .community_container .community_title_top .community_info_wrap{
    gap:8px 12px;
    padding : 0 4px 5px 4px;
  }  
  
  .community_container .community_title_top .community_title{
    gap:3px 12px;
  }
  
  .board_list_container .board_list_wrap.community_qna{
    padding: 16px 16px 16px 16px;
    gap: 12px;  
  }
  .board_list_container .board_list_wrap.community_qna .board_list .board_list_top .board_title{
    flex-wrap:wrap;
  }
  .answer_container .answer_list_wrap .answer_list .answer_body.community_answer_body{
    margin:8px 0px 8px 0px;
    padding :0px 8px;
  }  
  
  .survey_bottom{
    padding:20px;
  }
  
  .survey_title .icon_text{
    line-height: 24px;
  }
}