:root .navbar{
    --ho-black:#fff;
    --ho-white:#000;
}
.category_container__title__txt *{ color: #fff;}

.category_container__title{
    display: block;
    position: relative;
    height: 80vh;
    width: 100vw;
    overflow: hidden;
}
.category_container__title__bg{ 
    object-fit:cover; 
    width: 100%; 
    height: 100%;
}

.category_container__title__txt{ 
    position: absolute;
    top: 0%;
    left: 50%;   
    transform: translate(-50%,-0%);         
    width: 92%;
    height: 80vh;
    display: flex;            
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}
.category_container__title__txt h1,
.category_container__title__txt h4{ width: 36%;}  
.category_container__title__txt h1{ letter-spacing: 2.6vw; font-size: var(--ho-display-2); font-size: 4.8vw;   font-weight: 700; }
.category_container__title__txt h4{  line-height: 1.0; font-weight: 600; opacity: 0.8; font-size: 2.6vw;  }

@media screen and (max-width: 960px) {
    .category_container__title__txt{ 
        position: absolute;
        top: calc(50% - 80px);
        left: 50%;   
        transform: translate(-50%,-50%);         
        width: 92%;
        height: 60vh;       
        flex-direction: column;
        justify-content: flex-end; 
        gap: 1.2em; 
    }      
    .category_container__title__txt h1,
    .category_container__title__txt h4{ width: 100%;}     
    .category_container__title__txt h1{ letter-spacing: 2.6vw; font-size: var(--ho-display-4);   }
    .category_container__title__txt h4{  line-height: 1.0; font-weight: 600; opacity: 0.8; font-size: var(--ho-display-6);  }  
}
.category_container__belt{ display: block; margin: 2em 0; height: 130px;   overflow: hidden;}  
.category_container__belt img{ object-fit: cover; width: 100%;             height: 100%;}
@media screen and (max-width: 960px) {
    .category_container__belt{  width: 100vw; height: 80px;    }  
    .category_container__belt img{ object-fit: cover;     }
}
.thumbnail_setion{
width: 84%;  
margin: 0 auto; 
}
.col-lg,
.col-md{
display: flex;   
overflow: hidden;
}
.col-lg{ flex-direction: row;      justify-content: space-between;  }
.col-lg li{ width: 27vw;  }
.col-lg li>a>div:first-child{
overflow: hidden; 
display: block;
position: relative;
width: 27vw;   
height: 32vw;
background-color: #F0EEED;
}
.col-lg li>a>div:first-child img{
display: block;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
transition: all 0.5s;  
}
.col-lg li>a>div:first-child img:last-child{ opacity: 0; background-color: #f0eeed;  }  
.col-lg li>a:hover>div:first-child img:last-child{ opacity: 1; background-color: #f0eeed;}   

@media screen and (max-width: 960px) {
.col-lg{ 
    flex-direction: column;     
}
.col-lg li{ width: 84vw; margin: 0 auto; padding: 0;} 
.col-lg li>a>div:first-child{
    width: 84vw;
    height:94vw;
}
}
.col-lg li>a>div:last-child{
display: flex;
flex-direction: row;
justify-content: space-between; 
align-items: center;
margin: 1.4em 0 4.4em 0;   
width: 27vw;
}
.col-lg li>a>div:last-child div:first-child *{ display: inline;} 
.col-lg li>a>div:last-child div:first-child h5{ font-weight: 500;}   
.col-lg li>a>div:last-child div:first-child h6{font-weight: 500; padding-left: 0.5em;}       
.col-lg li>a>div:last-child div:last-child{ display: flex; flex-direction: row; gap: 0.5em;}   
.col-lg li>a>div:last-child div:last-child svg{ width: 13px; height: 13px;} 
@media screen and (max-width: 960px) {
.col-lg li>a>div:last-child{width: 80vw; margin: 0.3em 0 3.4em 0; text-align: left; }
.col-lg li>a>div:last-child div:first-child h5{ display: block;}   
.col-lg li>a>div:last-child div:first-child h6{padding-left: 0.1em;}       
}