@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Dosis:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Jost:ital,wght@1,200&display=swap');

#outer_wrap {          
    clear:both;
    position:relative;
    height:auto;
}

#section_left {
    position:relative;
    float:left;
    width:696px;    
    padding:20px 0;    
    margin-right:5px;  
    margin-bottom:15px;
}

#section_right_top {        
    position:relative;    
    width:288px;
    margin-bottom:5px;
    border:1px solid lightgray; 
    background:white;
}

#section_right_bottom {
    position:relative;           
    width:288px;
}

#side_section_wrap {
    position:relative;
    float:left;
}


/*  타이틀 헤더 (exclusive에는 없음)*/
.subtitle span {        
    display: block;
    width: 98%;
    text-align: center;
    padding:20px 0 20px 0;        
    margin: 0 auto;
    margin-bottom: 25px;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: 'Alumni Sans', sans-serif;    
    font-style: italic;
    font-weight:100;
}      

/* 상단 Essential Recording 삽입 */

.essential_title {   
    /*타이틀*/     
    width:94%;        
    position:relative;
    padding:10px;
    margin:0 auto;    
    margin-top:10px;
    font-family: 'Anton', sans-serif;
    font-size:20px;        
    letter-spacing: 1px;        
    color: gray;
}

#inner_essential {
    position:relative;    
    width:98%;
    margin:0 auto;  
    margin-bottom:5px;
}

/* Essential 박스 안쪽 내용*/
#box_essential .essential_image{
    display:inline-block;
    width:200px;
    position:relative;
    float:left;
    margin:10px 15px;                   
}
    /* 앨범 커버 */
    #box_essential .essential_image > img {            
        height:200px;
        width:200px;                    
        box-shadow:1px 3px 3px darkgray;
        cursor:pointer;
        border-radius: 4px;
    }        

#box_essential .bxslider .essential_title {
    display:inline-block;
    position:relative;
    width:420px;
    font-family: 'Century Gothic', 'Malgun Gothic',  'Nanum Gothic', sans-serif;   
    font-size:15px;    
    color: gray;
    padding:5px 0;
    cursor:pointer;
}
#box_essential .essential_singer {
    display:inline-block;
    position:relative;
    width:430px;
    height:20px;
    font-size:14px;
}
    
#box_essential .essential_release {
    display:inline-block;
    position:relative;
    width:430px;
    font-size:13px;
    top:5px;
    margin-bottom:20px;
    color:#4e4b4b;
}
#box_essential .essential_content {
    display:inline-block;
    position:relative;        
    width:400px;
    height:130px;
    overflow:auto;
    font-size:12px;
    line-height:1.5em;
    text-align:justify;
    padding-right:15px;
}

/* 하단 일반 리스트 (탭) */
/* 여기부터 새로 시작 */

#inner_list {
    display:block;
    position:relative;   
    margin:0 auto;            
    margin-bottom:10px;
}

/* 여기부터 새로 시작 */

.content_wrap {
    clear:both;    
    width:98%;
    margin:0 auto;            
    margin-bottom:5px;    
}

    /*제품 정보 : 이미지 */
    .content_wrap .content_left, 
    .content_wrap .content_right {
        display:inline-block;
        position:relative;
        float:left;
        width:340px;
        padding:5px 0;
        margin:0;   
        margin-bottom:5px;      
    }

    .content_right .content_img, 
    .content_left .content_img {
        display:inline-block;
        position:relative;
        float:left;
        width:100px;
        height:100px;       
        border:1px solid #a89a9a4f;
        box-shadow:0px 0px 5px 0px #d3d3d3;
        margin-right:10px;
        margin-bottom:5px;   
    }

    .content_img img {
        display:inline-block;
        width:100px;
        height:100px;
        cursor:pointer;
    }

    .content_info {
        /* display:inline-block; */
        position:relative;
        float:left;
        width: 220px;
        height:100px;
        font-size:12px; 
    }
    
    /* 추가 : exclusive에는 없는 부분 */
    .content_info > span {
        display: inline-block;
        font-family: 'Didact Gothic', 'Nanum Gothic', sans-serif;
        width: 210px;
        line-height: 1.5em;
        padding-left: 5px;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;    
    }

    /*리스트 전체 레이아웃*/  

    ._red > span, 
    ._blue > span {
        position:relative;        
        top:-2px;
        font-size:8px !important;
        display:inline-block;        
        color:steelblue;
        letter-spacing:0.25em;        
        padding:3px 0;
        padding-left:5px;
        font-style:normal;
        font-weight:normal;                
        text-transform:uppercase;
        text-decoration:none;        
        color:white;
        background:green;
        padding:0px 0px 0px 2px;
    }

    ._blue > span {
        color:white;
        background:steelblue;
        padding:0px 0px 0px 2px;
    }

/*금일 조회한 제품 */

#side_section_wrap .today_view {
    clear:both;
    display:block;    
    width: 98%;     
    margin: 20px 5px 10px 5px;
    font-size: 12px;
    font-weight:bold;
}

 .del_btn {                
    /* position: absolute; */
    right: 0px;
    bottom: 295px;
    float: right;
    border:1px solid lightgray;
    padding:2px 3px 2px 5px;
    font-family: 'Century Gothic', Tahoma, Verdana, sans-serif;
    font-size: 10px;
    color:gray;
    letter-spacing: 2px;
    background: white;        
    cursor: pointer;
}

/* 하단 페이징 시작 */

.albumList_paging {
    clear:both;
    display:block;
    position:relative;    
    padding:15px 0px;
    text-align:center;            
    z-index:9999;    
    /* height:30px;
    padding-right:10px; */
    /* background: red; */
}

/* 버튼 시작 */
._btn_white, 
._btn_red {    
    /*선택되지 않은 하얀 버튼*/    
    display: inline-block;
    position:relative;
    top:5px;
    margin-left:5px;    
    width:30px;
    height:30px;
    line-height: 10px;
    font-size:12px;
    font-family: 'Century Gothic', Verdana, sans-serif;    
    border:none;
    color:black;
    background: none;
    transition: background-color 0.5s ease-in-out;
}

._btn_red {    
    /*선택된 레드 버튼*/
    font-size: 16px;    
    color: steelblue;
    text-decoration: underline;
}
._btn_red:hover{
    background:none;
    border:none;
    text-decoration: underline;
    cursor:default;
}

._btn_white:hover{
    color:black;
    background:none;
    border:none;
    text-decoration: underline;
    cursor:pointer;
}

/* 버튼 끝 */

 /* 레이블링 */

.list_title {
    font-size: 13px;   
    font-family: 'Didact Gothic', 'Nanum Gothic', sans-serif;
    cursor:pointer;
    padding: 1px 0;    
}

    .list_title:hover {
        color: black;
    }

.s_name {        
    font-size: 11px;
    letter-spacing: 0.7px;
    cursor:pointer;     
}
    .s_name:hover {
        text-decoration:underline;
    }

.lable_name{
    font-size: 12px;
    color: gray;
    letter-spacing: 1px;
}

._price{
    margin-top:0px;    
    font-size: 12px;
}

.btn_condition {
    position:relative;        
    font-size:9px;
    letter-spacing:1px;                
}

/*레이블링 끝*/

/**밑줄 효과**//*exclusive 없음*/

.hover-text {
    padding-right: 1px;
    position: relative;    
}

.hover-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* 밑줄 위치 조정 */
    width: 0;
    height: 2px;
    background-color: steelblue;
    transition: width 0.3s ease-in-out;
}

.hover-text:hover::after {
    width: 100%;
}     


/** 편집* */

.pd_edit, 
.pd_update {        
    position: relative;
    top: 4px;
    width: 80px !important;
    padding: 1px 0;
    margin-top:0px !important;
    border: 1px solid lightgray;
    border-radius: 3px;
    background: white;
    transition: background-color 0.5s ease-in-out;
    font-size: 10px !important;
    letter-spacing: 1px;
    text-align:center;
    cursor:pointer;

    /* padding: 2px 0;
    margin-top:5px !important;
    *//*exclusive*/
}

 .pd_update{
     position:relative;                  
     width:80px !important;     
 }
    .pd_edit:hover,
    .pd_update:hover {
        color: white;
        background: darkgray;
    }

/* 제품 상세 페이지로 이동 */

.more{      
    position: relative;        
    top:3px;
    display: inline-block;  
    padding-top:3px;        
    font-size:10px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor:pointer;           
    letter-spacing:1px;
    /* border-top: 1px dotted lightgray; */
    border-top: 1px dotted rgba(0, 0, 0, 0.20);
    text-align: right;
    color:black !important;        
}

.more:hover{
    color:blue !important;
}

/* 프리오더 및 대행 표시  */ /*exclusive 별도*/

.intorder {
    position: absolute;
    left: 45px;
    width:50px;
    bottom: 15px;        
    display: inline-block;        
    padding: 1px 2px 2px 3px;
    letter-spacing: 1px;
    background: crimson;
    color: white;
    font-size: 11px;        
    cursor:pointer;
}

.intorder{
    right:65px;
    width:50px;
}  

/*컨텐츠 없음*//*exclusive에 없음*/

.content_noResult{
    padding : 150px 0 565px;
    text-align:center;
    color:gray;
    font-size:14px;
}


/*  이동, 추가 (2023.05.25) */

#box_essential {  
    /* 이전 */
    /* height:260px;
    margin-bottom:10px;
    background:white; */
    /*1a. 주력 홍보/신상 제품 (자동 이미지 슬라이드) */  
    display:block;
    float:left;
    width:98%;
    height:250px;        
    margin-bottom:20px;                
    margin-left:7px;  
    background: none; 

}
    #box_essential .bx-viewport {
        /* padding:5px 0; */
        overflow:auto;
        height: 250px;
        width: 100%;
        background: #fff;        
        border:1px solid rgba(181, 181, 181, 0.20);   
        border-radius: 5px;   
    }
    /* 페이저 */ 
    #box_essential .bx-wrapper .bx-pager {        
        /* width:100px;
        right:0px;
        top:-30px;                 */
        display:inline-block;        
        width:120px;
        height:20px;
        position:absolute;          
        right:-5px;
        top:-35px;                
        z-index:9999;
    }

    #box_essential .bx-wrapper .bx-pager.bx-default-pager a {    
        width:12px; 	    
        height:12px;
        background: url(/img/icon/sp_page.png) no-repeat 0 0px;    
}
    #box_essential .bx-wrapper .bx-pager.bx-default-pager a:hover,
    #box_essential .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: url(/img/icon/sp_page.png) no-repeat 0 -12px;
}

     /* DIRECTION CONTROLS (NEXT / PREV) */


    #box_essential .bx-wrapper .bx-prev {
        /* 페이지 로테이팅 방향키 아이콘 이미지 설정 */
        position:absolute;
        display: none;
	    left:180px;
        background: url(/img/icon/bg_prev.png) no-repeat 0 0px;           
    }
        #box_essential .bx-wrapper .bx-prev:hover {
            background: url(/img/icon/bg_prev.png) no-repeat 0 -23px;           
        }

    #box_essential .bx-wrapper .bx-next {
        position:absolute;
        display: none;
	    left:218px;
        background: url(/img/icon/bg_next.png) no-repeat 0 0px;           
    }
        #box_essential .bx-wrapper .bx-next:hover {
            background: url(/img/icon/bg_next.png) no-repeat 0 -23px;           
        }

    .bx-controls-direction {
        left: 30px;
    }        

    #box_essential .bx-wrapper .bx-controls-direction a {
        /* 페이지 로테이팅 방향키 아이콘 위치 및 크기 설정*/
        position: absolute;
        top:-15px;
        margin-top: -16px;
        outline: 0;
        width: 39px;
        height: 22px;
        text-indent: -9999px;
        z-index: 9999;
    }    

    .bx-wrapper .bx-viewport{
        box-shadow: 0 0 1px #ccc !important;
    }


/*genre*//* type *//*Exclusive 통합*/

.list_tab {
    display:block;
    width:94%;
    margin:0 auto;
    margin-bottom:20px;
    text-align:right;
}
    .list_tab > span {
        display:inline-block;
        position:relative;        
        padding: 4px 0;
        width:70px;
        text-shadow:none;
        text-align:center;
        font-size:12px;                     
        cursor:pointer;
        padding-left:2px !important;
        letter-spacing: 2px !important;
    }



    /* 프리오더 표시 */

    .preorder,
    .new_arrival,
    .re_entry {
        position: absolute;
        left: 30px;
        top: 85px;

        display: inline-block;
        width: 65px;        
        line-height: 15px;
        padding: 0px 2px 2px 1px;
        box-shadow: 1px 1px 2px black;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;

        color:white;
        background: darkorange;
        font-size: 9px;
        font-family: 'Malgun Gothic', 'Nanum Gothic', Verdana, 'Century Gothic', sans-serif;
        letter-spacing: 1px;

        z-index: 9999;
    }

    .new_arrival{
        color:steelblue;
    }

    .re_entry{
        color:orange;
    }

    .preorder img,
    .new_arrival img,
    .re_entry img {
        position: relative;
        width: 12px;
        margin-right: 4px;        
        top:2px;
        border: none;
    }

    .pd_edit, 
    .pd_update {        
        /*편집*/
        position: relative;
        display: inline-block;
        padding: 1px 0;
        height: 17px;
        line-height: 17px;
    }