.template-container{padding:0 var(--spacing-large);width:100%}.template-container+.template-container{margin-top:var(--spacing-xlarge)}.template-container .title{font-size:var(--font-size-xmedium);color:var(--color)}.template-container .scrollbar-button{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:10rem;color:#fff;background-color:rgba(200,200,200,.3);backdrop-filter:blur(1rem);z-index:1;transition:all .2s ease;cursor:pointer}.template-container .scrollbar-button:hover{transform:translateY(-50%) scale(1.1)}.template-container .scrollbar-button:active{transform:translateY(-50%) scale(1)}.template-container .scrollbar-button.left{left:-2rem}.template-container .scrollbar-button.right{right:-2rem}.template-container .template-list{position:relative}.template-container .template-list .scroll-container{display:flex;flex-direction:row;gap:1.5rem;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.template-container .template-list .template-item{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0;width:10rem;overflow:hidden;cursor:pointer}.template-container .template-list .template-item .preview{position:relative;display:flex;overflow:hidden;width:100%;border-radius:var(--border-radius-small)}.template-container .template-list .template-item video{width:100%}.template-container .template-list .template-item .count{position:absolute;bottom:.25rem;right:.25rem;display:flex;flex-direction:row;align-items:center;gap:.2rem;color:#fff;padding:.1rem .2rem;background-color:rgba(200,200,200,.3);backdrop-filter:blur(1rem);border-radius:1rem;font-size:var(--font-size-xsmall)}.template-container .template-list .template-item .count .icon{display:flex;justify-content:center;align-items:center}.template-container .template-list .template-item .count .icon svg{width:.8rem;height:.8rem}.template-container .template-list .template-item .video-title{font-size:var(--font-size-xxsmall);color:var(--color)}.template-modal{position:absolute;top:0;left:0;display:none;justify-content:center;align-items:center;width:100%;height:100%;background-color:rgba(45,45,45,.3);backdrop-filter:blur(0.5rem);z-index:9999;transition:all .2s ease;opacity:0}.template-modal .template-modal-container{position:relative;display:flex;flex-direction:row;gap:1rem;padding:1rem;width:900px;height:500px;background-color:#fff;border-radius:var(--border-radius-medium)}.template-modal .template-modal-container .preview{flex:2 0 0;background-color:#353535;border-radius:var(--border-radius-small);overflow:hidden}.template-modal .template-modal-container .preview video{width:100%;height:100%}.template-modal .template-modal-container .detail{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex:1 0 0;background-color:#f5f5f5;border-radius:var(--border-radius-small);overflow:hidden}.template-modal .template-modal-container .detail .icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.template-modal .template-modal-container .detail .icon img,.template-modal .template-modal-container .detail .icon svg{width:100%;height:100%}.template-modal .template-modal-container .detail .title{font-size:var(--font-size-xmedium);font-weight:bold;word-break:break-word}.template-modal .template-modal-container .detail .author{display:flex;align-items:center;gap:.5rem;font-size:var(--font-size-regular);font-weight:bold}.template-modal .template-modal-container .detail .count{display:flex;flex-direction:row;align-items:center;gap:.2rem}.template-modal .template-modal-container .detail .count .icon{width:1rem;height:1rem}.template-modal .template-modal-container .detail .use{padding:.5rem 0;border-radius:var(--border-radius-small)}.template-modal .template-modal-container .close{position:absolute;right:-2.5rem;top:0;display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;border-radius:10rem;background-color:rgba(245,245,245,.3);color:#fff;cursor:pointer}@media screen and (max-width: 600px){.template-container{padding:0}.template-container .template-list .scroll-container{scroll-snap-type:x mandatory}.template-container .template-list .template-item{scroll-snap-align:center}.template-container .scrollbar-button{width:2rem;height:2rem}.template-container .scrollbar-button.left{left:-0.5rem}.template-container .scrollbar-button.right{right:-0.5rem}.template-modal .template-modal-container{padding:.5rem;flex-direction:column;gap:.5rem;width:calc(100% - 2rem);height:auto}.template-modal .template-modal-container .preview{height:10rem;flex:none}.template-modal .template-modal-container .detail{flex:none}.template-modal .template-modal-container .detail .title{font-size:var(--font-size-regular)}.template-modal .template-modal-container .detail .author{font-size:var(--font-size-xxsmall)}.template-modal .template-modal-container .close{right:0;top:-2.5rem}}