.tab-banner-wrapper{background:var(--bg-primary);border-radius:var(--radius-xl);margin-top:28px;box-shadow:0 4px 24px #0000000f;border:1px solid var(--border-primary);overflow:hidden}.tab-banner-wrapper .tab-banner-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--bg-secondary)}.tab-banner-wrapper .tab-banner-header .title-group a.title{font-size:22px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;text-decoration:none}.tab-banner-wrapper .tab-banner-header .view-all{font-size:15px;font-weight:500;color:var(--primary-blue);text-decoration:none;transition:all var(--transition-fast);padding:8px 16px;border-radius:var(--radius-md);background:#0071e30f}.tab-banner-wrapper .tab-banner-header .view-all:hover{background:#0071e31f}.tab-banner-wrapper .tab-list{display:flex;justify-content:space-around;background:var(--bg-secondary)}.tab-banner-wrapper .tab-list .tab{width:100%;height:110px;padding-bottom:8px;display:flex;gap:10px;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:none;background:transparent}.tab-banner-wrapper .tab-list .tab:hover{background:#0000000a}.tab-banner-wrapper .tab-list .tab.active{background:var(--bg-primary);border-bottom:3px solid var(--primary-blue)}.tab-banner-wrapper .tab-list .tab.active span{color:var(--text-primary)}.tab-banner-wrapper .tab-list .tab img,.tab-banner-wrapper .tab-list .tab .tab-icon{width:56px;height:56px;filter:grayscale(100%);transition:all var(--transition);object-fit:contain}.tab-banner-wrapper .tab-list .tab:hover img,.tab-banner-wrapper .tab-list .tab.active img,.tab-banner-wrapper .tab-list .tab:hover .tab-icon,.tab-banner-wrapper .tab-list .tab.active .tab-icon{filter:grayscale(0)}.tab-banner-wrapper .tab-list .tab .img-placeholder{width:56px;height:56px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--separator) 100%)}.tab-banner-wrapper .tab-list .tab span{font-size:15px;font-weight:600;color:var(--text-secondary)}.tab-banner-content-list{display:none;justify-content:center;padding:16px;gap:16px;background:var(--bg-secondary);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.tab-banner-content-list.active{display:flex}.tab-content-main-banner{width:400px;height:388px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);display:block;flex-shrink:0}.tab-content-main-banner img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}.tab-content-main-banner:hover img{transform:scale(1.02)}.tab-content-main-banner .img-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%)}.tab-content-dual-banner-list{display:flex;flex-direction:column;gap:16px}.tab-content-dual-banner-list a{width:320px;height:184px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition);display:block}.tab-content-dual-banner-list a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.tab-content-dual-banner-list img{width:100%;height:100%;object-fit:cover}.tab-content-dual-banner-list .img-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%)}@media (max-width: 1519px){.tab-banner-content-list .tab-content-main-banner{width:440px;height:426.6px}.tab-banner-content-list .tab-content-dual-banner-list{height:207px;width:352.4px}.tab-banner-content-list .tab-content-dual-banner-list a{width:100%;height:calc(50% - 8px)}.tab-banner-content-list .tab-content-dual-banner-list:last-of-type{display:none}}@media (max-width: 1299px){.tab-banner-wrapper .tab-list .tab img,.tab-banner-wrapper .tab-list .tab .tab-icon,.tab-banner-wrapper .tab-list .tab .img-placeholder{width:48.8px;height:48.8px}.tab-banner-wrapper .tab-list .tab span{font-size:14px}.tab-banner-content-list .tab-content-main-banner{width:326.1px;height:316.3px}.tab-banner-content-list .tab-content-dual-banner-list{height:152.7px;width:259.9px}.tab-banner-content-list .tab-content-dual-banner-list a{width:100%;height:calc(50% - 8px)}}@media (max-width: 1024px){.tab-banner-wrapper .tab-list{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:12px;justify-content:flex-start;padding:0 8px}.tab-banner-wrapper .tab-list .tab{flex-shrink:0;min-width:100px;height:90px}.tab-banner-content-list{flex-direction:column;align-items:center;padding:16px;gap:16px}.tab-content-main-banner{width:100%;max-width:600px;height:auto;aspect-ratio:400 / 388}.tab-content-dual-banner-list{flex-direction:row;width:100%;max-width:600px;height:auto}.tab-content-dual-banner-list a{flex:1;width:auto;height:auto;aspect-ratio:320 / 184}.tab-banner-content-list .tab-content-dual-banner-list:last-of-type{display:flex}}@media (max-width: 768px){.tab-banner-wrapper{margin-top:16px}.tab-banner-wrapper .tab-banner-header{padding:12px 16px}.tab-banner-wrapper .tab-banner-header .title-group a.title{font-size:18px}.tab-banner-wrapper .tab-list .tab{min-width:80px;height:80px}.tab-banner-wrapper .tab-list .tab img,.tab-banner-wrapper .tab-list .tab .tab-icon,.tab-banner-wrapper .tab-list .tab .img-placeholder{width:36px;height:36px}.tab-banner-wrapper .tab-list .tab span{font-size:12px}.tab-banner-content-list{padding:12px;gap:12px}.tab-content-main-banner{max-width:100%;height:auto;aspect-ratio:4 / 3}.tab-content-dual-banner-list{flex-direction:column;max-width:100%}.tab-content-dual-banner-list a{width:100%;height:120px;aspect-ratio:unset}}@media (max-width: 480px){.tab-banner-wrapper .tab-banner-header{padding:10px 12px;flex-wrap:wrap;gap:8px}.tab-banner-wrapper .tab-banner-header .title-group a.title{font-size:16px}.tab-banner-wrapper .tab-banner-header .view-all{font-size:12px}.tab-banner-wrapper .tab-list .tab{min-width:70px;height:70px;gap:4px}.tab-banner-wrapper .tab-list .tab img,.tab-banner-wrapper .tab-list .tab .tab-icon,.tab-banner-wrapper .tab-list .tab .img-placeholder{width:32px;height:32px}.tab-banner-wrapper .tab-list .tab span{font-size:11px}.tab-banner-content-list{padding:10px;gap:10px}.tab-content-dual-banner-list a{height:100px}}@media (prefers-reduced-motion: reduce){.tab-banner-wrapper .tab-list .tab,.tab-content-main-banner img,.tab-content-dual-banner-list a{transition:none}.tab-content-main-banner:hover img,.tab-content-dual-banner-list a:hover{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/section-tab-banner.css.map */