@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR&family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Galada&family=Raleway:ital,wght@1,800&display=swap');


    .pd_box {
        /*0. 제품 전체 레이아웃 */
        width:96%;
        margin:0 auto;
        padding-top:15px;
    }

    .pd_img {
        /*1. 제품 이미지*/
        position:relative;        
        margin-bottom:20px;
        text-align:center;
    }    

    /* ---------커버 아트 ---------- */    

    .m_cover {
        position:relative;
        display: inline-block;
        border:1px solid lightgray;
        box-shadow: 2px 2px 5px gray;
        margin:9px 9px 5px 9px;
        overflow:hidden; 
        padding:0;
        background: red;
    }

    .m_cover img {        
        padding:0;
        
    }

    /* 1-1. TOP, BEST, SALE 아이콘 이미지 */

    .ribbon_top1,
    .ribbon_top2 {        
        /*TOP 셀러 */
        position:absolute;        
        z-index:999;
        opacity:0.9;        
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;        
    }

    .ribbon_hit1,
    .ribbon_hit2 {
        /* BEST 셀러*/
        position:absolute;
        z-index:999;
        opacity:0.9;        
        -webkit-background-size: 50px; 
        -moz-background-size: 50px; 
        -o-background-size: 50px; 
        background-size: 25px; 
    }

    .ribbon_sale1 {
        /*세일 상품 (DVD)*/
        position:absolute;
        z-index:999;
        opacity: 0.9;        
        background:url('/mobile/m_img/mobile_sale.png');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;        
    }  

    /* extra image */
    .extra_image {
        position: relative;
        text-align:center;
        font-size:10px;        
        letter-spacing: 2px;
        text-transform: uppercase;
        color: blueviolet;    
        border-top: 1px solid blueviolet;
        border-bottom: 1px solid blueviolet;
        padding:4px 1px 3px 3px;    
    }

    /* ----------- II. 제품 헤드라인 [텍스트] ----------- */

    .pd_title {
        /*2-1. 제품명 */
        display:block;                
        margin:0 auto;
        padding:5px 0;
        display: block;   
        position:relative;
        padding:5px 10px 5px 10px;        
        font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
        letter-spacing: 0.5px;        
        font-size:18px !important;
        font-weight:lighter;
    }
    .pd_singer {        
        /*2-2. 아티스트 1 */   
        padding-left:10px;                
    }    

    .singer {
        /*2-2. 아티스트 2 */   
        position:relative;
        display:inline-block;
        padding:5px 0;        
        font-family: 'Roboto Condensed', 'Noto Sans KR', 'Nanum Gothic', sans-serif;
        font-size:16px !important;
        text-transform: uppercase;
        color: gray;        
        max-width:350px;
    }

    .artist_page{
        /* 2-3. 아티스트 페이지 링크*/
        display:inline-block;        
        padding:5px 0;
        position:relative;
        font-size:14px !important;
        letter-spacing:2px !important;
        font-weight:bold;
        font-size: 12px;
        color:steelblue;        
        font-family: 'Roboto Condensed', 'Noto Sans KR', 'Nanum Gothic', sans-serif;
    }


    /* -- III. 제품 기본 정보 -- */

    .pd_info1 {
        margin:0 auto;
        display:block;
        width:96%;
        margin-top:20px;
        font-size: 12px;
        text-shadow: none;        
    }

    .pd_info1 > div {                 
        height:28px;
        letter-spacing: 0.5px;
        line-height:28px;        
        border-bottom:1px dotted lightgray;        
        color:rgb(68, 68, 68);
    }
    
    .pd_info1 > div > span:first-child {
        display:inline-block;
        width: 75px;        
        font-size: 11px;
        text-transform:uppercase;        
        text-indent:5px;     
        font-family: 'Noto Sans KR', 'Roboto Condensed', sans-serif;   
        font-weight: bold;
        color: gray;
    }

    .pd_info1 > div > span:last-child {        
        font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;        
        font-size: 11.5px;
    }

    /* --  IV. 제품 상세 정보 (트랙, 리뷰) -- */

    .pd_info2 {
        /* 1-1 전체 레이아웃 박스 */
        margin:0 auto;
        margin-top: 20px;
        display:block;
        width:96%;        
    }

    .header_track {
        /* 1-2 트랙 타이틀*/
        font-size:15px;
        font-weight:bold;        
        color: gray;
        letter-spacing:4px;        
        padding:5px;        
        margin-top:10px;
        font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
        border-top:1px lightgray dotted;
        border-bottom:1px lightgray dotted;
    }

    .trackList {
        /* 1-3 트랙 리스트*/
        font-size:14px;
        /* font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; */
        font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
        color: rgb(66, 66, 66);
        line-height:1.8em;
        padding:10px 5px;
        text-transform:capitalize;
    }

    .trackList i {
        /* 1-3-1 트랙 리스트 <i> */
        position:relative;
        left:10px;
        color:steelblue;
    }

    .header_review {    
        /* 2-1 리뷰 타이틀*/
        font-size:15px;
        font-weight:bold;        
        color: gray;
        letter-spacing:4px;        
        padding:5px;        
        margin-top:10px;
        font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
        border-top:1px lightgray dotted;
        border-bottom:1px lightgray dotted;
    }

    .itemReview {       
        /* 2-2 리뷰 전체 레이아웃 박스 */                 
        display: inline-block;
        border-bottom:1p  x gray dotted;                
        font-family: 'Roboto Condensed', 'Nanum Gothic', 'Noto Sans KR', sans-serif;
        font-size: 14px;
        line-height: 1.6em;        
    }

    .itemReview .data-content {
        /*리뷰 텍스트*/        
        /* font-family: 'Roboto Condensed', 'Nanum Gothic', 'Noto Sans KR', sans-serif; */
        /* font-family: 'Nanum Myeongjo', serif; */
        font-family: 'Gowun Batang', serif;
        font-weight:400;
        text-transform: capitalize;
        padding: 10px 0;
        margin-top:10px;
        line-height: 1.6em;
        text-shadow: none !important;
    }

    .itemReview > .dvd_info {
        /*추가 DVD 정보 */
        display:inline-block;                
        width:98%;
        padding:3px 2px;
        margin:0 auto;
        margin-bottom:5px;                
        letter-spacing:2px;
        text-shadow: none;
        font-size: 14px !important;        
        font-weight: bold;        
        color:gray;
    }
    
    /* .itemReview div:last-child{
        background: red;
    } */

    /* 추천 */

    .recom_done,
    .recom_btn {
        font-size:13px;
        color:purple;
        display:inline-block;
        padding:5px 0;
    }

     .recom_btn .btn-chuchon{
        position: relative;
        left: 5px;
        top: -2px;
        display: inline-block;
        height: 20px;
        line-height: 19px;
        width: 50px;
        text-align: center;
        border-radius: 3px;

        background: orange;        
        color: white;
        text-shadow: none;
        font-size: 11px;
    }    

    .recom_done {
        color:gray;
    }

    ._navy{
        color:navy;
        text-align: right;
        font-size: 13px;
    }
    


    /* VI. 뮤직 비디오*/

    .header_video {
        font-weight:bold;
        font-size:15px;
        letter-spacing:4px;
        text-shadow:none;
        padding:5px;
        border-bottom:1px darkgray dotted;
        margin-top:20px;
    }

    .header_video > span {
        position: relative;
        font-size:13px;
        font-weight: normal;
        float:right;
        top: 2px;
        right: 2px;
        letter-spacing: 2px;
        display:inline-block;
        text-align:right;    
    }


    /* VII. 각종 버튼 : 구매, 위시리스트, 품절, 프리오더 */

    .mainInfo_button {
        display:block;
        width:96%;
        text-align:center;
        margin:0 auto;
        margin-bottom:10px;
        margin-top:10px;        
    }
        .mainInfo_button > div {
            text-shadow:1px 1px 1px rgba(68, 62, 62, 0.50);
        }
    .soldoutButton,
    .buyButton, 
    .buyButton_logout, 
    ._wl_btn {
        display:block;                
        padding:12px 0;
        font-size:14px;
        font-weight:bold;
        letter-spacing:2px;
        text-shadow:none;
        color:white;
        background:#58629f;
        box-shadow:1px 1px 3px gray;
        border-radius:5px;
    }
        .buyButton img, 
        .buyButton_logout img {
            /*카트 버튼에 이미지*/
            position: relative;
            margin-right: 7px;
            top: 3px;
            width: 16px;
            height: 16px;
            border: none;
        }
        .buyButton:hover,  
        .buyButton_logout:hover {
            background:purple;
            box-shadow:2px 2px 6px violet inset;
        }

    ._wl_btn {
        margin-top:10px;
        background:#c84c4c;
    }
        ._wl_btn img {
            /*위시리트스 이미지*/
            position: relative;
            margin-right: 5px;
            top: 4px;
            width: 16px;
            height: 16px;
            border: none;
        }
        ._wl_btn:hover {
            background:brown;
            box-shadow:2px 2px 6px violet inset;
        }
    
    .icon_recom {
        /* 추천 버튼 */
        position:relative;
        top:1px;
        border:none;
        width:16px;        
    }
    
    /* VII. 상태 레이어 팝업창 설정 */

    #condition_popup {
        display: none;/*일단 숨기기*/
        position: absolute;
        top: 600px;
        left:3%;                
        width: 94%;
        font-size:12px;        
        text-shadow:none;
        background:white;  
        border-radius:10px;
        border:none;
        box-shadow:0px 0px 5px rgba(72, 55, 55, 0.45);
        overflow:auto;    
        z-index:999999;
    }

        #condition_popup > div {
            padding: 5px 5px 0 5px;
        }

        #condition_popup > div:first-child {
            /*타이틀바*/
            height:22px;
            line-height:22px;
            padding-bottom:5px;  
            text-align:center;
            font-size:13px;
            letter-spacing:2px;
            color:white;         
            text-shadow:1px 1px 0px rgba(77, 54, 54, 0.75);            
            border:1px solid steelblue;
            border-top-left-radius:10px;            
            border-top-right-radius:10px;
            background:steelblue;                        
        }

        #condition_popup > .description > div,
        #condition_popup > .item_grade > div {
            /*제품 등급 및 설명*/
            color:gray;
            font-size:11px;                            
            line-height:2em;            
            padding:3px 0;
        }

        #condition_popup > .item_grade > div{
            color:black;
            border-bottom:1px dotted darkgray;
        }

    #self_close {
        /*팝업창 닫기 버튼*/
        display: inline-block;  
        position:absolute;
        float:right;
        right:10px;
        top:7px;
        width:20px;
        height:20px;
    }

    #popup_msg{        
        position:relative;        
        text-align:right;
        display:block;
        height:24px;
        line-height:24px;
        margin:0;
        padding-bottom:5px;        
        border-radius:0 0 5px 5px; /*하단 라운드처리*/        
    }

    #popup_msg span {
        position:relative;
        top:3px;
    }

    #mask {
        /*마스크*/
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99999;
        background:white;
        display: none;
    }

    .btn_play {
        display:inline-block;
        margin-top: 10px;
        border-radius: 15px;        
        padding: 7px 14px;
        font-weight: bold;
        font-size: 15px;
        letter-spacing: 0.7em;
        color: white;
        background: orange;        
    }

    .btn_play:hover{
        background:#ff4500;
    }

    /* 기타 설정 */

    .pd_note {
        /* 바닥 알림글 */
        clear: both;
        display:block;
        width:94%;
        line-height: 1.4em;        
        font-size: 12px;
        padding: 10px 0;
        margin:0 auto;
        color: darkgray;
        border-top: 1px dotted darkgray;
    }

    .sub_title{
        color:white;
        font-size:10px;    
        letter-spacing: 2px;
        text-transform:uppercase;
        
        background:darkgray;
        color:white;
        padding:3px 5px 2px 6px;
        text-shadow: none;
        border-radius: 7px;
    }

    .tag_box{  
        display: inline-block;
        padding:3px 2px 2px 5px;
        border-radius: 2px;        
        margin: 7px 0;
        font-size:10px;
        letter-spacing:2px;
        background:rgb(190, 4, 190);     
        color:white !important;        
        text-shadow: none;
    }

    .msg_box {        
        color:gray;
        line-height:1.6em;
    }

    .info_edit{    
        width:95%;
        margin:0 auto;
        padding:10px 0;
        text-align:right;
        border-top:1px solid lightgray;
        font-family:'Nanum Gothic', sans-serif;
        color:gray;
    }
    
    .txt_gray {
        color:gray;
        font-size:12px;
        line-height:1.6em;
    }

    .note_red{
        color: red;
        font-weight: bold;
        line-height:1.6em;
    }

    .note_blue{
        color: steelblue;
        line-height:1.6em;
    }

    .pd_info2 .btn_zoom {
        display: inline-block;
        width:100px;
        float: right;
        position:relative;        
        top:-35px;
        font-size: 13px;
        text-shadow: none;
        font-weight: bold;
        text-align: right;
        letter-spacing: 1px;
        margin-bottom: -30px;
    }

    /* 추가 : 2023-06-02 (모바일 - 카트) */

    .add-cart-popup,
    .add-wl-popup{
        /*박스*/
        display: none;
        width: 90%;
        /* [중요] 팝업창 화면 가운데 정렬*/
        position:fixed;
        z-index: 99999;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px !important;
        border-radius: 5px;
        box-shadow: 1px 1px 2px 1px #0000005c;
        color: white;
        font-size: 14px;
        font-weight: normal !important;
        font-family:'Malgun Gothic', 'Century Gothic', Tahoma, sans-serif;
        text-shadow: none;
        text-align: center;
        line-height: 1.8em;
    }
    .add-cart-popup div span, 
    .add-wl-popup div span {
        /*버튼*/
        position: relative;
        display: inline-block;
        width:100px;        
        border-radius: 3px;
        padding:5px 0 4px 0;
        margin: 10px 5px 5px 0;
        text-align: center;
        cursor: pointer;
        letter-spacing: 1px;
    }

    #mask {  
        display:none;
        background: #000;
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: hidden;
        z-index: 10000;
        opacity: 0.80;
    } 

    
/* 부모 페이지에서 이동 */

.title_1{
    font-weight:bold;
    font-size:13px;
    text-transform:uppercase;            
    display:inline-block;
    letter-spacing:1px;            
    margin:5px 0;		
    }
.title_2{
    text-transform:uppercase;
    color:white;
    display:inline-block;
    letter-spacing:1px;
    background:gray;
    padding:1px 9px 0px 6px;
    font-weight:normal;
    font-size:10px;
    border-radius:0px 10px 10px 0;
    margin:5px 0;
    text-shadow:none;		
    }
.title_3{
    text-transform:uppercase;
    color:gray;
    display:inline-block;
    letter-spacing:2px;            
    padding:0px 2px;
    font-weight:bold;
    font-size:12px;
    margin:5px 0;            
    }

.title_4{
    color:steelblue;
    letter-spacing:0.5px;                     
    font-size: 12px;
}	

/* 이벤트 (이동) */

.sale_note {
    padding:5px 5px 5px 15px;
    margin:0 auto;
    margin-top:10px;
    text-shadow: none;        
    color: gray;        
    max-width: 600px;
}

.sale_box {
    display: inline-block;
    width: 99%;
    border: 1px solid steelblue;
    border-radius: 4px;
    background: url('/img/banner/event_202407.jpg') no-repeat center top;        
    background-size: cover; 
}        

.special_offer_title {
    display: block;        
    padding: 5px 0 5px 10px;
    background-color: steelblue;   
    color: white;
}

.special_offer_content {
    display:inline-block;
    padding: 5px 0 5px 10px;
    line-height: 1.5em;
    font-size: 12px;
    color: white;               
}

.special_offer_content p:first-child{
    color: yellow;
}