/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   body         { overflow-x        : hidden;} 
   #artist_List { width             : 100%;             height              : auto;             display             : flex;             justify-content     : center;
                  align-items       : center;           font-family         : "SUIT";           flex-direction      : column;
                  z-index           : 10;               position            : relative;         }
   #artist_List .sound_only
                { display           : none;}
   #artist_List .listWrap
                { margin            : 20px 0 100px;     width               : 100%;             height              : auto;             display             : flex;
                  justify-content   : center;           align-items         : center;           padding             : 0 20px;           flex-direction      : column;}               
   #artist_List .listWrap form
                { width             : 100%;             height              : auto;             display             : grid;             grid-template-columns: repeat(5, 19%);
                  gap               : min(3vw,35px) 0;  max-width           : 1600px;           justify-content     : space-between;}   
   
   #artist_List .listWrap .listBox
                { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;}    
   #artist_List .listWrap .listBox .imgBox
                { width             : 100%;             height              : auto;             aspect-ratio        : 1 / 1;            overflow            : hidden;                                                    }
   #artist_List .listWrap .listBox .imgBox img
                { width             : 100%;             height              : 100%;             object-fit          : cover;}                                    
   #artist_List .listWrap .listBox .titBox
                { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           margin-top          : 0.5em;            font-size           : inherit;          word-break          : keep-all;
                  text-align        : center;}               
   
   #artist_List .listWrap .listBox .titBox p              
                { font-size         : min(2.4vw,18px);  color               : #333;           line-height         : 1.2em;            font-weight         : 500;          
                  overflow          : hidden;           text-overflow       : ellipsis;         white-space         : nowrap;           width               : 100%;} 
   
   #artist_List .listWrap .listBox .listHoverBox
                { position          : absolute;         top                 : 0;                left                : 0;                 opacity            : 0;                
                  pointer-events    : none;             z-index             : 10;               box-shadow          : 0px 0px 10px 0px #0000009c; }
   #artist_List .listWrap .listBox .listHoverBox img
                { max-width         : min(22vw,400px);  max-height          : min(30vw,450px);  object-fit          : contain;
                 }
   #artist_List .listWrap .listBox .listHoverBox p
                { width             : 100%;             background          : #ffffffb3;        text-align          : center;           color               : #555;
                  font-weight       : 500;              line-height         : 1em;              font-size           : 18px;             padding             : 1em 0.5em;
                  display           : flex;             flex-wrap           : wrap;             justify-content     : center;           align-items         : center;}                                                         
   #artist_List .listWrap .listBox .listHoverBox p span:first-child
                { margin-right      : 0.3em;}              
                  
                  
@media(max-width : 1024px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #artist_List .listWrap 
                { padding           : 0 30px;}
   #artist_List .listWrap form
                { grid-template-columns : repeat(3,32%); gap                : min(4vw,30px) 0;  justify-content: space-between;} 
   #artist_List .listWrap .listBox .titBox
                { display           : flex;}
   #artist_List .listWrap .listBox .listHoverBox
                { display           : none;}        
} 

@media(max-width : 640px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #artist_List .listWrap 
                { margin            : 10px 0 60px;             padding             : 0 40px;}
   #artist_List .listWrap form
                { grid-template-columns : repeat(2,48%); gap                : 20px 0;           }
   #artist_List .listWrap .listBox .imgBox
                { aspect-ratio      : unset;            padding-top         : 100%;             position            : relative;         }
   #artist_List .listWrap .listBox .imgBox img
                { position          : absolute;         top                 : 0;                left                : 0;                object-fit          : cover;}
   #artist_List .listWrap .listBox .titBox p
                { font-size         : min(4vw,16px);}              
}                 
                  
@media(max-width:374px){                 
   #artist_List .listWrap
                { padding           : 0 20px;}                  
   #artist_List .listWrap form
                { gap               : 15px 10px;}               
}
                  
                  
                  
                  
   .pagingCSS .pg_wrap
                { font-size         : clamp(14px,2vw,18px);     margin-top :4em;    font-family : "Noto Sans Kr"; font-weight   : 600;}
   .pagingCSS .pg_wrap .pg
                { display           : flex;             align-items : center;}
   .pagingCSS .pg_wrap .pg .pg_page             
                { font-size         : inherit;          width       : 2.2em;        height  : 2.2em;            border-bottom   : 2px solid #c0c0c1;
                  display           : flex;             align-items : center;       justify-content : center;   color           : #595757; 
                  }
   .pagingCSS .pg_wrap .pg .pg_page.pg_current
                { border-bottom     : 2px solid #000000; color : #000;}
   .pagingCSS .pg_wrap .pg .pg_page.pg_arrow
                { border            : none;             color       : #abacac;      width   : auto;             height          : auto;     font-size   : 1.5em;
                  margin            : 0;                background  : none;}            
   .pagingCSS .pg_wrap .pg .pg_page.pg_arrow.pg_start,
   .pagingCSS .pg_wrap .pg .pg_page.pg_arrow.pg_prev
                { margin-right      : 0.5em;} 
   .pagingCSS .pg_wrap .pg .pg_page.pg_arrow.pg_end,
   .pagingCSS .pg_wrap .pg .pg_page.pg_arrow.pg_next
                { margin-left       : 0.5em;}               
                                
@media (max-width : 640px){
    .pagingCSS .pg_wrap 
                { font-size         : 13px;             margin-top  : 2em;}
}