@charset "utf-8";

/* board.css 25-11-19*/
:root{
  --line-color:#e0e0e0;
  --main-color:#F36523;
  --main2-color:#FA9D1C;
}

.notice{width: 100%; height: 100%; padding: 100px 0; margin-top: 0px;}
.notice .notice_inner{width: 100%; margin: 0 auto;}
.ntc_body{width: 1000px; height: 100%; margin: 0 auto;}
.ntc_body h2{text-align: center; font-weight: bold; font-size: 2.5rem; padding: 50px 0px;}
.ntc_body .ntc_body_txt table{width: 100%; border-top: 1px solid #d7d7d7; text-align: center; table-layout: fixed; position: relative;}
.ntc_body .ntc_body_txt table tr{border-bottom: 1px solid var(--line-color);}
.ntc_body .ntc_body_txt table tr.sticky a{text-decoration: underline;}
.notice_inner .ntc_body .ntc_body_txt table th{background: var(--main2-color) ; color: #fff; font-weight: bold; display: none;}
.ntc_body .ntc_body_txt table th, .notice_inner .ntc_body .ntc_body_txt table td {padding:20px 10px; vertical-align: middle; }
.ntc_body .ntc_body_txt table .subject{white-space: nowrap; text-overflow: ellipsis; text-align: left;}
.ntc_body .ntc_body_txt table .subject a{display:inline-block;  width: 100%;  white-space: nowrap; text-overflow: ellipsis;}

.ntc_body .ntc_body_txt table .info{line-height: 1.5;}
/* IOS 테이블 깨짐현상 */
table {-webkit-text-size-adjust: 100%;table-layout: fixed; }
.pagination {display: flex;justify-content: center;align-items: center; gap: 10px;  margin: 40px 0;  font-size: 1rem;}
.pagination a { display: flex; width: 36px; height: 36px; justify-content: center;  align-items: center;  border: 1px solid #ddd;  color: #333;
  border-radius: 4px;  text-decoration: none;}
.pagination a:hover {  border-color: var(--main2-color);  color: var(--main2-color);}
.pagination ul {  display: flex;  gap: 8px;}
.pagination ul li a{  display: flex;  width: 36px;  height: 36px;  justify-content: center;  align-items: center;  border: 1px solid #ddd;  border-radius: 4px;  color: #333;  text-decoration: none;}
.pagination ul li.now a {  background: var(--main2-color);  border-color: var(--main2-color);  color: #fff;  font-weight: bold;}
.pagination button{border: none; background: none;}

/* column, after */
.column {position:relative; width:1400px; margin: 0 auto;}
.inner h2{text-align: center; font-weight: bold; font-size: 2.5rem; padding: 50px 0px;}
.column .box {display:flex; flex-wrap:wrap; gap:20px;}
.column .box li {position:relative; width:calc((100% - 60px)/4);}
.column .box li img {width:100% !important; border-radius:10px; object-fit:cover;}
.column .txt {min-height:85px; text-align:center; padding:5px 5px 0;}
.column .txt p {font-weight:400; color:#000; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.column .txt p.subject{font-size: 1.35rem;}
.column .txt p.subject {font-size:1.25rem; color:#959595; line-height:1.5;}
.column .txt p + p {padding-top:10px;}
.write_btn{float: right;}
.write_btn button{border: none; background: var(--main-color); padding: 10px 20px; border-radius: 5px; transition: 0.3s;}
.write_btn button:hover{background: var(--main2-color);}
.write_btn button a{font-size: 1.175rem; color: #fff; }

/* 탭버튼 */
.tab_btn{width:1400px; margin: 0 auto;}
.tab_btn ul{display: flex; justify-content: center; margin-bottom:30px;}
.tab_btn ul li button{background: #e1e1e1; border: none;padding: 10px 36px; font-size: 1.5rem; color: #717171; transition:0.3s;}
.tab_btn ul li:first-child button{border-radius: 30px 0 0 30px;}
.tab_btn ul li:last-child button{border-radius: 0 30px 30px 0;}
.tab_btn ul li button.on{background: #f23f00; color: #fff;}
.tab01, .tab02{animation: fadeUp 1s ease;}

/* write */
.write {width: 800px; margin: 0 auto; padding:100px 0;}
.write_wrap {position:relative; width:100%; margin-top:60px;}
.write_wrap table {width:100%; border-top:2px solid #313131;}
.write_wrap tr {border-bottom:1px solid #d7d7d7;}
.write_wrap th {width:15%;}
.write_wrap td {width:35%;}
.write_wrap th,
.write_wrap td {font-size:1.175rem; line-height:2rem; padding:12px 20px; vertical-align:middle; }
.write_wrap td {border-left:1px solid #d7d7d7;}
.write_wrap input:not([type="radio"],[type="file"]),
.write_wrap select {position:relative; font-size:1rem; width:314px; height:32px; line-height:3.2rem; padding-left:10px; border:1px solid #dddddd; background:#f8f8f8; box-sizing:border-box;}
.write_wrap textarea {width:90%; height:200px; padding:10px; font-size:1.7rem; line-height:2.5rem; border:1px solid #dddddd;}
.write_wrap .board-btn{float: right; margin-top: 20px;}
.write_wrap .board-btn button{border: none; font-size: 1.175rem; color: #fff; padding: 10px 20px; border-radius: 5px; transition: 0.3s;}
.submit_btn{background: var(--main-color);}
.reset_btn{background: #333;}
.write_wrap .board-btn .submit_btn:hover{background: var(--main2-color);}
.write_wrap .board-btn .reset_btn:hover{background: #555;}

/* read */
#boardRead {padding-bottom:100px;}
.read {position:relative; width:800px; margin: 0 auto;}
.read table {width:100%; border-top:2px solid #313131;}
.read tr {border-bottom:1px solid #d7d7d7;}
.read th {width:15%; border-right: 1px solid #d7d7d7;}
.read td {width:85%;}
.read th,.read td {font-size:1.175rem; line-height:2rem; padding:12px 20px; vertical-align:middle;}
.read tr.sed {display:flex; justify-content:right;}
.read tr.sed td {width:auto;}
.read .text td {min-height:300px;  white-space: pre-line;
  line-height: 1.6;}
.read .text td img {max-width:100%;}
.read .board-btn {display:flex; justify-content:right; float:unset !important;}
.back_btn{float: right; margin-top: 30px;}
.back_btn button{border: none; font-size: 1.175rem; color: #fff; padding: 10px 20px; border-radius: 5px; transition: 0.3s; background: var(--main2-color);}
.back_btn button:hover{background: var(--main-color);}

@media screen and (max-width: 1499px) {

}

/* Desktop */
@media (max-width: 1279px) {
  .page_location{width: 100%;}
  .notice{margin-top: 0px;}
  .notice .notice_inner{width: 90%;}
  .ntc_body .ntc_body_txt table {width: 90%;}

  /* column, after */
  .column {position:relative; width:100%; margin: 0 auto;}
  .inner h2{text-align: center; font-weight: bold; font-size: 1.5rem; padding: 30px 0px;}
  .column .box {display:grid; grid-template-columns: repeat(3, auto); gap:20px;}
  .column .box li {position:relative; width:100%;}
  /* 탭버튼 */
  .tab_btn{width:100%;}
  
}

/* Tablet */
@media (max-width:1024px){
.notice{padding: 0 0 100px 0; margin-top: 60px;}
.notice .notice_inner{width: 90%;}
.ntc_body{width: 90%; padding: 0px; margin: 0 auto;}
.ntc_body h2{font-size: 1.5rem; padding: 30px 0;}

.ntc_body .ntc_body_txt table{width: 100%; border-top: 1px solid #d7d7d7; text-align: center; table-layout: fixed; position: relative;}
.ntc_body .ntc_body_txt table td.info{display: block; font-size: 0.85rem; margin-left: 30px; width: 100%;} 
.ntc_body .ntc_body_txt table th, .notice_inner .ntc_body .ntc_body_txt table td span{padding:5px;}

.notice_inner .ntc_body .ntc_body_txt table td{padding: 5px;}
.ntc_body .ntc_body_txt table .num{vertical-align: middle;}
.ntc_body .ntc_body_txt table .subject{white-space: normal; overflow: visible; text-overflow:clip; text-align: left; display: inline-block; width: calc(100% - 80px); vertical-align: top; font-weight: 500;}
.ntc_body .ntc_body_txt table .subject a{display:inline-block;  white-space: nowrap; text-overflow: ellipsis; width: 230px; height: 20px;}
.ntc_body .ntc_body_txt table .info {text-align: left;}
.ntc_body .ntc_body_txt table .info .name{width: auto; display:inline-block; font-size: 0.85rem;}
.ntc_body .ntc_body_txt table .info .date{display: inline;  font-size: 0.85rem;color: #999; margin-top: 8px;}

/* read */
#boardRead {padding-bottom:0px;}
#boardRead h2{font-size: 1.5rem;}
.read {width:90%;}
.read th, .read td {padding: 10px;}
.read table { border-top:2px solid #313131;}
.read tr {border-bottom:1px solid #d7d7d7;}
.read th {min-width:60px; width: calc(45% - 22px); text-align: center;}
.read td {width: 200px; width: calc(55% - 22px);}
.read th,.read td {font-size:1rem; line-height:1.3;}
.read tr.sed {display:flex; justify-content:right;}
.read tr.sed td {width:auto;}
.read .text td {min-height:300px;  white-space: pre-line;
  line-height: 1.6;}
.read .board-btn {display:flex; justify-content:right; float:unset !important;}
.back_btn{text-align: center; float: none;}
.back_btn button{border: none; font-size: 1.175rem; color: #fff; padding: 10px 30px; border-radius: 5px; transition: 0.3s; background: var(--main2-color);}

/* column, after */
.column {position:relative; width:100%; margin: 0 auto;}
.inner h2{text-align: center; font-weight: bold; font-size: 1.5rem; padding: 30px 0px;}
.column .box {display:grid; grid-template-columns: repeat(3, auto); gap:20px;}
.column .box li {position:relative; width:100%;}

/* 탭버튼 */
.tab_btn{width:100%;}
.tab_btn ul li button{font-size: 1.25rem;}

/* write */
.write {padding-bottom:50px; width: 100%;  padding-top:60px;}
.write_wrap {margin-top:0;}
.write_wrap table {width:100%; border-top:2px solid #313131; }
.write_wrap tr {border-bottom:1px solid #d7d7d7;}
.write_wrap th {width: calc(45% - 22px); min-width:83px}
.write_wrap td {width: calc(55% - 22px);}
.write_wrap th,.write_wrap td {font-size:1rem; line-height:1.2; padding:12px 20px; vertical-align:middle; writing-mode:horizontal-tb; }
.write_wrap td {border-left:1px solid #d7d7d7;}
.write_wrap input:not([type="radio"],[type="file"]),
.write_wrap select {width:90%; height:32px; line-height:3.2rem; padding-left:10px;}
.write_wrap textarea {width:80%; height:300px; padding:10px; font-size:1rem; line-height:2.5rem; border:1px solid #dddddd;}
.write_wrap .board-btn{float:none; text-align: center;}
.write_wrap .board-btn button{border: none; font-size: 1.175rem; color: #fff; padding: 15px 40px; border-radius: 5px; transition: 0.3s;}
.submit_btn{background: var(--main-color); margin-right: 20px;}
.reset_btn{background: #333;}
.write_wrap .board-btn .submit_btn:hover{background: var(--main2-color);}
.write_wrap .board-btn .reset_btn:hover{background: #555;}
}

/* Mobile Large */
@media (max-width:767px){
 /* notice */
.notice{margin-top: 0px;}
.inner h2 {font-size: 2rem;}
.ntc_body h2 {font-size: 2rem;}
/* read */
#boardRead h2 {font-size: 2rem;}
.read th{width: 60px;}
/* column, after */
.column .box {display:grid; grid-template-columns: repeat(2, auto); gap:20px;}

/* write */
.write {padding-top:0px;}
}

/* Mobile Small */
@media (max-width:460px){ 
 /* notice */
.notice{margin-top: 0px;}
.sticky .num img{width: 45px;}
/* column, after */
.column .box {display:block; gap:20px;}

/* read */
.read th, .read td{padding: 10px 5px;}
/* write */
.write {padding-top:0px;}
}