:root { --color-background: #f7f8fb; --color-font: #000; --color-a: #000; --color-hover: #0046ff; --color-hover-small: #0066ff; --font-size: 15px; } :root { --current-color-blue: #0066ff; } .box { margin: 0 auto; } @media screen and (max-width:2048px) { .box { width: calc(100% - (160px * 2) - 8rem); } } @media screen and (max-width:1920px) { .box { width: calc(100% - (160px * 2) - 8rem); } } @media screen and (max-width:1680px) { .box { width: calc(100% - (160px * 2) - 8rem); } } @media screen and (max-width:1600px) { .box { width: calc(100% - (160px * 2) - 8rem); } } @media screen and (max-width:1440px) { .box { width: 96%; } } @media screen and (max-width:1400px) { .box { width: 96%; } } @media screen and (max-width:1366px) { .box { width: 96%; } } @media screen and (max-width:1360px) { .box { width: 96%; } } @media screen and (max-width:1280px) { .box { width: 96%; } } @media screen and (max-width:1152px) { .box { width: 96%; } } @media screen and (max-width:1024px) { .box{ width: 96%; } } .column-layout { display: var(--flex-display); flex-direction: var(--flex-row); gap: var(--gap-2); justify-content: var(--justify-between); } .column-layout .big-box { width: calc(100% - (300px + 2rem)); } .column-layout .small-box { width: 300px; } @media screen and (max-width:1024px) { .column-layout { display: var(--flex-display); flex-direction: var(--flex-col); gap: 0; justify-content: normal; } .column-layout .big-box { width: 100%; } .column-layout .small-box { width: 100%; } } .box-line{ position: relative; background-color: #fff; box-shadow: 0 0.3rem 50px -0.8rem rgba(17, 12, 46, 0.16); border: #ebeef3 0.1rem solid; border-radius: 0.4rem; overflow: hidden; padding: 1.3rem; } .section-title { display: var(--flex-display); gap: var(--gap-0\.6); align-items: var(--items-center); } .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 { font-size: var(--font-size-big); } .text-list-wrap { } .text-list-wrap ul { display: var(--flex-display); flex-wrap: wrap; flex-direction: var(--flex-row); gap: var( --gap-6); margin-top: 1.3rem; } .text-list-wrap li { display: var(--flex-display); } .text-list-wrap li a { color: #fff; padding: 0.6rem; background-color: var(--current-color-blue); border-radius: 0.3rem; } .text-list-wrap li a:hover { opacity: 0.8; } .text-list-column {} .text-list-column ul { display: var(--flex-display); flex-direction: var(--flex-col); margin-top: 0.6rem; } .text-list-column li { display: var(--flex-display); border-bottom: #e5e5e5 0.1rem dashed; align-items: center; gap: var(--gap-0\.6); } .text-list-column li:nth-last-child(1) { border-bottom: none; } .text-list-column li a { flex: var(--flex-1); padding: 1rem 0; } .header { display: var(--flex-display); align-items: var(--items-center); position: var(--position-fixed); left: 0; top: 0; z-index: 10; width: 100%; height: 3.5rem; background-color: var(--current-color-blue); box-shadow: 0.2rem 0.3rem 1.3rem rgb(0 0 0 / 28%); } .header_ { height: 3.5rem; } .header .logo { display: var(--flex-display); align-items: var(--items-center); } .header span[data-type="navigation-toggle"]{ display:none; position: absolute; right: 0.85rem; top: calc(50% - 0.65rem); } .header .navigation { display: var(--flex-display); align-items: var(--items-center); margin-left: 3rem; } .header .navigation ul { display: var(--flex-display); gap: var(--gap-0\.12); } .header .navigation li { flex: 0 0 auto; } .header .navigation li a { color: var(--color-fff); text-transform: uppercase; } @media screen and (max-width: 1024px) { .header { position: var(--position-relative); height: 3rem; } .header span[data-type="navigation-toggle"]{ display: flex; } .header .navigation nav{ display: none; } .header_ { display: none; } } .mobile-navigation { position: var(--position-fixed); left: 0; top: 0; width: 100%; height: 100%; z-index: 9; margin-top: 3rem; } .mobile-navigation::before { content: ""; position: var(--position-fixed); left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.99); z-index: 8; } .mobile-navigation nav { position: relative; z-index: 9; padding: 1.1rem 1.1rem; } .mobile-navigation nav ul {} .mobile-navigation nav li { line-height: 3rem; border-bottom: #f2f2f2 0.1rem solid; } .mobile-navigation nav li a { text-transform: uppercase; } .mobile-navigation nav li ul { border-radius: 0.4rem; padding: 0 1.1rem; } .mobile-navigation nav li ul li { position: relative; line-height: 2rem; border-bottom: none; padding-left: 1.3rem; } .mobile-navigation nav li ul li::before{ content: ""; position: absolute; left: 0; top: calc( 50% - 0.1rem ); width: 0.6rem; height: 0.2rem; background-color: var(--main-main_color); border-radius: 0.8rem; } .footer { position: relative; z-index: 2; background-color: #fff; padding: 3rem 0 0 0; min-height: 6rem; } footer .copyright { position: relative; display: var(--flex-display); flex-direction: var(--flex-col); align-items: var(--items-center); padding: 2rem 0; } footer .copyright::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0.1rem; background-color: #f7f7f7; } @media screen and (max-width: 1024px) { .footer { padding: 1rem 0 0 0; } footer .copyright { align-items: initial; padding: 1.3rem; } } .position {} @media screen and (max-width: 1024px) { .position { display: none; } } .content-box { display: var(--flex-display); flex-direction: var(--flex-row); gap: var(--gap); justify-content: var(--justify-between); } .content-box .content-sidebar{ width: 260px; } .content-box .main-content{ width: calc(100% - (260px + 1rem)); } .content-box .main-content.wide-layout{ width: 100%; } @media screen and (max-width: 1024px) { .content-box { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); justify-content: normal; } .content-box .content-sidebar{ display: none; } .content-box .main-content{ width: 100%; } } .content-sidebar {} .content-sidebar details { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); } .content-sidebar .content-sidebar-style-fixed-tool-hover { posItion: fixed; z-index: 0; } .content-sidebar ul { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); } .content-sidebar ul li { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); line-height: 1rem; } .content-sidebar ul>li>ul, .content-sidebar ul>li>ul ul { margin-left: 1rem; } .content-sidebar .serial-number { color: #666; } .content-meta { display: flex; flex-direction: var(--flex-row); gap: var(--gap); padding: 1rem 0; border-bottom: 0.1rem #ddd solid; } @media screen and (max-width: 600px) { .content-meta .modified { display: none; } } .content { display: var(--flex-display); flex-direction: var(--flex-col); gap: 2rem; color: #000; line-height: 2rem; text-align: justify; font-size: var(--font-size-big); letter-spacing: 0; } .content strong, .content h2, .content h3, .content h4, .content h5, .content h6 { font-size: var(--font-size-big); font-weight: bold; color: #000; letter-spacing: 0; } .content a{ color: var(--color-hover-small); text-decoration: underline; } .content a:hover { color: var(--color-hover); } .reference { display: flex; flex-direction: column; gap: 1rem; } .reference .section-title { font-size: var(--font-size-big); border-bottom: 0.15rem solid #eee; } .reference ul { display: var(--flex-display); gap: var(--gap); flex-direction: var(--flex-col); } .reference li { display: flex; flex-direction: row; gap: 1rem; } .reference li span { color: var(--color-999); } .reference li a { flex: var(--flex-1); } .evaluate{ display: var(--flex-display); flex-direction: var(--flex-col); } .evaluate span{ display: var(--flex-display); gap: var(--gap-0\.6); align-items: center; border: #dae0e4 0.1rem solid; border-radius: 1.3rem; cursor: pointer; padding: 0.6rem 1.3rem; } .evaluate span small{ color: #32aa54; font-weight:bold; } .article-chapter { } .article-chapter .article-chapter-title {} .article-chapter .article-chapter-title h3 { font-size: var(--font-size-big); text-transform: uppercase; } .article-chapter ul { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap-0\.5); } .article-chapter li { display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap-0\.5); word-break: break-word; } .article-chapter li div.subheading { display: var(--flex-display); flex-direction: var(--flex-row); gap: var(--gap-0\.5); font-size: var(--font-size-small); } .article-chapter li div.subheading span { white-space: nowrap; opacity: 0.5; } .article-chapter li div.figure { margin-left: 1.3rem; } .article-chapter li div.figure img { width: auto; height: auto; max-width: 100%; } .article-chapter .indentation { margin-left: 1rem; }