.menuArea{ position:sticky; top:calc(var(--headerHeight)); display:flex; justify-content:space-between; margin-bottom:23px; z-index:20; }
  .menuArea .category{  }
    .menuArea .category > [class^="btn"]{ margin-right:8px; margin-bottom:8px; }
  .menuArea .sideArea{ font-size:0; }
    .menuArea .sideArea > *{ display:inline-block; }
    .menuArea .sideArea > *:not(:last-child){ margin-right:12px; }
    .menuArea .search{ position:relative; border:1px solid; border-color:rgba(200, 200, 200, 0.3); border-radius:4px; }
      .menuArea .search form{  }
        .menuArea .search form input[type="text"]{ display:block; width:100%; padding:4px 8px; color:#fff; }
        .menuArea .search form input[type="image"]{ position:absolute; top:50%; right:8px; width:16px; transform:translateY(-50%); z-index:5; }
    .menuArea .toggleView{ font-size:1rem; color:#fff; cursor:pointer; white-space:nowrap; }
    .menuArea .toggleView:before{ content:''; display:inline-block; width:20px; height:20px; margin-right:4px; vertical-align:middle;
      background-position:center;
      background-repeat:no-repeat;
      background-size:contain;
    }
    @media screen and (min-width:1125px){
      .menuArea .toggleView:hover{ opacity:0.3; }
    }
.contentArea{ font-size:0; }
  .contentArea article{ position:relative; }
    .contentArea article .thumbnail{ padding-top:66.666%;
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
    }
      .contentArea article .thumbnail img{ display:none; }
      .contentArea article .thumbnail.loading{ background:none !important; background-color:#000 !important; }
      .contentArea article .thumbnail.loading img{ position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%); width:35%; opacity:0.45; }

    .contentArea article .title{  }
      .contentArea article .title .subTitle{ text-transform:uppercase; }
      .contentArea article .title h2{  }
    .contentArea article .description{  }
    /* .contentArea article .imageArea{ display:flex; gap:12px; overflow:hidden; overflow-x:scroll; height:200px; }
    .contentArea article .imageArea::-webkit-scrollbar{ display:none; }
      .contentArea article .imageArea img{ display:inline-block; vertical-align:top; } */
    .contentArea article .imageArea{ overflow:hidden; }
      .contentArea article .imageArea .swiper-slide{ padding-top:50%;
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
      }
        .contentArea article .imageArea .swiper-slide img{ display:none; }

#content.thumb .menuArea{  }
  #content.thumb .menuArea .toggleView:before{ background-image:url('../img/view_thumbnail.svg'); }
#content.thumb .contentArea{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--column); }
  #content.thumb .contentArea article{ perspective:580px; perspective-origin:center; }
    #content.thumb .contentArea article .thumbnail{ position:relative; border-radius:2px; overflow:hidden; }
      #content.thumb .contentArea article .thumbnail a{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; }
    @media screen and (min-width:1125px){
      #content.thumb .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.3); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); font-size:0; padding:12px; opacity:0; pointer-events:none; border-radius:2px; overflow:hidden; }
        #content.thumb .contentArea article .title :is(.subTitle,h2){ font-size:1rem; font-weight:600; color:var(--black); width:50%; text-transform:uppercase; display:none; }
        #content.thumb .contentArea article .title .subTitle{  }
        #content.thumb .contentArea article .title h2{ text-align:right; }
          #content.thumb .contentArea article .title h2 a{ pointer-events:none; }
        #content.thumb .contentArea article .title > a{ position:absolute; display:block; top:0; left:0; right:0; bottom:0; width:100%; z-index:5; pointer-events:all; }
    }
    #content.thumb .contentArea article .description{ display:none; }
    #content.thumb .contentArea article .imageArea{ display:none; }
    /* hover */
    @media screen and (min-width:1125px){
      #content.thumb .contentArea article .thumbnail,
      #content.thumb .contentArea article .title{ transition-duration:380ms; transition-timing-function:ease-in-out; }

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

#content.list .menuArea{  }
  #content.list .menuArea .toggleView:before{ background-image:url('../img/view_list.svg'); }
#content.list .contentArea{ border-bottom:1px solid; border-color:#fff; }
  #content.list .contentArea article{ display:grid; grid-template-columns:1fr 1fr 2fr; gap:var(--column); padding:12px 0; border-top:1px solid; border-color:#fff; color:#fff; }
    #content.list .contentArea article .thumbnail{ display:none; }
    #content.list .contentArea article .title{ display:flex; flex-direction:column-reverse; justify-content:space-between; font-size:0; }
      #content.list .contentArea article .title .subTitle{ font-size:1rem; font-weight:600; text-decoration:underline; opacity:0; pointer-events:none; }
      #content.list .contentArea article .title h2{ font-size:1.6rem; font-weight:600; }
        #content.list .contentArea article .title h2 a{ color:#fff; }
        /* hover */
        @media screen and (min-width:1125px){
          #content.list .contentArea article .title h2 a:hover{ text-decoration:underline; }
        }
      #content.list .contentArea article .title > a{ display:none; }
    #content.list .contentArea article .description{ font-size:1rem; }
    #content.list .contentArea article .imageArea{  }


/* css 추가 */
 #content.list .contentArea article .description {
 -webkit-line-clamp:25; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; }