html,body{margin:0;padding:0;width:100%;height:100%;font-family:var(--font-primary);color:var(--color-text-main);background-color:var(--color-gray-background);overflow-x:hidden}body{overflow-y:auto;position:relative;height:auto;min-height:100%}@media (max-width: 720px){body{overflow-y:auto!important;-webkit-overflow-scrolling:touch}}.project-filters-bar{display:none!important;width:calc(100vw - 30px);max-width:2000px;margin:var(--header-height, 80px) auto 20px auto;justify-content:space-between;align-items:center;padding:0 40px;gap:30px;box-sizing:border-box;position:relative;z-index:10;background-color:var(--color-gray-background)}.map-view .project-filters-bar{display:flex;justify-content:flex-end;height:40px}.map-view .project-filters-container{display:none}.project-filters-container{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.project-view-switch{display:flex;align-items:center;gap:10px;position:absolute;right:0;height:36px}.map-view .project-view-switch{margin-left:auto;position:static}.project-view-switch .switch-btn{background:none;border:none;color:var(--color-filter-text);font-size:var(--font-size-14);padding:8px;cursor:pointer;transition:all .3s;border-radius:4px;font-weight:400;display:flex;align-items:center;justify-content:center;height:100%;width:36px}.project-view-switch .switch-btn .cn,.project-view-switch .switch-btn .en{display:none}.switch-btn i{font-size:var(--font-size-18)}.switch-btn .switch-icon{width:30px;height:30px;display:inline-block;vertical-align:middle}.project-view-switch .switch-btn.active{font-weight:600;box-shadow:0 1px 2px #00000003}.project-view-switch .switch-btn:hover:not(.active){color:var(--color-filter-active-text);background:#f0f0f0;font-weight:500}.project-filter{display:flex;align-items:center;gap:8px;font-size:var(--font-size-14);color:var(--color-filter-text);height:36px}.project-filter label{font-weight:400;color:var(--color-filter-text);min-width:50px;white-space:nowrap;text-align:left}.project-filter select{padding:4px 10px;border:var(--border-filter-select);border-radius:3px;background:#fafafa;font-size:var(--font-size-14);color:#333;outline:none;transition:border .2s;min-width:90px;height:28px}.project-filter select:focus{border:var(--border-filter-select-focus)}#content-container{position:relative;width:100%;padding:0 0 40px;box-sizing:border-box}.projects-container{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:0 40px 40px!important;width:calc(80vw - 20px);margin:0 auto 20px;background-color:var(--color-gray-background)}.project-item{position:relative;width:100%;cursor:pointer;background:var(--color-gray-background);transition:all .3s ease;overflow:hidden;display:flex;flex-direction:column;margin-bottom:0;border:none}.project-image-container{position:relative;width:100%;padding-bottom:75%;overflow:hidden;background-color:transparent;visibility:visible}.project-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center center;display:block;min-width:100%;min-height:100%;background-color:transparent}.projects-container .project-image{transition:opacity 1s ease-in-out}.project-item.complete .project-image-main{opacity:1;z-index:1}.project-item.complete .project-image-hover{opacity:0;z-index:2}.project-item.complete:hover .project-image-main{opacity:0}.project-item.complete:hover .project-image-hover{opacity:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.project-content{background:var(--color-gray-background);border-top:none;margin-top:0}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.project-type{display:flex;align-items:center;gap:5px;font-size:var(--font-size-12);color:#666}.project-status{background:#f0f0f0;color:#666;padding:3px 8px;font-size:var(--font-size-12);border-radius:3px}.project-status.completed{background:#e6f7e6;color:#2e7d32}.project-status.ongoing{background:#fff3e0;color:#f57c00}.project-title{font-size:var(--font-size-16);margin-bottom:8px;color:var(--color-text-main);font-weight:400;line-height:1.2}.project-meta{display:flex;gap:15px;font-size:var(--font-size-12);color:#666}.project-meta-item{display:flex;align-items:center;gap:5px}.category-container{position:fixed;top:80px;left:0;width:100%;background:#fff;padding:20px 40px;z-index:10;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:center}.category-buttons{display:flex;gap:15px;max-width:2000px;width:80vw;margin:0 auto}.category-button{background:none;border:none;padding:8px 15px;font-size:var(--font-size-14);cursor:pointer;transition:all .3s ease;color:#666}.category-button:hover,.category-button.active{color:#000;font-weight:500}body.lang-cn .title-en,body.lang-cn .location-en{display:none}body:not(.lang-cn) .title-cn,body:not(.lang-cn) .location-cn{display:none}.project-title .en,.project-title .cn,.project-meta-item .en,.project-meta-item .cn{display:inline-block}body:not(.lang-cn) .project-title .cn,body:not(.lang-cn) .project-meta-item .cn{display:none}body.lang-cn .project-title .en,body.lang-cn .project-meta-item .en{display:none}@media (max-width: 1024px){.project-filters-bar{gap:15px;padding:0 30px;margin-top:var(--header-height, 80px);margin-bottom:20px}.project-filters-container{gap:15px}.project-filter label{min-width:50px}.projects-container{grid-template-columns:repeat(2,1fr);gap:20px;padding:0 30px 30px;width:80vw}.category-container{padding:15px 30px;background-color:var(--color-gray-background)}}@media (max-width: 720px){.project-filters-bar{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding:0;margin-top:60px;margin-bottom:10px;position:relative}.project-filters-container{width:auto;flex-direction:row;flex-wrap:wrap;gap:5px;flex:1}.project-filter{flex-direction:row;align-items:center;width:auto;margin-right:5px}.project-filter label{margin-bottom:0;font-size:var(--font-size-12);min-width:45px}.project-filter select{width:auto;min-width:70px;font-size:var(--font-size-12);padding:3px 5px}.project-view-switch{width:auto;flex-direction:row;gap:5px;margin:0 0 0 auto;height:30px;position:relative;display:flex;align-items:center}.project-view-switch .switch-btn{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:var(--font-size-12)}.switch-btn i{margin-right:0;font-size:var(--font-size-16)}.switch-btn .switch-icon{width:25px;height:25px}.projects-container{width:calc(100vw - 30px);grid-template-columns:1fr;gap:10px;padding:0!important;margin:0 15px}.category-buttons{flex-wrap:wrap}.project-title{font-size:var(--font-size-14)}}.project-item.skeleton{background-color:var(--color-gray-medium, #808080);border-radius:0;overflow:hidden;opacity:.3}.skeleton-image,.skeleton-title,.skeleton-meta{background-color:var(--color-gray-medium, #808080);border-radius:3px;opacity:.5}.skeleton-title{margin-top:10px!important}.project-item.skeleton .project-image-container{background-color:var(--color-gray-medium, #808080);opacity:.4}.project-item:not(.skeleton):not(.complete) .project-image,.project-item:not(.skeleton):not(.complete) .project-content{opacity:0}.project-image-container{position:relative;background-color:#f5f5f5;overflow:hidden}.project-image{transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .5s ease-in-out;transform-origin:center center}.error-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f8f8f8;color:#999;font-size:var(--font-size-14)}