/* 設計稿寬 1440；Nu = N 個設計像素，桌機依視窗等比例縮放 */
:root{--s:min(1px,calc(100vw / 1440));--ink:#231815;--txt:#333;--mute:#555;--blue:#3d9dd6;--line:#c6e4f0;--gray:#f5f5f5;--font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--s)*88)}
body{margin:0;font-family:var(--font);color:var(--txt);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
.sy-wrap{position:relative;max-width:calc(var(--s)*1440);margin:0 auto;padding:0 calc(var(--s)*80)}
.sy-arrow{width:calc(var(--s)*22);height:calc(var(--s)*22);flex:none}

/* ---------- header ---------- */
.sy-header{position:sticky;top:0;z-index:50;height:calc(var(--s)*88);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.admin-bar .sy-header{top:32px}
.sy-header__wave{position:absolute;left:0;top:0;width:calc(var(--s)*700);height:100%;pointer-events:none}
.sy-header__in{position:relative;max-width:calc(var(--s)*1440);height:100%;margin:0 auto;padding:0 calc(var(--s)*72) 0 calc(var(--s)*88);display:flex;align-items:center}
.sy-header__logo{display:block;margin-right:auto}
.sy-logo{display:inline-flex;align-items:center;color:#333;line-height:1}
.sy-mark{display:block;flex:none}
.sy-logo__txt{display:flex;flex-direction:column}
.sy-logo__zh{font-weight:400;letter-spacing:.02em;white-space:nowrap}
.sy-logo__en{font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.sy-logo--row .sy-mark{width:calc(var(--s)*66);height:calc(var(--s)*59);margin-right:calc(var(--s)*4);margin-top:calc(var(--s)*-4)}
.sy-logo--row .sy-logo__zh{font-size:calc(var(--s)*21.3)}
.sy-logo--row .sy-logo__en{font-size:calc(var(--s)*11.8);margin-top:calc(var(--s)*4)}
.sy-nav ul{display:flex;gap:calc(var(--s)*31);list-style:none;margin:0;padding:0}
.sy-nav a{font-size:calc(var(--s)*14.5);letter-spacing:.08em;color:#3a3a3a;transition:color .2s}
.sy-nav a:hover{color:var(--blue)}
.sy-search-btn{margin-left:calc(var(--s)*38);width:calc(var(--s)*24);height:calc(var(--s)*24);color:#333}
.sy-search-btn svg{width:100%;height:100%}
.sy-search{position:absolute;right:calc(var(--s)*72);top:100%;width:calc(var(--s)*320);padding:calc(var(--s)*12);background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);border-radius:0 0 8px 8px;display:none}
.sy-search.is-open{display:block}
.sy-search input{width:100%;border:1px solid #ddd;border-radius:6px;padding:10px 12px;font:inherit;font-size:14px}
.sy-burger{display:none}

/* ---------- 共用 ---------- */
.sy-en{font-size:calc(var(--s)*20);font-weight:300;letter-spacing:.4em;color:#444;line-height:1}
.sy-h2{font-size:calc(var(--s)*32);font-weight:400;letter-spacing:.17em;color:#222;line-height:1;margin-top:calc(var(--s)*30)}
.sy-btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:calc(var(--s)*239);height:calc(var(--s)*57);padding:0 calc(var(--s)*22) 0 calc(var(--s)*37);background:#fff;border-radius:calc(var(--s)*9);box-shadow:0 3px 8px rgba(0,0,0,.18);color:#333;overflow:hidden;isolation:isolate;transition:color .35s}
.sy-btn::before{content:"";position:absolute;inset:0;width:calc(var(--s)*12);background:var(--ink);z-index:-1;transition:width .35s ease}
.sy-btn:hover{color:#fff}
.sy-btn:hover::before{width:100%}
.sy-btn__t{font-size:calc(var(--s)*17);letter-spacing:.1em}
.sy-btn__t--en{font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-style:italic;font-weight:300;font-size:calc(var(--s)*18.5);letter-spacing:.06em;margin-left:calc(var(--s)*5)}
.sy-circle{display:inline-grid;place-items:center;width:calc(var(--s)*35);height:calc(var(--s)*35);border-radius:50%;background:#fff;color:#222;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:background .2s,color .2s}
.sy-circle .sy-arrow{width:calc(var(--s)*19);height:calc(var(--s)*19)}
.sy-circle:hover{background:var(--ink);color:#fff}
.sy-circle--sm{width:calc(var(--s)*32);height:calc(var(--s)*32)}
.sy-circle--sm .sy-arrow{width:calc(var(--s)*17);height:calc(var(--s)*17)}

/* ---------- hero ---------- */
.sy-hero{position:relative;height:calc(var(--s)*900);overflow:hidden;background:#8c989a;color:#fff}
.sy-hero__bg{position:absolute;left:-10.1%;top:calc(var(--s)*-163);width:121%;max-width:none;height:auto;min-height:calc(100% + calc(var(--s)*163))}
.sy-hero__in{position:relative;max-width:calc(var(--s)*1440);height:100%;margin:0 auto}
.sy-hero__in>*{position:absolute}
.sy-hero__eyebrow{left:calc(var(--s)*207);top:calc(var(--s)*77);font-size:calc(var(--s)*18);font-weight:300;letter-spacing:.46em;line-height:1;color:rgba(255,255,255,.88)}
.sy-hero__title{left:calc(var(--s)*205);top:calc(var(--s)*146);font-size:calc(var(--s)*70);font-weight:400;letter-spacing:.1em;line-height:1;white-space:nowrap;text-shadow:0 0 30px rgba(0,0,0,.08)}
.sy-hero__sub{left:calc(var(--s)*207);top:calc(var(--s)*244);font-size:calc(var(--s)*37);letter-spacing:.07em;line-height:1;white-space:nowrap}
.sy-hero__rule{left:calc(var(--s)*207);top:calc(var(--s)*316);width:calc(var(--s)*67);height:1px;background:rgba(255,255,255,.65)}
.sy-hero__desc{left:calc(var(--s)*207);top:calc(var(--s)*349);font-size:calc(var(--s)*17);font-weight:300;letter-spacing:.25em;line-height:calc(var(--s)*34);color:rgba(255,255,255,.8);white-space:nowrap}
.sy-hero__side{left:calc(var(--s)*1256);top:calc(var(--s)*304);font-size:calc(var(--s)*14);font-weight:300;letter-spacing:.72em;line-height:calc(var(--s)*31.5);color:rgba(255,255,255,.85);font-family:"Helvetica Neue",Arial,sans-serif}
.sy-hero__side::before{content:"";position:absolute;left:calc(var(--s)*-23);top:calc(var(--s)*-5);width:1px;height:calc(var(--s)*90);background:rgba(255,255,255,.7)}
.sy-hero__btn{left:calc(var(--s)*600);top:calc(var(--s)*717);width:calc(var(--s)*240);height:calc(var(--s)*55);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--s)*32) 0 calc(var(--s)*27);background:#fff;border-radius:calc(var(--s)*8);box-shadow:0 4px 14px rgba(0,0,0,.18);color:var(--blue);font-size:calc(var(--s)*16);letter-spacing:.1em;transition:background .3s,color .3s}
.sy-hero__btn .sy-arrow{width:calc(var(--s)*20);height:calc(var(--s)*20)}
.sy-hero__btn:hover{background:var(--blue);color:#fff}

/* ---------- philosophy ---------- */
.sy-philo{background:#fff;height:calc(var(--s)*450);overflow:hidden}
.sy-philo__in{position:relative;max-width:calc(var(--s)*1440);height:100%;margin:0 auto}
.sy-philo__lines{position:absolute;left:calc(var(--s)*338);top:calc(var(--s)*54);width:calc(var(--s)*792);height:calc(var(--s)*344);overflow:visible}
.sy-philo__head{position:absolute;left:calc(var(--s)*567);top:calc(var(--s)*109)}
.sy-philo__head .sy-h2{margin-top:calc(var(--s)*31);letter-spacing:.175em}
.sy-philo__txt{position:absolute;left:0;right:0;top:calc(var(--s)*278);text-align:center;font-size:calc(var(--s)*18);font-weight:300;letter-spacing:.32em;color:var(--mute);line-height:1.2}

/* ---------- about ---------- */
.sy-about{position:relative;background:var(--gray);height:calc(var(--s)*804)}
.sy-about__in{position:relative;max-width:calc(var(--s)*1440);height:100%;margin:0 auto}
.sy-about__txt{position:absolute;left:calc(var(--s)*138);top:calc(var(--s)*236);width:calc(var(--s)*470)}
.sy-about__txt .sy-h2{margin-top:calc(var(--s)*57)}
.sy-about__desc{margin-top:calc(var(--s)*46);font-size:calc(var(--s)*18);font-weight:300;letter-spacing:.31em;line-height:calc(var(--s)*32.4);color:var(--mute);text-align:justify}
.sy-about__txt .sy-btn{margin-top:calc(var(--s)*79);margin-left:calc(var(--s)*217)}
.sy-about__img{position:absolute;right:0;top:calc(var(--s)*86);width:calc(100% - calc(var(--s)*670));height:calc(var(--s)*709);clip-path:url(#sy-clip-about)}
.sy-about__img img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}

/* ---------- projects ---------- */
.sy-proj{position:relative;background:#fff;height:calc(var(--s)*1093);overflow:hidden}
.sy-proj__wave{position:absolute;right:0;top:0;width:calc(var(--s)*846);height:calc(var(--s)*200);pointer-events:none}
.sy-proj>.sy-wrap{padding-top:calc(var(--s)*117);padding-left:calc(var(--s)*88)}
.sy-proj .sy-h2{margin-top:calc(var(--s)*43)}
.sy-proj__stage{position:absolute;inset:0;max-width:calc(var(--s)*1440);margin:0 auto;pointer-events:none}
.sy-proj__stage>*{pointer-events:auto}
.sy-proj__cream{position:absolute;left:0;bottom:0;width:calc(var(--s)*520);height:calc(var(--s)*300);pointer-events:none}
.sy-proj__main{position:absolute;left:0;top:calc(var(--s)*269);width:calc(var(--s)*1080);height:calc(var(--s)*617)}
.sy-proj__frame{position:absolute;inset:0;clip-path:url(#sy-clip-proj);background:#ddd}
.sy-proj__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.sy-proj__slide.is-on{opacity:1}
.sy-proj__slide:first-child{inset:auto;left:calc(var(--s)*-141);top:calc(var(--s)*-98);width:calc(var(--s)*1220);height:auto;max-width:none}
.sy-proj__main .sy-circle{position:absolute;top:calc(var(--s)*288)}
.sy-circle--prev{left:calc(var(--s)*50)}
.sy-circle--next{left:calc(var(--s)*1058)}
.sy-proj__info{position:absolute;left:calc(var(--s)*1150);top:0;width:calc(var(--s)*180);height:100%}
.sy-proj__name{position:absolute;left:calc(var(--s)*54);top:calc(var(--s)*341);font-size:calc(var(--s)*64);line-height:1;color:#222}
.sy-proj__slash{position:absolute;left:calc(var(--s)*29);top:calc(var(--s)*462);width:calc(var(--s)*146);height:calc(var(--s)*1.5);min-height:1px;background:#333;transform:rotate(-34deg)}
.sy-proj__tag{position:absolute;left:calc(var(--s)*87);top:calc(var(--s)*517);writing-mode:vertical-rl;font-size:calc(var(--s)*16);letter-spacing:calc(var(--s)*15);line-height:1;color:var(--mute);font-weight:300}
.sy-proj__bottom{position:absolute;left:calc(var(--s)*104);right:calc(var(--s)*81);top:calc(var(--s)*909);display:flex;justify-content:space-between;align-items:flex-start}
.sy-proj__thumbs{display:flex;gap:calc(var(--s)*11)}
.sy-proj__thumb{width:calc(var(--s)*141);height:calc(var(--s)*98);overflow:hidden;opacity:1;transition:opacity .3s,transform .3s}
.sy-proj__thumb img{width:100%;height:100%;object-fit:cover}
.sy-proj__thumb:hover{opacity:.75}
.sy-proj__bottom .sy-btn{margin-top:calc(var(--s)*4)}

/* ---------- media ---------- */
.sy-media{position:relative;background:var(--gray);height:calc(var(--s)*1166);overflow:hidden}
.sy-media__wave{position:absolute;left:0;top:calc(var(--s)*260);width:100%;height:calc(var(--s)*760);pointer-events:none}
.sy-media>.sy-wrap{padding-top:calc(var(--s)*122);height:100%}
.sy-media .sy-h2{margin-top:calc(var(--s)*44)}
.sy-media__rows{position:absolute;left:0;right:0;top:calc(var(--s)*309)}
.sy-media__row{position:absolute;left:0;right:0;height:calc(var(--s)*170)}
.sy-media__row:nth-child(1){top:0}
.sy-media__row:nth-child(2){top:calc(var(--s)*207)}
.sy-media__row:nth-child(3){top:calc(var(--s)*414)}
.sy-media__label{position:absolute;top:calc(var(--s)*69);left:calc(var(--s)*171);font-size:calc(var(--s)*22);letter-spacing:.27em;line-height:calc(var(--s)*32);color:#222;white-space:nowrap}
.sy-media__row:nth-child(2) .sy-media__label{left:calc(var(--s)*185)}
.sy-media__row:nth-child(3) .sy-media__label{left:calc(var(--s)*202)}
.sy-media__row>.sy-circle{position:absolute;top:calc(var(--s)*69)}
.sy-media__row>[data-prev]{left:calc(var(--s)*366)}
.sy-media__row>[data-next]{left:calc(var(--s)*1185)}
.sy-media__track{position:absolute;left:calc(var(--s)*409);width:calc(var(--s)*765);top:0;display:flex;gap:calc(var(--s)*27);overflow:hidden;scroll-behavior:smooth;scrollbar-width:none}
.sy-media__track::-webkit-scrollbar{display:none}
.sy-media__card{flex:0 0 calc(var(--s)*171);display:block}
.sy-media__pic{display:block;height:calc(var(--s)*137);border-radius:calc(var(--s)*7);overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sy-media__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .5s}
.sy-media__card:hover img{transform:scale(1.05)}
.sy-media__cap{display:block;margin-top:calc(var(--s)*9);font-size:calc(var(--s)*14);letter-spacing:.04em;color:#222;white-space:nowrap}
.sy-media__cap::before{content:"●";margin-right:calc(var(--s)*3);font-size:.95em}
.sy-media__more{position:absolute;left:calc(var(--s)*1138);top:calc(var(--s)*992)}

/* ---------- footer ---------- */
.sy-footer{position:relative;background:#fff;overflow:hidden}
.sy-footer__wave{position:absolute;left:0;top:calc(var(--s)*30);width:100%;height:calc(var(--s)*300);pointer-events:none}
.sy-footer__in{position:relative;max-width:calc(var(--s)*1440);height:calc(var(--s)*379);margin:0 auto}
.sy-footer__brand{position:absolute;left:calc(var(--s)*90);top:calc(var(--s)*56);width:calc(var(--s)*222)}
.sy-logo--col{flex-direction:column}
.sy-logo--col .sy-mark{width:calc(var(--s)*118);height:calc(var(--s)*105)}
.sy-logo--col .sy-logo__txt{align-items:center;margin-top:calc(var(--s)*12)}
.sy-logo--col .sy-logo__zh{font-size:calc(var(--s)*24.3)}
.sy-logo--col .sy-logo__en{font-size:calc(var(--s)*15.6);margin-top:calc(var(--s)*5)}
.sy-social{display:flex;gap:calc(var(--s)*27);margin-top:calc(var(--s)*52)}
.sy-social a{display:block;width:calc(var(--s)*51);height:calc(var(--s)*51);color:var(--ink);transition:opacity .2s}
.sy-social a:hover{opacity:.7}
.sy-social svg{width:100%;height:100%}
.sy-footer__main{position:absolute;left:calc(var(--s)*356);top:calc(var(--s)*40);bottom:calc(var(--s)*42);border-left:1px solid #d5d5d5;width:calc(var(--s)*976)}
.sy-fnav{position:absolute;left:calc(var(--s)*42);top:calc(var(--s)*8);display:flex;gap:calc(var(--s)*30)}
.sy-fnav__col{width:calc(var(--s)*110)}
.sy-fnav__h{display:block;font-size:calc(var(--s)*14);letter-spacing:.06em;padding-bottom:calc(var(--s)*9);border-bottom:1px solid #d5d5d5;color:#333}
.sy-fnav ul{list-style:none;margin:calc(var(--s)*13) 0 0;padding:0}
.sy-fnav li{font-size:calc(var(--s)*14);letter-spacing:.06em;line-height:1;color:#444}
.sy-fnav li+li{margin-top:calc(var(--s)*24)}
.sy-fnav a:hover{color:var(--blue)}
.sy-contact{position:absolute;left:0;top:calc(var(--s)*215);width:calc(var(--s)*962);display:flex}
.sy-contact__item{flex:0 0 auto;text-align:center;height:calc(var(--s)*88);padding-top:0}
.sy-contact__item:nth-child(1){width:calc(var(--s)*247)}
.sy-contact__item:nth-child(2){width:calc(var(--s)*232)}
.sy-contact__item:nth-child(3){width:calc(var(--s)*232)}
.sy-contact__item:nth-child(4){width:calc(var(--s)*251)}
.sy-contact__item+.sy-contact__item{border-left:1px solid #d5d5d5}
.sy-contact__h{display:inline-flex;align-items:center;gap:calc(var(--s)*9);font-size:calc(var(--s)*15);letter-spacing:.06em;color:#222}
.sy-contact__h svg{width:calc(var(--s)*27);height:calc(var(--s)*27);color:var(--ink)}
.sy-contact__item p+p{margin-top:calc(var(--s)*9);font-size:calc(var(--s)*14);letter-spacing:.1em;line-height:calc(var(--s)*24);color:#333}
.sy-contact__item:nth-child(n+2) p+p{font-size:calc(var(--s)*15.5);margin-top:calc(var(--s)*12)}
.sy-copy{position:relative;border-top:1px solid #d5d5d5;height:calc(var(--s)*72);display:flex;align-items:center;justify-content:center}
.sy-copy p{font-size:calc(var(--s)*11);letter-spacing:.33em;color:#333;font-family:"Helvetica Neue",Arial,sans-serif;white-space:nowrap}
.sy-copy__sep{margin:0 .9em 0 .6em}
.sy-copy__by{letter-spacing:.2em}

.sy-page{padding:60px 0}

/* ---------- 大螢幕：背景滿版、內容維持 1440 ---------- */
@media (min-width:1441px){
	.sy-proj__main{left:calc((100vw - 1440px) / -2);width:calc(1080px + (100vw - 1440px) / 2)}
	.sy-circle--prev{left:calc(50px + (100vw - 1440px) / 2)}
	.sy-circle--next{left:auto;right:-13px}
	.sy-proj__cream{left:calc((100vw - 1440px) / -2);width:calc(520px + (100vw - 1440px) / 2)}
	.sy-about__img{width:calc(770px + (100vw - 1440px) / 2)}
}

/* ---------- 平板 / 手機 ---------- */
@media (max-width:1023px){
	:root{--s:1px}
	html{scroll-padding-top:64px}
	.sy-header{height:64px}
	.sy-header__in{padding:0 16px}
	.sy-logo--row .sy-mark{width:46px;height:41px}
	.sy-logo--row .sy-logo__zh{font-size:16px}
	.sy-logo--row .sy-logo__en{font-size:9px}
	.sy-nav{position:fixed;inset:64px 0 auto;background:#fff;padding:8px 24px 20px;box-shadow:0 12px 24px rgba(0,0,0,.08);display:none}
	.admin-bar .sy-nav{top:110px}
	.sy-nav.is-open{display:block}
	.sy-nav ul{flex-direction:column;gap:0}
	.sy-nav li a{display:block;padding:14px 0;border-bottom:1px solid #eee;font-size:15px}
	.sy-search-btn{margin-left:auto;margin-right:14px}
	.sy-search{right:0;width:100%;border-radius:0}
	.sy-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px}
	.sy-burger span{display:block;height:2px;background:#333;border-radius:2px;transition:transform .3s,opacity .3s}
	.sy-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
	.sy-burger[aria-expanded=true] span:nth-child(2){opacity:0}
	.sy-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

	.sy-wrap{padding:0 24px}
	.sy-en{font-size:14px;letter-spacing:.28em}
	.sy-h2{font-size:24px;margin-top:16px}

	.sy-hero{height:calc(100svh - 64px);min-height:560px;max-height:820px}
	.sy-hero__bg{left:0;top:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:38% 50%}
	.sy-hero__in{padding:56px 24px 0}
	.sy-hero__in>*{position:static}
	.sy-hero__eyebrow{font-size:12px}
	.sy-hero__title{margin-top:22px;font-size:clamp(28px,8.4vw,48px);white-space:normal;letter-spacing:.08em;line-height:1.3}
	.sy-hero__sub{margin-top:14px;font-size:clamp(18px,5vw,26px)}
	.sy-hero__rule{display:block;margin-top:24px}
	.sy-hero__desc{margin-top:20px;font-size:14px;letter-spacing:.14em;line-height:1.9;white-space:normal}
	.sy-hero__side{display:none}
	.sy-hero__btn{position:absolute;left:50%;top:auto;bottom:56px;transform:translateX(-50%);width:220px;height:52px;font-size:15px;padding:0 24px}

	.sy-philo{height:auto;padding:64px 24px}
	.sy-philo__in{height:auto}
	.sy-philo__lines{display:none}
	.sy-philo__head,.sy-philo__txt{position:static}
	.sy-philo__head{padding-left:22px;border-left:1px solid var(--line)}
	.sy-philo__head .sy-h2{margin-top:16px}
	.sy-philo__txt{margin-top:28px;text-align:left;font-size:15px;letter-spacing:.16em;line-height:1.9}

	.sy-about{height:auto;padding:64px 0 0}
	.sy-about__in{height:auto;padding:0 24px}
	.sy-about__txt{position:static;width:auto}
	.sy-about__txt .sy-h2{margin-top:16px}
	.sy-about__desc{margin-top:24px;font-size:15px;letter-spacing:.16em;line-height:1.9}
	.sy-about__txt .sy-btn{margin:32px 0 0}
	.sy-about__img{position:relative;top:auto;width:auto;height:auto;aspect-ratio:4/3;margin:40px 0 0 24px}

	.sy-btn{width:200px;height:50px;padding:0 18px 0 30px}
	.sy-btn__t{font-size:15px}
	.sy-btn__t--en{font-size:16px}

	.sy-proj{height:auto;padding:64px 0 56px}
	.sy-proj>.sy-wrap{padding:0 24px}
	.sy-proj .sy-h2{margin-top:16px}
	.sy-proj__wave{width:70%;height:120px}
	.sy-proj__stage{position:relative;inset:auto;display:grid;grid-template-columns:1fr auto;margin-top:32px}
	.sy-proj__cream{width:70%;height:40%}
	.sy-proj__main{position:relative;top:auto;left:auto;width:auto;height:auto;aspect-ratio:3/2;grid-column:1/-1}
	.sy-proj__slide:first-child{inset:0;width:100%;height:100%}
	.sy-proj__main .sy-circle{top:50%;margin-top:-17px}
	.sy-circle--prev{left:12px}
	.sy-circle--next{left:auto;right:12px}
	.sy-proj__info{position:static;width:auto;height:auto;grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:24px 24px 0}
	.sy-proj__name,.sy-proj__slash,.sy-proj__tag{position:static}
	.sy-proj__name{font-size:44px}
	.sy-proj__slash{width:60px;transform:rotate(-34deg)}
	.sy-proj__tag{writing-mode:horizontal-tb;letter-spacing:.3em;font-size:15px}
	.sy-proj__bottom{position:static;grid-column:1/-1;flex-direction:column;gap:28px;padding:20px 24px 0}
	.sy-proj__thumbs{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
	.sy-proj__thumb{width:auto;height:auto;aspect-ratio:141/98}

	.sy-media{height:auto;padding:64px 0}
	.sy-media>.sy-wrap{padding-top:0;height:auto}
	.sy-media .sy-h2{margin-top:16px}
	.sy-media__wave{top:200px;height:70%}
	.sy-media__rows{position:static;margin-top:28px}
	.sy-media__row{position:relative;top:auto!important;height:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:18px 0}
	.sy-media__label{position:static;grid-column:1/-1;font-size:18px;line-height:1.4}
	.sy-media__row>.sy-circle{position:static}
	.sy-media__track{position:static;width:auto;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
	.sy-media__card{flex:0 0 min(46vw,171px);scroll-snap-align:start}
	.sy-media__pic{height:auto;aspect-ratio:171/137}
	.sy-media__cap{font-size:13px;white-space:normal}
	.sy-media__more{position:static;margin-top:24px;text-align:right}

	.sy-footer__in{height:auto;padding:48px 24px 32px;display:flex;flex-direction:column;gap:36px}
	.sy-footer__brand,.sy-footer__main,.sy-fnav,.sy-contact{position:static}
	.sy-footer__brand{width:auto;display:flex;flex-direction:column;align-items:center}
	.sy-logo--col .sy-mark{width:90px;height:80px}
	.sy-logo--col .sy-logo__zh{font-size:20px}
	.sy-logo--col .sy-logo__en{font-size:12.8px}
	.sy-social{margin-top:24px;gap:18px}
	.sy-social a{width:42px;height:42px}
	.sy-footer__main{border:0;width:auto}
	.sy-fnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:24px 20px}
	.sy-fnav__col{width:auto}
	.sy-fnav li+li{margin-top:14px}
	.sy-contact{width:auto;flex-wrap:wrap;margin-top:32px;border-top:1px solid #e3e3e3}
	.sy-contact__item{width:50%!important;height:auto;padding:20px 8px;border:0!important;border-bottom:1px solid #e3e3e3!important}
	.sy-contact__item:nth-child(odd){border-right:1px solid #e3e3e3!important}
	.sy-copy{height:auto;padding:18px 16px}
	.sy-copy p{white-space:normal;text-align:center;font-size:10px;letter-spacing:.18em;line-height:1.8}
}
@media (max-width:600px){
	.sy-contact__item:nth-child(n){width:100%!important;border-right:0!important}
	.sy-copy__sep{display:none}
	.sy-copy__by{display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}