:root { --font-family: 'Noto Sans SC'; } .icon-print { display: flex; position: relative; width: 1rem; height: 1rem; } .icon-print i:nth-child(1) { position: absolute; bottom: 0.15rem; z-index: 2; width: 1rem; height: 0.5rem; background-color: #000; border-radius: 0.1rem; } .icon-print i:nth-child(2) { position: absolute; left: 0.25rem; z-index: 1; width: 0.5rem; height: 1rem; background-color: #999; } .icon-print i:nth-child(2)::before { content: ""; position: absolute; left: calc(50% - 0.15rem); top: 1px; z-index: 1; width: 0.3rem; height: 1px; border-top: 1px solid var(--color-fff); border-bottom: 1px solid var(--color-fff); background-color: var(--color-fff); padding: 1px 0; background-clip: content-box; box-sizing: content-box; } .icon-refresh { position: relative; width: 1rem; height: 1rem; box-shadow: 0 0 0.3rem #0065fb; border-radius: 50%; overflow: hidden; background: linear-gradient(0deg, rgb(255 255 255) 0%, #e1e1e1 100%); } .icon-refresh::before { content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 50%; margin: calc(0.25rem - 0.05rem) auto; background: linear-gradient(0deg, rgb(249 249 249) 0%, #a5c7f9 100%); } .home-section { padding: 6.1333rem 0; } .home-section .section-header { max-width: 46.6667rem; margin-bottom: 2.6667rem; } .home-section .section-label { margin-bottom: 0.6rem; color: #2563eb; font-size: var(--font-md); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .home-section .section-header h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.25; letter-spacing: -.035em; } .home-section .section-description { margin: 0.9333rem 0 0; color: #475569; line-height: 1.8; } .home-hero { padding: 5.2rem 0 4.9333rem; background: radial-gradient( circle at 82% 17%, rgba(37, 99, 235, .08), transparent 29% ), linear-gradient( 180deg, #ffffff 0%, #fbfdff 100% ); } .home-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(28rem, .95fr); align-items: center; gap: 4.8rem; } .home-hero .hero-label { display: inline-flex; align-items: center; gap: 0.5333rem; margin-bottom: 1.2rem; color: #2563eb; font-size: var(--font-md); font-weight: 750; letter-spacing: .08em; } .home-hero .hero-label::before { content: ""; width: 0.4667rem; height: 0.4667rem; border-radius: 50%; background: #2563eb; } .home-hero h1 { max-width: 43.3333rem; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -.05em; font-weight: 800; color: #000; } .home-hero .hero-description { max-width: 40.6667rem; margin: 1.5333rem 0 0; color: #475569; font-size: 1.05rem; line-height: 1.85; } .home-hero .hero-actions { margin-top: 2.25rem; } .home-hero .hero-actions-label { display: block; margin-bottom: 0.8rem; color: #64748b; font-size: 0.8rem; font-weight: 600; } .home-hero .hero-popular-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; max-width: 35rem; } .home-hero .popular-tool { min-width: 0; display: var(--flex-display); flex-direction: var(--flex-row); justify-content: space-between; gap: 0.65rem; padding: 0.75rem 0.8rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .home-hero .popular-tool:hover { border-color: #bfdbfe; box-shadow: 0 0.125rem 0.375rem rgba(15, 23, 42, 0.04); transform: translateY(-1px); } .home-hero .popular-tool-info { display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.65rem; } .home-hero .popular-tool-operation { display: var(--flex-display); flex-direction: var(--flex-row); align-items: center; gap: 0.65rem; } .home-hero .popular-tool-symbol { width: 2rem; height: 2rem; flex: 0 0 2rem; display: grid; place-items: center; border-radius: 0.5rem; background: #edf1f5; color: #2563eb; font-size: 1.05rem; font-weight: 700; } .home-hero .popular-tool-name { min-width: 0; color: #0f172a; font-weight: 650; white-space: nowrap; } .home-hero .popular-tool-desc { margin-top: 0.15rem; color: #64748b; font-size: var(--font-sm); line-height: 1.35; white-space: nowrap; } .home-hero .popular-tool .tool-link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.6667rem; margin-top: auto; padding-top: 0; color: #2563eb; font-size: var(--font-xs); font-weight: 650; } .home-hero .popular-tool .tool-link svg { width: 1rem; height: 1rem; } .home-hero .hero-all-tools { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; color: #2563eb; font-size: 0.9rem; font-weight: 600; } .home-hero .hero-all-tools svg { transition: transform 0.2s ease; } .home-hero .hero-all-tools:hover svg { transform: translateX(0.2rem); } .home-hero .worksheet-stage { position: relative; } .home-hero .worksheet-window { position: relative; overflow: hidden; background: #fff; border: 0.0667rem solid #dfe6ef; border-radius: 1.2rem; box-shadow: 0 1.6667rem 4.6667rem rgba(15, 23, 42, .1); transform: rotate(.5deg); } .home-hero .window-top { height: 3rem; display: flex; align-items: center; padding: 0 1.1333rem; background: #fafbfd; border-bottom: 0.0667rem solid #eef2f7; } .home-hero .window-dots { display: flex; gap: 0.4rem; } .home-hero .window-dots span { width: 0.4667rem; height: 0.4667rem; border-radius: 50%; background: #cbd5e1; } .home-hero .window-title { flex: 1; text-align: center; color: #64748b; font-size: .74rem; } .home-hero .worksheet-body { padding: 1.7333rem 1.9333rem 1.9333rem; } .home-hero .worksheet-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1.1333rem; border-bottom: 0.0667rem solid #eef2f7; } .home-hero .worksheet-heading strong { display: block; font-size: 1rem; } .home-hero .worksheet-heading small { display: block; margin-top: 0.2rem; color: #94a3b8; font-size: .69rem; } .home-hero .worksheet-tag { padding: 0.2667rem 0.6rem; color: #2563eb; background: #eff6ff; border-radius: 0.4rem; font-size: .67rem; font-weight: 650; } .home-hero .question-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8667rem 1.8667rem; padding: 1.4667rem 0.2rem 0.8rem; } .home-hero .question { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.6667rem; color: #1e293b; border-bottom: 0.0667rem dashed #e2e8f0; font-size: .9rem; } .home-hero .question-number { color: #94a3b8; font-size: .66rem; } .home-hero .worksheet-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8667rem; color: #94a3b8; font-size: .67rem; border-top: 0.0667rem solid #eef2f7; } .home-hero .floating-answer { position: absolute; right: -1.3333rem; bottom: -1.4rem; width: 8.6667rem; padding: 0.8667rem 1rem; background: #fff; border: 0.0667rem solid #dbeafe; border-radius: 0.8667rem; box-shadow: 0 1rem 2.3333rem rgba(15, 23, 42, .09); } .home-hero .floating-answer span { display: block; color: #94a3b8; font-size: .64rem; } .home-hero .floating-answer strong { display: block; margin-top: 0.2rem; color: #2563eb; font-size: .85rem; } @media screen and (max-width: 1024px) { .home-hero .hero-grid { grid-template-columns: 1fr; } .home-hero .hero-description { max-width: unset; } } .home-capability { background-color: #fff; border-top: 0.0667rem solid #eef2f7; border-bottom: 0.0667rem solid #eef2f7; } .home-capability .capability-list { display: grid; grid-template-columns: repeat(5, 1fr); } .home-capability .capability-item { min-height: 5.5333rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; border-right: 0.0667rem solid #eef2f7; font-weight: 600; } .home-capability .capability-item:last-child { border-right: 0; } .home-capability .capability-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; color: #2563eb; background: #eff6ff; border-radius: 0.4667rem; } .home-capability .capability-icon svg { width: 1rem; height: 1rem; } @media screen and (max-width: 600px) { .home-capability .capability-item { flex-direction: column; } } .home-scenario {} .home-scenario .audience-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.2rem; } .home-scenario .audience-main, .home-scenario .audience-side { border-radius: 1.1333rem; } .home-scenario .audience-main { padding: 2.0667rem; background: #fff; border: 0.0667rem solid #e5e7eb; } .home-scenario .audience-main h3 { margin: 0; font-size: 1.15rem; } .home-scenario .audience-main p { margin: 0.8rem 0 0; color: #475569; font-size: .88rem; line-height: 1.85; } .home-scenario .grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1.6667rem; } .home-scenario .grade-item { padding: 0.8667rem 0.6rem; text-align: center; background: #fbfcfe; border: 0.0667rem solid #eef2f7; border-radius: 0.6667rem; } .home-scenario .grade-item strong { display: block; font-size: .84rem; } .home-scenario .grade-item span { display: block; margin-top: 0.1333rem; color: #94a3b8; font-size: .66rem; } .home-scenario .audience-side { padding: 2.0667rem; color: #fff; background: #0f172a; } .home-scenario .audience-side h3 { margin: 0; font-size: 1.15rem; } .home-scenario .audience-side p { margin: 0.8rem 0 1.4667rem; color: #cbd5e1; font-size: .85rem; line-height: 1.8; } .home-scenario .audience-points { display: grid; gap: 0.8rem; } .home-scenario .audience-point { display: flex; align-items: flex-start; gap: 0.6667rem; color: #e2e8f0; font-size: .81rem; } .home-scenario .audience-point svg { flex: 0 0 auto; width: 1.1333rem; height: 1.1333rem; margin-top: 0.2rem; } @media screen and (max-width: 1024px) { .home-scenario .audience-grid { grid-template-columns: 1fr; } } @media screen and (max-width: 600px) { .home-scenario .grade-row { grid-template-columns: repeat(2, 1fr); } } .home-tools { background: #fff; } .home-tools .tools-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5333rem; } .home-tools .tools-heading .section-header { margin-bottom: 0; } .home-tools .tools-description { max-width: 20.6667rem; color: #64748b; font-size: .79rem; line-height: 1.7; text-align: right; } .home-tools .basic-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9333rem; } .home-tools .basic-tool { position: relative; min-height: 20.6667rem; display: flex; flex-direction: column; padding: 1.5333rem; overflow: hidden; background: #fff; border: 0.0667rem solid #e5e7eb; border-radius: 1.1333rem; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .home-tools .basic-tool:hover { transform: translateY(-0.2rem); border-color: #bfd7fb; box-shadow: 0 1.2rem 2.8rem rgba(15, 23, 42, .08); } .home-tools .basic-tool::before { content: ""; position: absolute; width: 10rem; height: 10rem; right: -5rem; top: -5rem; border-radius: 50%; background: #eff6ff; pointer-events: none; } .home-tools .operation-symbol { position: relative; z-index: 1; width: 3.2667rem; height: 3.2667rem; display: grid; place-items: center; color: #fff; background: #2563eb; border-radius: 0.8667rem; font-size: 1.6rem; font-weight: 650; box-shadow: 0 0.5333rem 1.2rem rgba(37, 99, 235, .16); } .home-tools .basic-tool h3 { position: relative; z-index: 1; margin: 1.0667rem 0 0.0667rem; font-size: 1.12rem; } .home-tools .basic-subtitle { position: relative; z-index: 1; color: #64748b; font-size: var(--font-sm); } .home-tools .sample-questions { position: relative; z-index: 1; display: grid; gap: 0.6rem; margin-top: 1.3333rem; padding: 0.9333rem; background: #f8fafc; border: 0.0667rem solid #f0f3f7; border-radius: 0.6667rem; } .home-tools .sample-question { display: flex; align-items: center; gap: 0.6667rem; font-size: .78rem; } .home-tools .sample-question-number { width: 1.2667rem; height: 1.2667rem; display: grid; place-items: center; flex: 0 0 auto; color: #64748b; background: #fff; border: 0.0667rem solid #e2e8f0; border-radius: 0.3333rem; font-size: .58rem; } .home-tools .tool-link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.6667rem; margin-top: auto; padding-top: 1.0667rem; color: #2563eb; font-size: var(--font-xs); font-weight: 650; } .home-tools .tool-link svg { width: 1rem; height: 1rem; transition: transform .2s ease; } .home-tools .basic-tool:hover .tool-link svg, .home-tools .special-card:hover .tool-link svg, .home-tools .chain-card:hover .tool-link svg { transform: translateX(0.2rem); } .home-tools .tool-group { margin-top: 3.4667rem; } .home-tools .tool-group-heading { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2667rem; } .home-tools .tool-group-mark { width: 2rem; height: 2rem; display: grid; place-items: center; color: #2563eb; background: #eff6ff; border-radius: 0.5333rem; font-size: .7rem; font-weight: 750; } .home-tools .tool-group-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6667rem; } .home-tools .tool-group-title h3 { margin: 0; font-size: 1.12rem; } .home-tools .tool-group-title span { color: #64748b; font-size: .75rem; } .home-tools .special-tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7333rem; } .home-tools .special-card { position: relative; min-height: 12.5333rem; display: flex; flex-direction: column; padding: 1.1333rem; background: #fff; border: 0.0667rem solid #e5e7eb; border-radius: 0.8667rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-tools .special-card:hover { transform: translateY(-0.1333rem); border-color: #cbdcf6; box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, .06); } .home-tools .special-card:nth-child(1), .home-tools .special-card:nth-child(2) { grid-column: span 2; } .home-tools .special-card:nth-child(3), .home-tools .special-card:nth-child(4), .home-tools .special-card:nth-child(5) { grid-column: span 2; } .home-tools .special-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; } .home-tools .special-title { display: flex; align-items: center; gap: 0.6rem; } .home-tools .special-icon { width: 1.8667rem; height: 1.8667rem; display: grid; place-items: center; flex: 0 0 auto; color: #2563eb; background: #eff6ff; border-radius: 0.4667rem; font-size: .86rem; font-weight: 700; } .home-tools .special-card h4 { margin: 0; font-size: 1rem; } .home-tools .special-label { color: #94a3b8; font-size: var(--font-xs); white-space: nowrap; } .home-tools .special-examples { display: grid; gap: 0.4667rem; margin-top: 1.1333rem; } .home-tools .special-example { padding: 0.5333rem 0.6667rem; color: #475569; background: #f8fafc; border-radius: 0.4667rem; font-size: .71rem; white-space: nowrap; } .home-tools .special-card .tool-link { margin-top: auto; padding-top: 0.8667rem; font-size: var(--font-xs); } .home-tools .chain-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7333rem; } .home-tools .chain-card { min-height: 9.8667rem; display: grid; grid-template-columns: 1fr auto; column-gap: 1.3333rem; padding: 1.2667rem 1.3333rem; background: #fff; border: 0.0667rem solid #e5e7eb; border-radius: 0.8667rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-tools .chain-card:hover { transform: translateY(-0.1333rem); border-color: #cbdcf6; box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, .06); } .home-tools .chain-info { min-width: 0; } .home-tools .chain-title { display: flex; align-items: center; gap: 0.6rem; } .home-tools .chain-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; color: #2563eb; background: #eff6ff; border-radius: 0.4667rem; font-size: .77rem; font-weight: 700; } .home-tools .chain-card h4 { margin: 0; font-size: 1rem; } .home-tools .chain-description { margin-top: 0.3333rem; color: #94a3b8; font-size: var(--font-xs); } .home-tools .chain-examples { display: grid; gap: 0.3333rem; margin-top: 0.8rem; } .home-tools .chain-example { padding: 0.5333rem 0.6667rem; color: #475569; background: #f8fafc; border-radius: 0.4667rem; font-size: .71rem; white-space: nowrap; } .home-tools .chain-card .tool-link { grid-column: 2; grid-row: 1 / span 2; align-self: end; flex-direction: column; justify-content: flex-end; padding-top: 0; font-size: var(--font-xs); } .home-tools .chain-card .tool-link svg { width: 1rem; height: 1rem; } @media screen and (max-width: 1024px) { .home-tools .tools-heading { flex-direction: column; } .home-tools .tools-description { display: none; } .home-tools .basic-tools { grid-template-columns: repeat(2, 1fr); } .home-tools .special-tools { grid-template-columns: repeat(4, 1fr); } .home-tools .chain-tools { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 600px) { .home-tools .basic-tools { grid-template-columns: 1fr; } .home-tools .special-tools { grid-template-columns: repeat(2, 1fr); } .home-tools .chain-tools { grid-template-columns: 1fr; } } .home-features { background-color: #f8fafc; } .home-features .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9333rem; } .home-features .feature-card { min-height: 13.6667rem; padding: 1.7333rem; background: #fff; border: 0.0667rem solid #e5e7eb; border-radius: 1.1333rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-features .feature-card:hover { transform: translateY(-0.1333rem); border-color: #d4def0; box-shadow: 0 0.9333rem 2.6667rem rgba(15, 23, 42, .07); } .home-features .feature-icon { width: 2.5333rem; height: 2.5333rem; display: grid; place-items: center; color: #2563eb; background: #eff6ff; border-radius: 0.6667rem; } .home-features .feature-icon svg { width: 1.2667rem; height: 1.2667rem; } .home-features .feature-card h3 { margin: 1.2rem 0 0.4667rem; font-size: 1rem; } .home-features .feature-card p { margin: 0; color: #475569; font-size: .81rem; line-height: 1.75; } @media screen and (max-width: 600px) { .home-features .feature-grid { grid-template-columns: 1fr; } } .home-practice { background-color: #fff; } .home-practice .practice-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.1333rem; } .home-practice .practice-intro { padding: 2.0667rem; color: #fff; background: #2563eb; border-radius: 1.1333rem; } .home-practice .practice-intro h3 { margin: 0; font-size: 1.4rem; line-height: 1.4; } .home-practice .practice-intro p { margin: 0.8667rem 0 0; color: #dbeafe; font-size: .84rem; line-height: 1.8; } .home-practice .practice-keywords { display: flex; flex-wrap: wrap; gap: 0.4667rem; margin-top: 1.6667rem; } .home-practice .practice-keywords span { padding: 0.3333rem 0.6rem; color: #eff6ff; background: rgba(255, 255, 255, .08); border: 0.0667rem solid rgba(255, 255, 255, .2); border-radius: 0.4667rem; font-size: .68rem; } .home-practice .practice-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6667rem; } .home-practice .practice-item { min-height: 7.3333rem; padding: 1.3333rem; background: #fff; border: 0.0667rem solid #e5e7eb; border-radius: 0.8667rem; } .home-practice .practice-item strong { display: block; font-size: .9rem; } .home-practice .practice-item p { margin: 0.4667rem 0 0; color: #475569; font-size: .74rem; line-height: 1.65; } @media screen and (max-width: 600px) { .home-practice .practice-layout { grid-template-columns: 1fr; } } .web-application-capabilities { order: 1; max-width: stretch; } .arithmetic-worksheets .web-application-workspace { display: var(--flex-display); flex-direction: var(--flex-row); gap: 2rem; } @media screen and (max-width: 1024px) { .arithmetic-worksheets .web-application-workspace { flex-direction: var(--flex-col); } } .arithmetic-worksheets .web-application-controls { position: relative; width: 28rem; } .arithmetic-worksheets .web-application-controls > .inner-container { position: absolute; width: 28rem; height: calc(100vh - 5.8rem); margin-top: 1.3rem; overflow-y: auto; } .arithmetic-worksheets .web-application-controls.is-fixed > .inner-container { position: fixed; } .arithmetic-worksheets .web-application-controls.is-bottom > .inner-container { position: absolute; top: auto; bottom: 0; } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar { width:0.5rem; height:0; background-color:#ddd; } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-button { display:none; } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-track { display:none; } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-track-piece { } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-corner { } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-thumb { border-radius: 0.6rem; background: #c7cbd1; } .arithmetic-worksheets .web-application-controls > .inner-container::-webkit-scrollbar-thumb:hover { background: #a7acb3; } .arithmetic-worksheets .web-application-controls > .inner-container .panel-groups { display: var(--flex-display); flex-direction: var(--flex-col); gap: 3rem; } .arithmetic-worksheets .web-application-controls > .inner-container .panel-group { display: var(--flex-display); flex-direction: var(--flex-col); gap: 1rem; padding: 1rem; background: linear-gradient(180deg, #f7faff 0%, #f1f6fc 100%); border: 0.1rem solid #cbd8e8; border-radius: 1rem; box-shadow: 0 16px 36px rgba(30, 64, 175, 0.10), 0 3px 8px rgba(15, 23, 42, 0.07); } @media screen and (max-width: 1024px) { .web-application-capabilities { order: 2; } .arithmetic-worksheets .web-application-controls { width: unset; } .arithmetic-worksheets .web-application-controls > .inner-container { width: unset; height:unset; position: relative; } .arithmetic-worksheets .web-application-controls.is-fixed > .inner-container, .arithmetic-worksheets .web-application-controls.is-bottom > .inner-container { position: relative; } } .arithmetic-worksheets .web-application-preview { position: relative; width: calc(100% - 45rem); margin-top: 1.3rem; background-color: var(--color-fff); } @media screen and (max-width: 1024px) { .arithmetic-worksheets .web-application-preview { width: unset; } } .arithmetic-worksheets .web-application-actions { position: relative; width: 13rem; } .arithmetic-worksheets .web-application-actions > .inner-container { position: absolute; width: 13rem; height: calc(100vh - 5.8rem); margin-top: 1.3rem; } .arithmetic-worksheets .web-application-actions.is-fixed > .inner-container { position: fixed; } .arithmetic-worksheets .web-application-actions.is-bottom > .inner-container { position: absolute; top: auto; bottom: 0; } .arithmetic-worksheets .web-application-actions > .inner-container .panel-groups { display: var(--flex-display); flex-direction: var(--flex-col); gap: 3rem; } .arithmetic-worksheets .web-application-actions > .inner-container .panel-group { padding: 1rem; background: linear-gradient(180deg, #f7faff 0%, #f1f6fc 100%); border: 0.1rem solid #cbd8e8; border-radius: 1rem; box-shadow: 0 16px 36px rgba(30, 64, 175, 0.10), 0 3px 8px rgba(15, 23, 42, 0.07); } @media screen and (max-width: 1024px) { .arithmetic-worksheets .web-application-actions { width: unset; } .arithmetic-worksheets .web-application-actions > .inner-container { width: unset; height:unset; position: relative; } .arithmetic-worksheets .web-application-actions.is-fixed > .inner-container, .arithmetic-worksheets .web-application-actions.is-bottom > .inner-container { position: relative; } } .arithmetic-worksheets .selection-template { display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.36rem; } .arithmetic-worksheets .selection-template.hide-option { display: none; } .arithmetic-worksheets .selection-template .description {} .arithmetic-worksheets .selection-template .operation {} .arithmetic-worksheets .print-btn { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); cursor: pointer; } .arithmetic-worksheets .print-btn div { display: var(--flex-display); flex-direction: var(--flex-row); height: 3rem; border-radius: 0.36rem; align-items: center; justify-content: center; gap: var(--gap-75); font-size: var(--font-sm); } .arithmetic-worksheets .print-btn .generator { background-color: #fff; color: #0066ff; border: #0066ff 0.1rem solid; opacity: 0.2; } .arithmetic-worksheets .print-btn .generator[data-wativate-generator="true"] { opacity: 1; } .arithmetic-worksheets .print-btn .print { color: #fff; background-color: #0066ff; } .arithmetic-worksheets .print-btn .print .icon-print i:nth-child(1) { background-color: #999; } .arithmetic-worksheets .print-btn .print .icon-print i:nth-child(2) { background-color: #fff; } .arithmetic-worksheets .print-btn .print .icon-print i:nth-child(2):before { border-top: 0.1rem solid #000; border-bottom: 0.1rem solid #000; background-color: #000; } .worksheets-renderer .content-header .basic-information .page-title { height: auto; } .web-application-title { order: 2; } .web-application-title .title { margin-top: 10rem; } .web-application-title .intro { color: #000; border-bottom: solid #dddddd 0.1rem; padding-top: 1rem; padding-bottom: 1rem; } @media screen and (max-width: 1024px) { .web-application-title { order: 1; } .web-application-title .title { margin-top: 1rem; } } .web-application-information { order:3; } .web-application-information .features { margin-top: 3rem; padding: 2rem; background-color: var(--color-fff); border: #e5e5e5 0.1rem solid; box-shadow: 0.5rem 1.5rem 2rem #e5e5e5; border-radius: 1rem; } .web-application-information .features .features-header { display: var(--flex-display); flex-direction: column; gap: var(--gap) } .web-application-information .features .features-header h2 { font-size: 1.45rem; letter-spacing: -.025em; } .web-application-information .features .features-header p { color: #64748b; font-size: var(--font-sm); } .web-application-information .features .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.4667rem; } .web-application-information .features .feature-card { padding: 1.2rem; border: 0.0667rem solid #e5eaf0; border-radius: 0.8rem; background: #fafcff; } .web-application-information .features .feature-icon { width: 2.2667rem; height: 2.2667rem; display: grid; place-items: center; border-radius: 0.6rem; background: #eff6ff; color: #2563eb; font-weight: 800; } .web-application-information .features .feature-card h3 { margin: 0.8rem 0 0.2667rem; font-size: 0.9rem; } .web-application-information .features .feature-card p { margin: 0; color: #64748b; font-size: 0.75rem; } @media screen and (max-width: 600px) { .web-application-information .features .feature-grid { grid-template-columns: repeat(2, 1fr); } } .web-application-information .grade { margin-top: 3rem; padding: 2rem; background-color: var(--color-fff); border: #e5e5e5 0.1rem solid; box-shadow: 0.5rem 1.5rem 2rem #e5e5e5; border-radius: 1rem; } .web-application-information .grade .grade-header { display: var(--flex-display); flex-direction: column; gap: var(--gap) } .web-application-information .grade .grade-header h2 { font-size: 1.45rem; letter-spacing: -.025em; } .web-application-information .grade .grade-header p { color: #64748b; font-size: var(--font-sm); } .web-application-information .grade .grade-list { display: flex; flex-wrap: wrap; gap: 0.5333rem; margin-top: 1.2rem; } .web-application-information .grade .grade-item { padding: 0.4667rem 0.8rem; border-radius: 0.5333rem; background: #f8fafc; border: 0.0667rem solid #e2e8f0; color: #475569; font-size: .78rem; } .web-application-information .problem-type { margin-top: 3rem; padding: 2rem; background-color: var(--color-fff); border: #e5e5e5 0.1rem solid; box-shadow: 0.5rem 1.5rem 2rem #e5e5e5; border-radius: 1rem; } .web-application-information .problem-type .problem-type-header { display: var(--flex-display); flex-direction: column; gap: var(--gap) } .web-application-information .problem-type .problem-type-header h2 { font-size: 1.45rem; letter-spacing: -.025em; } .web-application-information .problem-type .problem-type-header p { color: #64748b; font-size: var(--font-sm); } .web-application-information .problem-type .problem-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.3333rem; } .web-application-information .problem-type .problem-type-card { padding: 1.1333rem; border: 0.0667rem solid #e2e8f0; border-radius: 0.7333rem; background: #fff; } .web-application-information .problem-type .problem-type-card strong { display: block; color: #333; font-size: .92rem; } .web-application-information .problem-type .problem-type-card span { display: block; margin-top: 0.2667rem; color: #64748b; font-size: .74rem; } .web-application-information .problem-type .range-list { display: flex; flex-wrap: wrap; gap: 0.5333rem; margin-top: 1.2rem; } .web-application-information .problem-type .range-item { padding: 0.4667rem 0.7333rem; border-radius: 0.5333rem; background: #eff6ff; color: #2563eb; font-size: .78rem; font-weight: 650; } @media screen and (max-width: 1024px) { .web-application-information .problem-type .problem-type-grid { grid-template-columns: repeat(2, 1fr); } } .web-application-information .related-tools { margin-top: 3rem; padding: 2rem; background-color: var(--color-fff); border: #e5e5e5 0.1rem solid; box-shadow: 0.5rem 1.5rem 2rem #e5e5e5; border-radius: 1rem; } .web-application-information .related-tools .related-tools-header { display: var(--flex-display); flex-direction: column; gap: var(--gap) } .web-application-information .related-tools .related-tools-header h2 { font-size: 1.45rem; letter-spacing: -.025em; } .web-application-information .related-tools .related-tools-header p { color: #64748b; font-size: var(--font-sm); } .web-application-information .related-tools .related-tools-content { margin-top: 1.4667rem; } .web-application-information .related-tools .related-tool-groups { display: var(--flex-display); flex-direction: column; gap: 2rem; } .web-application-information .related-tools .related-tool-group { padding: 1.35rem; border: 1px solid #e2e8f0; border-radius: 1rem; } .web-application-information .related-tools .related-tool-heading { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1rem; } .web-application-information .related-tools .related-tool-heading h3 { margin: 0; color: #334155; font-size: 1rem; font-weight: 700; line-height: 1.4; } .web-application-information .related-tools .related-tool-heading span { color: #64748b; font-size: 0.78rem; line-height: 1.4; } .web-application-information .related-tools .related-tool-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; } .web-application-information .related-tools .related-tool { min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.85rem; border: 1px solid #e2e8f0; border-radius: 0.7rem; background: #ffffff; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .web-application-information .related-tools .related-tool:hover { border-color: #bfdbfe; background: #fbfdff; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .web-application-information .related-tools .related-tool-symbol { width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; display: grid; place-items: center; border-radius: 0.6rem; background: #eff6ff; color: var(--blue); font-size: 1rem; font-weight: 700; line-height: 1; } .web-application-information .related-tools .related-tool-content { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .web-application-information .related-tools .related-tool-content strong { display: block; max-width: 100%; overflow: hidden; font-size: 0.86rem; font-weight: 650; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; } .web-application-information .related-tools .related-tool-content small { display: block; max-width: 100%; margin-top: 0.12rem; overflow: hidden; color: #64748b; font-size: 0.7rem; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; } .web-application-information .related-tools .related-tool-arrow { flex: 0 0 auto; color: #94a3b8; font-size: 1rem; line-height: 1; transition: color 0.2s ease, transform 0.2s ease; } .web-application-information .related-tools .related-tool:hover .related-tool-arrow { color: #2563eb; transform: translateX(2px); } @media screen and (max-width: 1024px) { .web-application-information .related-tools .related-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .web-application-information .related-tools .related-tool-list { grid-template-columns: 1fr; } } .print-page .content-main { display: var(--flex-display); flex-direction: row; flex-wrap: wrap; } .worksheets-renderer .content-main .page-column { row-gap: unset; } .print-page .content-main .item { display: var(--flex-display); gap: 0.6rem; box-sizing: border-box; margin:10px 0; align-items: center; } .print-page .content-main .item .exercise { flex: 1; } .print-page .content-main .item .exercise i[data-type="rendering"] { display: var(--flex-display); white-space: pre; } .print-page .content-main .item .exercise i[data-type="fill-in"] { display: var(--flex-display); position: var(--position-relative); justify-content: var(--justify-between); align-items: var(--items-center); white-space: nowrap; min-width: 4rem; } .print-page .content-main .exercise.fill-in-width-0\.5 i[data-type="fill-in"]{ min-width: calc(4rem * 0.5); } .print-page .content-main .exercise.fill-in-width-0\.6 i[data-type="fill-in"]{ min-width: calc(4rem * 0.6); } .print-page .content-main .exercise.fill-in-width-0\.7 i[data-type="fill-in"]{ min-width: calc(4rem * 0.7); } .print-page .content-main .exercise.fill-in-width-0\.8 i[data-type="fill-in"]{ min-width: calc(4rem * 0.8); } .print-page .content-main .exercise.fill-in-width-1 i[data-type="fill-in"]{ } .print-page .content-main .exercise.fill-in-width-1\.2 i[data-type="fill-in"]{ min-width: calc(4rem * 1.2); } .print-page .content-main .exercise.fill-in-width-1\.5 i[data-type="fill-in"]{ min-width: calc(4rem * 1.5); } .print-page .content-main .exercise.fill-in-width-1\.8 i[data-type="fill-in"]{ min-width: calc(4rem * 1.8); } .print-page .content-main .exercise.fill-in-width-2 i[data-type="fill-in"]{ min-width: calc(4rem * 2); } .print-page .content-main .exercise.fill-in-width-2\.2 i[data-type="fill-in"]{ min-width: calc(4rem * 2.2); } .print-page .content-main .exercise.fill-in-width-2\.5 i[data-type="fill-in"]{ min-width: calc(4rem * 2.5); } .print-page .content-main .exercise.fill-in-width-2\.8 i[data-type="fill-in"]{ min-width: calc(4rem * 2.8); } .worksheets-renderer .content-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; color: #64748b; font-size: var(--font-sm); line-height: 1.4; } .worksheets-renderer .content-footer .page-number { justify-self: start; } .worksheets-renderer .content-footer .worksheet-number { justify-self: center; } .worksheets-renderer .content-footer .source { justify-self: end; font-size: var(--font-md); }