@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=Oswald:wght@200..700&display=swap');

#outer_wrap {          
    display:block;
    width:96%;
    margin:0 auto;
    margin-top:5px;
    margin-bottom:5px;
    font-size:12px;
    font-family: 'Roboto Condensed', 'Nanum Gothic', 'Noto Sans KR', sans-serif;
}

#section_title {    
    display:block;
    width:100%;
    margin:0 auto;
    margin-bottom: 20px;
}

.title_top{
    /*장르별 리스트 (서브 타이틀 1 텍스트 폰트)*/
    /* padding:10px 5px 15px 0px;         */    
    font-size:14px;
    letter-spacing:4px;
    text-align:right;
    color:gray;
    /* line-height:1.8em;     */
}
.title_bottom{
    /* 장르명 영어 (서브 타이틀 2 텍스트 폰트)*/
    font-family: "Oswald", sans-serif;    
    text-align:right;
    color:darkgray;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:18px;
    padding-right: 2px;
}

/*웹폰트*/

.oswald-item-title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* 리스트 상단 선택 탭 */

.select_tab {
    margin-bottom:10px;    
    width:100%;      
    border-bottom: 1px dotted lightgray;                  
    border-top: 1px dotted lightgray;
}
.select_tab > span {
    display:inline-block;
    position:relative;
    height:30px;
    line-height:30px;
    margin-left:-5px;
    text-align:center;
    font-size:12px;
    letter-spacing: 3px;
}

.select_tab > span:first-child {
    border-left:0px solid darkgray;
}


/* 하단 리스트 */

#inner_list {
    /*하단 리스트 박스 (페이징 포함)*/
    display:block;
    position:relative;    
    width:98%;
    margin:0 auto;            
    margin-bottom:10px;     
}

.content_wrap {
    /*리스트 전체 레이아웃*/    
    clear:both;    
    width:100%;
    min-height:400px;
    margin:0 auto;            
    margin-bottom:5px;      
}

.content_wrap .content_list {
    /*제품 정보 : 이미지 */
    clear:both;
    display:inline-block;
    position:relative;
    width:100%;
    padding:15px 0 10px 0;
    margin:0;
    border-bottom: 1px dotted lightgray;
}

.content_list .content_img {
    display:inline-block;
    position:relative;
    float:left;
    width:118px !important;
    height:118px !important;
    border:1px solid rgba(90, 82, 82, 0.4);
    box-shadow:1px 1px 4px lightgray;   
    margin-right:10px;
    margin-bottom:5px;
}

.content_img img {    
    width:118px !important;
    height:118px !important;   
}

.content_info {
    /* 제품 정보 (타이틀 + 아티스트 + 레이블 ) */    
    display:block;    
    position:relative;
    line-height: 1.6em;
}


/* 제품 세부정보 */

/* .sort_title {    
    display:block;    
    font-size:14px;             
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;      
} */

/* .sort_title img {
    height:35px;
    margin:0 auto;
    padding:0;
} */

.list_title {
    display:block;    
    font-size:14px;             
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;          
}
    .list_title:hover {
        text-decoration: underline;   
    }

.s_name {        
    display:block;
    font-size:12px;
    color:gray;    
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    font-weight: bold;
    margin-top:5px;  
}    
    .s_name span:hover {
        text-decoration:underline;
    }

.label{
    font-size: 11px;
    text-shadow: none;
    color:darkgray;
    margin-top: 2px;
    margin-bottom: 5px;
}

/*가격*/
._price {
    font-size:12px;
    text-shadow: none;
}

._specialprice{
    position:relative;
}

.addBox{
    margin-top: 5px;
}

._condition{    
    position:relative;
    top: -3px;
    color:steelblue;
    text-transform:uppercase;
    font-size:8px;
    font-family:sans-serif;
    letter-spacing:1px;
}


/* 버튼 */
._preorder,
._addToCart,
._noStock {
    display: inline-block;
    position: relative;
    bottom: 0;    
    height:25px;
    line-height:25px;     
    font-size:11px;       
    letter-spacing:1px;        
    text-transform: uppercase;
}
._preorder{
    color: red;
    background: yellow;
}
._addToCart{
    color: slateblue;
}
._noStock{
    color: slategray;
}

/* 장바구니/품절/프리오더 표시 */

.m_cart {
    display: inline-block;
    position: relative;
    bottom: 0;    
    margin-top:5px;    
    height:25px;
    line-height:25px;     
    font-size:11px;       
    font-weight:bold;
    letter-spacing:1px;
    color: steelblue;
}

.m_cart:hover {
    height:23px;
    line-height:23px; 
    color:crimson;
}


/* 하단 페이징 시작 */
.albumList_paging {
    clear:both;
    display:block;
    position:relative;        
    padding-top:30px;
    padding-bottom:15px;
    text-align:center;      
    height:30px;
    text-align:center;    
    z-index:9999;       
    border-top: 1px solid lightgray;
    margin-top: 10px;
}

.albumList_paging > div > span {
    display:inline-block;
    padding:10px 12px;
    background:white;
    border:1px dotted lightgray;
    color:gray;
    font-size:14px;    
    text-decoration:none;
}

.albumList_paging button {            
    display:inline-block;
    position:relative;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border:none;
    background:transparent;
    padding:0;
    margin: 0 10px;
    font-size: 14px;
    text-shadow:none; 
}

.albumList_paging button:hover {
    /* color:white; */
    /* background:crimson; */
    /* border:1px crimson solid; */
}

.albumList_paging .selected {
    /* 선택된 페이지 버튼 (<button> 안에 <span>)*/
    display:inline-block;
    position:relative;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border:none;
    border-bottom: 3px solid darkorange;
    background:transparent;
    padding:0;
    margin: 0 10px;
    font-size:18px;
    text-shadow:none; 
}

.albumList_paging .selected:hover{
    background: gray;
}

#mask {
    display:none;
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    z-index: 99999;
    opacity: 0.80;
} 

.add-cart-popup,
.add-wl-popup{    
    /* [중요] 팝업창 화면 가운데 정렬*/
    position:fixed;
    z-index: 999999;
    /*박스*/
    display: none;
    width: 90%;
    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: 1px solid #b3a9a98c; */
    border-radius: 3px;
    padding:5px 0 4px 0;
    margin: 10px 5px 5px 0;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
}

.content_noResult{
    /*No 검색 결과*/    
    height: 250px;  
    text-align: center;    
    padding-top: 100px;
    line-height: 2em;
    color:gray;
    font-size: 12px;
    font-weight:bold;
    letter-spacing: 2px;      
}


