movie/resources/sass/desktop/board/index.scss

// 게시판 목록, 사진/동영상, 공지사항, 검색

/* 1150px～1400px 3열 */
figure.figure {
    width: 32%;
}

/* 1400px～1700px 4열 */
@media screen and (min-width: 1400px) {
    figure.figure {
        width: 24.70%;
    }
}
/* 1700px～2200px 6열 */
@media screen and (min-width: 1700px) {
    figure.figure {
        width: 16.44%;
    }
}
/* 2200px～3000px 8열 */
@media screen and (min-width: 2200px) {
    figure.figure {
        width: 12.30%;
    }
}
/* 3000px 12열 */
@media screen and (min-width: 3000px) {
    figure.figure {
        width: 8.21%;
    }
}

.mce-label.mce-autoscroll {overflow: hidden !important;}

#board {
    // 제목
    .board-name {
        font-weight: normal;
        margin-bottom: 0;
    }

    /* 게시판 목록 */
    #boardList {
        box-sizing: border-box;

        .head {
            margin-bottom: 10px;
        }

        .body {
            table {
                margin-left: auto;
                margin-right: auto;
                border: 1px solid #333;

                caption {
                    caption-side: top;
                    color: #bbbbbb;

                    span {
                        font-size: 15px;
                    }

                    select {
                        width: auto;
                        display: inline-block;

                        &:last-child {
                            margin-left: 5px;
                        }
                    }
                }

                thead {
                    tr {
                        background-color: #133a46;
                        border: 1px solid #333;

                        th {
                            text-align: center;
                            border-bottom: none;
                        }
                    }
                }

                tbody {
                    tr {

                        &:hover,
                        &:focus {
                            background-color: #1a1e21;
                        }

                        th, td {
                            text-align: center;
                            vertical-align: middle;
                        }

                        td {
                            font-size: 13px;

                            label {
                                margin-right: 5px;

                                a {
                                    color: #cbd5e0;
                                }
                            }

                            del, a {
                                font-size: 14px;
                                font-weight: normal;
                                color: #b3b3b3;
                            }

                            var {
                                color: #aa0000;
                                font-style: normal;
                                margin-left: 3px;
                                letter-spacing: -1px;
                                vertical-align: middle;
                            }

                            i {
                                color: #cbd5e0;
                                margin-left: 3px;
                                vertical-align: -1px;
                            }

                            span {
                                font-size: 10px;
                                margin-left: 3px;
                                vertical-align: middle;
                            }

                            // 사진/동영상
                            > section {
                                display: flex;
                                flex-wrap: wrap;

                                figure {
                                    box-sizing: border-box;
                                    min-width: 250px;
                                    padding: 20px 10px 20px 10px;
                                    margin: 0;
                                    text-align: center;

                                    a {
                                        display: inline-block;

                                        img {
                                            max-width: 210px;
                                            max-height: 215px;
                                            width: 100%;

                                            &:focus,
                                            &:hover {
                                                filter: drop-shadow(2px 2px 4px #969696);
                                            }
                                        }
                                    }

                                    figcaption {
                                        margin: 5px 0;

                                        h5 a {
                                            display: initial;
                                        }
                                    }

                                    strong {
                                        font-weight: 500;
                                        margin-bottom: 3px;
                                        display: block;
                                    }

                                    ul {
                                        list-style: none;
                                        padding-left: 0;
                                        margin: 0;

                                        li {
                                            display: inline-block;
                                            font-size: 13px;

                                            &:first-child::before {display: none;}
                                            &::before {
                                                content: '';
                                                display: inline-block;
                                                width: 2px;
                                                height: 2px;
                                                margin: 0 5px 4px 2px;
                                                border-radius: 2px;
                                                background-color: #616670;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                tfoot {
                    tr td {
                        border-bottom: none;

                        nav ul {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .foot {
            margin-top: 10px;
        }

        /* 게시판 검색 */
        .search {
            form {
                select {margin-right: 5px;width: auto;display: inline;}
                input {margin-right: 5px;width: auto;display: inline;}
                button {width: auto;vertical-align: initial;}
            }
        }
    }
}