.hotspot-showcase .hotspot-bg{position:relative;overflow:hidden}.showcase-mobile-image .hotspot-showcase .hotspot-bg:before{content:"";position:absolute;opacity:.5;background:linear-gradient(180deg,#0000,#000);bottom:0;left:0;width:100%;height:23%}.hotspot-showcase .hotspot-bg:after{content:"";position:absolute;opacity:.5;background:linear-gradient(0deg,#0000,#000000f5 89.8%,#000);top:0;left:0;width:100%;height:35%;z-index:0}.hotspot-showcase .hotspot-bg img{width:100%;height:auto;display:block;object-fit:contain}.hotspot-showcase .content-top{position:absolute;top:12%;left:50%;transform:translate(-50%);z-index:3;text-align:center;width:100%;max-width:clamp(40.5rem,43vw,81rem);overflow:hidden}.hotspot-showcase .content-top h2{color:var(--color);font-size:clamp(26px,2.8vw,var(--font));line-height:1.2;margin:0;letter-spacing:0;transform:translateY(100%);transition:all .8s ease}.hotspot-showcase.active-section .content-top h2{transform:translateY(0)}.hotspot-showcase .hotspot-item{position:absolute;z-index:1;top:var(--top);left:var(--left)}.hotspot-showcase .dot{width:clamp(12px,1.3vw,24px);height:clamp(12px,1.3vw,24px);background:#1890ff;border-radius:50%;cursor:pointer;transition:.3s;display:block!important}.hotspot-showcase .dot:after{content:"";display:block;width:clamp(15px,1.6vw,30px);height:clamp(15px,1.6vw,30px);position:absolute;left:-3px;top:-3px;border:1px solid #1E7FD5;border-radius:100%}.hotspot-showcase .dot:hover{transform:scale(1.15)}.hotspot-showcase .popup-box{position:absolute;top:var(--top);left:var(--left);width:26.5%;background:#fff;border-radius:clamp(6px,.7vw,12px);overflow:hidden;display:none;box-shadow:0 15px 40px #0000002e;z-index:1}.hotspot-showcase .popup-box img{width:100%;height:auto;object-fit:cover;display:block;max-height:250px}.hotspot-showcase .popup-content{padding:clamp(9px,1vw,18px);position:relative}.hotspot-showcase .popup-content h4{margin:0 0 clamp(2px,.3vw,5px);font-size:clamp(10px,1.1vw,20px);font-weight:700;line-height:1.2}.hotspot-showcase .popup-content p{margin:0;font-size:clamp(8px,.9vw,16px);color:#000;line-height:1.3;letter-spacing:0}.hotspot-showcase .close-btn{position:absolute;top:0;right:0;font-size:clamp(15px,1.6vw,30px);cursor:pointer;color:#fff;line-height:1;padding:clamp(3px,.5vw,8px) clamp(6px,.7vw,12px)}.hotspot-showcase .popup-box.active{display:block}.hotspot-showcase .showcase-mobile-image{display:none}@media(min-width:1680px){.hotspot-showcase .hotspot-bg .showcase-desk-image img{min-height:clamp(42.5rem,45vw,85rem)}}@media(min-width:750px){.hotspot-showcase .hotspot-bg .showcase-desk-image img{width:100%;height:calc(100vh - 80px);display:block;object-fit:cover}}@media(max-width:1680px){.hotspot-showcase .popup-box{width:22%}.hotspot-showcase .popup-content{padding:10px}.hotspot-showcase .popup-content h4{margin:0 0 clamp(2px,.3vw,4px);font-size:clamp(8px,.9vw,16px)}.hotspot-showcase .popup-content p{font-size:clamp(7px,.8vw,14px);line-height:1.3}.hotspot-showcase .content-top{top:6%}}@media(max-width:1200px){.hotspot-showcase .content-top h2{font-size:clamp(16px,1.7vw,32px)}.hotspot-showcase .dot{width:clamp(8px,.9vw,16px);height:clamp(8px,.9vw,16px)}.hotspot-showcase .dot:after{width:clamp(10px,1.1vw,20px);height:clamp(10px,1.1vw,20px);left:-2px;top:-2px}.hotspot-showcase .popup-box{width:26%}.hotspot-showcase .popup-box img{max-height:clamp(55px,5.8vw,110px)}}@media(max-width:989px){.hotspot-showcase .content-top h2{font-size:22px;max-width:80%;margin:0 auto}.hotspot-showcase .popup-box{width:40%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4}.hotspot-showcase .popup-box img{max-height:unset}}@media(max-width:749px){.hotspot-showcase .content-top h2{font-size:var(--font-mobile)}.hotspot-showcase .popup-content h4{font-size:16px;margin:0 0 8px}.hotspot-showcase .showcase-mobile-image{display:block}.hotspot-showcase .hotspot-bg:after,.hotspot-showcase .hotspot-bg:before,.hotspot-showcase .showcase-desk-image{display:var(--display)}.hotspot-showcase .content-top h2{max-width:100%;margin:0 24px}.hotspot-showcase .popup-box{width:100%;max-width:300px;top:auto;left:50%;bottom:80px;transform:translate(-50%)}.hotspot-showcase .popup-content p{font-size:12px;line-height:1.5}.hotspot-showcase .hotspot-item{position:absolute;z-index:1;top:var(--top-mobile);left:var(--left-mobile)}.hotspot-showcase .dot:after{width:24px;height:24px}.hotspot-showcase .dot{width:20px;height:20px}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/hotspot-showcase.css.map */