@charset "utf-8";

.contents .inner .title h2::before {
    background: url("../images/flower_purple.png")no-repeat center/contain;
}
body {
    font-size: 15px;
    font-weight: 300;
    color: #666;
    line-height: 1.2;
}
/* notice */
.noticeList {
    padding-bottom: 50px;
    overflow: hidden;
}
.noticeList .search {
    height:50px;
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
}
.noticeList .search select {
    float: left;
    width:120px; height:100%;
    font-size: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 10px 0 0 10px;
    background: #fff url("../images/arrow_down.png")no-repeat center right/20% !important;
    padding: 6px 12px;
    color:#666;
    cursor:pointer;
    appearance: none;
}
.noticeList .search select:focus {
    outline: none;
    border: 1px solid #ccc;
}
.noticeList .search select option {
    padding: 6px 12px;
    color:#666;
}
.noticeList .search input {
    float: left;
    height:100%;
    border: 1px solid #e5e5e5;
    border-left: 0;
    border-right: 0;
    padding: 6px 12px;
    width: calc(100% - 120px - 80px);
}
.noticeList .search input:focus {
    outline: none;
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
}
.noticeList .search button {
    float: left;
    width: 80px; height:100%;
    border-radius: 0 10px 10px 0;
    border: 1px solid #939eb5;
    background-color: #939eb5;
    font-size: 15px;
    color: #fff;
    padding: 12px 20px;
}
.noticeList .search button:hover {
    background-color: #5e697e;
}
.noticeList .board .pagehead {
    position: relative;
    margin-top: 30px;
}
.noticeList .board .pagehead .btn {
    position: absolute;
    bottom:-5px; right:0;
}
.noticeList .board span>span {color: red;}
.noticeList .board .itemWrap {
    margin-top: 20px;
    border: 1px solid #848b99;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
}
.noticeList .board .itemWrap .item {
    padding: 25px 0;
    line-height: 1.6;
    overflow: hidden;
    transition: all .2s linear;
}
.noticeList .board .itemWrap .item+.item {
    border-top: 1px dashed #ddd;
}
.noticeList .board .itemWrap .notice {
    background-color: #f2f3f6;
    color: #000;
}
.noticeList .board .itemWrap .item:hover {
    background-color: #f6f7f9;
}
.noticeList .board .itemWrap li {
    float:left;
    text-align: center;
    font-size: 14px;
    vertical-align: top;
}
.noticeList .board .itemWrap .num {
    width: 60px;
}
.noticeList .board .itemWrap .subject {
    width: calc(100% - 440px);
    text-align: left;
}
.noticeList .board .itemWrap .name {
    width: 200px;
}
.noticeList .board .itemWrap .date {
    width: 100px;
}
.noticeList .board .itemWrap .hit {
    width: 80px;
}
.btns {
    position: relative;
    margin-top: 30px;
    text-align: center;
}
.btns .page {
    padding: 0 10px;
    letter-spacing: 5px;
    color: #939eb5;
    font-size: 14px;
    font-weight: 500;
}
.btn {
    display: inline-block;
    padding: 12px 25px;
    line-height: 1;
    color: #5e697e;
    font-size: 14px;
    border: 1px solid #939eb5;
    border-radius: 100px;
    background-color: #fff;
    font-weight: 500;
}
.btn:hover {
    background-color: #5e697e;
    color: #fff;
}
.btns .write {
    position: absolute;
    top:0; right:0;
}
/* noticeView */
.noticeView {
    padding-bottom: 50px;
    overflow: hidden;
}
.noticeView header {
    padding-top: 30px;
    border-top: 1px solid #ddd;
}
.noticeView header h3 {
    color:#000;
    font-size: 27px;
    font-weight: 300;
    line-height: 1.6;
}
.noticeView header .state {
    position: relative;
    padding: 20px 35px;
    border-bottom: 1px dashed #ddd;
}
.noticeView header .state span {
    color:#000;
    padding: 0 10px;
}
.noticeView header .state::before {
    content: "";
    position: absolute;
    left: 0; top: 10px;
    display: block;
    width: 35px;
    height: 35px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #f5f5f5 url("../images/login_id.svg")no-repeat center/50%;
}
.noticeView article {
    padding: 40px 0;
    border-bottom: 1px dashed #ddd;
}
.noticeView article p {
    padding-top: 20px;
    font-size: 14px;
    line-height: 1.8;
}
.noticeView .files {
    padding: 30px 0;
    border-bottom: 1px dashed #ddd;
}
.noticeView .files p {
    color:#000;
    font-weight: 500;
    padding-bottom: 10px;
}
.noticeView .files a {
    display: inline-block;
    font-size: 13px;
    color: #888;
    padding: 8px 25px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background: url("../images/icon_download.svg")no-repeat 90% center/7px;
}
.noticeView .files a:nth-child(2) {
    padding-right: 36px;
}
/* event */
.eventList header {
    position: relative;
    width:100%;
    text-align: center;
    margin-bottom: 20px;
}
.eventList header span {
    font-size: 27px;
    color: #000;
    font-weight: 500;
    padding: 0 10px;
    vertical-align: middle;
}
.eventList header .write {
    position: absolute;
    top:0; right:0;
}
.eventList table {
    /* border: 1px solid #ddd; */
    border-collapse: collapse;
    width: 100%;
    height: 70vh;
    table-layout:fixed;
}
.eventList table .sun { color:red; }
.eventList table .sat { color:blue;}
.eventList table .next {
    opacity: 0.5;
}
.eventList table thead {
    height: 5vh;
    border: 1px solid #ddd;
    background: #edf0f4;
}
.eventList table thead th {
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: 300;
    color: #000;
}
.eventList table tbody {
    vertical-align: top;
}
.eventList table tbody td {
    border: 1px solid #ddd;
    padding: 15px;
    position: relative;
}
.eventList table tbody td a {
    position: absolute;
    top:0; left:0;
    font-size: 14px;
    display: block;
    width: 100%;
    height: 100%;
    background: #f4f6fb;
    padding:15px;
    border: 2px solid #fff;
}
.eventList table tbody td a:hover {
    background-color: #e8eef7;
}
.eventList table tbody td a span {
    position: absolute;
    top:12px; right:15px;
    font-size: 13px;
    padding: 6px 12px;
    color:white;
    background-color: #8ec58c;
    border-radius: 50px;
}
.eventList table tbody td a p {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 50px;
}
/* foodList */
.foodList {
    overflow: hidden;
    padding-bottom: 50px;
}
.foodList header {
    position: relative;
    width: 100%;
    height: 80px;
    text-align: center;
}
.foodList header h2 {
    position: relative;
    display: inline-block;
    font-size: 28px;
    font-weight: 500;
    color: #000;
    padding-bottom: 20px;
}
.foodList header h2::before {
    position: absolute;
    top:15px; left:-30px;
    content:'';
    display: block;
    background-color: #ffb5b5;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.foodList header h2::after {
    position: absolute;
    top:15px; right:-30px;
    content:'';
    display: block;
    background-color: #ffb5b5;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.foodList header .btn {
    position: absolute;
    top:0; right:0;
}
.foodList .table {
    width: 100%;
    height: 80vh;
    background: url("../images/food_list.png")no-repeat center/contain;
}
/* breakpoint 991px - mobile size */
@media screen and (max-width:991px){
    /* noticeList */
    .noticeList {
        padding-bottom: 0;
    }
    .noticeList .board .itemWrap .item {
        padding: 20px 0;
        color: #888;
    }
    .noticeList .board .itemWrap .item .name {
        clear: both;
        padding-right: 10px;
        width: 50px;
    }
    .noticeList .board .itemWrap .item .date {
        padding-right: 10px;
        width: 80px;
    }
    .noticeList .board .itemWrap li {
        text-align: left;
        font-size: 13px;
    }
    .noticeList .board .itemWrap .notice {
        background-color: #fff;
        color: #888;
    }
    .noticeList .board .itemWrap .notice .num {
        display: block;
    }
    .noticeList .board .itemWrap .num {
        text-align: left;
        width: 100%;
        color:red;
        font-size: 16px;
        font-weight: 500;
        display: none;
    }
    .noticeList .board .itemWrap .subject {
        width: 100%;
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 5px;
    }
    .noticeList .search select {
        width: 80px;
        font-size: 14px;
    }
    .noticeList .search input {
        width: calc(100% - 80px - 50px);
    }
    .noticeList .search button {
        float: right;
        width: 50px;
        font-size: 14px;
        padding: 12px 0;
    }
    /* noticeView */
    .noticeView {
        padding-bottom: 0;
    }
    .noticeView header {
        padding-top: 0;
        border-top: 0;
    }
    .noticeView header h3 {
        font-size: 22px;
        font-weight: 500;
        line-height: 1.2;
    }
    .noticeView header .state::before {
        width: 30px;
        height: 30px;
    }
    .noticeView header .state {
        padding: 20px 40px;
        font-size: 13px;
    }
    .noticeView header .state span {
        padding: 0 5px;
    }
    .noticeView .files a {
        margin-bottom: 5px;
    }
    /* event */
    .eventList header {
        text-align: left;
    }
    .eventList header span {
        display: inline-block;
        font-size: 18px;
        padding: 0 5px;
        vertical-align: middle;
    }
    .eventList table tbody td {
        text-align: center;
    }
    .eventList table tbody td a p {
        display: none;
    }
    .eventList table tbody td a span {
        top: 70%; right: 0;
        font-size: 11px;
        padding: 0;
        width: 100%; height: 25px;
        line-height: 25px;
    }
    
    /* 상단, 하단버튼 */
    .btn {
        padding: 10px 17px;
        font-size: 13px;
    }
    .btns .btn {
        padding: 12px 20px;
        font-size: 13px;
    }
    .btns .page {
        padding: 0 5px;
        font-size: 13px;
    }
    .btns .write {
        position: static;
        float:right;
    }
}