﻿@charset 'utf-8';

h4.bul {
    min-height: 25px;
    background: none;
    font-size: 30px;
    color: #111;
    line-height: 1.2;
    text-align: center;
    font-weight: normal;
    width: fit-content;
    margin: 0 auto;
    padding: 0;
}

.community h4.bul {
    border-bottom: 1px solid;
}

.best-screenshot .new {
    padding: 0;
}
/* thumnail list */
.thum-list {
}

    .thum-list ul {
        padding-top: 30px;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        grid-gap: 80px 30px;
        margin: 0;
        border-bottom: 1px solid #DBDBDB;
        padding-bottom: 70px;
    }

.user-screenshot ul, .hotvideo ul {
    border-bottom: none;
    padding-bottom: 35px;
}

.thum-list ul li {
    overflow: hidden;
    _display: inline;
    width: 350px;
    height: 280px;
}

    .thum-list ul li > div {
        margin-top: 10px;
    }

.thum-list ul .thumb {
    position: relative;
    width: 100%;
    height: 230px;
    margin-top: 0;
    /*background: url('../../_images/us/media/thum_bg.gif') no-repeat scroll left top;*/
}

    .thum-list ul .thumb img {
        width: 100%
    }

    .thum-list ul .thumb .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

.thum-list ul .subj {
    height: 21px;
    padding-top: 8px;
    color: #dd7800;
    text-align: center;
    font-weight: bold;
    word-break: break-all;
    word-wrap: break-word;
}

    .thum-list ul .subj a, .thum-list ul .subj a:link, .thum-list ul .subj a:hover, .thum-list ul .subj a:active, .thum-list ul .subj a:visited {
        color: #fff;
        text-decoration: none;
        line-height: 1.2;
        font-size: 18px;
    }

.thum-list ul li.new .thumb {
    /*background-image: url('../../_images/us/media/thum_new_bg.gif');*/
}

.thum-list ul li.new .subj a {
    color: #fff;
    font-size: 18px;
}

.thum-list ul li.nodata {
    width: 600px;
    height: 80px;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.fb-share-button {
    position: absolute !important;
    z-index: 1;
    background: #1877F2;
    right: 20px;
    top: 14px;
    width: 87px;
    height: 28px;
    border-radius: 17px;
    overflow: hidden;
    -webkit-box-shadow: 4px 4px 15px 5px rgba(0,0,0,0.4);
    box-shadow: 4px 4px 15px 5px rgba(0,0,0,0.4);
}

.fb-share-button-view {
    background: #1877F2;
    width: 76px;
    height: 22px;
    border-radius: 17px;
    overflow: hidden;
    position: unset !important;
    box-shadow: none;
}


.fb-share-button span, .fb-share-button span iframe {
    width: 100% !important;
    height: 100% !important;
}

.fb-share-button #facebook inlineBlock {
    display: block !important;
    justify-content: center;
    width: 100%;
}

.custom ._2tga._8j9v {
    height: 33px !important;
    background: none !important;
}

    .custom ._2tga._8j9v > div {
        display: flex;
        height: 33px;
        align-items: center;
        justify-content: center;
    }

/*#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:88px; height:36px; background:url('../../_images/us/media/gallery_controls.gif') no-repeat 0 0;}
    #cboxTopCenter{height:36px; background:url('../../_images/us/media/gallery_border.gif') repeat-x top left;}
    #cboxTopRight{width:88px; height:36px; background:url('../../_images/us/media/gallery_controls.gif') no-repeat -136px 0;}
    #cboxBottomLeft{width:88px; height:25px; background:url('../../_images/us/media/gallery_controls.gif') no-repeat 0 -218px;}
    #cboxBottomCenter{height:25px; background:url('../../_images/us/media/gallery_border.gif') repeat-x bottom left;}
    #cboxBottomRight{width:88px; height:25px; background:url('../../_images/us/media/gallery_controls.gif') no-repeat -136px -218px;}
    #cboxMiddleLeft{width:88px; background:url('../../_images/us/media/gallery_controls.gif') repeat-y -236px 0;}
    #cboxMiddleRight{width:88px; background:url('../../_images/us/media/gallery_controls.gif') repeat-y -372px 0;}
    #cboxContent{margin-top:0; background:#FFECBB;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{padding-bottom:25px; border-width:0; background:#FFECBB;}
        #cboxTitle{top:auto; width:100%; min-height:20px; _height:20px; margin-top:-25px; padding:10px 0 0; background-color:#FFECBB; color:#683E26; font-weight:bold; line-height:1.2; text-align:center; zoom:1;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; display:none !important;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:-90px; margin-top:-60px; background:url('../../_images/us/media/gallery_prev.gif') no-repeat left top; width:45px; height:120px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-45px 0;}
        #cboxNext{position:absolute; top:50%; right:-90px; margin-top:-60px; background:url('../../_images/us/media/gallery_next.gif') no-repeat left top; width:45px; height:120px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-45px 0;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; top:-36px; right:-12px; display:block; background:url('../../_images/us/media/gallery_close.gif') no-repeat top center; width:90px; height:21px; text-indent:-9999px;}*
        #cboxClose.hover{background-position:bottom center;}*/
/* BBS -View Poll */
.view-poll .info {
    display:flex;
    justify-content:space-between;
    padding: 10px 15px;
    box-sizing:border-box;
    border-bottom:2px solid #000;
}
.view-poll .info .title_area h1 {
    font-size:18px;
    font-weight:900;
}
.view-poll .bold {
    font-weight:900;
    margin-right:10px;
}
.view-poll .info .title_area, .view-poll .info .date_voted_wrap {
    display:flex;
    gap: 30px;
    align-items:center;
}
.bbs .view-poll .closed, .bbs .view .closed span {
    margin-bottom:0;
}
.poll-area {
    margin-top:30px;
}
.bbs .subj_ul {
    border-top: 2px solid #301100;
    border-bottom: 1px solid #eee;
}
.bbs .subj_ul li:first-child {
    background: #F6F6F6;
}
.bbs .subj_list {
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.bbs .subj_list .list_left {
    display:flex;
    align-items:center;
    gap: 30px;
}
.bbs .subj_list .list_left .question {
    color:#dd7800;
    margin-right:5px;
}
.bbs .view-poll .subj .close .mode {
    float: left;
    _display: inline;
    font-size: 8px !important;
}

.bbs .view-poll .subj .close strong {
    float: left;
    display: inline-block;
    width: 480px;
}

    .bbs .view-poll .subj .close strong em {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

.bbs .view-poll th.regdate {
    text-align: left;
}

.bbs .view-poll .info th, .bbs .view-poll .info td {
    border-bottom: none;
}

.bbs .view-poll .mode span {
    /*width: 68px;*/
    font-family: Arial;
    font-size: 8px !important;
    margin-top:0;
}

/* Poll */
.poll-area {
    position: relative;
    padding-bottom: 10px;
    
}

/*.poll-area div {
    min-height: 200px;
}*/

.poll h4 {
    min-height: 78px;
    _height: 78px;
    margin: 5px;
    *margin-top: 0;
    padding: 36px 0 0 20px;
    background: url('../../_images/us/media/poll_title_bg.gif') no-repeat left 5px;
}

.poll ul {
    padding: 12px 170px 0 13px;
}

.poll ul li {
    line-height: 25px;
}

.poll ul li input {
    vertical-align: middle;
    cursor:pointer;
}

.poll ul li label {
    cursor:pointer;
    margin-left:10px;
    vertical-align: middle;
    font-weight: bold;
    color: #dd7800;
}

.poll .character {
    display: block;
    position: absolute;
    right: 15px;
    _right: 30px;
    top: 22px;
}

.poll .character-top {
    top: 132px;
}

.poll .poll-gauge {
    padding: 15px 20px 5px;
}

.poll .poll-gauge li {
    display:flex;
    gap: 15px;
    padding: 5px 0;
    height: auto;
    color: #dd7800;
    vertical-align: middle;
}

.poll .poll-gauge li.first {
    border-top: none;
}

.poll .poll-gauge li strong {
    display: inline-block;
    width:200px;
    margin-right: -3px;
    line-height: 1.2;
    vertical-align: middle;
}

.poll .poll-gauge li span.num {
    display: inline-block;
    width: 350px;
    height: 10px;
    background: url('../../_images/us/media/poll_num_bg.gif') no-repeat left top;
    font-size: 0;
}

.poll .poll-gauge li span.num span {
    display: inline-block;
    height: 10px;
    background: url('../../_images/us/media/poll_num_bg.gif') no-repeat left -10px;
}

.poll .poll-gauge li span.num span span {
    float: right;
    position: static;
    
    background: url('../../_images/us/media/poll_num_bg.gif') no-repeat right -10px;
}

.poll .poll-gauge li em {
    display: inline-block;
    margin-left: -3px;
    width: 50px;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
}


.poll .thumbnail {
    margin: 20px 0 0 -12px;
    padding: 0;
    *zoom: 1;
}

.poll .thumbnail li {
    line-height: normal;
    _display: inline;
    float: left;
    width: 172px;
    margin-left: 27px;
    text-align: center;
}

.poll .thumbnail li label {
    display: inline-block;
    width: 172px;
    height: 82px;
    background: url('../../_images/us/media/poll_thumb_bg.gif') no-repeat left top;
    cursor: pointer;
}

.poll .thumbnail li input {
    height: 25px;
    padding-top: 7px;
}

.tab-area {
    margin: 0;
    padding: 0;
    margin-bottom: 47px;
    margin-top: 80px;
    grid-gap: 7px;
}

@media(max-width:1230px) {
    .view-poll .info {
        flex-direction:column;
        gap:10px;
    }
    .view-poll .info {
        font-size:12px;
    }
}

/* User Screenshot - list */
.user-screenshot {
    margin-bottom: 0;
    padding-bottom: 0;
}


    .user-screenshot ul li, .best-screenshot ul li {
        font-size: 11px;
        width: 350px;
        background: none;
        position: relative;
    }

        .user-screenshot ul li, .best-screenshot ul li button {
            font-size: 11px;
        }

    .user-screenshot ul .subj, .best-screenshot ul .subj, .hotvideo ul .subj {
        height: 68px;
        margin-top: -68px;
        padding-top: 29px;
        padding-left: 20px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
        width: 100%;
        z-index: 1;
        position: relative;
        color: #fff;
        background: background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    }

    .user-screenshot .info, .best-screenshot .info {
        margin: 10px 0;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

        .user-screenshot .info, .user-screenshot .info > div, .best-screenshot .info > div {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: center;
        }


    .user-screenshot .view, .best-screenshot .nick-name, .thum-list .nick-name {
        font-size: 16px;
        color: #bababb;
    }

    .user-screenshot .view, .nick-name-ic {
        /*background: url('../../_images/us/media/icon_nickname.gif') no-repeat right center;*/
    }

    /*.user-screenshot .nick-name, .best-screenshot .nick-name { display:inline-block; width:auto !important;font-size:14px; padding-left:15px; background:url('../../_images/us/media/icon_nickname.gif') no-repeat left top; line-height:1.2; }*/
    .user-screenshot .view, .best-screenshot .view {
        display: inline-flex;
        font-size: 16px;
        color: rgba(0,0,0,0.6);
        width: auto;
        align-items: center;
    }

.ic-view, .ic-heart {
    background: url('../../_images/us/media/eye.svg') no-repeat center;
    display: inline-block;
    width: 23px;
    height: 19px;
    margin-right: 5px;
}

.ic-heart {
    cursor: pointer;
}

.view .ic-heart {
    cursor: unset;
}

.ic-heart {
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FF4A20' class='bi bi-suit-heart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z'/%3E%3C/svg%3E");
     background-position: bottom;
    */
    transition: all 0.3s;
    background: url('../../_images/us/media/ic-heart-red.svg') no-repeat left top;
}

.ic-heart-red {
    background: url('../../_images/us/media/ic-heart-red.svg') no-repeat center;
}
/*.ic-heart:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fc0373' class='bi bi-suit-heart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z'/%3E%3C/svg%3E");
  
        background: url('../../_images/us/media/ic-heart-red.svg') no-repeat center;
    }*/
.ic-heart.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fc0373' class='bi bi-suit-heart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z'/%3E%3C/svg%3E");
}



.user-screenshot .goods, .best-screenshot .goods {
    display: inline-flex;
    font-size: 16px;
    color: rgba(0,0,0,0.6);
    align-items: center;
}

/* DMO YouTube */
.youtube-text {
    padding-top: 0px;
    font-weight: normal;
    display: block;
    margin: 30px 0;
}

.bestvideo {
    overflow: hidden;
}

.bestvideo_con {
    padding-left: 22px;
}

.bestvideo_con_play {
    padding: 5px;
    /*background: url('../../_images/us/media/youtube_img_bg.png') no-repeat;*/
}

/*.hotvideo {
    margin-bottom: 20px;
    padding-bottom: 7px;
    color: #FF9C20;
}*/

.hotvideo ul li {
    height: 280px;
    font-size: 11px;
    position: relative;
}

/*.hotvideo ul .subj {
        height: 19px;
        padding-top: 4px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
    }*/

.hotvideo .info {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 10px;
    margin-top: 0px;
}

    .hotvideo .info .view .ic-view {
        display: inline-block;
    }

.hotvideo .nick-name {
    font-size: 16px;
    color: rgba(0,0,0,0.6);
}



.hotvideo .nick-name-ic {
    width: 12px;
    height: 12px;
    background: url('../../_images/us/media/icon_nickname.gif') no-repeat right center;
}

.hotvideo .view {
    /*display: inline-block;
        width: auto;
        padding-left: 21px;
        background: url('../../_images/us/media/icon_view.gif') no-repeat left top;
        background-position: 0 2px;
            ;*/
    color: rgba(0,0,0,0.8);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank_icon {
    position: absolute;
    right: 8px;
    top: 0;
}

/* thumnail list */
.thum-list2 {
    margin-bottom: 30px;
    padding-bottom: 14px;
    background: url('../../_images/us/common/bbs_end_bg.gif') no-repeat scroll left bottom;
}

    .thum-list2 ul {
        margin-left: -21px;
        padding-top: 20px;
        background: url('../../_images/us/common/bbs_end_bg.gif') no-repeat scroll 21px top;
        *zoom: 1;
    }

        .thum-list2 ul li {
            overflow: hidden;
            float: left;
            _display: inline;
            width: 186px;
            height: 171px;
            margin-left: 21px;
        }

        .thum-list2 ul .thumb {
            position: relative;
            width: 175px;
            height: 130px;
            padding: 6px 6px 5px 5px;
            background: url('../../_images/us/media/thum_bg.gif') no-repeat scroll left top;
        }

            .thum-list2 ul .thumb .icon {
                position: absolute;
                right: 0;
                top: 0;
            }

        .thum-list2 ul .subj {
            height: 21px;
            padding-top: 8px;
            color: #dd7800;
            text-align: center;
            font-weight: bold;
            word-break: break-all;
            word-wrap: break-word;
        }

            .thum-list2 ul .subj a, .thum-list2 ul .subj a:link, .thum-list2 ul .subj a:hover, .thum-list2 ul .subj a:active, .thum-list2 ul .subj a:visited {
                color: #683e26;
                text-decoration: none;
                line-height: 1.2;
            }

        .thum-list2 ul li.new .thumb {
            background-image: url('../../_images/us/media/thum_new_bg.gif');
        }

        .thum-list2 ul li.new .subj a {
            color: #dd7800;
        }

        .thum-list2 ul li.nodata {
            width: 600px;
            height: 80px;
            margin-top: 80px;
            text-align: center;
        }

@media (max-width: 733px) {
    .bbs .btn-closer {
        float: unset;
        width: auto;
        margin-left: 0px;
        margin-top: 0px;
        position: fixed;
        bottom: 90px;
        right: 0px;
        z-index: 1;
    }
    .bbs .list .category {
        display:none;
    }
}
@media (max-width:700px) {
    .view-poll .info .title_area {
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }
    .view-poll .info .date_voted_wrap {
        flex-direction: column;
        gap:0;
        align-items:flex-start;
    }
    .poll .poll-gauge li {
        flex-direction: column;
        gap: 0;
        margin-top: 15px;
    }
    .poll .poll-gauge li strong {
        width: 100%;
    }
}
@media (max-width:500px) {
    .bbs .subj_list {
        flex-direction:column;
        align-items:flex-start;
    }
    .bbs .subj_list .list_left , .bbs .subj_list .list_left a {
        font-size:16px;
    }
    .bbs .subj_list .date {
        font-size:12px;
        color:#999;
    }
}
/*@media(max-width:415px) {
    .bbs .list table tr {
        width:100%;
        display:flex;
        flex-direction:column;
    }
    .bbs .list .subj {
        padding:0;
        width:100%;
    }
    .bbs .list td {
        width: 100%;
        padding: 0;
        border-top: none;
    }
}*/

@media (max-width: 375px) {
    .bbs .view .info .sub-wrap {
        border-bottom: 1px solid #DBDBDB;
    }
    .tab-area {
        margin-bottom: 15px;
        margin-top: 30px;
    }
    .thum-list ul {
        grid-gap: 30px;
    }
}
