/*-------------------------------------------------------------------
	@컴포넌트 - 모달 팝업
-------------------------------------------------------------------*/
/* default */
.modal-popup {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; transition: visibility 0s 0.4s;}
.modal-popup.on {visibility: visible; transition: visibility 0s 0s;}
.modal-popup .pop-bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}
.modal-popup .pop-bg.no {background-color: transparent;}
.modal-popup .popup {position: absolute; top: 50%; left: 50%; max-width: 800px; width: 100%; padding: 0 20px; transform: translate(-50%, -50%);}
.modal-popup .popup .pop-con {display: block; overflow: hidden; position:relative; border-radius: 10px;}
.modal-popup .popup .pop-con .pop-head {display: block; position: relative; overflow: hidden; height: 50px; padding-left: 20px; padding-right: 60px; border-radius: 15px 15px 0 0; background-color: #3D55A5; color: #ffffff;}
.modal-popup .popup .pop-con .pop-head::after {content:""; display: block; clear: both;}
.modal-popup .popup .pop-con .pop-head .tit {display:block; float:left; line-height: 50px; font-weight: 700; font-size: 1.0625rem; color: inherit;}
.modal-popup .popup .pop-con .btn-close {display:block; position: absolute; top: 12px; right: 20px; width: 26px; height: 26px; font-size: 0; background-color: transparent;}
.modal-popup .popup .pop-con .btn-close::before,
.modal-popup .popup .pop-con .btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 4px; background-color: #ffffff;}
.modal-popup .popup .pop-con .btn-close::before {transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; transition: transform-origin 0.3s;}
.modal-popup .popup .pop-con .btn-close::after {transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; transition: transform 0.3s;}

/* body */
.modal-popup .popup .pop-con .pop-body {overflow-x:hidden; overflow-y: auto; max-height: calc(100vh - 50px); padding: 20px; background-color: #ffffff;}
.modal-popup .popup .pop-con .pop-body:focus {border:3px solid #000}

/* size */
.modal-popup.xxl .popup {max-width: 1400px;}
.modal-popup.xl .popup {max-width: 1200px;}
.modal-popup.lg .popup {max-width: 1024px;}
.modal-popup.sm .popup {max-width: 600px;}

/* color */
.modal-popup.type-a .popup .pop-con .pop-head {background-color: #3D55A5; color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head {background-color: #4C72BD; color: #ffffff;}
.modal-popup.type-c .popup .pop-con .pop-head {background-color: #0775DB; color: #ffffff;}
.modal-popup.type-d .popup .pop-con .pop-head {background-color: #ffc107; color: #000000;}
.modal-popup.type-e .popup .pop-con .pop-head {background-color: #0dcaf0; color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head {background-color: #6667ab; color: #ffffff;}

.modal-popup.type-a .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-a .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-b .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-c .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-c .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-d .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-d .popup .pop-con .pop-head .btn-close::after {background-color: #000000;}
.modal-popup.type-e .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-e .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-f .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}

/* interaction */
.modal-popup .pop-bg {background-color: rgba(0,0,0,0); transition: background 0.4s;}
.modal-popup.on .pop-bg {background-color: rgba(0,0,0,0.5);}
.modal-popup .popup .pop-con .pop-head .btn-close::before,
.modal-popup .popup .pop-con .pop-head .btn-close::after {transition: transform 0.3s;}
.modal-popup .popup .pop-con .pop-head .btn-close:focus::before,
.modal-popup .popup .pop-con .pop-head .btn-close:hover::before {transform: translate(-50%, -50%) rotate(30deg);}
.modal-popup .popup .pop-con .pop-head .btn-close:focus::after,
.modal-popup .popup .pop-con .pop-head .btn-close:hover::after {transform: translate(-50%, -50%) rotate(-30deg);}
.modal-popup .popup .pop-con {top: 55%; opacity:0; transition: top 0.4s, opacity 0.4s;}
.modal-popup.on .popup .pop-con {top: 50%; opacity:1;}
.modal-popup.on .popup .pop-con:focus {border:3px solid #000;}

/*-------------------------------------------------------------------
	분류그룹 : 기본 게시판 스킨 > 목록페이지 > 게시판 리스트 테이블
-------------------------------------------------------------------*/
#container .bod-table-list {width:100%;}
#container .bod-table-list caption {overflow:hidden; height:0; width:0; text-indent:-9999px;}
#container .bod-table-list caption span {position:absolute; top:-1000px;}
#container .bod-table-list th {padding:15px 10px;  border-width:1px 0; border-style:solid;border-color:#000;color:#000000;font-weight:bold;text-align:center;word-break: break-all;}
#container .bod-table-list th.tit {width:45%;}
#container .bod-table-list tr th.bor {border-width:0 0 1px 1px;}
#container .bod-table-list td {padding:15px 10px;  border-width:1px 0; border-style:solid; border-color:#E9E9E9;  color:#000000;  text-align:center;  word-break: break-all; }
#container .bod-table-list td.num .notice {display:inline-block; width:16px; height:14px; vertical-align: middle;}
#container .bod-table-list td.tit {width:50%; padding:15px 25px; text-align: left;}
#container .bod-table-list td.tit .link-t {display:block;}
#container .bod-table-list td.tit .link-t .tit {display:inline; vertical-align: middle; max-width:95%; color:#000000;}
#container .bod-table-list td.tit .link-t .new {display: inline-block; vertical-align: middle;}
#container .bod-table-list td.tit .link-t .new img {display:block;}
#container .bod-table-list td.ts {word-break:break-all;}
#container .bod-table-list td.t-date {white-space:nowrap;}


@media screen and (max-width: 800px) {
    .modal-popup .popup {padding: 0 15px;}
}
@media screen and (max-width: 600px) {
    .modal-popup .popup {padding: 0;}
}