:root { --color-000: #000; --color-333: #333; --color-666: #666; --color-999: #999; --color-fff: #fff; } :root { --color-background: #f5f6f7; --color-font: #000; --color-a: #000; --color-hover: #0046ff; --color-hover-small: #0066ff; --font-size: 15px; --font-size-small: 0.85rem; --font-size-big: 1.2rem; } @font-face{ font-family: 'webfont'; font-display: swap; src: url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.eot'); src: url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.eot?#iefix') format('embedded-opentype'), url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.woff2') format('woff2'), url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.woff') format('woff'), url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.ttf') format('truetype'), url('/route/skin/common/fonts/AlibabaPuHuiTiAll/webfont.svg#webfont') format('svg'); } * { padding: 0; margin: 0; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; } html { scroll-behavior: smooth; font-size: var(--font-size); } body { font-family: 'webfont'; color: var(--color-font); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-a); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--color-hover); } img { display: block; vertical-align: top; max-width: 100%; height: auto; } input, button, textarea { outline: none; } ul, ol { list-style-type: none; } li { list-style: none; } h1, h2 { font-weight: bold; line-height: 1.2; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } :root { --flex-display: flex; --inline-flex-display: inline-flex; --block-display: block; --inline-display: inline; --inline-block-display: inline-block; --none-display: none; --flex-1: 1 1 0%; --flex-none: none; --flex-1-1: 0 0 100%; --flex-1-2: 0 0 50%; --flex-1-3: 0 0 33.3333%; --flex-1-4: 0 0 25%; --flex-1-5: 0 0 20%; --flex-row: row; --flex-col: column; --flex-row-reverse: row-reverse; --flex-col-reverse: column-reverse; --flex-wrap: wrap; --flex-nowrap: nowrap; --flex-wrap-reverse: wrap-reverse; --justify-start: flex-start; --justify-end: flex-end; --justify-center: center; --justify-between: space-between; --justify-around: space-around; --justify-evenly: space-evenly; --items-start: flex-start; --items-end: flex-end; --items-center: center; --items-baseline: baseline; --items-stretch: stretch; --content-start: flex-start; --content-end: flex-end; --content-center: center; --content-between: space-between; --content-around: space-around; --align-self-auto: auto; --align-self-start: flex-start; --align-self-end: flex-end; --align-self-center: center; --align-self-stretch: stretch; --gap-5: 5rem; --gap-4: 4rem; --gap-3: 3rem; --gap-2: 2rem; --gap: 1rem; --gap-0\.2: 0.2rem; --gap-0\.3: 0.3rem; --gap-0\.4: 0.4rem; --gap-0\.5: 0.5rem; --gap-0\.6: 0.6rem; --gap-0\.12: 1.2rem; --position-relative: relative; --position-absolute: absolute; --position-fixed: fixed; --position-sticky: sticky; } .flex { display: var(--flex-display); flex-wrap: var(--flex-wrap); word-break: break-all; } .flex.word { word-break: break-word; } .flex.space { white-space: pre; } .inline-flex { display: var(--inline-flex-display); } .block { display: var(--block-display); } .inline { display: var(--inline-display); } .inline-block { display: var(--inline-block-display); } .none { display: var(--none-display); } .flex-1 { flex: var(--flex-1); } .flex-1\/2 { flex: var(--flex-1-2); max-width: 50%; } .flex-1\/3 { flex: var(--flex-1-3); max-width: 33.3333%; } .flex-1\/4 { flex: var(--flex-1-4); max-width: 25%; } .flex-1\/5 { flex: var(--flex-1-5); max-width: 20%; } .flex-none { flex: var(--flex-none); } .flex-row { flex-direction: var(--flex-row); } .flex-col { flex-direction: var(--flex-col); } .flex-row-reverse { flex-direction: var(--flex-row-reverse); } .flex-col-reverse { flex-direction: var(--flex-col-reverse); } .flex-wrap { flex-wrap: var(--flex-wrap); } .flex-nowrap { flex-wrap: var(--flex-nowrap); } .flex-wrap-reverse { flex-wrap: var(--flex-wrap-reverse); } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .justify-start { justify-content: var(--justify-start); } .justify-end { justify-content: var(--justify-end); } .justify-center { justify-content: var(--justify-center); } .justify-between { justify-content: var(--justify-between); } .justify-around { justify-content: var(--justify-around); } .justify-evenly { justify-content: var(--justify-evenly); } .items-start { align-items: var(--items-start); } .items-end { align-items: var(--items-end); } .items-center { align-items: var(--items-center); } .items-baseline { align-items: var(--items-baseline); } .items-stretch { align-items: var(--items-stretch); } .content-start { align-content: var(--content-start); } .content-end { align-content: var(--content-end); } .content-center { align-content: var(--content-center); } .content-between { align-content: var(--content-between); } .content-around { align-content: var(--content-around); } .align-self-auto { align-self: var(--align-self-auto); } .align-self-start { align-self: var(--align-self-start); } .align-self-end { align-self: var(--align-self-end); } .align-self-center { align-self: var(--align-self-center); } .align-self-stretch { align-self: var(--align-self-stretch); } .gap-5 { gap: var(--gap-5); } .gap-4 { gap: var(--gap-4); } .gap-3 { gap: var(--gap-3); } .gap-2 { gap: var(--gap-2); } .gap { gap: var(--gap); } .gap-0\.2 { gap: var(--gap-0\.2); } .gap-0\.3 { gap: var(--gap-0\.3); } .gap-0\.4 { gap: var(--gap-0\.4); } .gap-0\.5 { gap: var(--gap-0\.5); } .gap-0\.6 { gap: var(--gap-0\.6); } .gap-0\.12 { gap: var(--gap-0\.12); } .position-relative { position: var(--position-relative); } .position-absolute { position: var(--position-absolute); } .position-fixed { position: var(--position-fixed); } .position-sticky { position: var(--position-sticky); } .no-select { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spacing-top-0\.6 { margin-top: 0.6rem; } .spacing-top-1\.1 { margin-top: 1.1rem; } .spacing-top-1\.3 { margin-top: 1.3rem; } .spacing-top-2 { margin-top: 2rem; } .spacing-top-2\.4 { margin-top: 2.4rem; } .spacing-padding-0\.6 { padding: 0.6rem; } .spacing-padding-1\.1 { padding: 1.1rem; } .spacing-padding-1\.3 { padding: 1.3rem; } .spacing-padding-2\.4 { padding: 2.4rem; } .font-size-big { font-size: var(--font-size-big); } .font-size-small { font-size: var(--font-size-small); } .text-vertical-lr { writing-mode: vertical-lr; } .text-vertical-rl { writing-mode: vertical-rl; } .text-horizontal-lr { writing-mode: horizontal-tb; } .text-horizontal-rl { writing-mode: horizontal-bt; } .border { border: var(--color-000) 0.1rem solid; } .border-l { border-left: var(--color-000) 0.1rem solid; } .border-r { border-right: var(--color-000) 0.1rem solid; } .border-t { border-top: var(--color-000) 0.1rem solid; } .border-b { border-bottom: var(--color-000) 0.1rem solid; } .opacity-1 { opacity: 1; } .opacity-0\.9 { opacity: 0.9; } .opacity-0\.8 { opacity: 0.8; } .opacity-0\.7 { opacity: 0.7; } .opacity-0\.6 { opacity: 0.6; } .opacity-0\.5 { opacity: 0.5; } .opacity-0\.4 { opacity: 0.4; } .opacity-0\.3 { opacity: 0.3; } .opacity-0\.2 { opacity: 0.2; } .opacity-0\.1 { opacity: 0.1; } icon { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } icon.icon-four-circles { display: flex; flex: 0 0 1rem; width: 1rem; height: 1rem; } icon.icon-four-circles i { position: relative; flex: var(--flex-1-2); } icon.icon-four-circles i::before { content: ""; position: absolute; left: 0.1rem; top: 0.1rem; width: 0.2rem; height: 0.2rem; border-radius: 50%; border: var(--color-333) 0.1rem solid; box-shadow: 0px 0px 2px var(--color-000); } icon.icon-four-circles i::after { content: ""; position: absolute; left: 0.1rem; bottom: 0.1rem; width: 0.2rem; height: 0.2rem; border-radius: 50%; border: var(--color-333) 0.1rem solid; box-shadow: 0px 0px 2px var(--color-000); } icon.icon-menu { display: flex; width: 1.7rem; height: 0.3rem; border-top: 0.3rem solid var(--color-fff); border-bottom: 0.3rem solid var(--color-fff); background-color: var(--color-fff); padding: 0.3rem 0; background-clip: content-box; box-sizing: content-box; } icon.icon-gear { display: flex; position: relative; width: 1rem; height: 1rem; overflow: hidden; } icon.icon-gear::before { content: ""; position: absolute; left: calc(50% - 0.15rem); top: calc(50% - 0.15rem); z-index: 3; width: 0.3rem; height: 0.3rem; background-color: #ffffff; border-radius: 50%; } icon.icon-gear::after { content: ""; position: absolute; left: calc(50% - 0.3rem); top: calc(50% - 0.3rem); z-index: 2; width: 0.6rem; height: 0.6rem; background-color: #5c5c5c; border-radius: 50%; } icon.icon-gear i { position: absolute; left: calc(50% - 0.1rem); top: 0; z-index: 1; height: 1rem; width: 0.2rem; background-color: #5c5c5c; border-radius: 0.25rem; } icon.icon-gear i:nth-child(2){ transform: rotateZ(62.5deg); } icon.icon-gear i:nth-child(3){ transform: rotateZ(-62.545deg); } icon.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.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%); } icon.icon-print { display: flex; position: relative; width: 1rem; height: 1rem; } icon.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.icon-print i:nth-child(2) { position: absolute; left: 0.25rem; z-index: 1; width: 0.5rem; height: 1rem; background-color: #999; } icon.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.icon-position { display: var(--flex-display); position: relative; width: 0.75rem; height: 0.75rem; margin-top: 0.25rem; border-radius: 50% 50% 50% 0; background-color: var(--color-999); transform: rotate(-45deg); } icon.icon-position::before { content: ""; position: absolute; width: 0.36rem; height: 0.36rem; top: 0.18rem; left: 0.18rem; background-color: var(--color-fff); border-radius: 50%; } icon.icon-position::after { content: ""; display: block; background: rgb(0,0,0,0.1); border-radius: 1% 100%; height: 0.5rem; width: 0.5rem; position: absolute; left: -50%; bottom: -50%; } icon.icon-agree { position: relative; width: 1rem; height: 1rem; } icon.icon-agree i:nth-child(1) { position: absolute; right: 0; bottom: 0; width: 0.7rem; height: 0.8rem; background-color: #32aa54; transform: skew(-12deg, 0deg); border-radius: 0 0.2rem 0.2rem 0; z-index: 3; overflow: hidden; } icon.icon-agree i:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 1rem; height: 0.8rem; background-color: #fff; border: #92c9e9 1px solid; border-radius: 0.2rem 0.2rem 0.2rem 0.2rem; transform: skew(349deg, 360deg); z-index: 2; } icon.icon-agree i:nth-child(3) { position: absolute; right: 0.4rem; bottom: 0; width: 0.3rem; height: 1rem; background-color: #32aa54; transform: skew(344deg,0deg); border-radius: 0.1rem; z-index: 1; } icon.icon-title { position: relative; width: 1rem; height: 1rem; } icon.icon-title i:nth-child(1) { position: absolute; z-index: 2; top: 0.1rem; width: calc(1rem - 0.2rem); height: 0.9rem; border: #999 0.1rem solid; transform: skew(180deg, 14deg); } icon.icon-title i:nth-child(2) { position: absolute; z-index: 1; top: 0; width: calc(1rem - 0.2rem); height: 0.9rem; background-color: rgb(0 0 0 / 16%); } icon.icon-title i:nth-child(2)::before { content: ""; position: absolute; z-index: 0; left: 0.25rem; top: 0.1rem; width: 0.5rem; height: 0.2rem; border-top: #ffffff 0.1rem solid; border-bottom: #ffffff 0.1rem solid; margin-top: 0.35rem; } icon.icon-link { position: relative; width: 1rem; height: 1rem; } icon.icon-link i:nth-child(1) { position: absolute; top: 0.1rem; z-index: 1; width: 1rem; height: 0.8rem; } icon.icon-link i:nth-child(1)::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: calc(0.5rem - 0.2rem); height: calc(0.6rem - 0.2rem); border: #0066ff 0.2rem solid; border-right: transparent 0.1rem solid; border-radius: 0.2rem 0 0 0.2rem; } icon.icon-link i:nth-child(1)::after { content: ""; position: absolute; z-index: 2; right: 0; top: 0; width: calc(0.5rem - 0.4rem); height: calc(0.6rem - 0.2rem); border: #999 0.2rem solid; border-left: transparent 0.1rem solid; border-radius: 0 0.2rem 0.2rem 0; } icon.icon-link i:nth-child(2) { position: absolute; left: 0.4rem; top: 0.4rem; z-index: 2; width: 0.2rem; height: 0.2rem; background-color: #000; } icon.icon-question { display: var(--flex-display); position: relative; width: 1.2rem; height: 1.2rem; } icon.icon-question i:nth-child(1) { position: relative; width: 1.5rem; height: 1rem; background-color: #c2c7cf; border-radius: 0.2rem; box-shadow: 0.3rem 0.6rem 1.3rem #c6daf9; } icon.icon-question i:nth-child(1)::before { content: "Q"; color: #fff; text-align: center; position: absolute; left: 0; top: 0; width: 100%; height: 0.9rem; line-height: 0.9rem; font-size: 0.7rem; font-family: "webfont"; } icon.icon-question i:nth-child(1)::after { content: ""; position: absolute; left: calc( 50% - 0.25rem); bottom: -0.5rem; width: 0.5rem; height: 0.5rem; background: conic-gradient(from 90deg at 50% 0, #c2c7cf 0, #c2c7cf 45deg, transparent 45.1deg); } icon.icon-answer { display: var(--flex-display); position: relative; width: 1.2rem; height: 1.2rem; } icon.icon-answer i:nth-child(1) { position: relative; width: 1.5rem; height: 1rem; background-color: #c2c7cf; border-radius: 0.2rem; box-shadow: 0.3rem 0.6rem 1.3rem #c6daf9; } icon.icon-answer i:nth-child(1)::before { content: "A"; color: #fff; text-align: center; position: absolute; left: 0; top: 0; width: 100%; height: 0.9rem; line-height: 0.9rem; font-size: 0.7rem; font-family: "webfont"; } icon.icon-answer i:nth-child(1)::after { content: ""; position: absolute; left: calc( 50% - 0.25rem); bottom: -0.5rem; width: 0.5rem; height: 0.5rem; background: conic-gradient(from 90deg at 50% 0, #c2c7cf 0, #c2c7cf 45deg, transparent 45.1deg); } icon.icon-reset-zoom { display: var(--flex-display); position: relative; width: 2rem; height: 2rem; border: #000 0.1rem solid; background-color: #fff; border-radius: 0.2rem; overflow: hidden; } icon.icon-reset-zoom::before { content: ''; position: absolute; left: 0; top: 0; width: 0.45rem; height: 0.45rem; border-right: 0.15rem solid black; border-bottom: 0.15rem solid black; transform: rotate(0deg); margin: 0.2rem; } icon.icon-reset-zoom.reset::before { border-right: none; border-bottom: none; border-left: 0.15rem solid black; border-top: 0.15rem solid black; } icon.icon-reset-zoom::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0.45rem; height: 0.45rem; border-left: 0.15rem solid #666; border-top: 0.15rem solid #666; transform: rotate(0deg); margin: 0.2rem; } icon.icon-reset-zoom.reset::after { border-left: none; border-top: none; border-right: 0.15rem solid #666; border-bottom: 0.15rem solid #666; }