@charset "utf-8";
/* 게시판과 관련된 내용 */
/* -- 게시판 공통 -- */
  #board { position: relative; width: 100%; }
  #board table { border-top: 2px solid #ff696b; }
  #board table th, #board table td { padding: 15px 10px; border-bottom: 1px solid #ccc; }

  #board .web_col{ display: table-column-group; }
  #board .mob_col{ display: none; }
  #board .web_td{ display: table-cell; }
  #board .mob_td{ display: none; }

  @media ( max-width: 991px) {
    #board .web_col{ display: none; }
    #board .mob_col{ display: table-column-group; }
    #board .web_td{ display: none; }
    #board .mob_td{ display: table-cell; }
  }

/* -- 비밀번호 -- */
/*  #board_pw{padding: 5% 1%; text-align : center; background: #fff; } border: 1px solid #333a99; */
  #board_pw .pw_title{ padding:0 0 10px 0; font-size: 1.2em; }
  #board_pw .btn_ok{padding: 5px 20px; font-weight: 500; vertical-align: middle; color: #fff; background: #7a6a56;}
  #board_pw .btn_no{ padding: 5px 20px; font-weight: 500; vertical-align: middle; color: #fff; background: #333a99; }
  #board_pw input[type="password"]{ width:  40%; }

/* 게시판 제목 말줄임 */
  #board .subject{display: block; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  #board .subject2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 2.4em; }
  #board .subject3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 3.6em; }

/* -- 게시판 버튼 -- */
  #board .btn_wrap{ padding: 20px 0 0 0; overflow: hidden; }
  #board .btn_wrap a { display: inline-block; margin: 0 2px; padding: 0 30px; line-height: 40px; font-size: 1em; text-align: center; border-radius: 5px; }
  #board .btn_wrap input{ width: auto; margin: 0 2px; padding: 0 30px; border-radius: 5px; }
  #board .btn_c { text-align: center; }
  #board .btn_l { text-align: left; }
  #board .btn_r { text-align: right; }

/* -- 상태 -- */
  #board .re_ing{ display: inline-block; padding: 3px 8px 4px 8px; font-size: 0.9em;line-height: 140%;color: #fff; background: #999; }
  #board .re_ok{ display: inline-block; padding: 3px 8px 4px 8px; font-size: 0.9em;line-height: 140%;color: #fff; background: #71a1ff; }

/* -- 페이징 -- */
  #page { clear: both; padding: 20px 0 0 0; text-align: center; }
  #page a{ display: inline-block; width: 50px; height: 50px; line-height: 50px; }
  #page a:hover { font-weight: 500; }
  #page .on {border-radius: 50%; color: #fff; background: #ff696b; }
  #page .first, #page .prev, #page .next ,#page .last{ width: 20px; height: 50px; background: url('/img/common/arrow.png') no-repeat; vertical-align: top; }
  #page .first{ background-position: -40px 12px; }
  #page .prev{ background-position: 0px 12px; margin: 0 2% 0 0; }
  #page .next{ background-position: -20px 12px; margin: 0 0 0 2%; }
  #page .last{ background-position: -60px 12px; }

  @media ( max-width: 767px) {
    #page a{ width: 30px; height: 30px; line-height: 30px; }
    #page .first, #page .prev, #page .next ,#page .last{ width: 20px; height: 30px; background: url('/img/common/arrow.png') no-repeat; vertical-align: top; }
    #page .first{ background-position: -40px 1px; }
    #page .prev{ background-position: 0px 1px; margin: 0 2% 0 0; }
    #page .next{ background-position: -20px 1px; margin: 0 0 0 2%; }
    #page .last{ background-position: -60px 1px; }
  }


/* -- 검색 -- */
  #board .search_wrap{ padding: 20px 0 0 0; }
  #search{ width: 40%; margin: 0 auto; border: 1px solid #aaa; overflow: hidden; }
  #search select{ float: left; width: 30%; border:0; }
  #search input[type="text"] { float: left; width: 55%; border:0; }
  #search input[type="submit"]{ float: right; width: 15%; vertical-align: middle; color: #fff; background: #ff696b; }
  @media ( max-width: 750px) {
    #search{ width: 80%; }
  }
  /* --  list -- */
  #board .list td, #board .list th{ text-align: center; }
  #board .list .notify { background: rgba(122, 106, 86, 0.1); }
  #board .list i{ display: inline-block; padding: 2px 10px; }
  

  /* -- view-- */
  #board .view th{ text-align: center; }
  #board .view td span{font-weight:500;}
  #board .view .substance { padding:30px; text-align: left;  border-bottom: 1px solid #d3d3d3; }
  #board .view .substance img { width: 100%; max-width:700px; }
  #board .view .pre{ padding: 2%; border-bottom: 1px solid #d3d3d3; }
  #board .answer{ margin: 30px 0 0 0; }
  #board .answer th{ background: #e5e5e5; }
  #board .answer td{ vertical-align: top; }
  #board .spam{ text-align: left; }
  #board .contents img{ width:100% !important; height: auto !important; }

  @media ( max-width: 750px) {
    #board .view dl dt{ clear: both; padding: 2% 0; }
    #board .view dl dd{ padding: 2% 0; }
    #board .view .file dt{ width: 25%; }
    #board .view .file dd{ width: 75%; }
    #board .view .substance { padding:10px; }
  }

/* -- 글쓰기 -- */
  #board .write_info{ padding: 25px; border-radius: 10px; background: #fdfaf0; }
  #board .write_info h3{ padding: 5px 20px; text-align: center; }
  #board .write_info p{ position: relative; padding: 0 0 0 25px; }
  #board .write_info p:before{ content: "\e93f"; position: absolute; left: 0; font-family: "xeicon"; }
  #board .write .file div{ display: block; overflow: hidden; }
  #board .write .file input{ float: left; width: 60%; }
  #board .write .file a{ display: inline-block; float: right; border:1px solid #7a6a56; width: 30px; height: 30px; line-height: 30px; margin-left: 5px; vertical-align: middle; text-align: center; }
  #board .write .spam *{ display: inline-block; margin-right: 5px }
  #board .write .spam img{ width: auto; max-width: 100%; }
  #board .write .spam input{ width: 30%; }
  #board .write td label{ line-height: 40px; }
  
  #board .terms_wrap h5{ padding: 0 0 10px 0; }
  #board .terms_wrap > div{ margin-bottom: 20px; padding: 10px; height: 300px; border:1px solid #e5e5e5; overflow-y: scroll; }

@media ( max-width: 767px) {
  #board .write{ border-bottom: 1px solid #7a6a56; }
  #board .write tr:nth-child(1) th:nth-child(1) , #board .write tr:nth-child(1) td:nth-child(1){ border-top: 0; }
  #board .write tr:nth-child(1) td{ width:100%; }
  #board .write th{ display: inline-block; width: 29%; vertical-align: top; line-height: 42px; border-top: 1px solid #ccc; border-bottom: 0; }
  #board .write td{ display: inline-block; width: 70%; vertical-align: top; border-top: 1px solid #ccc; border-bottom: 0; }
}

/* -- 본인인증 -- */
  #certify span{display: block; font-size: 1.5em;  padding: 2% 0; text-align: center; font-weight: 800; }
  #certify .list{ border-top: 2px solid #ddd; width: 100%;}
  #certify .list th{ padding: 13px 0;  border-bottom: 1px solid #ddd; font-weight: 800; text-align: center; color: #000; background: #f2f2f2; }
  #certify .list td{ padding: 12px 10px; text-align: left; vertical-align: middle; color: #333; border-bottom: 1px solid #ddd; }
  #certify .btn{ margin: 3% 0; text-align: center; vertical-align: middle;}
  #certify .btn input{height: 40px; margin: 0 20px 0 0; padding: 0 2%; vertical-align: middle; color: #fff; background: #7a6a56; border-radius: 5px;}
  #certify .btn a{display: inline-block; line-height: 40px; padding: 0 2%; color: #fff; background: #8c8c8c; border-radius: 5px;}

/*예약 달력*/
#board .booking{  padding: 30px 0; }
#board .calendar{ padding: 1em; text-align: center; background: #f9f9f9; }
#board .calendar table{ margin: 1em 0; }
#board .calendar .month li{ display: inline-block; vertical-align: middle; }
#board .calendar .month li a{ display: block; width: 38px; height: 38px; line-height: 38px; }
#board .calendar th{ text-align:center; font-weight: 300; }

#board .calendar span{ display: block; position: relative; width: 28px; height: 28px; line-height: 28px; margin: 0 auto; border-radius: 50px; }
#board .calendar span:hover{ color: #fff; background: #ff696b; }
#board .calendar .on span{ color: #fff; background: #ff696b; cursor: pointer; }
#board .calendar .on span:hover{ color: #fff; background: #ff696b; }
#board .calendar .off span{ color:#d0d0d0; }
#board .calendar .off span:hover{ background: #f9f9f9 }