@media screen and (min-width:1125px){
  #categoryList{ position:fixed; top:var(--headerHeight); left:17px; width:250px; border:1px solid; border-color:rgba(200,200,200,0.3); border-radius:4px; background-color:rgba(29,29,29,0.3); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); z-index:50; font-size:0; }
    #categoryList .categories{ padding:12px 12px 4px; overflow:hidden; max-height:200px; }
      #categoryList .categories [class*="btn"]{ display:inline-block; margin-right:8px; margin-bottom:8px; }
    #categoryList .search{ position:relative; border-top:1px solid; border-color:rgba(200,200,200,0.3); }
      #categoryList .search form{  }
        #categoryList .search form input[type="text"]{ display:block; width:100%; padding:12px; color:#fff; }
        #categoryList .search form input[type="image"]{ position:absolute; top:50%; right:12px; transform:translateY(-50%); z-index:5; }
}
/* scroll up */
body.viewTop{  }
  body.viewTop #categoryList{  }
    body.viewTop #categoryList .categories{ max-height:44px; }
    /* hover */
    @media screen and (min-width:1125px){
      body.viewTop #categoryList .categories:hover{ max-height:200px; }
    }

#sort{ position:sticky; top:calc(var(--headerHeight)); margin-bottom:23px; font-size:0; text-align:right; line-height:1; z-index:20; }
  #sort div.search{ display:none; }
  #sort ul.sorting{ display:inline-block; vertical-align:top; text-align:left; margin-right:20px; }
    #sort ul.sorting > li{ display:none; }
      #sort ul.sorting > li a{ color:#fff; font-size:1rem; pointer-events:none; }
    /* selected */
    #sort ul.sorting > li.selected{ display:block; cursor:pointer; }
    #sort ul.sorting > li.selected:after{ content:''; display:inline-block; vertical-align:top; margin-left:4px; width:15px; height:15px;
      background-position:center;
      background-repeat:no-repeat;
      background-size:contain;
      background-image:url('/img/arrow_down.svg');
    }
  #sort ul.sortingList{ display:inline-block; position:absolute; top:-12px; text-align:left; margin-left:-12px; background-color:rgba(29,29,29,0.6); border:1px solid; border-color:rgba(200,200,200,0.3);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    z-index:-1;
    border-width:0;
    padding:0 30px 0 12px;
    max-height:0;
    overflow:hidden;
    border-radius:0;
    pointer-events:none;
  }
    #sort ul.sortingList > li{  }
      #sort ul.sortingList > li a{ display:block; color:#fff; font-size:1rem; padding:4px 0; }
    /* selected */
    #sort ul.sortingList > li.selected{  }
      #sort ul.sortingList > li.selected a{ text-decoration:underline; }
    /* hover */
    @media screen and (min-width:1125px){
      #sort ul.sortingList > li a:hover{ text-decoration:underline; }
    }
  /* on */
  #sort ul.sortingList.on{
    border-width:1px;
    padding:32px 30px 12px 12px;
    max-height:200px;
    border-radius:4px;
    pointer-events:all;
  }
  #sort .filterBtn{ display:inline-block; vertical-align:top; font-size:1rem; color:#fff; cursor:pointer; }
  #sort .filterBtn:after{ content:''; display:inline-block; vertical-align:top; margin-left:4px; width:15px; height:15px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url('/img/icon_plus.svg');
  }

#contentArea{ font-size:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; transition-property:width; }
  #contentArea article{ position:relative; perspective:580px; perspective-origin:center; }
    #contentArea article .thumbnail{ padding-top:56.25%; border-radius:2px; overflow:hidden;
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
    }
      #contentArea article .thumbnail img{ display:none; }
    @media screen and (min-width:1125px){
      #contentArea article .title{ position:absolute; display:flex; justify-content:space-between; top:0; left:0; right:0; bottom:0; width:100%; background-color:rgba(255,255,255,0.6); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); font-size:0; padding:12px; opacity:0; cursor:pointer; border-radius:2px; overflow:hidden; text-align:center; }
        #contentArea article .title .subTitle{ text-transform:uppercase; }
        #contentArea article .title h2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
          font-size:1rem; font-weight:600; color:var(--black); text-transform:uppercase;
        }
    }
    /* hover */
    @media screen and (min-width:1125px){
      #contentArea article .thumbnail,
      #contentArea article .title{ transition-duration:380ms; transition-timing-function:ease-in-out; }

      #contentArea article:hover{  }
        #contentArea article:hover .thumbnail{  }
        #contentArea article:hover .title{ opacity:1; }
        @media screen and (min-width:1600px){
          #contentArea article:nth-of-type(5n-4):hover .thumbnail,
          #contentArea article:nth-of-type(5n-4):hover .title{ transform:rotateY(9deg); }
          #contentArea article:nth-of-type(5n):hover .thumbnail,
          #contentArea article:nth-of-type(5n):hover .title{ transform:rotateY(-9deg); }
        }
        @media screen and (max-width:1600px){
          #contentArea article:nth-of-type(4n-3):hover .thumbnail,
          #contentArea article:nth-of-type(4n-3):hover .title{ transform:rotateY(9deg); }
          #contentArea article:nth-of-type(4n):hover .thumbnail,
          #contentArea article:nth-of-type(4n):hover .title{ transform:rotateY(-9deg); }
        }
    }

#filterArea{ position:absolute; top:38px; right:0; bottom:0; width:100%; max-width:320px; padding:0 var(--marginLeft) 12px var(--column); background-color:var(--black); font-size:0;
  transform:translateX(100%);
  pointer-events:none;
  z-index:18;
}
  #filterArea .wrap{ padding:12px; border:1px solid; border-color:rgba(200,200,200,0.3); border-radius:4px; overflow-y:scroll;
    /* height:100%; */
    position:sticky;
    top:calc(var(--headerHeight) + 38px);
  }
  #filterArea .wrap::-webkit-scrollbar{ display:none; }
  @media screen and (min-width:600px){
    #filterArea .wrap{ max-height:calc(100vh - 200px); }
  }
    #filterArea .wrap .closeBtn{ position:absolute; top:14px; right:14px; width:12px; height:12px; cursor:pointer; }
    #filterArea .wrap .closeBtn:before,
    #filterArea .wrap .closeBtn:after{ content:''; position:absolute; top:50%; left:50%; display:block; width:16px; height:1px; background-color:#fff; transform-origin:center; }
    #filterArea .wrap .closeBtn:before{ transform:translate(-50%,-50%) rotate(45deg); }
    #filterArea .wrap .closeBtn:after{ transform:translate(-50%,-50%) rotate(-45deg); }
    #filterArea .wrap > div{  }
    #filterArea .wrap > div:not(:last-child){ margin-bottom:32px; }
      #filterArea .wrap > div h3{ color:var(--lightgrey); font-weight:600; margin-bottom:12px; }
        #filterArea .wrap > div h3 .number{ display:inline-block; margin-left:2px; }
      #filterArea .wrap > div .filterList{  }
        #filterArea .wrap > div .filterList [class*="btn"]{ margin-right:8px; margin-bottom:8px; }
    /* specific */
    #filterArea .wrap > div.bpm{  }
      #filterArea .wrap > div.bpm input#bpm{ width:100%; margin-top:25px; }
    #filterArea .wrap > div.buttonArea{  }
      #filterArea .wrap > div.buttonArea .btnSubmit{ display:block; width:100%; text-transform:none; }
/* filter on */
#content.filterOn{  }
  #content.filterOn #contentArea{ width:calc(100% - 320px + var(--marginLeft)); }
  #content.filterOn #sort{  }
    #content.filterOn #sort .filterBtn:after{ background-image:url('/img/icon_minus.svg'); }
  #content.filterOn #filterArea{ transform:translateX(0); pointer-events:all; }

  /* css 추가 */
  #content #contentArea.filterOn{ width:calc(100% - 320px + var(--marginLeft)); }
  #sort .filterBtn.filterOn:after{ background-image:url('/img/icon_minus.svg'); }
  #content #filterArea.filterOn{ transform:translateX(0); pointer-events:all; }
  #contentArea article .title h2 .author{text-transform:none;}