.tabsbox{position: relative; display: flex; flex-wrap: wrap; align-items: center; gap:20px;color:#AEAEAE; font-size: 1.125rem; border-bottom: 1px solid #E8E8E8; padding-bottom: 30px; overflow: hidden;}
.tabs-scroll {display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; flex: 1;  padding: 0px 8px; scrollbar-width: none;}
.tabs-scroll::-webkit-scrollbar {display: none;}
.tabsbox a{ display: inline-block;padding: 0 10px; font-weight: 500; white-space: nowrap; word-break: keep-all;}
.tabsbox a:hover,
.tabsbox a.active{ color:#263849; font-weight: 600;}
.btn-arrow{ position: absolute; top:calc(50% - 12px); transform: translate(0, -50%); line-height: 1; background-color: #fff; cursor: pointer;}
.btn-arrow.prev{left:0}
.btn-arrow.next{right:0}
.btn-arrow:disabled svg path {stroke: #e0e0e0;}

.listbox{display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; list-style: none;}
.listbox li{text-indent: 0; margin-left: 0;}
.listbox li a{position: relative; display: block; width:100%; aspect-ratio: 4 / 3; overflow: hidden; transition:all 0.3s ease;}
.listbox li a:hover,
.listbox li a:focus{box-shadow: 1px 1px 8px #00000014, 1px 1px 1px #bcc1c659, 0 1px 4px #00000017;}
.listbox li a > img{ object-fit: cover; width: 100%; height: -webkit-fill-available;}
.listbox li a .name-tag{position: absolute; bottom: 0; left:0; min-width: fit-content; width: 80%; background-color: rgba(255, 255, 255, 0.7);backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); padding:12px 10px; transition: width 0.3s ease;}
.listbox li a:hover .name-tag{width: 100%;background-color: rgba(255, 255, 255, 0.9);}
.listbox .name-tag-category{ color:#036EB8; font-size: 0.813rem; font-weight: 600;}
.listbox .name-tag-title{display: block; font-size: 1.125rem; font-weight: 400; margin-top: 10px;}
.listbox .name-tag-title b{padding-right:4px;}

.award-header{ border-bottom: 1px solid #E8E8E8; padding-bottom: 40px; margin-bottom: 60px;}
.category {font-weight: 500;}
.category > span{ display: inline-block; color:#263849; background-color: #D9E6F2;font-size: 0.938rem; font-weight: 600; padding:6px 8px; margin-right: 4px; margin-bottom: 10px;}
.award-title{ color:#333; font-size: 2.25rem; font-weight: 700; line-height: 1.25;}
.award-title > span{ display: block;color:#6A9DCD;}


.article{display: grid; grid-template-columns: 40% 50%; gap: 10%; padding-bottom:60px; margin-bottom: 60px; border-bottom: 4px double #E8E8E8;}
.article img{ object-fit: cover; width: 100%;}
.article .contents p{ margin-top: 10px;}

.article-grid{position: relative;display: grid; grid-template-columns: 50% 50%; align-items: start;}
.article-grid::before{content: ""; position: absolute; left:50%; top:0; width: 1px; height: 100%; background-color: #E8E8E8;}
.figure-list {padding-left:60px;display: grid; grid-template-columns: repeat(auto-fill, minmax(259px, 1fr)); grid-template-rows: max-content; gap:20px;}
.figure-list.orless{ grid-template-columns:1fr}
.figure-list > div{min-width: auto; height: auto; aspect-ratio: 278 / 192; overflow: hidden; }
.figure-list img{object-fit: cover; width: 100%; }
.article-grid .contents{padding-right: 60px;}
.article-grid .contents p{ margin-bottom: 10px;}
.cont-title{ display: flex; align-items: center; justify-content: center; background-color: #333; color:#fff; width: 60px; height: 60px; margin-bottom:30px; font-size: 0.875rem;}

.layout{display: grid;gap:10px}
.layout > div{min-width: auto; height: auto;  overflow: hidden; }
.layout img{ object-fit: cover; width: 100%; height: 100%;}

.layout-a{grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-rows: repeat(2, minmax(100px, auto));}
.layout-a div:nth-child(1){grid-column: 1 / span 2; grid-row: 1 / span 2;}
.layout-a .layout-a4{grid-column: 3 / span 2; }

.layout-b{grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-rows: repeat(2, minmax(100px, auto));}
.layout-b2{grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); grid-template-rows: repeat(2, minmax(100px, auto));}
.layout-b3{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(2, minmax(100px, auto));}




/* 소형 모바일 */
@media (max-width: 479px) { 

    .tabsbox{width: 100%; flex-wrap: nowrap; font-size: 1rem; gap:10px; overflow-x: auto;}
    .tabsbox a{ min-width: 120px;}
    .award-header{padding-bottom: 20px; margin-bottom: 20px;}
    .category{font-size: 0.875rem;}
    .award-title{ font-size: 1.75rem;}
    .article .side-img{ width: 100%; margin-bottom: 10px;}
    
    .article{grid-template-columns: 1fr; gap: 0; padding-bottom:20px; margin-bottom: 40px;}
    .article-grid{grid-template-columns: 1fr;}
    .article-grid::before{content: none; display: none;}
    .article-grid .contents{padding-right: 0;}
    .figure-list{padding-left: 0;grid-template-columns:repeat(auto-fill, minmax(195px, 1fr)); gap:10px}
        
    .layout-a div:nth-child(1){grid-column: unset; grid-row: unset;}
}

/* 모바일 */
@media (min-width: 480px) and (max-width: 767px) { 
    
    .award-header{padding-bottom: 20px; margin-bottom: 20px;}
    .category{font-size: 0.875rem;}
    .award-title{ font-size: 1.75rem;}
    .article .side-img{ width: 55%; margin-bottom: 10px;}

    .article{grid-template-columns: 1fr; gap: 0; padding-bottom:20px; margin-bottom: 40px;}
    .article-grid{grid-template-columns: 1fr;}
    .article-grid::before{content: none; display: none;}
    .article-grid .contents{padding-right: 0;}
    .figure-list{padding-left: 0px;grid-template-columns:repeat(auto-fill, minmax(205px, 1fr)); gap:10px}

    .layout-a div:nth-child(1){grid-column: unset; grid-row: unset;}
    
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { 

    .article{grid-template-columns: 45% 50%;gap: 5%;}
    .article-grid .contents{padding-right: 20px;} 
    .figure-list{padding-left: 20px;}

    .listbox .name-tag-title b{display: block; margin-bottom: 4px;}
    
    .award-title{ font-size: 2rem;}
}

/* PC (1024~1200) */
@media (min-width: 1024px) and (max-width: 1200px) { 
  
   
}

/* 대형 화면 (1200 이상)*/
@media (min-width: 1201px) {

 }