﻿@charset "utf-8";

/* board_table */
.shopComm table.board_table {position: relative; width: 100%; border: 1px solid #666666; border-left: 0; border-right: 0; margin-top: 20px; border-collapse: collapse;}
.shopComm table.board_table caption {height: 0; font-size: 0; line-height: 0; overflow: hidden;}
.shopComm table.board_table thead {border-bottom: 1px solid #ddd; background-color:#f2f2f2;}
.shopComm table.board_table th {padding: 14px 0; font-size: 15px; font-weight: 600; color: #1b1b1b;;}
.shopComm table.board_table tr { border-bottom: 1px solid #ddd;}
.shopComm table.board_table tr:last-child {border-bottom: 0;}
.shopComm table.board_table td {padding: 14px 0; font-size: 15px; font-weight: 400; color: #666666; text-align: center;}
.shopComm table.board_table td.td_width {min-width: 100px;}
.shopComm table.board_table td.td_width2 {min-width: 150px;}
.shopComm table.board_table td.td_title {text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100%;}
.shopComm table.board_table td.table_data_empty {padding: 80px 0;}

.shopComm .board_paging {position: relative; width: 100%; display: inline-block; text-align: center; padding-top: 60px;}
.shopComm .board_paging a {position: relative; display: inline-block; width: 40px; height: 35px; line-height: 35px; font-size: 15px; font-weight: 300; color:#333; border:1px solid #ddd; text-align: center; transition: 0.5s; margin: 0 -2px;}
.shopComm .board_paging a:hover {background-color: #002a70; border-color: #002a70; color:#fff}
.shopComm .board_paging a.actived {font-weight: 700; color:#002a70; background-color: #ddd; border-color: #ddd;}
.shopComm .board_paging button.btn_write {position: absolute; right:0; top:40px; border: 0; border-radius: 0; width: 120px; height: 50px; background-color: #333333; display: inline-block; text-align: center; line-height: 50px; font-size: 22px; font-weight: 500; color:#fff;}


/* board_view */
.shopComm .author_info {position: relative; display: inline-block; width: 100%; padding:25px 0; border-bottom: 1px solid #ccc;}
.shopComm .author_info span.font_14 {position: relative; display: inline-block; margin-right: 20px;}

.shopComm .content_control {position: relative; width: 100%; display: inline-block; margin: 25px 0; text-align: right;}
.shopComm .content_control button {text-align: center; width: 100px; height: 35px; font-size: 15px; line-height: 35px; color:#fff; border-radius: 0; border:0; margin-left: 10px;}
.shopComm .content_control button.btn_board_edit {background-color: #0c9e8b;}
.shopComm .content_control button.btn_board_reply {background-color: #677bbe;}
.shopComm .content_control button.btn_board_delete, .content_control button.btn_board_cancel {background-color: #999999;}
.shopComm .content_control button.btn_board_new, .content_control button.btn_board_confirm {background-color: #002a70;}
.shopComm .content_control button.btn_board_list {background-color: #333;}

.shopComm .board_content {position: relative; width: 100%; display: inline-block;}
.shopComm .board_content p {font-size: 16px; color:#1b1b1b; line-height: 24px; padding:25px 0; word-break: keep-all; border-bottom: 1px solid #ccc; min-height: 500px;}

.shopComm .content_paging {position: relative; margin: 25px 0; display: block; width: 100%;}
.shopComm .content_paging li {position: relative; display: inline-block; width: 100%; padding:20px 150px 20px 100px; border: 1px solid #ccc; border-right: 0; border-left: 0; margin : -1px 0;}
.shopComm .content_paging li:last-child {margin:0}

.shopComm .content_paging a {position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.5s;}
.shopComm .content_paging a:hover {color:#002a70;}
.shopComm .content_paging span.content_paging_info {position: absolute; left: 10px;}
.shopComm .content_paging span.content_paging_date {position: absolute; right: 10px; top:23px;}

/* board_write */
.shopComm #board_table select#category_type {width: 50%; display: inline-block; padding:15px 20px; font-size: 18px; font-weight: 300; border:1px solid #ccc; color: #333;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(/img/arrow_down.png) 95% center no-repeat;
background-size: 18px 11px;}

@media screen and (max-width: 1280px) { 
  .shopComm table.board_table td.td_width2, table.board_table td.td_width {min-width: auto;}
}

@media screen and (max-width: 1050px) { 
  .shopComm table tbody {position: relative; width: 100%;}
  .shopComm table.board_table thead {display: none;}
  .shopComm table.board_table tr {padding: 10px 20px; display: inline-block;}
  .shopComm table.board_table tr:nth-child(2n) {background-color: #eee;;}
  .shopComm table.board_table td {width: auto; float: left; display: inline-block; padding: 5px 20px 5px 0;}
  .shopComm table.board_table td.td_title {width: 100%; display: block; max-width: none; padding-right: 0; overflow: unset; text-overflow: unset; white-space: normal;}
}

@media screen and (max-width: 767px) { 
  .shopComm table.board_table td { font-size: 14px;}
  .shopComm table.board_table td:not(.td_title) { font-size: 12px;}
  .shopComm .board_paging button.btn_write { position: absolute; width: auto; height: auto; font-size: 16px; line-height: 30px; top:5px; padding:5px 10px}
}