/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   html.with-fancybox body.hide-scrollbar
    {
   width: auto;
    margin-right: 0 !important;
    overflow: auto !important;
    overscroll-behavior-y: none;
   }   
   #otium_list  { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;           font-family         : "Noto Sans Kr";   
                  max-width         : 1380px;
                  } 
   
   #otium_list form
                { width             : 100%;             height              : auto;             display             : flex;             align-items         : center;
                  justify-content   : center;           flex-direction      : column;           }    
   #otium_list .listWrap
                { width             : 100%;             height              : auto;             display             : grid;             grid-template-columns : repeat(3,calc(calc(100% - 2em) / 3));
                  gap               : 1em;              padding           : 4em 0;}
   #otium_list .listWrap .list
                { width             : 100%;             height              : auto;             display             : flex;             align-items         : center;
                  justify-content   : center;           position            : relative;         aspect-ratio        : 440 / 300;}
   #otium_list .listWrap .list .thumnail
                { width             : 100%;             height              : 100%;             object-fit          : cover;            }
   #otium_list .listWrap .list .includeImg
                { display           : none;}
   #otium_list .listWrap .list .hoverWrap
                { width             : 100%;             height              : 100%;             display             : flex;             align-items         : center;
                  justify-content   : center;           background          : #00000080;        transition          : .2s;              position            : absolute;
                  top               : 0;                left                : 0;                opacity             : 0;}
   #otium_list .listWrap .list:hover .hoverWrap
                { opacity           : 1;}
   #otium_list .listWrap .list .hoverWrap .title
                { color             : #fff;             font-weight         : 300;            font-size           : 1em;             width              : 90%;
                  text-align        : center;           word-break          : keep-all;}
   #otium_list .listWrap .list .hoverWrap .resize
                { position          : absolute;         bottom              : 0.5em;            right               : 0.5em;            width               : 2em;}
   #otium_list .noneWrap
                { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;           padding             : 4em 0;}
   #otium_list .noneWrap img
                { height            : 6.5em;            opacity             : .2;               margin-bottom       : 0.5em;}
            
/* 페이징 */
   #otium_list .pagingWrap
                { width             : 100%;             height              : auto;             display             : flex;                 align-items         : center;
                  justify-content   : center;           margin              : 2em 0 4em;}
   #otium_list .pagingWrap .pagingBtn
                { width             : 2em;              height              : 2em;              margin              : 0 0.2em;               display             : flex;
                  align-items       : center;           justify-content     : center;           cursor              : pointer;                
                  color             : #999999;        transition        : .2s;              font-size           : max(14px,0.8em);                    border-radius       : 50%;
                  line-height       : 1em;              }               
   #otium_list .pagingWrap .pagingBtn.btns.on
                { background        : #00b3ff;          color               : #fff;             pointer-events      :  none;}
   #otium_list .pagingWrap .pagingBtn:hover
                { background        : #999;          color               : #fff;          transition          : .2s;}                 
   #otium_list .pagingWrap .pagingBtn svg
                { pointer-events    : none;}   
   #otium_list .pagingWrap .pagingBtn.first
                { margin            : 0;                margin-right         : 0.2em;           background          : #fff;                 color              : #999999;
                  border-radius     : 0;}
   #otium_list .pagingWrap .pagingBtn.before
                { margin-left       : 0;                color                : #999999;       border-radius     : 0;                        background          : #fff;
                  margin-right      : 1em;}
   #otium_list .pagingWrap .pagingBtn.last
                { margin            : 0;                margin-left          : 0.2em;           background          : #fff;                  color              : #999999;
                  border-radius     : 0;                }
   #otium_list .pagingWrap .pagingBtn.first:hover,
   #otium_list .pagingWrap .pagingBtn.last:hover
                { background        : #999999;          color               : #fff;}                
   #otium_list .pagingWrap .pagingBtn.next
                { margin-right      : 0;                background          : #fff;             color              : #999;              border-radius     : 0;
                  margin-left       : 1em;}             
   #otium_list .pagingWrap .pagingBtn.before:hover,
   #otium_list .pagingWrap .pagingBtn.next:hover
                { background        : #999;             color               : #fff;}
   
   #otium_list .pagingWrap .pagingBtn.first svg,
   #otium_list .pagingWrap .pagingBtn.before svg,
   #otium_list .pagingWrap .pagingBtn.next svg,
   #otium_list .pagingWrap .pagingBtn.last svg
                { font-size         : 0.8em;            }                  
   #otium_list .slideWrap
                { width             : 100%;             height              : auto;                   }               
   #otium_list .slideWrap .listSwiper
                { width             : 100%;             height              : 100%;}           
   #otium_list .slideWrap .listSwiper img
                { width             : 100%;             height              : auto;             aspect-ratio        : 1920 / 800;       object-fit          : cover;}
               
@media(max-width : 1024px){                  
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #otium_list .listWrap .list .hoverWrap .title
                { font-size         : 1em;}            
                          
                  
}
                  
@media(max-width : 640px){                  
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #otium_list .listWrap
                { grid-template-columns : repeat(2,calc(calc(100% - 1em) / 2));
                  }
   #otium_list .pagingWrap
                { margin            : 0 0 4em;} 
   
        
}