/****************************
 * Header Detail
*****************************/
/* banner > col */
.site-banner__top {gap:12px;font-weight:500;}
.site-banner__top-col {column-gap:18px; row-gap:4px;}

/* banner > image */
.site-banner[class*="detail"] .site-banner-image {height:clamp(225px, 49vw, 638px);}

/* banner > breadcrumb */
.site-banner[class*="detail"] .site-breadcrumbs {text-overflow:ellipsis; max-width:768px;}


/****************************
 * Responsive Header Detail
*****************************/
@media only screen and (max-width:768px) {
    .site-banner__top {flex-direction:column;align-items:flex-start;}
    .site-banner__top-col {order:1;}
    .site-banner[class*="detail"] .site-breadcrumbs {white-space:unset;text-overflow:unset;}
}