.coffee-taste-diagram{width:100%}.taste-diagram-wrapper{max-width:1920px;margin:0 auto;text-align:center}.section-title{font-family:Libre Baskerville,serif;font-style:italic;font-size:36px;margin-bottom:60px;text-align:center}.diagram-container{position:relative;width:100%;max-width:1400px;margin:0 auto;min-height:600px;display:flex;align-items:center;justify-content:center;padding:80px 100px}.center-bean{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-0deg);z-index:10;width:280px;height:280px;transition:transform .6s ease}.center-bean img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.2))}.center-bean:hover{transform:translate(-50%,-50%) rotate(-8deg) scale(1.05)}.taste-points{position:absolute;width:100%;height:100%;left:0;top:0}.taste-point{position:absolute;cursor:pointer;transition:all .3s ease;text-align:center}.taste-point[data-position=top]{top:0;left:50%;transform:translate(-50%)}.taste-point[data-position=top-right]{top:0;right:100px}.taste-point[data-position=right]{top:50%;right:0;transform:translateY(-50%)}.taste-point[data-position=bottom-right]{bottom:0;right:100px}.taste-point[data-position=bottom]{bottom:0;left:50%;transform:translate(-50%)}.taste-point[data-position=bottom-left]{bottom:0;left:100px}.taste-point[data-position=left]{top:50%;left:0;transform:translateY(-50%)}.taste-point[data-position=top-left]{top:0;left:100px}.point-dot{width:10px;height:10px;background:#048949;border-radius:50%;position:absolute;z-index:5;transition:all .3s ease}.taste-point[data-position=top] .point-dot{bottom:-5px;left:50%;transform:translate(-50%)}.taste-point[data-position=bottom] .point-dot{top:-5px;left:50%;transform:translate(-50%)}.taste-point[data-position=left] .point-dot{right:-5px;top:50%;transform:translateY(-50%)}.taste-point[data-position=right] .point-dot{left:-5px;top:50%;transform:translateY(-50%)}.taste-point[data-position=top-left] .point-dot{bottom:-5px;right:-5px}.taste-point[data-position=top-right] .point-dot{bottom:-5px;left:-5px}.taste-point[data-position=bottom-left] .point-dot{top:-5px;right:-5px}.taste-point[data-position=bottom-right] .point-dot{top:-5px;left:-5px}.point-line{position:absolute;background:#0c5c37;z-index:1;transition:all .3s ease}.line-glow{position:absolute;background:#048949;opacity:0;transition:all .6s ease;box-shadow:0 0 10px #048949cc}.taste-point[data-position=top] .point-line,.taste-point[data-position=bottom] .point-line{width:2px;left:50%;transform:translate(-50%)}.taste-point[data-position=top] .point-line{bottom:0;height:200px}.taste-point[data-position=bottom] .point-line{top:0;height:200px}.taste-point[data-position=top] .line-glow,.taste-point[data-position=bottom] .line-glow{width:4px;height:80px;left:50%;transform:translate(-50%)}.taste-point[data-position=left] .point-line{height:2px;top:50%;transform:translate(100%)}.taste-point[data-position=right] .point-line{height:2px;top:50%;transform:translate(-100%)}.taste-point[data-position=left] .point-line{right:0;width:180%;min-width:250px}.taste-point[data-position=right] .point-line{left:0;width:180%;min-width:250px}.taste-point[data-position=left] .line-glow,.taste-point[data-position=right] .line-glow{height:4px;width:80px;top:50%;transform:translateY(-50%)}.taste-point[data-position=top-left] .point-line{right:0;bottom:0;width:130%;min-width:250px;height:2px;transform-origin:right center;transform:translate(100%)}.taste-point[data-position=top-right] .point-line{left:0;bottom:0;width:130%;min-width:250px;height:2px;transform-origin:left center;transform:translate(-100%)}.taste-point[data-position=bottom-left] .point-line{right:0;top:0;width:130%;min-width:250px;height:2px;transform-origin:right center;transform:translate(100%)}.taste-point[data-position=bottom-right] .point-line{left:0;top:0;width:130%;min-width:250px;height:2px;transform-origin:left center;transform:translate(-100%)}.taste-point[data-position=top-left] .line-glow,.taste-point[data-position=top-right] .line-glow,.taste-point[data-position=bottom-left] .line-glow,.taste-point[data-position=bottom-right] .line-glow{height:4px;width:80px;top:50%;transform:translateY(-50%)}.point-content{max-width:280px;transition:all .3s ease;position:relative}.taste-point[data-position=top] .point-content{text-align:center;padding-bottom:15px}.taste-point[data-position=bottom] .point-content{text-align:center;padding-top:15px}.taste-point[data-position=left] .point-content,.taste-point[data-position=top-left] .point-content,.taste-point[data-position=bottom-left] .point-content{text-align:center;padding-right:15px}.taste-point[data-position=right] .point-content,.taste-point[data-position=top-right] .point-content,.taste-point[data-position=bottom-right] .point-content{text-align:center;padding-left:15px}.point-label{font-family:Libre Baskerville,serif;font-size:36px;font-weight:700;margin-bottom:8px;transition:all .3s ease;color:#087e40}.point-description{font-size:19px;line-height:1.4;color:#424242}.point-description p{margin:0}.taste-point:hover .point-dot{transform:scale(1.8);box-shadow:0 0 15px #048949cc}.taste-point[data-position=top]:hover .point-dot,.taste-point[data-position=bottom]:hover .point-dot{transform:translate(-50%) scale(1.8)}.taste-point[data-position=left]:hover .point-dot,.taste-point[data-position=right]:hover .point-dot{transform:translateY(-50%) scale(1.8)}.taste-point:hover .point-line{background:#048949}.taste-point:hover .line-glow{opacity:1}.taste-point[data-position=top]:hover .line-glow{animation:glowTravelVertical 1.5s ease-in-out infinite}.taste-point[data-position=bottom]:hover .line-glow{animation:glowTravelVerticalReverse 1.5s ease-in-out infinite}@keyframes glowTravelVertical{0%,to{top:0;opacity:0}50%{opacity:1}to{top:calc(100% - 80px)}}@keyframes glowTravelVerticalReverse{0%,to{top:calc(100% - 80px);opacity:0}50%{opacity:1}to{top:0}}.taste-point[data-position=left]:hover .line-glow,.taste-point[data-position=top-left]:hover .line-glow,.taste-point[data-position=bottom-left]:hover .line-glow{animation:glowTravelHorizontalLeft 1.5s ease-in-out infinite}.taste-point[data-position=right]:hover .line-glow,.taste-point[data-position=top-right]:hover .line-glow,.taste-point[data-position=bottom-right]:hover .line-glow{animation:glowTravelHorizontalRight 1.5s ease-in-out infinite}@keyframes glowTravelHorizontalLeft{0%,to{left:calc(100% - 80px);opacity:0}50%{opacity:1}to{left:0}}@keyframes glowTravelHorizontalRight{0%,to{left:0;opacity:0}50%{opacity:1}to{left:calc(100% - 80px)}}.taste-point:hover .point-label{color:#048949;transform:scale(1.05)}@media screen and (max-width: 1500px){.point-description{font-size:14px;line-height:1.4}.point-label{font-size:20px}.taste-point[data-position=top-left],.taste-point[data-position=top-right]{top:20%}.taste-point[data-position=bottom-left],.taste-point[data-position=bottom-right]{bottom:20%}.taste-point[data-position=left] .point-line,.taste-point[data-position=right] .point-line,.taste-point[data-position=top-right] .point-line,.taste-point[data-position=top-left] .point-line,.taste-point[data-position=bottom-right] .point-line,.taste-point[data-position=bottom-left] .point-line{width:100%}.taste-point[data-position=left] .point-line,.taste-point[data-position=right] .point-line,.taste-point[data-position=top-right] .point-line,.taste-point[data-position=top-left] .point-line,.taste-point[data-position=bottom-right] .point-line,.taste-point[data-position=bottom-left] .point-line{width:80%}}@media screen and (max-width: 1200px){.diagram-container{max-width:900px;min-height:600px;padding:80px 40px}.center-bean{width:240px;height:240px}.taste-point[data-position=top] .point-line,.taste-point[data-position=bottom] .point-line{min-height:150px}.taste-point[data-position=left] .point-line,.taste-point[data-position=right] .point-line,.taste-point[data-position=top-left] .point-line,.taste-point[data-position=bottom-left] .point-line,.taste-point[data-position=top-right] .point-line,.taste-point[data-position=bottom-right] .point-line{min-width:160px}.point-content{max-width:220px}.point-label{font-size:20px}.section-title{font-size:32px;margin-bottom:40px}}@media screen and (max-width: 990px){.point-line{display:none}.diagram-container{min-height:550px;padding:70px 30px}.center-bean{width:200px;height:200px}.taste-point[data-position=top] .point-line,.taste-point[data-position=bottom] .point-line{min-height:120px}.taste-point[data-position=left] .point-line,.taste-point[data-position=right] .point-line,.taste-point[data-position=top-left] .point-line,.taste-point[data-position=bottom-left] .point-line,.taste-point[data-position=top-right] .point-line,.taste-point[data-position=bottom-right] .point-line{min-width:130px}.point-content{max-width:180px}.point-label{font-size:18px}.point-description{font-size:13px}.section-title{font-size:28px}}@media screen and (max-width: 749px){.diagram-container{min-height:500px;max-width:100%;padding:60px 15px}.center-bean{width:140px;height:140px}.taste-point[data-position=top] .point-line,.taste-point[data-position=bottom] .point-line{min-height:100px}.taste-point[data-position=left] .point-line,.taste-point[data-position=right] .point-line,.taste-point[data-position=top-left] .point-line,.taste-point[data-position=bottom-left] .point-line,.taste-point[data-position=top-right] .point-line,.taste-point[data-position=bottom-right] .point-line{min-width:100px}.point-content{max-width:230px}.point-label{font-size:16px;margin-bottom:5px}.point-description{font-size:11px;line-height:1.4}.section-title{font-size:22px;margin-bottom:30px}.taste-point[data-position=top-right],.taste-point[data-position=bottom-right]{right:0}.taste-point[data-position=top-left],.taste-point[data-position=bottom-left]{left:0}}@media screen and (max-width: 600px){.point-content{max-width:160px}}@media screen and (max-width: 400px){.taste-point[data-position=top-left],.taste-point[data-position=top-right]{top:10%}.taste-point[data-position=bottom-left],.taste-point[data-position=bottom-right]{bottom:10%}.taste-point[data-position=left] .point-content,.taste-point[data-position=right] .point-content{max-width:120px}}
/*# sourceMappingURL=/cdn/shop/t/17/assets/component-coffee-taste-diagram.css.map */