html{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{width:0;height:0}.first{height:9.6rem;padding-left:1.1rem;display:flex;flex-direction:column;justify-content:center;background-image:url(/wp-content/themes/hyhadmin/assets/images/products/first-img.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.first h2,.first h1{color:#FFF;font-family:"Helvetica Condensed";font-size:.7rem;margin-bottom:.4rem;font-style:normal;font-weight:700;line-height:normal;text-transform:uppercase}.first p{color:#FFF;font-family:"Helvetica Condensed";font-size:.4rem;font-style:normal;font-weight:500;line-height:normal;text-transform:capitalize}.second{width:100%;max-width:19.2rem;margin:0 auto;padding:1rem 1.6rem;box-sizing:border-box;background:#FFF;overflow:hidden}.second__tabs{display:flex;gap:.1rem;margin-bottom:.36rem;opacity:0;transform:translateY(.45rem);transition:opacity 0.7s ease,transform 0.7s cubic-bezier(.22,1,.36,1)}.second__tab{display:flex;padding:.14rem .3rem;flex-direction:column;justify-content:center;align-items:center;gap:.1rem;border:none;background:#F6F6F6;color:#000;text-align:center;font-family:"Inter",sans-serif;font-size:.16rem;font-style:normal;font-weight:400;line-height:normal;text-transform:capitalize;white-space:nowrap;cursor:pointer;transition:background 0.35s ease,color 0.35s ease}.second__tab:hover{color:#FFF;background:#0D67AC}.second__tab.is-active{color:#FFF;background:#0D67AC}.second__divider{width:100%;height:1px;background:#D9D9D9;margin-bottom:.69rem;transform:scaleX(0);transform-origin:left;transition:transform 0.8s cubic-bezier(.22,1,.36,1) 0.2s}.second.is-in .second__divider{transform:scaleX(1)}.second__body{display:flex;align-items:flex-start}.second__cats{flex-shrink:0;list-style:none;margin:0 1.19rem 0 0;padding:0;display:flex;flex-direction:column;gap:.26rem;opacity:0;transform:translateX(-.45rem);transition:opacity 0.7s ease 0.15s,transform 0.7s cubic-bezier(.22,1,.36,1) 0.15s}.second__cats li{color:#333;font-family:"Inter",sans-serif;font-size:.16rem;font-style:normal;font-weight:400;line-height:normal;text-transform:capitalize;cursor:pointer;transition:color 0.35s ease}.second__cats li:hover,.second__cats li.is-active{color:#0D67AC}@keyframes secondCatsIn{from{opacity:0;transform:translateX(-.2rem)}to{opacity:1;transform:none}}.second__cats.is-refresh{animation:secondCatsIn 0.45s cubic-bezier(.22,1,.36,1)}.second__stage{flex:1;opacity:0;transform:translateY(.45rem);transition:opacity 0.7s ease 0.2s,transform 0.7s cubic-bezier(.22,1,.36,1) 0.2s}.second__panel{display:none}.second__panel.is-active{display:block;animation:secondPanelIn 0.45s cubic-bezier(.22,1,.36,1)}@keyframes secondPanelIn{from{opacity:0;transform:translateX(.3rem)}to{opacity:1;transform:none}}.second__grid{display:grid;grid-template-columns:repeat(4,3.18rem);column-gap:.35rem;row-gap:.5rem;width:100%}.second__card{cursor:pointer;transition:transform 0.45s cubic-bezier(.22,1,.36,1)}.second__card-pic{width:3.18rem;height:3.83rem;overflow:hidden;border:1px solid #D9D9D9;border-radius:.1rem;margin-bottom:.25rem;box-sizing:border-box;transition:border-color 0.4s ease}.second__card-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.55s cubic-bezier(.22,1,.36,1)}.second__card-title{color:#333;text-align:center;font-family:"Helvetica Condensed",sans-serif;font-size:.24rem;font-style:normal;font-weight:500;line-height:normal;transition:color 0.4s ease}.second__card:hover{transform:translateY(-.06rem)}.second__card:hover .second__card-pic{border-color:#0D67AC}.second__card:hover .second__card-img{transform:scale(1.06)}.second__card:hover .second__card-title{color:#0D67AC}.second__card--cta{width:3.18rem;height:3.83rem;padding:0 .29rem;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #D9D9D9;border-radius:.1rem;background:#F5F5F5}.second__cta-title{color:#333;text-align:center;font-family:"Helvetica Condensed",sans-serif;font-size:.36rem;font-style:normal;font-weight:700;line-height:normal;text-transform:capitalize;margin-bottom:.1rem}.second__cta-text{color:#999;text-align:center;font-family:"Inter",sans-serif;font-size:.16rem;font-style:normal;font-weight:400;line-height:150%;margin-bottom:.22rem}.second__cta-btn{position:relative;overflow:hidden;display:inline-flex;padding:.1rem .4rem;justify-content:center;align-items:center;gap:.05572rem;background:#D0C0A6;color:#383838;font-family:"Helvetica Condensed",sans-serif;font-size:.14rem;font-style:normal;font-weight:700;line-height:normal;text-decoration:none;transition:transform 0.4s cubic-bezier(.22,1,.36,1),box-shadow 0.4s ease}.second__cta-btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgb(255 255 255 / .6),transparent);transform:skewX(-20deg);transition:left 0.7s ease}.second__cta-btn:hover{transform:translateY(-.04rem);box-shadow:0 .1rem .24rem 0 rgb(208 192 166 / .55)}.second__cta-btn:hover::before{left:140%}.second.is-in .second__tabs{opacity:1;transform:none;transition-delay:0.05s}.second.is-in .second__cats{opacity:1;transform:none}.second.is-in .second__stage{opacity:1;transform:none}html[data-mode="h5"] .first{height:4.6rem;padding:.4rem}html[data-mode="h5"] .first h2,html[data-mode="h5"] .first h1{font-size:.44rem;margin-bottom:.2rem}html[data-mode="h5"] .first p{font-size:.26rem}html[data-mode="h5"] .second{padding:.6rem .4rem .8rem}html[data-mode="h5"] .second__tabs{overflow-x:auto;gap:.16rem;margin-bottom:.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}html[data-mode="h5"] .second__tabs::-webkit-scrollbar{display:none}html[data-mode="h5"] .second__tab{flex-shrink:0;padding:.16rem .34rem;font-size:.26rem}html[data-mode="h5"] .second__divider{margin-bottom:.5rem}html[data-mode="h5"] .second__body{flex-direction:column;gap:.36rem}html[data-mode="h5"] .second__cats{flex-direction:row;flex-wrap:wrap;margin-right:0;gap:.24rem .36rem}html[data-mode="h5"] .second__cats li{font-size:.26rem}html[data-mode="h5"] .second__stage{width:100%}html[data-mode="h5"] .second__grid{grid-template-columns:repeat(2,1fr);column-gap:.3rem;row-gap:.4rem}html[data-mode="h5"] .second__card-pic{width:100%;margin-bottom:.16rem}html[data-mode="h5"] .second__card-title{font-size:.26rem}html[data-mode="h5"] .second__card--cta{width:100%}html[data-mode="h5"] .second__cta-title{font-size:.32rem}html[data-mode="h5"] .second__cta-text{font-size:.24rem;margin-bottom:.28rem}html[data-mode="h5"] .second__cta-btn{padding:.16rem .48rem;font-size:.24rem}