@charset "utf-8";

* {
    padding:0;
    margin:0;
}

div, ul {
    letter-spacing: -0.25px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

.bottom {
    margin: 30px 0 0;
}

.record-wrap {
    margin: 20px 0 0;
    padding: 5px 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0px 10px #d3dfea;
}

.record-wrap .btn-wrap {
    padding: 0 15px 15px 0;
    text-align: right;
}

.record-wrap .tb-title {
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    background: #f0f0f0;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    text-align: center;
}

.record-wrap .tb-title li {
    min-width: 5.53%;
    margin: 0 -1.5px;
    font-weight: 600;
    font-size: 15px;
    color: #121212;
    line-height: 40px;
    display: inline-block;
}


.record-wrap .object .personal-box {
    display: table-row;
}

.record-wrap .object .personal-box li {
    display: table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #ededed;
    text-align: center;
    width: 5.5%;
    margin: 0 -1.55px;
    font-weight: 300;
    font-size: 14px;
    color: #333;
    min-height: 40px;
    padding: 10px 0;
}

.record-wrap .object .personal-box li a {
    display: block;

}

.record-wrap .box-st {
    border-bottom: 1px solid #ededed;
}

.record-wrap .box-st:after {
    content: '';
    display:block;
    clear: both;
}

.off-box:after {
    content: '';
    display: block;
    clear: both;
}

.off-box .box-st {
    width: 20%;
    float: left;
}

.box-st .box-title {
    width: 100%;
    padding: 5px 0;
    background: #f0f0f0;
    text-align: center;
    font-weight: 600;
    color: #121212;
}

.box-st .box-con {
    min-height: 180px;
}

.box-st .box-con:after {
    content: '';
    display: block;
    clear: both;
}

.box-st .box-con .table-st1 {
    width: 50%;
    float: left;
}

.box-st .box-con .table-st1 li {
    height: 30px;
    padding: 5px 0;
    font-size: 14px;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-left: 1px solid #ededed;
}

.box-st .box-con .table-st1 li:nth-last-child() {
    border-bottom: 0;
}

.box-st .box-con .s-title li {
    background: #f0f0f0;
}






/* 테이블 css */
.table-style {
    box-sizing: border-box;
    table-layout:fixed;
	width:100%;
	text-align:center;
}

.table-style td.w1 {
    width: 70px;
}

.table-style td.w2 {
    width: 140px;
}

.table-style td {
    word-break:break-all;
}

.table-style td a {
  /*  display: block; */
}


.table-style .items {
    display: inline-block;
    font-size: 1.3rem;
    color: #888;
    margin-right: 3px;
    margin-top: 4px;
    border-radius: 20px;
    padding: 3px 10px;
    background: #ffe5e5;
}




.table-tit tr {
    padding: 10px 0;
    background: #f0f0f0;
    width: 100%;
    background: #f0f0f0;
    text-align: center;
    font-weight: 600;
    color: #121212;
}

.table-tit td {
    height: 40px;
    width: 6%;
    border: 1px solid #ddd;
}

.personal-table td {
    padding: 8px 0;
    width: 6%;
    border: 1px solid #ddd;
}


.table-wrap { 
    overflow: auto;
    white-space: nowrap;
    width: 100%;
    height: 500px;
}

.table-wrap::-webkit-scrollbar {
    height: 12px;
    width: 10px;
}

.table-wrap::-webkit-scrollbar-thumb{
    width: 40px;
    height: 40px;
    background-color: #203040;
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

.table-wrap::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.table-wrap-mini { 
    overflow: auto;
    white-space: nowrap;
    width: 100%;
}

.table-wrap-mini::-webkit-scrollbar {
    height: 12px;
    width: 10px;
}

.table-wrap-mini::-webkit-scrollbar-thumb{
    width: 40px;
    height: 40px;
    background-color: #203040;
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

.table-wrap-mini::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}


.table {
   width: auto;
   min-width: 100%;
   border-collapse: separate;
   border-spacing: 0 !important;
   position: relative;
}

.table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table td {
    vertical-align: middle !important;
    border: 1px solid #eee !important;
    position: relative;
    min-width: 75px;
    width: auto;
    font-size: 13.5px;
    padding: 5px 10px !important;
}

.bg-primary {
    background: none;
}

.bg-primary th {
    vertical-align: middle !important;
    text-align: center;
    padding: 6px 12px !important;
    border: 1px solid #ddd !important;
    background: #f0f0f0;
    color: #121212;
    font-size: 12.5px;
    font-weight: 600;
}

.bg-primary .rank a{
    color: black;
}

.pos1 {
    width: 25px;
    height: 34px;
    position: absolute;
    top: 3px;
    left: -3px;
}

.pos2 {
    position: relative;
    width: 15px;
    height: 15px;
    top: -1px;
}


.adm-off, .atc-off, .ls-off, .ps-off, .cm-off {
    transition: all 0.3s ease-in-out;
    display: none;
}

.ls-off img {
    width: 24px;
    margin: 0 3px;
}

.btn-view {
    background: #0073b7;
    color: #fff;
    padding: 4px 8px;
    margin: 3px 0 0;
    font-size: 13px;
}

.btn-write {
    background: #203040;
    color: #fff;
    padding: 4px 10px;
}

.table td span{ 
    font-size: 13.5px;
    padding: 0 8px;
}


th.adm-off {
    background: #dce6ff;
}

th.atc-off {
    background: #fffbe6;
}

th.ls-off {
    background: #dedede;
}

th.ps-off {
    background: #f7e4f0;
}

th.cm-off {
    background: #eff7e4;
}

.btn-wrap button {
  cursor: pointer;
  transition: 0.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 5px 10px;
  background: #e3e8ed;
  margin: 0 0 0 3px;
}

.bg {
    background: #4382e9 !important;
    color: #fff;
    border: none;
}

.mobile {
    display: none;
}

.pc {
    display: block;
}

/* 1등~3등 */
.point_fisrt {
    color: #fe7271;
}

.point_second {
    color: #68c8f2;
}

.point-third {
    color: #b0d841;
}

/* 감가봉 대상자 */
.point-red {
    color: #fe7271;
}

.point-orange {
    color: #ff954f;
}

.point-brown {
    color: #a6612f;
}

.point-skyblue {
    color: #6fbdea;
}

.point-blue {
    color: #4565a8;
}

.point-green {
    color: #67b75a;
}


.form-control {
    display: block;
    width: 80%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


@media (max-width: 760px) { 
    .mobile {
        display: block;
    }

    .pc {
        display: none;
    }
    
    .mobile .category {
        margin-bottom: 5px;
    }

    .mobile .category2 {
        margin-bottom: 5px;
    }

    .mobile .col-xs-12:nth-of-type(1) select:nth-child(1) {
        width: 100%;
    }

    .mobile .col-xs-12:nth-of-type(1) select:nth-child(2):before {
        content: '';
        display: block;
        clear: both;
    }

    .mobile .category select {
        width: 49%;
        float: left;
    }

    .mobile .category select:nth-child(2) {
        margin: 5px 2% 0 0;
    }

    .mobile .category select:nth-child(3) {
        margin: 5px 0 0;
    }

    .mobile .category input {
        width: 47.5%;
        float: left;
    }

    .mobile .category2 input {
        width: 70%;
        float: left;
    }

    .mobile .category2 button {
        width: 28%;
        float: right;
    }

    .mobile .category span {
        display: inline-block;
        float: left;
        margin: 0 1%;
        line-height: 30px;
    }

    .excel {
        text-align: right;
    }

    .etcbutton button {
        width: 32.5%;
        line-height: 30px;
        margin-bottom: 5px;
    }

    .btn-wrap button {
        margin: 3px;
        min-width: 90px;
    }
    
    .pagination {
        text-align: center;
    }

    .pagination li {
        display: inline-block;
        margin: 0 -2px;
    }

    .pagination li.hidden-xs {
        display: inline-block !important;
    }

    .hidden-xs {
        display: block !important;
    }
    
    .visible-xs {
        display: none !important;
    }

    .table-wrap {
        height: 490px;
    }
}

.post_part {
    background: #dce6ff;
}


/* view-style */
section {
    margin-bottom: 40px;
}

.content-header {display: none;}

.form-group {
    margin-bottom: 0;
}

.panel {
    border-radius: 10px;
    box-shadow: 0 0px 10px #d3dfea;
    border:0;
}

.panel-body {
    padding: 20px;
}

.adlist-box {
    display: block !important;
    margin: 0;
    padding: 0;
}

.adlist-box:after {
    content: '';
    display: block;
    clear: both;
}

.margin {
    margin: 40px -15px 0;
}

.adlist-box .ps-box {
    border-top: 2px solid #333;
    width: 100%;
    border-collapse: collapse;
}

.adlist-box .ps-box th,
.adlist-box .ps-box td {
    text-align: center;
    padding: 5px 12px;
    height: 42px;
    width: 9%;
}

.adlist-box .ps-box th {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #f0f0f0;
    font-size: 15px;
    font-weight: 600;
    width: 6%;
}

.adlist-box .ps-box td {
    border-bottom: 1px solid #ddd;
}

.adlist-box .ps-box .items {
	display: inline-block;
	font-size: 1.3rem;
	color: #888;
	margin-right: 3px;
	margin-top: 4px;
	border-radius: 20px;
	padding: 3px 10px;
	background: #ffe5e5;
}


.adlist-box .ps-box .members {
	display: inline-block;
	font-size: 1.4rem;
	color: #060000;
	margin-right: 3px;
	margin-top: 4px;
	border-radius: 20px;
	padding: 3px 10px;
	background: #ebebeb;
}

#activity .adlist-box {
    max-height: 295px;
    overflow-y: auto;
}

#activity table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-bottom: 1px solid #ddd;
}

.adlist-box .act-box {
    width: 100%;
}

.adlist-box .act-box th,
.adlist-box .act-box td {
    text-align: center;
    padding: 5px 12px;
    height: 42px;
}

.adlist-box .act-box th {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #f0f0f0;
    font-size: 15px;
    font-weight: 600;
    position: sticky;
    height: 42px;
}

.st-one {
    border-top: 2px solid #333;
    position: sticky;
    top: 0;
}

.st-two {
    position: sticky;
    top: 42px;
}

.adlist-box .act-box td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


.adlist-box .act-box:last-child {
    border-right: 0;
}


.adlist-box .ps-box td.img {
    width: 6%;
    min-width: 180px;
    text-align: center;
}

.lis img {
    width: 20px;
}

#mediaTable {
    padding: 10px;
}

#half:after {
    content: '';
    display: block;
    clear:both;
}

#half article {
    width: 49%;
    float: left;
    position: relative;
}

#half article:nth-of-type(2) {
    float: right;
}

#half table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-bottom: 1px solid #ddd;
}

#half .btn-wrap {
    position: absolute;
    right: 15px;
    top: 15px;
}

#half table th {
    border-top: 2px solid #333;
    padding: 8px 10px;
    text-align: center;
    font-size: 15px;
    color: #121212;
    font-weight: 600;
    border-left: 1px solid #ddd;
    background: #f0f0f0;
    height: 42px;
    position: sticky;
    top: 0;
}

#half table th:nth-child(1) {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

#prList th {
    background: #e4e8f4 !important;
}

#grList th {
    background: #fffce9 !important;
}

#tranList th {
    background: #f4e9f0 !important;
}

#evList th {
    background: #eff4e8 !important;
}

#half table td {
    height: 42px;
    padding: 8px 10px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


#half table td:last-child {
    border-right: 0;
}


#half .adlist-box {
    max-height: 295px;
    overflow-y: auto;
}

.adlist-box::-webkit-scrollbar {
    width: 8px;
}

.adlist-box::-webkit-scrollbar-thumb{
    height: 10px;
    background-color: #203040;
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

.adlist-box::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}




	/* 모달 배경 */
	.modal-overlay {
		display: none;
		position: fixed;
		top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;
	}

	/* 모달 창 */
	.modal-container {
		position: fixed;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		width: 500px;
		z-index: 11;
	}

	/* 모달 헤더 */
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;
		font-weight: bold;
	}

	/* 닫기 버튼 */
	.close-modal {
		cursor: pointer;
		font-size: 20px;
		color: red;
	}

	.modal-container .form-group {
		width: 100%;
		margin-bottom: 10px;
	}

	.modal-container .form-group .col-sm-9{
		width: 100%;
		margin-bottom: 10px;
	}

	/* 입력 폼 스타일 */
	.modal-container .form-group label {
		display: block;
		font-weight: bold;
		margin-bottom: 5px;
	}

   .modal-container .form-group input, select, textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	/* 버튼 스타일 */
	.modal-container .btn {
		display: inline-block;
		padding: 4px 6px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}


.tag-container {
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 10px;
}
.tag {
	background-color: #007bff;
	color: white;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 3px;
	font-size: 14px;
}
.tag .close {
	margin-left: 8px;
	cursor: pointer;
}
#searchResults {
	border: 1px solid #ccc;
	max-height: 150px;
	overflow-y: auto;
	display: none;
	position: absolute;
	background: #f7eed2;
	z-index: 1000;
	width: 140px;
	font-size: 14px;
	font-weight: 300;
}
#searchResults div {
	padding: 8px;
	cursor: pointer;
}
#searchResults div:hover {
	background-color: #f0f0f0;
}
input[type="search"] {
	width: 140px;
	padding: 5px;
}