@import url("/inc/external/selectbox/jquery.selectBox.css");
@import url("./common.css");
@import url("./reward_point.css");
@import url("./image_viewer.css");


/* board_gallery_header */
.board_page .board_gallery_header {
    display: none;
}

.board_page .board_title h1 {
    font-size: 38px;
    color: #282830;
}

.board_page .board_title p {
    margin-top: 10px;
    font-size: 20px;
    color: #d9e0e2;
}

/* board_gallery_search */
.board_page .board_gallery_search {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid #d5d9df;
    text-align: right;
}

/* gallery_container */
.board_page .gallery_container {
    margin-top: 15px;
}

.board_page .gallery_paginator .gallery_container {
    min-height: 100px;
    border-bottom: 1px solid #d5d9df;
}

.board_page .no_writing {
    width: 100%;
    padding: 33px 0;
    font-size: 12px;
    text-align: center;
}

/* box_gallery */
.board_page .box_gallery {
    width: 260px;
}

.board_page .inner_gallery {
    position: relative;
    margin: 0 5px 30px 5px;
}

.board_page .inner_gallery:hover,
.board_page .inner_gallery:focus {
    opacity: 1;
}

.board_page .inner_gallery:hover .txt_subject {
    bottom: 0px;
    opacity: 1;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.board_page .inner_gallery:hover .txt_contents {
    bottom: 0px;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.board_page .inner_gallery:hover .txt_name {
    bottom: 0px;
    opacity: 1;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.board_page .inner_gallery:hover .txt_date {
    bottom: 0px;
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.board_page .txt_group {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: auto;
    padding: 0 20px 20px 0;
    font-size: 10px;
    color: #828282;
    text-align: right;
}

.board_page .txt_cmt,
.board_page .txt_good,
.board_page .txt_hit {
    display: inline-block;
    position: relative;
    bottom: 0px;
    margin-left: 5px;
    line-height: 16px;
    vertical-align: top;
    opacity: 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.board_page .ico_cmt,
.board_page .ico_good,
.board_page .ico_hit {
    display: inline-block;
    width: 12px;
    height: 10px;
    margin-top: 3px;
    margin-right: 5px;
    background-image: url(/inc/template/u200921001001/images/coffee_kit.png);
    background-repeat: no-repeat;
    font-size: 0;
    vertical-align: top;
}

.board_page .ico_cmt {
    width: 10px;
    background-position: -90px -30px;
}

.board_page .ico_good {
    background-position: -110px -30px;
}

.board_page .ico_hit {
    background-position: -130px -30px;
}

.board_page .inner_gallery:hover .txt_cmt {
    bottom: 0px;
    opacity: 1;
    transition-delay: 0.2s;
}

.board_page .inner_gallery:hover .txt_good {
    bottom: 0px;
    opacity: 1;
    transition-delay: 0.2s;
}

.board_page .inner_gallery:hover .txt_hit {
    bottom: 0px;
    opacity: 1;
    transition-delay: 0.2s;
}

.board_page .gallery_article {
    overflow: hidden;
    position: relative;
}

.board_page .wrap_gallery_contents {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.board_page .inner_gallery:hover .wrap_gallery_contents {
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.board_page .gallery_article:hover .wrap_gallery_contents,
.board_page .gallery_article:hover .gallery_contents {
    visibility: visible;
    opacity: 1;
}

.board_page .gallery_contents {
    overflow: hidden;
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: #282830;
    text-align: left;
}

.board_page .gallery_contents a {
    color: inherit;
}

.board_page .thumb_img {
    position: relative;
    width: 100%;
}

.board_page .link_thumb_img .movie::after {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.7;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.board_page .txt_subject {
    overflow: hidden;
    position: relative;
    bottom: -30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.2s ease;
}

.board_page .txt_subject a {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    font-weight: bold;
    font-size: 15px;
    line-height: 24px;
    color: #282830;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board_page .txt_subject a:hover {
    color: #282830;
}

.board_page .txt_contents {
    overflow: hidden;
    position: relative;
    bottom: -30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    -webkit-transition: all 4s ease;
    transition: all 0.2s ease;
}

.board_page .txt_contents br {
    display: none;
}

.board_page .txt_contents a {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    min-height: 18px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board_page .txt_name {
    display: block;
    position: relative;
    bottom: -30px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.2s ease;
}

.board_page .txt_date {
    display: block;
    position: relative;
    bottom: -30px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 15px;
    color: #828282;
    text-align: left;    
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.2s ease;
}

/* admin_mode */
/* design_checkbox */
.board_page .design_checkbox {
    position: absolute;
    left: 20px;
    bottom: -10px;
    z-index: 10;
}

.board_page .design_checkbox span {
    font-size: 0;
    line-height: 1;
}

/* board_gallery_bottom */
.board_page .board_gallery_bottom {
    position: relative;
    width: 100%;
}

.board_page .board_gallery_bottom::after {
    content: '';
    display: block;
    clear: both;
}

.board_page .btn_group {
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d5d9df;
    text-align: left;
}

.board_page .btn_group::after {
    content: '';
    display: table;
    clear: both;
}

.board_page .msg_nocontent {
    display: block;
    width: 88%;
    background: #f1eef0;
    border-top: 1px solid #d5d9df;
    border-left: 1px solid #d5d9df;
    border-bottom: 1px solid #d5d9df;
    font-size: 15px;
    line-height: 38px;
    color: #ccc;
    text-align: center;
}

.board_page .btn_more {
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 1;
    width: 88%;
    border-radius: 3px 0 0 3px;
    font-weight: 400;
    font-size: 15px;
    line-height: 40px;
    color: #fff;
}

.board_page .btn_more::after {
    content: "+";
    display: inline-block;
    margin-top: -8px;
    margin-left: 6px;
    font-weight: bold;
    font-size: 20px;
    font-family: sans-serif;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
}

.board_page .btn_top {
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 2;
    width: 12%;
    border: 1px solid #d5d9df;
    border-radius: 0 3px 3px 0;
    background-color: #fff;
    font-weight: 400;
    font-size: 12px;
    line-height: 38px;
    color: #666;
}

.board_page .btn_top:hover,
.board_page .btn_top:focus {
    border-color: #a1a1a1;
    font-weight: 700;
}

.board_page .btn_write {
    float: right;
    margin-top: 10px;
    padding: 0 45px;
}

.gallery_paginator .btn_write {
    float: none;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 45px;
}

.board_page .opt_board_admin {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 185px;
    margin: 0;
}

/* paginator */
.board_page .board_paginator,
.board_page .mo_board_paginator {
    min-height: 40px;
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
}

.board_page .mo_board_paginator {
    display: none;
}

.board_page .paginator > *,
.board_page .mo_paginator > * {
    display: inline-block;
    width: 20px;
    margin: 0 3px;
    font-size: 15px;
    line-height: 20px;
    vertical-align: middle;
}

.board_page .btn_page {
    width: 20px;
    background: url(/inc/template/u200921001001/images/coffee_kit.png);
    background-repeat: no-repeat;
    text-indent: -999999px;
}

.board_page .link_page {
    background-color: transparent;
}

.board_page .screen_out {
    display: none;
}

.board_page .paginator .npage {
    font-weight: bold;
}

.board_page .first {
    background-position: -90px -4px;
}

.board_page .prev {
    background-position: -110px -4px;
}

.board_page .next {
    background-position: -130px -4px;
}

.board_page .last {
    background-position: -150px -4px;
}


/***** media_queries start *****/
@media screen and (min-width: 1200px) {
    .board_page .box_gallery { width: 33.33333333333333%; }
    .gallery-lg-1 .box_gallery { width: 100%; }
    .gallery-lg-2 .box_gallery { width: 50%; }
    .gallery-lg-3 .box_gallery { width: 33.33333333333333%; }
    .gallery-lg-4 .box_gallery { width: 25%; }
    .gallery-lg-5 .box_gallery { width: 20%; }
    .gallery-lg-6 .box_gallery { width: 16.66666666666667%; }
    .gallery-lg-7 .box_gallery { width: 14.28571428571429%; }
    .gallery-lg-8 .box_gallery { width: 12.5%; }
}

@media screen and (max-width: 1199px) and (min-width: 768px) {
    .board_page .box_gallery { width: 33.33333333333333%; }
    .gallery-sm-1 .box_gallery { width: 100%; }
    .gallery-sm-2 .box_gallery { width: 50%; }
    .gallery-sm-3 .box_gallery { width: 33.33333333333333%; }
    .gallery-sm-4 .box_gallery { width: 25%; }
    .gallery-sm-5 .box_gallery { width: 20%; }
}

@media screen and (max-width: 767px) {
    /* design_checkbox */
    .board_page .design_checkbox {
        top: 10px;
        left: 10px;
    }

    /* gallery_container */
    .board_page .gallery_container {
        border: 0;
    }

    .board_page .box_gallery { width: 100%; }
    .gallery-xs-1 .box_gallery { width: 100%; }
    .gallery-xs-2 .box_gallery { width: 50%; }
    .gallery-xs-3 .box_gallery { width: 33.33333333333333%; }
    .gallery-xs-4 .box_gallery { width: 25%; }

    .board_page .inner_gallery {
        position: relative;
        margin: 0 0 15px 0;
        border-bottom: 1px solid #e6e9ec;
    }

    .board_page .gallery_article {
        height: auto;
        margin-bottom: 0;
    }

    .board_page .wrap_gallery_contents {
        position: relative;
        opacity: 1;
    }

    .board_page .gallery_contents {
        display: block;
        overflow: hidden;
        position: relative;
        padding: 10px;
        background-color: transparent;
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    .board_page .wrap_gallery_contents .gallery_contents.point_bg {
        background-color: transparent;
    }

    .board_page .gallery_article .link_thumb_img {
        height: auto;
        min-height: 250px;
        background-color: transparent;
    }

    .board_page .gallery_article .thumb_img {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        height: 250px;
        min-width: 100%;
        min-height: 250px;
        margin-left: 0;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .board_page .txt_subject,
    .board_page .txt_contents {
        bottom: 0;
        opacity: 1;
    }

    .board_page .txt_group {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        padding: 6px 25px;
        background-color: #f1eef0;
        font-size: 0;
    }

    .board_page .txt_cmt,
    .board_page .txt_good,
    .board_page .txt_hit {
        bottom: 0;
        width: 33.33333333333333%;
        margin: 0;
        font-size: 10px;
        vertical-align: middle;
        opacity: 1;
    }

    .board_page .txt_cmt {
        text-align: left;
    }

    .board_page .txt_good {
        text-align: center;
    }

    .board_page .txt_date,
    .board_page .txt_name {
        display: inline-block;
        position: static;
        color: #999;
        opacity: 1;
    }

    .board_page .txt_name {
        float: right;
    }

    /* board_gallery_bottom */
    .board_page .msg_nocontent {
        width: 75%;
        margin-bottom: 0;
    }

    .board_page .btn_more {
        width: 75%;
    }

    .board_page .btn_top {
        width: 25%;
        background-position: 22% center;
    }

    .board_page .mo_board_paginator {
        display: block;
        min-height: auto;
        margin-bottom: 10px;
        padding: 0;
        text-align: center;
    }

    .board_page .board_paginator {
        display: none;
    }

    .board_page .btn_write {
        position: relative;
        width: 100%;
        margin: 10px 0 0;
    }

    .board_page .opt_board_admin {
        position: relative;
        width: 100%;
        margin: 10px 0 0;
    }

    .board_page div.opt_board_admin {
        position: relative !important;
    }
}

@media screen and (max-width: 400px) {
    .board_page .btn_more {
        background-position: 62% center;
    }
}
/***** media_queries end *****/