.main-container{z-index:100;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:100vh;margin:auto;display:flex;position:relative}.main-container .header{z-index:101;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;width:100%;height:50px;min-height:50px;display:flex;position:fixed;top:0;left:0;right:0}.main-container .header:before{content:"";z-index:-1;background-color:#f8f8f8d9;border-bottom:1px solid #e9e9e9;width:100%;height:100%;position:absolute;top:0;left:0}.main-container .header:hover:before{background-color:#fff;box-shadow:0 1px 4px #0003}.main-container .header .header-container{border-radius:15px;flex-direction:row;justify-content:space-between;align-items:center;width:100%;min-width:1024px;max-width:1400px;height:100%;margin:auto;padding:0 10px;display:flex;position:relative}.main-container .header .header-container .right-menu{flex-direction:row;justify-content:center;align-items:center;gap:10px;width:auto;display:flex}.main-container .header .header-container .right-menu .menu .btn-menu{color:#787878;cursor:pointer;border:1px solid #fff;border-radius:15px;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:auto;height:30px;padding:0 20px;font-size:11pt;font-weight:500;transition:opacity .3s ease-in-out;display:flex}.main-container .header .header-container .right-menu .menu .btn-menu:hover{background-color:#f2f2f2}.main-container .header .header-container .right-menu .menu .btn-menu:active{background-color:#e9e9e9}.main-container .body{z-index:100;background-color:#f2f2f2;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:auto;padding:70px 0 20px;display:flex;position:relative}.main-container .body .body-container{flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;width:100%;max-width:1400px;height:auto;min-height:calc(100vh - 140px);margin:auto;padding:0 20px;display:flex;position:relative}.main-container .body .main-body-message-box{flex-direction:column;justify-content:flex-start;align-items:center;gap:30px;width:100%;height:auto;min-height:70px;padding:20px;display:flex;position:relative}.main-container .body .main-body-message-box .main-body-message-box-content{opacity:1;flex-direction:column;justify-content:center;align-items:center;gap:30px;height:auto;transition:all .3s ease-in-out;display:flex}.main-container .body .main-body-message-box .main-body-message-box-content.hide{opacity:0}.main-container .body .main-body-message-box .main-body-message-box-content p{font-size:17pt}.main-container .body .main-body-message-box .main-body-message-box-content .btn{width:120px;height:50px}.main-container .body .main-body-note-summary-container{flex-flow:wrap;justify-content:flex-start;align-items:center;gap:26px 2%;width:100%;height:auto;display:flex;position:relative}.main-container .body .main-body-note-summary-container a{aspect-ratio:1.2;width:23.5%;height:auto;position:relative}.main-container .body .main-body-note-summary-container a .note-item{aspect-ratio:1.2;cursor:pointer;background-color:#fff;border:1px solid #fff;border-radius:15px;flex-direction:column;justify-content:flex-start;align-items:center;gap:0;width:100%;height:100%;padding-top:55px;transition:all .2s ease-in-out;display:flex;position:relative}.main-container .body .main-body-note-summary-container a .note-item.loading{animation:1s ease-in-out infinite alternate loading-fade-reverse}.main-container .body .main-body-note-summary-container a .note-item:hover .note-item-title{transform-origin:100% 100%;transform:rotate(2deg)}.main-container .body .main-body-note-summary-container a .note-item:active{transition:all .2s ease-in-out;transform:scale(1.05)}.main-container .body .main-body-note-summary-container a .note-item:active .note-item-title{transform-origin:100% 100%;transform:rotate(0)}.main-container .body .main-body-note-summary-container a .note-item .note-item-title{z-index:101;border-bottom:2px solid #f2f2f2;border-radius:15px 15px 0 0;flex-direction:row;justify-content:flex-start;align-items:center;gap:5px;width:calc(100% + 10px);height:55px;padding:0 10px;display:flex;position:absolute;top:-5px;left:-5px;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-title:before{content:"";-webkit-backdrop-filter:blur(7px);z-index:100;background:#fffffff2;width:100%;height:100%;position:absolute;top:0;left:0}.main-container .body .main-body-note-summary-container a .note-item .note-item-title .user-image{z-index:101;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #fff;border-radius:50%;width:26px;height:26px}.main-container .body .main-body-note-summary-container a .note-item .note-item-title .title-text{text-overflow:ellipsis;white-space:nowrap;z-index:101;width:calc(100% - 31px);height:100%;font-size:14pt;font-weight:600;line-height:55px;position:relative;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-title.gray{z-index:101;background-color:#f9f9f9;border-bottom:1px solid #f2f2f2}.main-container .body .main-body-note-summary-container a .note-item .note-item-cover{opacity:1;background-color:#eef3ff;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:15px 15px 0 0;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;width:100%;height:50%;display:flex;position:absolute;top:0;left:0}.main-container .body .main-body-note-summary-container a .note-item .note-item-content{width:100%;height:calc(100% - 50px);white-space:wrap;word-wrap:break-word;background-color:#fff;border-radius:0 0 15px 15px;padding:14px 20px;font-size:13pt;line-height:1.85;position:absolute;bottom:0;left:0;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-content.line3{height:110px}.main-container .body .main-body-note-summary-container a .note-item .note-item-content .content-text{width:100%;height:100%;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-content .content-text p{line-height:1.8}.main-container .body .main-body-note-summary-container a .note-item .note-item-cover+.note-item-content{height:50%;padding:20px 10px}.main-container .body .main-body-note-summary-container a .note-item .note-item-bottom{width:100%;height:40px;white-space:wrap;word-wrap:break-word;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;padding:0 10px;font-size:13pt;display:flex;position:absolute;bottom:0;left:0;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-bottom .user-info{flex-direction:row;justify-content:flex-start;align-items:center;gap:5px;width:calc(100% - 40px);height:40px;display:flex}.main-container .body .main-body-note-summary-container a .note-item .note-item-bottom .user-info .user-image{background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #fff;border-radius:50%;width:26px;height:26px}.main-container .body .main-body-note-summary-container a .note-item .note-item-bottom .user-info .user-name{color:#000;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 30px);height:40px;line-height:40px;overflow:hidden}.main-container .body .main-body-note-summary-container a .note-item .note-item-bottom .comment-cnt{color:tomato;background-color:#ffeded;border-radius:50% 50% 0;flex-direction:row;justify-content:center;align-items:center;width:24px;height:24px;font-size:10pt;display:flex;position:relative}.main-container .body .main-body-note-summary-container .note-item.more{aspect-ratio:1;flex-direction:column;justify-content:center;align-items:center;width:23.5%;height:auto;min-height:210px;display:flex;position:relative}.main-container .body .main-body-note-summary-container .note-item.more.hide{display:none}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more{text-indent:-10000px;width:70%;height:70%;box-shadow:none;background-color:#00a3ff1a;border:1px solid #fff;border-radius:50%;outline:none;font-size:14pt}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more:hover{background-color:#00a3ff33}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more:hover:after{background-size:40%;transition:all .2s ease-in-out}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more:active{background-color:#00a3ff33}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more.hide{display:none}.main-container .body .main-body-note-summary-container .note-item.more button.btn-more:after{content:"";opacity:1;background-color:#0000;background-image:url(../media/btn_add_white.0rs9~tfn84-k3.svg);background-position:50%;background-repeat:no-repeat;background-size:30%;border-radius:10px;width:100%;height:100%;position:absolute;top:0;left:0}.main-container .body .main-body-note-summary-container .note-item-more-container{flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;height:auto;display:flex;position:relative}.main-container .body .main-body-note-summary-container .note-item-more-container.hide{display:none}.main-container .footer{z-index:100;background-color:#fcfcfc;border-top:1px solid #e9e9e9;width:100%;height:50px;min-height:50px}.main-container .footer .footer-container{border-radius:15px;flex-direction:row;justify-content:center;align-items:center;width:100%;min-width:600px;max-width:1400px;height:100%;margin:auto;padding:0 10px;display:flex}.main-container .footer .thanks-list{flex-direction:row;justify-content:space-between;align-items:center;gap:20px;width:100%;height:100%;padding:0 20px;display:flex;position:relative}.main-container .footer .thanks-list .list-container{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;display:flex}.main-container .footer .thanks-list .list-container .logo{color:#b3b3b3;font-family:Blue;font-size:12pt}.main-container .footer .thanks-list .list-container .logo:after{content:"";opacity:.15;background-color:#dfdfdf;border:1px solid #aaa;border-radius:50%;width:27px;height:27px;position:absolute;top:50%;left:17px;transform:translateY(-50%)}.main-container .footer .thanks-list .list-container .item{cursor:pointer;opacity:.3;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:24px;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:auto;height:auto;transition:opacity .3s ease-in-out;display:flex}.main-container .footer .thanks-list .list-container .item:hover{opacity:1}.main-container .footer .thanks-list .list-container .item.supabase{background-image:url(../media/supabase.0kqm.w8dn3sch.png);background-size:contain;width:120px;height:18px}.main-container .footer .thanks-list .list-container .item.google{background-image:url(../media/google_cloud.0i-ydapgi.xy2.svg);background-size:contain;width:140px;height:16px}.main-container .footer .thanks-list .list-container .item.react{flex-direction:row;justify-content:flex-start;align-items:center;width:80px;height:20px;padding:0 0 0 36px;font-size:11pt;font-weight:400;display:flex;position:relative}.main-container .footer .thanks-list .list-container .item.react:before{content:"";background-color:#0000;background-image:url(../media/react.0xpd3i.n3bq.n.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;width:20px;height:20px;position:absolute;top:0;left:10px}.main-container .footer .thanks-list .list-container .item.nextjs{background-image:url(../media/nextjs.0df53hwkgah7~.png);background-size:contain;width:100px;height:12px}.main-container .footer .thanks-list .list-container .item.jotai{background-image:url(../media/jotai.0s_b.u2b75jp3.svg);background-size:contain;width:70px;height:16px}