/* common */
.back{background: url('../img/bg.jpg') no-repeat center; background-size: cover; width: 100%;height: 100%;}
.container{padding: 15px 0 34px;}
.contents{background-color: #EFF4F8;width: 720px;border-radius: 30px;box-shadow: 14px 21px 33px #CDCDD696;margin: 0 auto;}
.inner{padding: 0 48px;}
.tit-wrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;}
.tit-wrap h4.tit{font-size: 27px;line-height: 33px;font-family: 'paybooc';font-weight: 800;}
.tit-wrap button.view-btn{background-color: #EFF4F8;border-radius: 17px;width: 109px;height: 33px;font-size: 16px;color: #7E88A6;font-family: 'Roboto';font-weight: 400;}
.tit-wrap button.view-btn:hover{background-color: #7E88A6;color: #fff;}


/* header */
header.header{padding: 75px 0 42px}
header.header .inner{display: flex;align-items: flex-end;justify-content: space-between;}
header.header ul.date-wrap{display: flex;align-items: flex-end;justify-content: flex-end;}
header.header ul.date-wrap li.date{background-color: #1E2A52;border-radius: 8px;font-size: 25px;line-height: 33px;font-weight: 500; color: #fff;padding: 8px 17px 10px;font-family: 'Roboto Mono';}
header.header ul.date-wrap li.point{margin: 0 5px;font-size: 35px;line-height: 41px;}


/* footer */
footer.footer{background-color: #292929;border-radius: 0px 0px 30px 30px;padding: 45px 0 56px;}
footer.footer h2{margin-bottom: 35px;}
footer.footer .inner{display: flex;flex-direction: column;align-items: center;justify-content: center;}
footer.footer ul li{font-size: 15px;line-height: 31px;color: #ABABAB;margin-right: 12px;font-weight: 500;}
footer.footer ul li:last-child{margin-right: 0;}
footer.footer ul li span{color: #D9D9D9;}
footer.footer ul.f-flex{display: flex;align-items: center;justify-content: center; padding-left: 0;}
footer.footer p.copy{font-size: 14px;line-height: 31px;color: #8E8E8E;margin-top: 36px;font-weight: 500;}


.modalSearch{width:100%;max-width:650px; }
.modalSearch .msForm{width:100%;display:flex;align-items:center;margin-bottom:15px;}
.modalSearch .msForm input[type='text'] ,
.modalSearch .msForm button,
.modalSearch .msForm select{width:auto;display:inline-block;height:40px;border:1px solid #aaa;}
.modalSearch .msForm select{margin-right:5px;padding:0px 5px;}
.modalSearch .msForm input[type='text']{padding:0px 10px;flex:1}
.modalSearch .msForm button{margin-left:5px;width:120px;background-color:#333;color:white;font-size:15px;}

.modalSearch .msList{width:100%;height:calc(80vh - 100px);overflow-y:scroll;}
.modalSearch .msList ul{padding:0px;margin:0px;border-top:2px solid #aaa;}
.modalSearch .msList ul li{display:flex;align-items:center;padding:5px;border-bottom:1px solid #ccc;}
.modalSearch .msList ul li.empty{padding:15px 0px;text-align:center;}
.modalSearch .msList ul li span{flex:1;display:inline-block;font-size:15px;text-align:left;line-height:20px;}
.modalSearch .msList ul li button{padding:0px 10px;height:35px;background-color:cadetblue;color:white;}

.modal.fade {
  background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
  opacity: 0;
}

.table_list tr.text td{padding:15px 3px;font-size:15px;}
.table_list tr.text td.wr_subject{padding-left:15px;text-align:left;}

.table_form.table_bbs tr td.head{width:150px;}
.table_form.table_bbs tr td{padding:8px 10px;vertical-align:middle;}
.table_form.table_bbs tr td .wr_content{width:100%;height:250px;border:1px solid #ccc;padding:15px;}
.table_form.table_bbs tr td.file{padding:12px 10px;}
.table_form.table_bbs tr td.onlytext{padding:15px 10px;}
@media (max-width: 720px) {
    footer.footer ul.f-flex{flex-direction: column;}

    .container {padding: 25px 0 25px;}
    .contents{width: 600px;}
}

@media (max-width: 600px) {
    header.header h2 img{width: 110px;}
    header.header ul.date-wrap li.date{font-size: 18px;line-height: 19px; padding: 8px 10px;}
    footer.footer ul li{font-size: 12px;line-height: 27px;}
    footer.footer p.copy{font-size: 11px;margin-top: 27px;}

    .contents{width: 500px;}
    .inner{padding: 0 30px;}

    .tit-wrap{margin-bottom: 10px;}
    .tit-wrap h4.tit{font-size: 21px;}
    .tit-wrap button.view-btn{font-size: 14px;width: 95px;height: 30px;}
}

@media (max-width: 500px) {
    header.header{padding: 53px 0 42px;}
    header.header ul.date-wrap li.date{font-size: 15px;padding: 4px 8px;}
    header.header ul.date-wrap li.point{margin: 0 2px;font-size: 26px;line-height: 28px;}

    .inner{padding: 0 20px;}
    .contents{width: 400px;}
}

@media (max-width: 420px) {

    .contents{width: 350px;}
    .inner{padding: 0 15px;}
    .tit-wrap h4.tit{font-size: 18px;line-height: 27px;}
    .tit-wrap button.view-btn {font-size: 13px;width: 85px;height: 28px;}
}

@media (max-width: 390px) {
    .contents{width: 330px;}
}