body{ background:#f4f6f7;}

.portfolio_page{ flex:1; background:linear-gradient(110deg, rgba(255,255,255,0.94), rgba(246,248,249,0.88)), url(img/list_02.jpg) center/cover no-repeat; padding:82px 0 86px;}
.portfolio_shell{ width:1120px; max-width:92%; margin:0 auto; display:grid; grid-template-columns:230px minmax(0,1fr); gap:42px; align-items:start;}
.portfolio_shell > *{ min-width:0;}
.portfolio_nav{ position:sticky; top:74px; padding:8px 0 0 28px; border-left:3px solid rgba(175,28,36,0.34);}
.portfolio_kicker{ margin:0 0 8px; color:#9da6ad; font-size:12px; line-height:18px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;}
.portfolio_nav h1{ margin:0 0 26px; color:#1c252c; font-size:30px; line-height:38px; font-weight:bold;}
.portfolio_nav ul{ margin:0; padding:0;}
.portfolio_nav li{ margin:0 0 12px; line-height:22px;}
.portfolio_nav a{ color:#1f2b33; font-size:15px; transition:color 180ms ease, padding-left 180ms ease;}
.portfolio_nav a:hover,
.portfolio_nav a.is-active{ color:#b31b28; padding-left:8px;}

@media screen and (min-width:981px){
	.portfolio_content{ display:flex; flex-direction:column; height:730px; min-height:0; overflow:hidden;}
	.portfolio_heading{ flex:0 0 auto;}
	.portfolio_projects{ display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden;}
	.portfolio_projects.is-expanded .portfolio_grid,
	.portfolio_text_sections{ flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(65,85,97,0.42) transparent;}
	.portfolio_projects.is-expanded .portfolio_grid{ max-height:484px;}
	.portfolio_projects:not(.is-expanded) .portfolio_grid{ flex:0 0 auto; overflow:hidden;}
	.portfolio_grid::-webkit-scrollbar,
	.portfolio_text_sections::-webkit-scrollbar{ width:6px; height:6px;}
	.portfolio_grid::-webkit-scrollbar-button,
	.portfolio_text_sections::-webkit-scrollbar-button{ display:none; width:0; height:0;}
	.portfolio_grid::-webkit-scrollbar-track,
	.portfolio_text_sections::-webkit-scrollbar-track{ background:rgba(35,55,68,0.045); border-radius:999px;}
	.portfolio_grid::-webkit-scrollbar-thumb,
	.portfolio_text_sections::-webkit-scrollbar-thumb{ min-height:48px; border:1px solid transparent; border-radius:999px; background:rgba(65,85,97,0.42); background-clip:padding-box;}
	.portfolio_grid::-webkit-scrollbar-thumb:hover,
	.portfolio_text_sections::-webkit-scrollbar-thumb:hover{ background:rgba(179,27,40,0.68); background-clip:padding-box;}
	.portfolio_grid::-webkit-scrollbar-corner,
	.portfolio_text_sections::-webkit-scrollbar-corner{ background:transparent;}
}

.portfolio_heading{ margin:0 0 26px; border-bottom:1px solid rgba(35,55,68,0.14); padding-bottom:22px;}
.portfolio_heading span{ display:block; color:#b31b28; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; font-weight:bold;}
.portfolio_heading h2{ margin:4px 0 12px; color:#17242c; font-size:34px; line-height:44px; font-weight:bold;}
.portfolio_heading p{ width:100%; max-width:760px; color:#4b5962; font-size:14px; line-height:27px;}

.portfolio_grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:18px; margin:0; padding:0;}
.portfolio_more{ display:block; flex:0 0 44px; width:132px; height:44px; margin:18px auto 0; border:1px solid rgba(179,27,40,0.48); background:rgba(255,255,255,0.78); color:#b31b28; font:14px/42px "Microsoft YaHei","微软雅黑",Arial,sans-serif; text-align:center; cursor:pointer; transition:color 180ms ease, background-color 180ms ease, border-color 180ms ease;}
.portfolio_more:hover,
.portfolio_more:focus-visible{ border-color:#b31b28; background:#b31b28; color:#fff; outline:none;}
.portfolio_project{ height:188px; overflow:hidden; background:#d7dee2; box-shadow:0 12px 24px rgba(34,54,68,0.12);}
.portfolio_project_link{ position:relative; display:block; width:100%; height:100%; color:#fff; overflow:hidden;}
.portfolio_project_link img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform 420ms ease, filter 420ms ease;}
.portfolio_project_link:before{ content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; background:linear-gradient(to bottom, rgba(5,24,38,0.78), rgba(5,24,38,0.38) 48%, rgba(5,24,38,0.08)); transition:background 300ms ease;}
.portfolio_project_meta{ position:absolute; z-index:2; left:16px; right:16px; top:14px; text-shadow:0 1px 4px rgba(0,0,0,0.45);}
.portfolio_project_meta em{ display:block; color:#fff; font-size:16px; line-height:22px; font-weight:bold;}
.portfolio_project_meta strong{ display:block; margin-top:5px; color:rgba(255,255,255,0.82); font-size:12px; line-height:18px; font-weight:normal;}
.portfolio_project_link:hover img{ transform:scale(1.07); filter:saturate(1.08);}
.portfolio_project_link:hover:before{ background:linear-gradient(to bottom, rgba(5,24,38,0.86), rgba(5,24,38,0.45) 50%, rgba(2,24,38,0.12));}
.portfolio_text_sections{ display:flex; flex-direction:column; gap:14px;}
.portfolio_text_section{ flex:0 0 auto; background:#fff; border-top:3px solid #b31b28; box-shadow:0 10px 22px rgba(34,54,68,0.09);}
.portfolio_text_section:not([open]){ overflow:hidden;}
.portfolio_text_section_summary{ display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:12px 20px; min-height:70px; padding:18px 22px; box-sizing:border-box; cursor:pointer; list-style:none; transition:background-color 180ms ease;}
.portfolio_text_section_summary::-webkit-details-marker{ display:none;}
.portfolio_text_section_summary::marker{ content:"";}
.portfolio_text_section_summary:hover{ background:#f8f9fa;}
.portfolio_text_section_summary:focus-visible{ outline:2px solid rgba(179,27,40,0.72); outline-offset:-2px;}
.portfolio_text_section h3{ margin:0; color:#17242c; font-size:20px; line-height:28px;}
.portfolio_text_section_summary h3,
.portfolio_text_group{ min-width:0;}
.portfolio_text_section_toggle{ position:relative; flex:0 0 24px; width:24px; height:24px; border:1px solid rgba(179,27,40,0.34); border-radius:50%;}
.portfolio_text_section_toggle:before,
.portfolio_text_section_toggle:after{ content:""; position:absolute; left:6px; top:11px; width:12px; height:2px; border-radius:2px; background:#b31b28; transition:transform 180ms ease;}
.portfolio_text_section_toggle:after{ transform:rotate(90deg);}
.portfolio_text_section[open] .portfolio_text_section_toggle:after{ transform:rotate(0deg);}
.portfolio_text_section[open] .portfolio_text_section_summary{ border-bottom:1px solid rgba(35,55,68,0.1);}
.portfolio_text_section_body{ padding:20px 22px 24px;}
.portfolio_text_section_preview{ position:relative; grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:6px 28px; min-height:0; margin:0; padding:0; overflow:hidden; cursor:pointer;}
.portfolio_text_section_preview:after{ content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:44px; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.72) 56%, #fff 100%);}
.portfolio_text_section[open] .portfolio_text_section_preview{ display:none;}
.portfolio_text_items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:10px 28px; margin:0; padding:0;}
.portfolio_text_section li{ position:relative; padding-left:12px; margin:0; color:#4b5962; font-size:13px; line-height:22px; overflow-wrap:anywhere;}
.portfolio_text_section li:empty{ display:none;}
.portfolio_text_section li:before{ content:""; position:absolute; left:0; top:10px; width:4px; height:4px; background:#b31b28;}
.portfolio_text_groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px;}
.portfolio_text_group{ padding:17px 18px 18px; border:1px solid rgba(35,55,68,0.1); background:#f8f9fa;}
.portfolio_text_group h4{ margin:0 0 10px; color:#263740; font-size:15px; line-height:24px; font-weight:bold;}
.portfolio_text_group ul{ display:grid; gap:8px; margin:0; padding:0;}

@media (prefers-reduced-motion:reduce){
	.portfolio_text_section_summary,
	.portfolio_text_section_toggle:before,
	.portfolio_text_section_toggle:after{ transition:none;}
}

.project_detail_page{ min-height:100vh; margin:0; background:#111b22; color:#fff; font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif; scrollbar-width:thin; scrollbar-color:#5f737f #111b22;}
.project_detail_shell{ width:min(900px, calc(100vw - 48px)); margin:0 auto; padding:26px 0 34px;}
.project_detail_media{ aspect-ratio:16 / 9; background:#0a1116; text-align:center; overflow:hidden;}
.project_detail_image{ display:block; width:100%; height:100%; object-fit:cover; background:#0a1116;}
.project_detail_image_button{ position:relative; display:block; width:100%; height:100%; margin:0; padding:0; border:0; background:#0a1116; overflow:hidden; cursor:zoom-in;}
.project_detail_image_button .project_detail_image{ transition:filter 220ms ease, transform 300ms ease;}
.project_detail_image_button span{ position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:50%; background:rgba(12,28,38,0.78); box-shadow:0 6px 16px rgba(0,0,0,0.26); opacity:0; transform:translateY(-4px); transition:opacity 200ms ease, transform 200ms ease, background-color 200ms ease;}
.project_detail_image_button span:before{ content:""; position:absolute; left:10px; top:9px; width:12px; height:12px; border:2px solid #fff; border-radius:50%;}
.project_detail_image_button span:after{ content:""; position:absolute; left:22px; top:22px; width:9px; height:2px; border-radius:2px; background:#fff; transform:rotate(45deg); transform-origin:left center;}
.project_detail_image_button:hover .project_detail_image,
.project_detail_image_button:focus-visible .project_detail_image{ filter:brightness(0.92);}
.project_detail_image_button:hover span,
.project_detail_image_button:focus-visible span{ opacity:1; transform:translateY(0);}
.project_detail_image_button:focus-visible{ outline:2px solid rgba(179,27,40,0.86); outline-offset:-2px;}
.project_detail_content{ background:#fff; color:#1f2b33; padding:24px 28px 28px;}
.project_detail_category{ margin:0 0 8px; color:#b31b28; font-size:13px; line-height:20px; font-weight:bold;}
.project_detail_content h1{ margin:0; color:#17242c; font-size:25px; line-height:34px;}
.project_detail_tag{ display:inline-block; margin:14px 0 10px; color:#66737b; font-size:13px; line-height:20px;}
.project_detail_official{ margin:0 0 12px; color:#1f2b33; font-size:14px; line-height:24px; font-weight:bold;}
.project_detail_desc p{ margin:0 0 10px; color:#394850; font-size:14px; line-height:26px;}
.project_detail_empty{ padding:42px; text-align:center; color:#fff; font-size:16px;}
.project_detail_page::-webkit-scrollbar{ width:10px;}
.project_detail_page::-webkit-scrollbar-track{ background:#111b22;}
.project_detail_page::-webkit-scrollbar-thumb{ background:#526671; border:2px solid #111b22; border-radius:999px;}
.project_detail_page::-webkit-scrollbar-thumb:hover{ background:#6a7e89;}
body.is-service-project-modal-open{ overflow:hidden;}
.service_project_modal{ position:fixed; z-index:10020; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:42px 0; background-color:rgba(0,0,0,0.42); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0, rgba(255,255,255,0.055) 1px, transparent 1px, transparent 5px); box-sizing:border-box;}
.service_project_modal_frame{ position:relative; width:min(920px, calc(100vw - 64px)); height:82vh; max-height:82vh; background:#111b22; box-shadow:0 18px 46px rgba(0,0,0,0.42); overflow:hidden;}
.service_project_modal_body{ height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.service_project_modal .project_detail_shell{ width:min(900px, calc(100% - 32px)); min-height:auto; padding:26px 0 0;}
.service_project_modal_head{ height:28px;}
.service_project_modal .project_detail_content{ padding-bottom:34px;}
.service_project_modal_close{ position:absolute; z-index:3; top:14px; right:14px; width:38px; height:38px; margin:0; padding:0; border:1px solid rgba(255,255,255,0.38); border-radius:50%; background:rgba(10,27,37,0.82); box-shadow:0 4px 12px rgba(0,0,0,0.24); cursor:pointer; transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;}
.service_project_modal_close:before,
.service_project_modal_close:after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:2px; background:#fff;}
.service_project_modal_close:before{ transform:rotate(45deg);}
.service_project_modal_close:after{ transform:rotate(-45deg);}
.service_project_modal_close:hover,
.service_project_modal_close:focus-visible{ background:#b31b28; border-color:#d44a55; box-shadow:0 6px 16px rgba(0,0,0,0.32); transform:scale(1.06); outline:none;}
body.is-project-image-viewing{ overflow:hidden;}
.project_global_image_viewer[hidden]{ display:none;}
.project_global_image_viewer{ position:fixed; z-index:10040; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:48px; background:rgba(7,14,20,0.94); box-sizing:border-box; cursor:zoom-out;}
.project_global_image_viewer:focus{ outline:none;}
.project_global_image_viewer_img{ display:block; max-width:calc(100vw - 96px); max-height:calc(100vh - 96px); width:auto; height:auto; object-fit:contain; background:#f4f6f7; box-shadow:0 18px 48px rgba(0,0,0,0.42); cursor:default;}
.project_global_image_viewer_close{ position:fixed; right:22px; top:22px; z-index:10041; width:42px; height:42px; margin:0; padding:0; border:1px solid rgba(255,255,255,0.34); border-radius:50%; background:rgba(20,32,40,0.86); box-shadow:0 10px 24px rgba(0,0,0,0.32); cursor:pointer;}
.project_global_image_viewer_close:before,
.project_global_image_viewer_close:after{ content:""; position:absolute; left:12px; top:20px; width:18px; height:2px; background:#fff; border-radius:2px;}
.project_global_image_viewer_close:before{ transform:rotate(45deg);}
.project_global_image_viewer_close:after{ transform:rotate(-45deg);}
.project_global_image_viewer_close:hover,
.project_global_image_viewer_close:focus-visible{ background:rgba(44,61,72,0.96); outline:none;}

@media screen and (max-width:980px){
	.portfolio_shell{ grid-template-columns:minmax(0,1fr); gap:28px;}
	.portfolio_nav,
	.portfolio_content{ width:100%; min-width:0; box-sizing:border-box;}
	.portfolio_nav{ position:relative; top:auto; display:block; padding-left:18px;}
	.portfolio_nav ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px;}
	.portfolio_nav li{ margin:0;}
	.portfolio_grid{ grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media screen and (max-width:620px){
	.portfolio_page{ padding:56px 0;}
	.portfolio_shell{ width:calc(100% - 30px); max-width:none;}
	.portfolio_grid,
	.portfolio_nav ul{ grid-template-columns:1fr;}
	.portfolio_text_section_summary{ min-height:62px; padding:15px 17px;}
	.portfolio_text_section_body{ padding:17px;}
	.portfolio_text_items,
	.portfolio_text_groups{ grid-template-columns:1fr;}
	.portfolio_project{ height:210px;}
	.portfolio_heading h2{ font-size:28px; line-height:36px;}
	.portfolio_project_meta em{ overflow-wrap:anywhere;}
	.service_project_modal{ padding:18px 0;}
	.service_project_modal_frame{ width:calc(100vw - 28px); height:86vh; max-height:86vh;}
	.service_project_modal_body{ height:100%;}
	.service_project_modal .project_detail_shell{ width:calc(100% - 20px); padding-top:18px;}
	.service_project_modal_head{ height:28px;}
	.service_project_modal_close{ right:8px; top:8px;}
	.project_global_image_viewer{ padding:18px;}
	.project_global_image_viewer_img{ max-width:calc(100vw - 36px); max-height:calc(100vh - 36px);}
	.project_global_image_viewer_close{ right:12px; top:12px;}
}