.card-container[data-v-3cfb3a22]{display:flex;flex-wrap:wrap}.card-item[data-v-3cfb3a22]{position:relative;border-radius:10px;background:hsla(0,0%,100%,.88);overflow:hidden;margin:10px;height:300px;flex-shrink:0;width:calc(33.33333% - 20px);cursor:pointer;animation:zoomIn .8s ease-in-out}.card-image[data-v-3cfb3a22]{width:100%;height:180px}.card-image[data-v-3cfb3a22] .el-image__inner{transition:all 1s}.card-image[data-v-3cfb3a22] .el-image__inner:hover{transform:scale(1.2)}.card-body[data-v-3cfb3a22]{padding:10px 20px}.card-title[data-v-3cfb3a22]{font-size:18px;font-weight:600;margin-bottom:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:all .2s ease-in-out}.card-title[data-v-3cfb3a22]:hover{color:var(--lightGreen)}.card-desc[data-v-3cfb3a22]{font-size:14px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:1px}.card-time[data-v-3cfb3a22]{position:absolute;bottom:10px;font-size:12px;color:var(--greyFont)}@media screen and (max-width:700px){.card-item[data-v-3cfb3a22]{width:calc(50% - 20px)}}@media screen and (max-width:500px){.card-item[data-v-3cfb3a22]{width:calc(100% - 20px)}}.myButton[data-v-69aa4131]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;width:66px;height:33px;border-radius:4px;color:var(--white);font-size:14px;overflow:hidden}.myButton div[data-v-69aa4131]{width:66px;height:33px;line-height:33px;border-radius:4px;text-align:center;position:absolute}.myButton div[data-v-69aa4131]:nth-child(2){width:100px;transition:all .3s ease;transform:translateX(-120px) skewX(-30deg)}.myButton div[data-v-69aa4131]:nth-child(3){transition:all .3s ease;transform:translateX(-120px)}.myButton:hover div[data-v-69aa4131]:nth-child(2){transform:translateX(20px) skewX(-30deg)}.myButton:hover div[data-v-69aa4131]:nth-child(3){transform:translateX(0)}.friend-main[data-v-7e6390a8]{max-width:1200px;margin:40px auto;border-radius:10px;padding:40px;background:hsla(0,0%,100%,.85)}.friend-main h2[data-v-7e6390a8]{font-size:20px}hr[data-v-7e6390a8]{position:relative;margin:40px auto;border:2px dashed var(--lightGreen);overflow:visible}hr[data-v-7e6390a8]:before{position:absolute;top:-14px;left:5%;color:var(--lightGreen);content:"❄";font-size:30px;line-height:1;transition:all 1s ease-in-out}hr[data-v-7e6390a8]:hover:before{left:calc(95% - 20px)}.form-wrap[data-v-7e6390a8]{margin:0 auto;overflow:hidden;width:530px;height:447px;position:relative;top:0;transition:all 1s ease-in-out .3s;z-index:0;cursor:pointer}.before-img[data-v-7e6390a8]{bottom:126px;height:317px;z-index:-100}.after-img[data-v-7e6390a8],.before-img[data-v-7e6390a8]{position:absolute;left:0;background-repeat:no-repeat;width:530px}.after-img[data-v-7e6390a8]{bottom:-2px;height:259px;z-index:100}.friend-wrap[data-v-7e6390a8]{color:var(--black)}.envelope[data-v-7e6390a8]{position:relative;margin:0 auto;transition:all 1s ease-in-out .3s;padding:200px 20px 20px}.form-main[data-v-7e6390a8]{background:var(--white);margin:0 auto;border-radius:10px;overflow:hidden}.user-title[data-v-7e6390a8]{text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}.user-content[data-v-7e6390a8]{text-align:left}.user-title div[data-v-7e6390a8]{height:55px;line-height:55px;text-align:center}.user-content>div[data-v-7e6390a8]{height:55px;display:flex;align-items:center}.user-content[data-v-7e6390a8] .el-input__inner{border:none;height:35px;background:var(--whiteMask)}.form-friend[data-v-7e6390a8]{margin-top:12px;background-color:#eee;border:1px solid #ddd;padding:20px 0}blockquote[data-v-7e6390a8]{line-height:2;border-left:.2rem solid #ed6ea0;padding:10px 1rem;background-color:#ffe6fa;border-radius:4px;margin:20px auto;color:var(--maxGreyFont)}@media screen and (max-width:700px){.after-img[data-v-7e6390a8],.before-img[data-v-7e6390a8],.form-wrap[data-v-7e6390a8]{width:auto}}@media screen and (max-width:500px){.friend-main[data-v-7e6390a8]{padding:40px 15px}}