@charset "utf-8";



.syPrinciples20260723 { --sy-primary: var(--gw-theme-color, #4A90D9); --sy-text: #1e293b; --sy-text-secondary: #64748b; --sy-border: #e2e8f0; --sy-icon-bg: rgba(var(--gw-theme-rgb, 74, 144, 217), 0.06); --sy-radius: calc(16px * var(--gw-transform-scale, 1)); width: 100%; max-width: calc(1200px * var(--gw-transform-scale, 1)); margin: 0px auto; padding: calc(60px * var(--gw-transform-scale, 1)) calc(20px * var(--gw-transform-scale, 1)); box-sizing: border-box; }



.syPrinciples20260723 .sy-pr-header { text-align: center; margin-bottom: calc(48px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-badge { display: inline-block; font-size: calc(13px * var(--gw-transform-scale, 1)); font-weight: 500; color: var(--sy-primary); background: rgba(var(--gw-theme-rgb, 74, 144, 217), 0.06); padding: calc(6px * var(--gw-transform-scale, 1)) calc(18px * var(--gw-transform-scale, 1)); border-radius: calc(20px * var(--gw-transform-scale, 1)); margin-bottom: calc(20px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-title { font-size: calc(32px * var(--gw-transform-scale, 1)); font-weight: 700; color: var(--sy-text); margin: 0 0 calc(12px * var(--gw-transform-scale, 1)) 0; }



.syPrinciples20260723 .sy-pr-subtitle { font-size: calc(15px * var(--gw-transform-scale, 1)); color: var(--sy-text-secondary); margin: 0px; }



.syPrinciples20260723 .sy-pr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(24px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-card { background: transparent; border: 1px solid var(--sy-border); border-radius: var(--sy-radius); position: relative; overflow: hidden; }



.syPrinciples20260723 .sy-pr-card::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: calc(3px * var(--gw-transform-scale, 1)); background: var(--sy-primary); border-top-left-radius: var(--sy-radius); border-bottom-left-radius: var(--sy-radius); }



.syPrinciples20260723 .sy-pr-card-inner { padding: calc(32px * var(--gw-transform-scale, 1)) calc(32px * var(--gw-transform-scale, 1)) calc(32px * var(--gw-transform-scale, 1)) calc(40px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-icon { width: calc(44px * var(--gw-transform-scale, 1)); height: calc(44px * var(--gw-transform-scale, 1)); border-radius: calc(10px * var(--gw-transform-scale, 1)); background: var(--sy-icon-bg); display: flex; align-items: center; justify-content: center; margin-bottom: calc(20px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-icon svg { width: calc(22px * var(--gw-transform-scale, 1)); height: calc(22px * var(--gw-transform-scale, 1)); stroke: var(--sy-primary); }



.syPrinciples20260723 .sy-pr-num { display: block; font-size: calc(12px * var(--gw-transform-scale, 1)); font-weight: 600; color: var(--sy-primary); margin-bottom: calc(12px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-card-title { font-size: calc(20px * var(--gw-transform-scale, 1)); font-weight: 700; color: var(--sy-text); margin: 0 0 calc(12px * var(--gw-transform-scale, 1)) 0; position: relative; padding-bottom: calc(8px * var(--gw-transform-scale, 1)); }



.syPrinciples20260723 .sy-pr-card-title::after { content: ""; width: calc(32px * var(--gw-transform-scale, 1)); height: calc(2px * var(--gw-transform-scale, 1)); background: var(--sy-primary); position: absolute; left: 0px; bottom: 0px; }



.syPrinciples20260723 .sy-pr-card-desc { font-size: calc(14px * var(--gw-transform-scale, 1)); line-height: 1.7; color: var(--sy-text-secondary); margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: calc(16px * var(--gw-transform-scale, 1)); }



@media (max-width: 768px) {

  .syPrinciples20260723 { padding: calc(40px * var(--gw-transform-scale, 1)) calc(16px * var(--gw-transform-scale, 1)); }

  .syPrinciples20260723 .sy-pr-title { font-size: calc(24px * var(--gw-transform-scale, 1)); }

  .syPrinciples20260723 .sy-pr-grid { grid-template-columns: 1fr; gap: calc(16px * var(--gw-transform-scale, 1)); }

  .syPrinciples20260723 .sy-pr-card-inner { padding: calc(24px * var(--gw-transform-scale, 1)) calc(24px * var(--gw-transform-scale, 1)) calc(24px * var(--gw-transform-scale, 1)) calc(36px * var(--gw-transform-scale, 1)); }

}