.activityWheelConteiner{--wheelMaxW:800px;--wheelBg:transparent;--wheelOuterBorderW:10px;--wheelOuterBorderColor:#fff;--shadowColor:0,0,0;--wheelBorderW:50px;--wheelBorderColor:#323232;--lightSizeOut:34px;--lightSizeIn:24px;--lighColorOut:#fff;--lightColor01:#fff;--lightColor02:#fff067;--lightTransWOut:calc(var(--wheelBorderW)/2 - var(--lightSizeOut)/2);--lightTransWIn:calc(var(--wheelBorderW)/2 - var(--lightSizeIn)/2);--triangleColor:var(--wheelBorderColor);--triangleSize:1.25rem;--wheelItemNum:4;--itemPadding:20% 25% 20% 30%;--itemBgColor:#969696;--itemBorder:solid 1px #646464;--itemActiveBgColor:#b9b9b9;--itemActiveNameColor:#323232;--itemImgSize:45%;--itemImgMargin:0;--itemNameColor:#fff;--itemNameFontSize:1.25em;--btnSize:20%;--btnRadius:50%;--btnBg:var(--wheelBorderColor);--btnBgImage:none;--btnTextSize:1.5rem;--btnTextColor:#fff;--btnShadow:inset 0 0 1.5em rgba(var(--shadowColor),.6);--btnDropShadow:0 0 1.5em rgba(var(--shadowColor),.7);--btnHoverBg:#535353;--btnHoverTextColor:#fff;--btnHoverDropShadow:0 0 1.5em rgba(var(--shadowColor),.9);padding-top:50px}.activityWheelConteiner[style*="--wheelItemNum: 2"] .wheel .itemList .wheelItem{height:100%;transform-origin:left center}.activityWheelConteiner[style*="--wheelItemNum: 2"] .wheel .itemList .itemBox{transform:skewY(calc(1turn/var(--wheelItemNum)));transform-origin:left bottom}.activityWheelConteiner[style*="--wheelItemNum: 2"] .wheel .itemList .itemContent{justify-content:center;transform:none;transform-origin:left center}.activityWheelConteiner[style*="--wheelItemNum: 2"] .wheel .itemList .itemName{align-self:center;height:40%;overflow:hidden;transform:rotate(90deg)}.activityWheelConteiner[style*="--wheelItemNum: 2"] .wheel .itemList .itemImg:empty{display:none}.activityWheelConteiner[style*="--wheelItemNum: 3"]{--itemPadding:20% 30% 20% 25%}.activityWheelConteiner[style*="--wheelItemNum: 3"] .wheel .itemList ul{height:120%;width:120%}.activityWheelConteiner.imgStartBtn{--btnBg:transparent;--btnTextColor:transparent;--btnShadow:none;--btnRadius:0;--btnHoverBg:transparent;--btnHoverTextColor:transparent}@keyframes wheelLightAni{0%{background:var(--lightColor01)}to{background:var(--lightColor02)}}.activityWheelConteiner .container{margin:0 auto;max-width:var(--desktop-width)}.activityWheelConteiner .maxWidth{display:flex;flex-direction:column;margin:0 auto;max-width:var(--wheelMaxW)}.activityWheelConteiner .wheel{border:solid var(--wheelOuterBorderW) var(--wheelOuterBorderColor);border-radius:50%;box-shadow:0 0 2rem #00000080;height:0;padding-bottom:calc(100% - var(--wheelOuterBorderW)*2);position:relative;width:100%}.activityWheelConteiner .wheel .bg{background:var(--wheelBg);border:solid var(--wheelBorderW) var(--wheelBorderColor);border-radius:50%;box-shadow:0 0 .5rem #00000080;height:100%;left:0;position:absolute;top:0;width:100%}.activityWheelConteiner .wheel .light{animation:rotate 5s linear infinite;height:100%;left:0;position:absolute;top:0;width:100%}.activityWheelConteiner .wheel .light span{height:100%;left:0;margin:0 auto;position:absolute;right:0;top:0;transform-origin:center center;width:var(--lightSizeOut)}.activityWheelConteiner .wheel .light span:after,.activityWheelConteiner .wheel .light span:before{border-radius:50%;content:"";left:0;margin:0 auto;position:absolute;right:0}.activityWheelConteiner .wheel .light span:before{background:#fff;box-shadow:0 0 13px #feffc0,inset 0 0 2px #0006;height:var(--lightSizeOut);top:var(--lightTransWOut);width:var(--lightSizeOut)}.activityWheelConteiner .wheel .light span:after{box-shadow:0 0 7px #000000b3,inset 0 0 10px #0006;height:var(--lightSizeIn);top:var(--lightTransWIn);width:var(--lightSizeIn)}.activityWheelConteiner .wheel .light span:nth-of-type(2n):after{animation:wheelLightAni 1s linear infinite;background:var(--lightColor01)}.activityWheelConteiner .wheel .light span:nth-of-type(odd):after{animation:wheelLightAni 1s linear infinite reverse;background:var(--lightColor02)}.activityWheelConteiner .wheel .itemList{border-radius:50%;height:calc(100% - var(--wheelBorderW)*2);left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--wheelBorderW)*2)}.activityWheelConteiner .wheel .itemList:before{border-color:var(--triangleColor) transparent transparent transparent;border-style:solid;border-width:2em 1em 0;content:"";font-size:var(--triangleSize);height:0;left:50%;position:absolute;top:0;transform:translate(-50%);width:0;z-index:1}.activityWheelConteiner .wheel .itemList:after{border-radius:50%;box-shadow:inset 0 0 2em rgba(var(--shadowColor),.6);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.activityWheelConteiner .wheel .itemList ul{height:100%;left:50%;position:absolute;top:50%;translate:-50% -50%;width:100%}.activityWheelConteiner .wheel .itemList .wheelItem{height:50%;left:50%;position:absolute;transform-origin:left bottom;width:50%}.activityWheelConteiner .wheel .itemList .wheelItem.active .itemBox{background:var(--itemActiveBgColor);transition:all .4s}.activityWheelConteiner .wheel .itemList .wheelItem.active .itemName{color:var(--itemActiveNameColor);transition:all .4s}.activityWheelConteiner .wheel .itemList .itemBox{align-items:flex-end;background:var(--itemBgColor);border:var(--itemBorder);display:flex;height:100%;transform:skewY(calc(1turn/var(--wheelItemNum) - 90deg));transform-origin:left bottom;width:100%}.activityWheelConteiner .wheel .itemList .itemContent{align-items:center;display:flex;height:100%;justify-content:flex-end;padding:var(--itemPadding);transform:skewY(calc(90deg - 1turn/var(--wheelItemNum))) rotate(calc(1turn/var(--wheelItemNum)*.5 - 90deg)) translateY(50%);transform-origin:left bottom;width:100%}.activityWheelConteiner .wheel .itemList .itemImg{flex-shrink:0;margin:var(--itemImgMargin);position:relative;transform:rotate(90deg);width:var(--itemImgSize)}.activityWheelConteiner .wheel .itemList .itemImg:before{content:"";display:block;height:0;padding-bottom:100%;width:100%}.activityWheelConteiner .wheel .itemList .itemImg img{height:100%;left:0;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%}.activityWheelConteiner .wheel .itemList .itemName{align-self:center;color:var(--itemNameColor);display:-webkit-box;flex-grow:1;font-size:var(--itemNameFontSize);font-weight:700;letter-spacing:.03em;max-height:60%;overflow:hidden;text-align:center;transform:translate(82%) rotate(90deg);-webkit-box-orient:vertical;-webkit-line-clamp:4}.activityWheelConteiner .wheel .startBtn{align-items:center;background-color:var(--btnBg);background-image:var(--btnBgImage);background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:var(--btnRadius);box-shadow:var(--btnShadow);color:var(--btnTextColor);display:flex;filter:drop-shadow(var(--btnDropShadow));font-size:var(--btnTextSize);height:var(--btnSize);justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .4s;width:var(--btnSize)}.activityWheelConteiner .wheel .startBtn:hover{background-color:var(--btnHoverBg);color:var(--btnHoverTextColor);filter:drop-shadow(var(--btnHoverDropShadow))}.activityWheelConteiner .btnDefault.recordBtn{align-self:center;margin-top:80px}.mobile .activityWheelConteiner{--wheelOuterBorderW:4px;--wheelBorderW:4vw;--lightSizeOut:3vw;--lightSizeIn:2.2vw;--triangleSize:2.6vw;--itemPadding:10% 25% 10% 30%;--itemNameFontSize:1rem;--itemImgSize:60%;--btnSize:24%;--btnTextSize:1.1rem;padding-top:8vw}.mobile .activityWheelConteiner .wheel{box-shadow:0 0 5vw #0000004d}.mobile .activityWheelConteiner .wheel .light span:before{box-shadow:0 0 1vw #feffc0,inset 0 0 .2vw #0006}.mobile .activityWheelConteiner .wheel .light span:after{box-shadow:0 0 .5vw #000000b3,inset 0 0 .5vw #0006}.mobile .activityWheelConteiner .wheel .itemList .itemName{display:block;max-height:54%;padding-top:15%;transform:translate(150%) rotate(90deg)}.mobile .activityWheelConteiner .btnDefault.recordBtn{margin-top:6vw}.is-rotating[data-v-94c2337c]{animation:rotate-94c2337c .5s linear infinite}@keyframes rotate-94c2337c{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}