/* ********** top gradient bg ********** */
.container { position: relative; width: 100%; background-image: url(../../img/main/body_bg.webp); background-repeat: no-repeat; background-position: top center; background-size: 100%; }
.container:after { animation: circle 60s infinite linear; content: ''; display: block; width: 570px; height: 570px; background-image: url(../../img/main/circle_object.webp); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 90px; left: -200px; z-index: 1;}
@keyframes circle {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}


/* ********** com layout ********** */
.body-container { position: relative; z-index: 2; padding-top: 100px; }


/* ********** com title ********** */
.section-title { position: relative; padding-bottom: 30px; }
.section-title .label { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.section-title .label .icon { width: 28px; height: auto; }
.section-title .label .txt { font-size: 1.5rem; letter-spacing: 1.2px;  }
.section-title .title { position: relative; }
.section-title .title .tit { font-size: 3rem; font-weight: 300; }
.section-title .title .tit strong { font-weight: 700; }


/* ********** com more button ********** */
.more-btn { position: relative; cursor: pointer; }
.more-btn .btn { position: relative; display: flex; gap: 5px; align-items: center; opacity: .5; }
.more-btn .btn:hover { opacity: 1; }
.more-btn .btn .txt { font-size: 1.3rem; font-weight: 500; }
.more-btn .btn .icon { width: 9px; height: auto; position: relative; top: 2px; }

.board-table { position: relative; width: 100%; }
/*테이블 사이즈가 동적이라 table-layout : fixed 주석처리*/
.board-table table { /* table-layout: fixed; */ width: 100%; border-top: 1px solid var(--line-color); }
.board-table table th { background: #eee; font-weight: 600; }
.board-table table th,
.board-table table td { border-left: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); font-size: 1.2rem; text-align: center; padding: 5px 3px; text-align: center; }
.board-table table td { color: #444; }
.board-table table td .link { text-decoration: underline; word-break: keep-all; }
.board-table table th:last-child,
.board-table table td:last-child { border-right: 1px solid var(--line-color); }
.board-table table .align-left { text-align: left; }

@media (max-width: 830px) {
  .body-container { padding-top: 70px; }
}
@media (max-width: 768px) {
  .container:after { width: 300px; height: 300px; top: 70px; left: -100px; opacity: .7; }
  .section-title .label .icon { width: 25px; }
  .section-title .label .txt { font-size: 1.4rem; }
  .section-title .title .tit { font-size: 2.2rem; }
  .input-text input[type=password], .input-text input[type=text] { width: 100%; }
}

.board-table table .annotation-label {position: absolute; top:-4px; right:0; color:red; font-size:10px;}
.board-table table .view-layer { position: absolute; display: none; z-index: 3; right: 0; top: 20%; background: rgba(16,21,78,0.85); color: #fff; font-size: 1.2rem; letter-spacing: 0; font-weight: 100; padding: 8px 10px; line-height: 15px; border-radius: 3px; cursor: default; transition: top .25s ease; min-width: 150px; }
.board-table table .annotation-label:hover + .view-layer { display: inline; }
.board-table table th.numb-col {padding:5px 2px;}
.board-table table th { position: relative; padding: 5px 2px; }
.board-table table th.has-order { padding: 5px 2px 20px; }
.board-table table th.has-annotation { padding-right: 6px; }
.board-table table th .annotation-label { position: absolute; top: -4px; right: 0; color: red; font-size: 1rem; }

.board-table table .table-align-btn 
{ font-weight: bold; font-size: 1.2rem; background: none; border: none; border-top: 1px solid #ddd;outline: 0; transition: opacity .25s ease; cursor: pointer; display: inline-block;  background: url(../../img/report/table_filter_ico.png) no-repeat; background-size: 15px 45px; width: 100%; height: 15px; background-color: #fff; background-position: center 0; position: absolute; bottom: 0;left:0;}
.board-table table .table-align-btn.up { background-position: center -15px; background-color:#f2f2f7;}
.board-table table .table-align-btn.down { background-position: center -30px; background-color:#f2f2f7;}
.board-table table .table-align-btn:hover { background-color:#f2f2f7; }