/* Sech */
.search  {
  display: flex;
  justify-content: flex-end;
}

.search form {
  display: block;
  max-width:520px;
  width: 100%;
}

.search-inner {
  display: flex;
  gap:10px;
}

.search-select {
  width: 120px;
  height:40px;
  border: 1px solid #CCCCCC;
} 

.search-select select {
  width: 100%;
  height:100%;
  padding:0px 16px;
  font-size: 1.5rem;
  background: url('../img/bbs/select_arr.png') no-repeat right 16px center;
}

.search-input {
  display: flex;
  gap:10px;
  width: calc(100% - 130px);
}

.search-input input {
  width:calc(100% - 110px);
  height:40px;
  padding:0px 16px;
  border: 1px solid #CCCCCC;
  font-size: 1.5rem;
}

.search-input button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  background-color: #888;
  font-size:1.7rem;
  font-weight:500;
  color:#fff;
}

@media screen and (max-width:1200px) {
  .search-select select {
    font-size: 1.4rem;
  }

  .search-input input {
    font-size: 1.4rem;
  }

  .search-input button {
    font-size:1.5rem;
  }
}
@media screen and (max-width:1024px) {
  .search form {
    max-width:460px;
  }

  .search-inner {
    gap:6px;
  }

  .search-select {
    width: 100px;
    height:36px;
  }

  .search-input {
    width:calc(100% - 106px);
  }

  .search-input {
    gap:6px;
  }

  .search-input input {
    width: calc(100% - 86px);
    height:36px;
    padding: 0px 12px;
  }

  .search-select select {
    padding:0px 12px;
    background-position: right 12px center;
  }

  .search-input button {
    width: 80px;
    height:36px;
  }
}
@media screen and (max-width:768px) {
  .search form {
    max-width:400px;
  }

  .search-select select {
    font-size: 1.3rem;
  }

  .search-input input {
    font-size: 1.3rem;
  }

  .search-input button {
    font-size:1.4rem;
  }
}
@media screen and (max-width:576px) {
  .search form {
    max-width:100%;
  }

  .search-inner {
    gap:4px;
  }

  .search-select {
    width: 80px;
    height:32px;
  }

  .search-input {
    width:calc(100% - 84px);
  }

  .search-input {
    gap:4px;
  }

  .search-input input {
    width: calc(100% - 72px);
    height:32px;
    padding: 0px 10px;
    font-size:1.1rem;
  }

  .search-select select {
    padding:0px 10px;
    background-position: right 10px center;
    font-size:1.1rem;
  }

  .search-input button {
    width: 68px;
    height:32px;
    font-size:1.4rem;
  }
}


/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  font-size:0px;
}

.pagination a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:40px;
  height:40px;
	margin:0px 7px;
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  text-align: center;
  font-size:1.7rem;
  transition:all ease-out .15s;
}

.pagination a:not(.pagination-backward):not(.pagination-prev):not(.pagination-next):not(.pagination-forward) {
  border:1px solid #CDCDCD;
}

.pagination a:not(.current) {
  cursor:pointer;
}

.pagination a.current {
	color:#fff !important;
	background-color: #3E82C4 !important;
  border-color: #3E82C4 !important;
}

.pagination a.pagination-prev {
  background-image: url('../img/bbs/pagination_btn_prev.png');
}

.pagination a.pagination-next {
  background-image: url('../img/bbs/pagination_btn_next.png');
}

.pagination a.pagination-backward {
  background-image: url('../img/bbs/pagination_btn_backward.png');
}

.pagination a.pagination-forward {
  background-image: url('../img/bbs/pagination_btn_forward.png');
}


@media screen and (max-width:1200px) {
  .pagination a {
    font-size: 1.5rem;
    margin:0px 4px;
  }
}
@media screen and (max-width:1024px) {
  .pagination a {
    width:36px;
    height:36px;
    background-size: auto 14px;
  }
}
@media screen and (max-width:768px) {
  .pagination a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width:576px) {
  .pagination a {
    width: 30px;
    height: 30px;
    margin:0px 2px;
    background-size: auto 10px;
    font-size: 1.3rem;
  }
}


/* Category Menu */
.category-menu {
  display: flex;
  border-radius: 10px;
  background-color: #EEEEEE;
  overflow: hidden;
}

.category-menu li {
  flex:1 1;
}

.category-menu li:not(:last-child) {
  border-right:1px solid #ddd;
}

.category-menu a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:56px;
  text-align: center;
  font-size: 1.5rem;
  color:#444;
}

.category-menu li.on a {
  color:#fff;
  background-color:#3E82C4 ;
}

.category-graphic {
  position: relative;
  padding:80px 0px;
}

.category-graphic::after {
  content: "";
  display: block;
  position: absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width: 100vw;
  height:100%;
  background-color: #F6F8F9;
  z-index:-1;
}

.category-graphic ul {
  display: flex;
}

.category-graphic li {
  flex:1 1 25%;
  max-width:25%;
}

@media screen and (max-width:1200px) {
  .category-menu a {
    height:50px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width:1024px) {
  .category-graphic {
    padding:60px 0px;
  }

  .category-graphic img {
    width: 100px;
  }
}
@media screen and (max-width:768px) {
  .category-menu-wrap {
    position: relative;
    padding-top: 50px;
  }

  .category-menu {
    flex-wrap: wrap;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    z-index: 10;
  }

  .category-menu::before {
    content:'';
    position: absolute;
    top:19px;
    right:20px;
    display: block;
    width: 8px;
    height: 8px;
    border-left:2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .category-menu li {
    display: none;
    flex:1 1 100%;
    width: 100%;
    order: 2;
    padding:0px;
  }

  .category-menu li:not(:last-child) {
    border:0px;
  }

  .category-menu br {
    display: none;
  }

  .category-menu.on li {
    display:block;
  }

  .category-menu li.on {
    display:block;
    order: 1;
  }

  .category-menu li.on a {
    pointer-events: none;
  }

  .category-graphic {
    padding:40px 0px;
  }

  .category-graphic img {
    width: 60px;
  }
}
@media screen and (max-width:576px) {
  .category-menu-wrap {
    padding-top:44px;
  }

  .category-menu::before {
    top:16px;
  }

  .category-menu a {
    height:44px;
    font-size: 1.2rem;
  }

  .category-graphic ul {
    flex-wrap: wrap;
    gap:30px;
  }

  .category-graphic li {
    
    flex:1 1 calc(50% - 30px);
    max-width: 50%;
  }

  .category-graphic {
    padding:30px 0px;
  }

  .category-graphic img {
    width: 40px;
  }
}


/* Basic */
.bbs-list--basic .table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  border-top: 2px solid #122B5F;
}

.bbs-list--basic .table thead {
  background-color: #F8F8F8;
}

.bbs-list--basic .table tr {
  border-bottom: 1px solid #777777;
}

.bbs-list--basic .table th,
.bbs-list--basic .table td {
  padding:10px;
  height:65px;
  font-size:1.7rem;
}

.bbs-list--basic .table a {
  display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bbs-list--basic .state {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:136px;
  height:36px;
  border-radius:20px;
  font-weight:500;
  color:#fff;
}

.bbs-list--basic .state.off {
  background-color: #777;
}

.bbs-list--basic .state.on {
  background-color: #3E82C4;
}

@media screen and (max-width:1200px) {
  .bbs-list--basic .table th,
  .bbs-list--basic .table td {
    height: 60px;
    font-size:1.5rem;
  }
}
@media screen and (max-width:1024px) {
  .bbs-list--basic .table th, .bbs-list--basic .table td {
    padding:6px;
  }

  .bbs-list--basic .state {
    width: 100px;
    height:30px;
  }
}
@media screen and (max-width:768px) {
  .bbs-list--basic .table th,
  .bbs-list--basic .table td {
    height: 52px;
    font-size:1.4rem;
  }

  .bbs-list--basic .table {
    display: block;
  }

  .bbs-list--basic .table thead {
    display: none;
  }

  .bbs-list--basic .table tbody {
    display: block;
  }

  .bbs-list--basic .table tr {
    display: flex;
    flex-wrap: wrap;
    padding:0px;
  }

  .bbs-list--basic .table td {
    height:auto;
    padding:0px;
    text-align: left;
  }

  .bbs-list--basic .table--notice tr {
    padding: 6px 4px;
  }

  .bbs-list--basic .table--notice td {
    position: relative;
    padding: 4px 6px;
  }

  .bbs-list--basic .table--notice td.td_subject {
    order: 1;
  }

  .bbs-list--basic .table--notice td.td_number {
    order: 2;
  }

  .bbs-list--basic .table--notice td.td_write {
    order: 3;
  }

  .bbs-list--basic .table--notice td.td_data {
    order: 4;
  }

  .bbs-list--basic .table--notice td.td_write::before,
  .bbs-list--basic .table--notice td.td_data::before {
    content:'';
    display: block;
    position:absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    width: 1px;
    height:10px;
    background-color: #ccc;
  }

  .bbs-list--basic .table--careers td {
    display: flex;
    align-items: center;
    gap:16px;
    width: 100%;
  }

  .bbs-list--basic .table--careers td:not(:last-child) {
    border-bottom: 1px solid #ccc;
  }

  .bbs-list--basic .table--careers td::before {
    display: block;
    width:100px;
    padding:16px;
    background-color: #F8F8F8;
    font-weight:700;
  }

  .bbs-list--basic .table--careers td.td_target::before {
    content: "모집대상";
  }

  .bbs-list--basic .table--careers td.td_field::before {
    content: "업무분야"; 
  }

  .bbs-list--basic .table--careers td.td_region::before {
    content: "근무지";
  }

  .bbs-list--basic .table--careers td.td_state::before {
    content: "상태";
  }

  .bbs-list--basic .table--careers a {
    width: calc(100% - 100px);
  }
}
@media screen and (max-width:576px) {
  .bbs-list--basic .table th,
  .bbs-list--basic .table td {
    font-size:1.2rem;
  }

  .bbs-list--basic .state {
    width:60px;
    height:22px;
  }

  .bbs-list--basic .table--notice tr {
    padding:6px 2px;
  }

  .bbs-list--basic .table--notice td {
    padding: 3px 6px;
  }
  
  .bbs-list--basic .table--careers td {
    gap:10px;
    padding:0px;
  }

  .bbs-list--basic .table--careers td::before {
    width:80px;
    padding:10px;
  }

  .bbs-list--basic .table--careers a {
    width: calc(100% - 92px);
  }
}



/* Gallery */
.bbs-list--gallery .list {
  display: flex;
  flex-wrap: wrap;
  margin:-20px;
}

.bbs-list--gallery .list li {
  flex:1 0 33.33%;
  max-width: 33.33%;
  padding:20px;
}

.bbs-list--gallery .list .img {
  position: relative;
  width: 100%;
  height:0;
  padding-top: calc(360/400*100%);
  overflow: hidden;
}

.bbs-list--gallery .list .img img {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  height:100%;
  transition: var(--transition-basic);
}

.bbs-list--gallery .list .con {
  padding-top:24px;
}

.bbs-list--gallery .list .category {
  font-size: 1.7rem;
  font-weight:700;
  color:#3E82C4;
}

.bbs-list--gallery .list .subject {
  display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	overflow: hidden;
  height:56px;
  font-size:2.3rem;
  font-weight:700;
}

.bbs-list--gallery .list .data {
  font-size: 1.7rem;
  font-weight:500;
  color:#AAAAAA;
}

@media screen and (min-width:1201px) {
  .bbs-list--gallery .list li:hover .img img {
    transform: scale(1.1);
  }
}
@media screen and (max-width:1200px) {
  .bbs-list--gallery .list .subject {
    height:52px;
    font-size:2.1rem;
  }

  .bbs-list--gallery .list .data {
    font-size: 1.5rem;
  }
}
@media screen and (max-width:1024px) {
  .bbs-list--gallery .list {
    margin:-12px;
  }

  .bbs-list--gallery .list li {
    padding:12px;
  }

  .bbs-list--gallery .list .con {
    padding-top:18px;
  }
}
@media screen and (max-width:768px) {
  .bbs-list--gallery .list {
    margin:-8px;
  }

  .bbs-list--gallery .list li {
    padding:8px;
  }

  .bbs-list--gallery .list .subject {
    height:42px;
    font-size:1.8rem;
  }

  .bbs-list--gallery .list .data {
    font-size: 1.4rem;
  }
}
@media screen and (max-width:576px) {
  .bbs-list--gallery .list {
    margin:-8px -4px;
  }

  .bbs-list--gallery .list li {
    flex:1 1 50%;
    max-width: 50%;
    padding:8px 4px;
  }

  .bbs-list--gallery .list .con {
    padding-top:12px;
  }

  .bbs-list--gallery .list .subject {
    height:32px;
    font-size:1.4rem;
  }

  .bbs-list--gallery .list .data {
    font-size: 1.2rem;
  }
}


/* Board View */
.bbs-view {
  border-top: 1px solid #000;
}

.bbs-view .bbs-view-area {
  min-height:600px;
  padding:40px;
  border-bottom: 1px solid #777;
}

.bbs-view .bbs-view-file {
  padding:20px 40px;
  border-bottom: 1px solid #777;
}

.bbs-view .bbs-view-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:0px;
}

.bbs-view .subject {
  text-align: center;
  padding:20px;
  border-bottom: 1px solid #777;
}

.bbs-view .subject p {
  font-size: 3.1rem;
  font-weight:700;
}

.bbs-view .data {
  text-align: center;
  padding:20px;
  border-bottom: 1px solid #777;
}

.bbs-view .data p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:4px;
  font-size: 1.7rem;
}

.bbs-view .data span {
  color:#333;
}

.bbs-view .textarea p {
  font-size: 1.7rem;
  line-height:1.4;
}

.bbs-view .download {
  display: flex;
  align-items: center;
  gap:20px;
}

.bbs-view .download i {
  display: block;
  width: 28px;
  height:28px;
  background: url('../img/bbs/attach_file.png') no-repeat center;
}

.bbs-view .download span {
  display: block;
  display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical;
	overflow: hidden;
  width: calc(100% - 48px);
  font-size:1.7rem;
}

.bbs-view .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:120px;
  height:64px;
  font-size:1.9rem;
  font-weight:500;
  color:#fff;
}

.bbs-view .btn01 {
  background-color:#444;
}

.bbs-view .btn01:not(:last-child) {
  margin-right:20px;
}

.bbs-view .btn02 {
  background-color:#888;
}

@media screen and (max-width:1200px) {
  .bbs-view .subject p {
    font-size: 2.8rem;
  }

  .bbs-view .data p {
    font-size:1.5rem;
  }

  .bbs-view .textarea p {
    font-size:1.5rem;
  }

  .bbs-view .download span {
    font-size: 1.5rem;
  }

  .bbs-view .btn {
    height:58px;
    font-size:1.7rem;
  }
}
@media screen and (max-width:1024px) {
  .bbs-view .bbs-view-area {
    min-height:400px;
    padding: 28px;
  }

  .bbs-view .bbs-view-file {
    padding: 16px 28px;
  }


  .bbs-view .subject {
    padding: 16px;
  }

  .bbs-view .data {
    padding: 16px;
  }

  .bbs-view .download {
    gap:12px;
  }

  .bbs-view .download i {
    width: 20px;
    height:20px;
    background-size: auto 20px;
  }

  .bbs-view .download span {
    width: calc(100% - 32px);
  }

  .bbs-view .btn {
    width: 100px;
    height:50px;
  }

  .bbs-view .btn01:not(:last-child) {
    margin-right:12px;
  }
}
@media screen and (max-width:768px) {
  .bbs-view .subject p {
    font-size: 2.4rem;
  }

  .bbs-view .data p {
    font-size:1.4rem;
  }

  .bbs-view .textarea p {
    font-size:1.4rem;
  }

  .bbs-view .download span {
    font-size: 1.4rem;
  }

  .bbs-view .btn {
    height:44px;
    font-size:1.5rem;
  }
}
@media screen and (max-width:576px) {
  .bbs-view .bbs-view-area {
    min-height:300px;
    padding:16px;
  }

  .bbs-view .bbs-view-file {
    padding:10px 16px;
  }

  .bbs-view .subject {
    padding:10px;
  }

  .bbs-view .subject p {
    font-size: 2rem;
  }

  .bbs-view .data {
    padding:10px;
  }

  .bbs-view .data p {
    font-size:1.2rem;
  }

  .bbs-view .textarea p {
    font-size:1.2rem;
  }

  .bbs-view .download {
    gap:6px;
  }

  .bbs-view .download i {
    width: 16px;
    height:16px;
    background-size: auto 16px;
  }

  .bbs-view .download span {
    width: calc(100% - 22px);
    font-size: 1.2rem;
  }

  .bbs-view .btn {
    width: 80px;
    height:36px;
    font-size:1.2rem;
  }

  .bbs-view .btn01:not(:last-child) {
    margin-right:6px;
  }
}