.ptn-wrapper{width:100%}.ptn-list{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.ptn-item{position:relative;margin-bottom:0!important}.ptn-num{position:absolute;top:-18px;left:50%;font-size:36px;font-weight:700;color:rgb(0 0 0 / .06);line-height:1;pointer-events:none;z-index:0;opacity:0;transform:translateX(-50%) translateY(-10px);transition:opacity 0.4s ease,transform 0.4s ease}.ptn-item a{display:inline-block;position:relative;z-index:1;padding:10px 28px;font-size:16px;font-weight:600;color:#333;text-decoration:none!important;font-style:normal!important;background-color:#fff0;transition:color 0.4s ease;white-space:nowrap;overflow:hidden}.ptn-item a::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background-color:#2640bf;transition:width 0.4s ease;z-index:-1}.ptn-item a span{display:inline-block;position:relative;z-index:1}.ptn-item.active a{color:#fff!important;transform:skewX(-10deg)}.ptn-item.active a::before{width:100%}.ptn-item.active .ptn-num{opacity:1;transform:translateX(-50%) translateY(0)}.ptn-item.active a span{transform:skewX(10deg)}.ptn-item:not(.active):hover a{color:#fff!important;transform:skewX(-10deg)}.ptn-item:not(.active):hover a::before{width:100%}.ptn-item:not(.active):hover .ptn-num{opacity:1;transform:translateX(-50%) translateY(0)}.ptn-item:not(.active):hover a span{transform:skewX(10deg)}@media screen and (max-width:768px){.ptn-list{gap:10px}.ptn-item a{font-size:14px;padding:8px 20px}.ptn-num{font-size:28px;top:-14px}}@media screen and (max-width:480px){.ptn-list{gap:8px}.ptn-item a{font-size:13px;padding:7px 16px}.ptn-num{font-size:24px;top:-12px;left:8px}}