﻿.bgm_list_player_option_box {
    text-align: right;
    clear: both;
    overflow: hidden;
    width: 1200px;
}
    /*css추가 jisneo.2022-10-26*/

    .bgm_list_player_option_box .volume_bar_wrap {
        display: inline-block;
        vertical-align: middle;
        width: 110px;
        height: 14px;
        position: relative;
        font-size: 0;
        cursor: pointer;
        margin-top: -6px;
    }

        .bgm_list_player_option_box .volume_bar_wrap .output_bar {
            position: absolute;
            top: 6px;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #dbdbdb;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        .bgm_list_player_option_box .volume_bar_wrap .input {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 5;
        }

            .bgm_list_player_option_box .volume_bar_wrap .input .input_bar {
                position: absolute;
                top: 6px;
                left: 0;
                width: 100%;
                height: 4px;
                background-color: #767676;
                border-radius: 4px;
                -webkit-border-radius: 4px;
            }

            .bgm_list_player_option_box .volume_bar_wrap .input .input_btn {
                position: absolute;
                top: 1px;
                right: 0;
                width: 14px;
                height: 14px;
                background-color: #767676;
                border-radius: 50%;
                -webkit-border-radius: 50%;
            }

    .bgm_list_player_option_box button.player_btn {
        background-color: transparent;
        border: none;
        font-size: 0;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        outline: 0;
        margin-top: -5px;
        vertical-align: middle;
    }

    .bgm_list_player_option_box button.option_btn {
        width: 30px;
        height: 30px;
        margin: 0 5px;
    }

    .bgm_list_player_option_box button.volume {
        background-image: url('../images/bgm_list/player_volume_ico.png');
        margin-top: -4px;
    }

        .bgm_list_player_option_box button.volume.mute {
            background-image: url('../images/bgm_list/player_volume_ico_off.png');
        }


.new_bgm_list_block_wrap { /*clear:both; overflow:hidden; 주석처리.jinseo.2022-10-21*/
    margin: 0 auto; /*css추가.jinseo.2022-10-21*/
}

.new_bgm_list_block { /*width:100%; box-sizing:border-box; padding:15px 10px 15px 103px; position:relative; height:100px; border-bottom:1px solid #ccc;주석처리jinseo.2022-10-21*/
    background: #171717;
    display: flex;
    justify-content: space-between;
    padding: 0 45px 0 24px; /*변경.jinseo.2022-11-10*/
    width: 1200px;
    height: 80px; /*높이수정.jinseo.2022-12-09*/
    border-bottom: 1px solid #111;
    background: #212121;
    box-shadow: inset 0 -10px 15px rgb(0 0 0 / 30%);
    align-items: center;
    border-top: 1px solid #333;
    transition: 0.4s; /*css추가.jinseo.2022-10-24*/
}

    .new_bgm_list_block .bgm_list_head { /*clear:both; overflow:hidden; vertical-align:middle; margin-bottom:0px; position:relative; margin-top:-2px;주석처리jinseo.2022-10-21*/
    }

        .new_bgm_list_block .bgm_list_head .thumbs {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #000;
            background-size: cover;
            -webkit-background-size: cover;
            margin-right: 5px;
            vertical-align: middle;
        }

        .new_bgm_list_block .bgm_list_head .visualizer {
            width: 260px;
            height: 30px;
            background-size: 100% 100%;
            cursor: pointer; /*display:inline-block;  -webkit-background-size:100% 100%; vertical-align:middle; margin-top:-2px; position:relative; 주석처리jinseo.2022-10-21*/
        }

            .new_bgm_list_block .bgm_list_head .visualizer .playing {
                height: 50px;
                position: relative;
                box-sizing: border-box;
                overflow: hidden;
            }

                .new_bgm_list_block .bgm_list_head .visualizer .playing .play_img {
                    width: 260px;
                    height: 30px;
                    background-size: 100% 100%;
                    -webkit-background-size: 100% 100%;
                }

                .new_bgm_list_block .bgm_list_head .visualizer .playing:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: -20px;
                    right: 0;
                    width: 2px;
                    height: 50px;
                    background-color: #00ff9c;
                    z-index: 2;
                    opacity: 0.8;
                }

                .new_bgm_list_block .bgm_list_head .visualizer .playing .now_time {
                    z-index: 1;
                    position: absolute;
                    top: 25px;
                    right: 10px; /*background-color:rgba(255, 255, 255, 0.8); border:1px solid #999; padding:5px 10px; 주석처리.jinseo.2022-10-24*/
                    color: #00ffa8;
                    display: inline-block;
                }

                .new_bgm_list_block .bgm_list_head .visualizer .playing.blue .now_time {
                    color: #000;
                    border: 1px solid #00ff9c;
                    background-color: rgba(255,255,255,0.8);
                }
    /*에디터스픽 jinseo.2022-10-21*/
    .new_bgm_list_block .play_visualizer .visualizer {
        width: 260px;
        height: 30px;
        background-size: 100% 100%;
        cursor: pointer;
    }

        .new_bgm_list_block .play_visualizer .visualizer .playing {
            height: 50px;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
        }

            .new_bgm_list_block .play_visualizer .visualizer .playing .play_img {
                width: 260px;
                height: 30px;
                background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
            }

            .new_bgm_list_block .play_visualizer .visualizer .playing:before {
                content: '';
                display: block;
                position: absolute;
                top: -20px;
                right: 0;
                width: 2px;
                height: 50px;
                background-color: #00ff9c;
                z-index: 2;
                opacity: 0.8;
            }

            .new_bgm_list_block .play_visualizer .visualizer .playing .now_time {
                z-index: 1;
                position: absolute;
                top: 25px;
                right: 10px;
                color: #00ffa8;
                display: inline-block;
            }

            .new_bgm_list_block .play_visualizer .visualizer .playing.blue .now_time {
                color: #000;
                border: 1px solid #00ff9c;
                background-color: rgba(255,255,255,0.8);
            }

    .new_bgm_list_block .bgm_list_head span.time { /*margin:0 5px 0 0;주석처리.jinseo.2022-10-21*/
    }

    .new_bgm_list_block .bgm_list_head button.song_list_buy {
        border: 1px solid #000;
        color: #000;
        background-color: transparent;
        padding: 2px 10px 3px 10px;
        display: inline-block;
        margin-top: 5px;
        vertical-align: middle;
        border-radius: 15px;
        min-width: 50px;
    }

        .new_bgm_list_block .bgm_list_head button.song_list_buy:hover {
            background-color: #000;
            color: #fff;
        }

    .new_bgm_list_block .bgm_list_head button.song_list_btn { /*display:inline-block; width:40px; height:40px; background-color:transparent; background-size:cover; -webkit-background-size:cover; font-size:0; border:none; vertical-align:middle; margin:-3px 0px 0;주석처리jinseo.2022-10-21*/
    }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.play {
            width: 22px;
            height: 22px;
            background: url('/@resource/images/jinseo/play_btn.png') 50% 50% no-repeat;
            background-size: contain; /*background-image:url('../images/bgm_list/song_play_ico_black.png'); margin-top:-1px;주석처리.크기줄임jinseo.2022-10-21*/
        }            

            .new_bgm_list_block .bgm_list_head button.song_list_btn.play:hover {
                background-image: url('/@resource/images/jinseo/play_btn_hover.png');
            }

            .new_bgm_list_block .bgm_list_head button.song_list_btn.play.active {
                background-image: url('/@resource/images/jinseo/pause_btn.png');
            }

    /*에디터스픽.jinseo.2022-10-24*/
    .new_bgm_list_block .play_visualizer button.song_list_btn.play {
        width: 22px;
        height: 22px;
        background: url('/@resource/images/jinseo/play_btn.png') 50% 50% no-repeat;
        background-size: contain;
        ; /*background-image:url('../images/bgm_list/song_play_ico_black.png'); margin-top:-1px;주석처리.크기줄임jinseo.2022-10-21*/
    }

        .new_bgm_list_block .play_visualizer button.song_list_btn.play.active {
            background-image: url('/@resource/images/jinseo/pause_btn.png');
        }

        .new_bgm_list_block .play_visualizer button.song_list_btn.play:hover {
            background: url('/@resource/images/jinseo/play_btn_hover.png') 50% 50% no-repeat;
            background-size: contain;
        }
    /*jinseo.2022-12-15*/

    /*
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.blue {background-image:url('../images/bgm_list/song_play_ico_blue.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.blue.active {background-image:url('../images/bgm_list/song_play_ico_blue_on.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.mint {background-image:url('../images/bgm_list/song_play_ico_mint.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.mint.active {background-image:url('../images/bgm_list/song_play_ico_mint_on.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.mint2 {background-image:url('../images/bgm_list/song_play_ico_mint2.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.mint2.active {background-image:url('../images/bgm_list/song_play_ico_mint_on2.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.black {background-image:url('../images/bgm_list/song_play_ico_black.png');}
.new_bgm_list_block .bgm_list_head button.song_list_btn.play.black.active {background-image:url('../images/bgm_list/song_play_ico_black_on.png');}
*/
    .new_bgm_list_block .bgm_list_head ul.btn_wrap li.chk_pop_line {
        position: relative;
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite {
        background-image: url('../images/song/song_list_ico04.png');
    }
        /*.new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active {background-image:url('../images/song/song_list_ico04_green.png');} 2021-09-07 waspkim 수정 아래코드로 */
        .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active {
            background-image: url('../images/song/song_list_ico04_mint.png') !important;
        }

            .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active.mint {
                background-image: url('../images/song/song_list_ico04_mint.png');
            }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active {
            background-image: url('../images/song/song_list_ico04_mint.png');
        }

            .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active.blue {
                background-image: url('../images/song/song_list_ico04_blue.png');
            }

            .new_bgm_list_block .bgm_list_head button.song_list_btn.favorite.active.black {
                background-image: url('../images/song/song_list_ico04on_search_off.png');
            }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.buy_info {
        background-image: url('../images/song/song_list_ico05.png');
    }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.buy_info:hover {
            background-image: url('../images/song/song_list_ico05on.png');
        }

    .new_bgm_list_block .bgm_list_head button.song_list_btn:focus {
        outline: 0;
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.share {
        background-image: url('../images/song/song_list_ico07.png');
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.download {
        background-image: url('../images/song/song_list_ico08.png');
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.share:hover {
        background-image: url('../images/song/song_list_ico07on.png');
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.download:hover {
        background-image: url('../images/song/song_list_ico08on.png');
    }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.movie {
        background-image: url('../images/song/song_list_ico11.png');
        margin-top: 1px;
        opacity: 0.3;
        width: 34px;
        height: 34px;
    }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.movie.active {
            opacity: 1;
        }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.copy {
        background-image: url('../images/re/song/song_list_ico13.png');
    }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.copy:hover {
            background-image: url('../images/re/song/song_list_ico13on.png');
        }

    .new_bgm_list_block .bgm_list_head button.song_list_btn.similar {
        background-image: url('../images/song/song_list_ico14.png');
    }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.similar.active {
            background-image: url('../images/song/song_list_ico14on.png');
        }

        .new_bgm_list_block .bgm_list_head button.song_list_btn.similar:hover {
            background-image: url('../images/song/song_list_ico14on.png');
        }

    .new_bgm_list_block .bgm_list_head ul.btn_wrap {
        position: absolute;
        top: 5px;
        right: 20px;
    }

        .new_bgm_list_block .bgm_list_head ul.btn_wrap li {
            float: left;
            margin-left: 10px;
        }

            .new_bgm_list_block .bgm_list_head ul.btn_wrap li.buy_wrap {
                margin-left: 15px;
            }

    .new_bgm_list_block .song_name { /*font-size:14px; font-weight:700; display:inline-block; vertical-align:middle; margin-left:7px; 주석처리jinseo.2022-10-21*/
    }

    .new_bgm_list_block .musician { /*font-size:11px; margin:0 10px; display:inline-block; vertical-align:middle;주석처리jinseo.2022-10-21*/
    }

        .new_bgm_list_block .musician strong {
            font-size: 14px;
            font-weight: 500;
        }

    .new_bgm_list_block .bpm {
        font-size: 14px;
        margin: 0 10px 0 0px;
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
    }

    .new_bgm_list_block .hash_tag {
        width: 270px;
        word-break: keep-all; /*font-size:14px; display:inline-block; margin-left:10px; vertical-align:middle; width:376px; margin-top:-3px; text-align:center;주석처리,css추가jinseo.2022-10-21*/
    }

.ai_view .new_bgm_list_block .hash_tag {
    width: 300px;
}

.new_bgm_list_block .hash_tag > a {
    font-size: 13px;
    color: #fff;
    transition: 0.4s; /*color:#333; margin-right:10px; display:inline-block;주석처리,css추가jinseo.2022-10-21*/
}

.new_bgm_list_block .hash_tag.mint > a {
    color: #0d7b74;
}

.new_bgm_list_block .hash_tag.blue > a {
    color: #004191;
}

.new_bgm_list_block .hash_tag > a:hover {
    color: #00ffa8; /*text-decoration:underline; 컬러변경,주석처리jinseo.2022-10-24*/
}

/** artist search list 관련 처리. jings3. 2022-04-13*/
.artist_list_block {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px 15px 103px;
    position: relative;
    height: 150px;
    border-bottom: 1px solid #ccc; /*리스트 상시노출로 일부처리 추가. jings3. 2022-12-01*/
    border-bottom: 1px solid #111;
    background: #212121;
    align-items: center;
    border-top: 1px solid #333;
    transition: 0.4s;
}

    .artist_list_block > .thumbs {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: transparent;
        background-size: cover;
        -webkit-background-size: cover;
        margin-right: 5px;
        vertical-align: middle;
        position: absolute;
        top: 15px;
        left: 20px;
    }

/*탑텐리스트 새로운 css.jinseo.2022-10-21*/

.new_bgm_list_block {
    counter-reset: numbering; /*넘버링css추가 jinseo.2022-11-07*/
}

    .new_bgm_list_block .bgm_list_number {
        font-size: 30px;
        color: #00ffa8;
        font-weight: 600;
        text-align: end;
        width: 40px;
        padding-bottom: 7px;
        margin-right: 36px;
        counter-increment: numbering;
        content: counter(numbering); /*넘버링css추가 jinseo.2022-11-07*/
    }
    /*곡순위*/
    .new_bgm_list_block .thumbs_songname_hash {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: start;
    }
        /*썸네일*/
        .new_bgm_list_block .thumbs_songname_hash .thumbs a {
            display: block;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            overflow: hidden; /*css추가jinseo.2022-10-21*/
        }

        .new_bgm_list_block .thumbs_songname_hash .song_name_hash {
            width: 143px; /*margin-right: 18px; jinseo.2022-12-20*/
        }
            /*width 수정.jinseo.2023-04-28*/
            .new_bgm_list_block .thumbs_songname_hash .song_name_hash .song_name {
                width: 100%;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .new_bgm_list_block .thumbs_songname_hash .song_name_hash .song_name,
            .new_bgm_list_block .thumbs_songname_hash .song_name_hash .musician {
                display: block;
            }
    /*제목과아티스트*/
    .new_bgm_list_block .play_visualizer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 355px;
        align-items: center;
        margin-right: 53px;
    }
    /*에디터스픽*/
    .new_bgm_list_block .bgm_list_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 355px;
        align-items: center;
        margin-right: 53px;
    }

    .new_bgm_list_block ul.btn_wrap {
        display: flex;
        align-items: center;
        width: auto;
        gap: 14px;
        justify-content: space-between;
    }
/*css수정 jinseo.2022-11-08*/
.new_bgm_list_block_wrap div.new_bgm_list_block:nth-child(odd) {
    background: #171717;
}

/*freebgm css추가 jinseo.2022-10-26*/
.freebgm_re_demo_song_list_table_wrap .new_bgm_list_block {
    padding: 0 60px;
}

    .freebgm_re_demo_song_list_table_wrap .new_bgm_list_block:nth-child(odd) {
        background: #171717;
    }

    .freebgm_re_demo_song_list_table_wrap .new_bgm_list_block .btn_wrap {
        width: auto;
    }

/*bgm검색 css추가 jinseo.2022-10-26*/
.bgm_new_bgm_list_block_wrap div.new_bgm_list_block {
    padding: 0 40px;
}

/*효과음검색 css추가 jinseo.2022-10-26*/
.soundeffect_new_bgm_list_block_wrap .new_bgm_list_block .thumbs_songname_hash .thumbs > div {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
}

.soundeffect_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 60px;
}

    .soundeffect_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        width: auto;
    }

div.soundeffect_re_demo_song_list_table_wrap {
    flex-direction: column;
    align-items: center;
    display: flex;
    justify-content: center;
}

/*힙합비트 css추가 jinseo.2022-10-27*/
.hiphopbeat_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 18px 0 24px;
}

    .hiphopbeat_new_bgm_list_block_wrap .new_bgm_list_block .thumbs_songname_hash .thumbs > div {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        overflow: hidden;
    }

    .hiphopbeat_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        display: block;
        align-items: center;
        width: 100px;
        gap: 0px;
    }

    .hiphopbeat_new_bgm_list_block_wrap .new_bgm_list_block .hash_tag {
        width: 140px;
    }

    .hiphopbeat_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap li {
        width: auto;
        height: auto;
        text-align: center;
    }

/*ai검색 css추가 jinseo.2022-10-28*/
.ai_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 50px;
}

    .ai_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        width: auto;
    }

        .ai_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap li.buy_wrap {
            width: auto;
            height: auto;
        }

    .ai_new_bgm_list_block_wrap .new_bgm_list_block .bgm_list_head {
        gap: 10px;
    }

/*유사곡검색 css추가 jinseo.2022-11-08*/
.similar_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 35px;
}
/*.similar_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap { gap: 0px;} jinseo.2022-12-21*/

/*마이페이지>내앨범 jinseo.2022-11-10*/
.myalbum_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 50px;
}

    .myalbum_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        gap: 0px;
    }

/*마이페이지>최근 들은 BGM jinseo.2022-11-10*/
.recent_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 50px;
}

    .recent_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        gap: 0px;
    }

/*마이페이지>다운받은 BGM jinseo.2022-11-10*/
.downlist_new_bgm_list_block_wrap .new_bgm_list_block {
    padding: 0 50px;
}

    .downlist_new_bgm_list_block_wrap .new_bgm_list_block .btn_wrap {
        gap: 0px;
    }
