@charset "utf-8";

.datepickers-container {z-index:99999999;}
.btn-write {position:absolute; bottom:2px; right:0; border:1px solid #565656; padding:2px 12px;}
.btn-write span {padding-left:6px;}

/* calender */
.calender-wrap {position:relative; width:100%;}

.calender-wrap .basic-search-bar {position:relative; width:100%; padding:24px 0; background-color:#fafafa; border:1px solid #e5e5e5; display:table; margin-bottom:50px;}
.calender-wrap .basic-search-bar .search-box {position:relative;  display:table-cell; vertical-align:middle; height:auto; margin:0 auto; text-align:center;}
.calender-wrap .basic-search-bar .search-box select {padding-left:10px; width:120px; height:38px; line-height:38px; background-color:#fff; vertical-align:text-top; border:1px solid #a4a4a4;}
.calender-wrap .basic-search-bar .search-box select:nth-child(2) {margin:0 4px 0 6px;}
.calender-wrap .basic-search-bar .search-box button {width:auto; height:38px; padding-left:16px; padding-right:16px; background-color:#595a5e; color:#fff; vertical-align:text-top; box-sizing:inherit; border:1px solid #595a5e; font-weight:400;}
.calender-wrap .basic-search-bar .search-box button span {font-size:2.4rem; line-height:38px;}

@media only screen and (max-width:600px) {
    .calender-wrap .basic-search-bar .search-box select, .calender-wrap .basic-search-bar .search-box input, .calender-wrap .basic-search-bar .search-box button {width:90%; margin-bottom:4px;}
	.calender-wrap .basic-search-bar .search-box select:nth-child(2) {margin:0 0 4px 0;}
    .calender-wrap .basic-search-bar .search-box button {margin-bottom:0;}
}

.calender-box {position:relative; width:100%; margin:20px 0;}
.calender-box h2 {text-align:center; font-weight:600;}
.calender-box .basic-header {position:relative; width:100%;}
.calender-box ul.calender {position:relative; margin:20px 0; border-bottom:1px solid #d9d9d9;}
.calender-box ul.calender > li {position:relative; width:14.28571428571429%; cursor:pointer; float:left; border-top:1px solid #d9d9d9; border-right:1px solid #d9d9d9; margin:0;}

.calender-box ul.calender > li.head .calender-item {position:relative; width:100%; padding:12px 0; text-align:center; font-weight:400; background-color:#fafafa;}
.calender-box ul.calender > li:nth-child(7n-6) {color:#d31045; border-left:1px solid #d9d9d9;}
.calender-box ul.calender > li:nth-child(7n) {color:#106dba;}

.calender-box ul.calender > li.body .calender-item {position:relative; width:100%; height:120px;}
.calender-box ul.calender > li.body .calender-item > span.num {position:absolute; z-index:1; top:6px; left:10px; font-size:1.4rem;}
.calender-box ul.calender > li.body .calender-item > span.week {display:none;}
.calender-box ul.calender > li.body.event {background-color:#fdf4f8;}
.calender-box ul.calender > li.body.current {background-color:#eaf2ef;}

.calender-item ol.l-num {position:relative; padding:34px 4px 0 4px; max-height:120px; overflow:hidden;}
.calender-item ol.l-num li {color:#666666; font-weight:300; font-size:1.2rem; line-height:1.4rem; padding:0 0 0 8px;}
.calender-item ol.l-num li:first-child {padding-top:10px; border-top:1px dotted #a9a9a9;}
.calender-item ol.l-num li:nth-child(n+3) {display:none;}
.calender-item ol.l-num li span.num {margin:0 0 0 -8px;}


@media only screen and (max-width:650px){
	.calender-box h2 {text-align:left;}
	.calender-box ul.calender {overflow-x:auto; white-space:nowrap; border-bottom:0;}
	.calender-box ul.calender > li {border-top:0; border-right:0; text-align:center; background-color:#fafafa;}
	.calender-box ul.calender > li.body .calender-item > span.num {position:relative; top:unset; left:unset; padding:14px 0 6px 0; display:block; font-weight:600;}
	.calender-box ul.calender > li.body .calender-item > span.week {display:block; padding:4px 0 14px 0;  display:block; font-weight:400;}
	.calender-box ul.calender > li.head, .calender-box ul.calender > li.nbsp {display:none;}
	.calender-box ul.calender > li {width:60px; float:unset; display:inline-block;}
	.calender-box ul.calender > li.body .calender-item {height:auto;}
	.calender-box ul.calender > li:nth-child(7n-6){border-left:0;}
	.calender-item ol.l-num {display:none;}
}


.event-list {position:relative; width:100%; margin-top:80px;}
.calender-list-title {position:relative; padding:0 0 0 20px; font-weight:500;}
.calender-list-title span {padding:0 0 0 20px;}
.calender-list-title:before {content:""; position:absolute; top:20%; left:0; width:4px; height:60%; background-color:#377b5c;}
.calender-list-title select {position:absolute; top:-4px; right:0; width:100px;  border:1px solid #a9a9a9; padding:10px 10px;}
.table-wrap {position:relative; margin-top:10px; width:100%;}
.table-wrap table {position:relative; width:100%; overflow:hidden; height:auto !important;  border-top:2px solid #282828; table-layout:fixed;}
.table-wrap table tr{width:100%; position:relative;}
.table-wrap table .table-item {position:relative; width:100%; border-bottom:1px solid #e9e9e9;}
.table-wrap table .table-item .t-left {padding:0 20px 0 0; width:80%; position:relative; float:left;}
.table-wrap table .table-item .t-left .title {font-weight:400; padding:24px 0 6px 0; color:#333; line-height:1.2;}
.table-wrap table .table-item .t-left .content {padding:0 0 20px 0;}
.table-wrap table .table-item .t-left .content span.date {color:#8d9caf; margin-right:20px;}

.table-wrap table .table-item .t-right {float:left; width:20%; position:relative; padding:32.5px 0; text-align:right;}
.table-wrap table .table-item .t-right a {margin-right:10px; display:inline-block; padding:2px 10px; background-color:#595a5e; color:#fff; border:1px solid #595a5e;}

@media only screen and (max-width:650px){
	.table-wrap table .table-item .t-left {width:100%; padding:0;}
	.table-wrap table .table-item .t-right {width:100%; padding:20px 0 20px 0; text-align:left;}
}

@media only screen and (max-width:450px){
	.calender-list-title span {padding:0 0 0 10px;}
	.calender-list-title select {top:-3px; padding:8px 8px; width:80px;}
	.table-wrap {margin-top:12px;}
	
	.table-wrap table .table-item .t-left span:not(.mdi) {display:block;}
}