@charset "utf-8";

/* ========================================
  variable
======================================== */
:root {
  --transparent-color: transparent;
  --light-color: #f5f5f5;
  --dark-color: #202020;
  --white-color: #ffffff;
  --black-color: #000000;
  --grey-color: #bfbfbf;
  --danger-color: #ff4d4f;
  --title-color: #252525;
  --text-color: #474f5a;
  --link-color: #333333;
  --hover-color: #9b799f;
  --border-color: #d1dff4;
  --theme-color: #2e60af;
  --primary-color: #9a1200;
  --secondary-color: #174793;
  --shadow-color: rgba(109, 135, 185, .15);
  --custom-color-i1: #3489b5;
  --custom-color-i2: #9a1200;
  --custom-color-i3: #c3935b;
  --custom-color-i4: #776fa5;
  --custom-color-i5: #4fb18d;
  --custom-color-i6: #2e60af;
  --custom-org-i1: #9a1200;
  --custom-org-i2: #2e60af;
  --custom-org-i3: #c89d69;
  --custom-org-i4: #776fa5;
  --custom-icon-1: ;
  --custom-icon-2: ;
  --custom-icon-3: ;
  --custom-icon-4: ;
  --scrollbar-size: 6px;
  --radius-size: 8px;
  --gap-size: 24px;
  --tiny-size: 12px;
  --mini-size: 14px;
  --base-size: 16px;
  --regular-size: 18px;
  --medium-size: 20px;
  --large-size: 22px;
  --huge-size: 26px;
  --giant-size: 38px;
  --colossal-size: 42px;
  --mega-size: 56px;
  --wrapper-width: 1920px;
  --inner-width: 1600px;
  --screen-width: calc(100vw - var(--scrollbar-size));
  --screen-height: 100vh;
  --transition-normal: all .4s ease-in-out;
  --font-normal: 'sourcehansanscn-medium';
}


/* ========================================
  typography
======================================== */
*, ::after, ::before {box-sizing: border-box; margin: 0; padding: 0;}
html {font-family: var(--font-normal), 'microsoft yahei', 'avenir', '-apple-system', 'blinkmacsystemfont', 'segoe ui', 'roboto', 'helvetica neue', 'arial', 'noto sans', 'sans-serif', 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji'; line-height: 1.5; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; tab-size: 4;}
body {position: relative; font-family: var(--font-normal)}
hr {box-sizing: content-box; height: 0; color: inherit; overflow: visible;}
pre, code, kbd, samp {font-family: 'ui-monospace', 'sfmono-regular', 'consolas', 'liberation mono', 'menlo', 'monospace'; font-size: 1em;}
abbr[title] {border-bottom: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}
a {background-color: transparent; text-decoration: none; color: var(--title-color); transition: var(--transition-normal);}
a:hover {color: var(--hover-color);}
b, strong {font-weight: bolder;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none; vertical-align: middle;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; margin: 0; line-height: inherit; border: 1px solid currentcolor;}
button, input {overflow: visible;}
button, select {text-transform: none;}
fieldset {border: 1px solid currentcolor; margin-block: 0; margin-inline: 2px; padding-block: 0.35em 0.625em; padding-inline: 0.75em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {display: inline-block; vertical-align: baseline;}
textarea {overflow: auto; vertical-align: top;}
ol, ul {list-style: none;}
dl {margin: 1em 0;}
dd {margin-inline-start: 0;}
dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {margin: 0;}
table {text-indent: 0; border-color: inherit; border-collapse: collapse; border-spacing: 0;}
iframe {width: 100%; height: 100%;}
dialog {background-color: var(--white-color); border: 1px solid var(--border-color); color: var(--theme-color); padding: 1em; width: max-content; max-width: 90%; box-shadow: 0 5px 15px var(--shadow-color); border-radius: var(--radius-size); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
dialog:not([open]) {display: none;}
summary {display: list-item;}
template {display: none;}
details, audio, video, canvas, article, aside, figcaption, figure, footer, header, main, hgroup, menu, nav, section {display: block;}
audio:not([controls]) {display: none; height: 0;}
svg:not(:root) {overflow: hidden;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {font: inherit; border: 0; font-size: 100%; vertical-align: baseline;}


/* ========================================
  accessibility
======================================== */
:focus-visible {outline: 3px solid var(--theme-color); outline-offset: 2px; z-index: 1;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 5px var(--theme-color);}
main, h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {scroll-margin-top: 2rem;}
label[for] {cursor: pointer; margin-inline-end: 0.5rem;}
:disabled {opacity: 0.8; cursor: not-allowed; background-color: var(--light-color); border-color: var(--grey-color);}
input:invalid, textarea:invalid {border-color: var(--danger-color);}
input:invalid:focus-visible, textarea:invalid:focus-visible {outline-color: var(--danger-color); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 5px var(--danger-color);}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; clip-path: inset(50%);}
@media (prefers-contrast: more) {
  a,button {
    outline-width: 4px;
  }
}
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: var(--primary-color);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ========================================
  selector
======================================== */
[type='button'], [type='reset'], [type='submit'], button {-webkit-appearance: button; padding: 1px 6px;}
[type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner, button::-moz-focus-inner {border-style: none; padding: 0;}
[type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring, button:-moz-focusring {outline: 1px dotted buttontext;}
[type='checkbox'], [type='radio'] {box-sizing: border-box; padding: 0;}
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {height: auto;}
[type='search'] {-webkit-appearance: textfield; outline-offset: -2px;}
[type='search']::-webkit-search-decoration {-webkit-appearance: none;}
[type='color'] {background: inherit;}
[hidden] {display: none;}


/* ========================================
  pseudo
======================================== */
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
::-moz-focus-inner {border: 0;}
:-moz-focusring {outline: 1px dotted buttontext;}
:-moz-ui-invalid {box-shadow: none;}
:-webkit-autofill {box-shadow: 0 0 0 1000px var(--transparent-color) inset; -webkit-text-fill-color: var(--transparent-color);}
::-webkit-scrollbar {width: var(--scrollbar-size); height: var(--scrollbar-size); background-color: var(--transparent-color);}
::-webkit-scrollbar-track {border-radius: 10px; box-shadow: inset 0 0 var(--scrollbar-size) rgba(0, 0, 0, 0); background-color: var(--transparent-color);}
::-webkit-scrollbar-thumb {border-radius: 10px; box-shadow: inset 0 0 var(--scrollbar-size) rgba(0, 0, 0, 0); background-color: rgba(144, 147, 153, .4); transition: background-color .3s ease-in-out;}
::-webkit-scrollbar-thumb:hover {background-color: rgba(144, 147, 153, .6);}
::-webkit-input-placeholder {color: var(--text-color);}
::-moz-placeholder {color: var(--text-color);}
::-ms-input-placeholder {color: var(--text-color);}
::placeholder {color: var(--text-color);}


/* ========================================
  rtl
======================================== */
[dir="rtl"] {font-family: 'tajawal', 'noto sans arabic', 'sans-serif'; direction: rtl; text-align: right; text-align: end;}
[dir="rtl"] a {padding-inline-start: 8px; padding-inline-end: 0;}
[dir="rtl"] blockquote {margin: 1em 2em 1em 0; padding: 0 1em 0 0; margin-block: 1em; margin-inline-start: 2em; margin-inline-end: 0; padding-inline-start: 1em; padding-inline-end: 0;}
[dir="rtl"] pre {direction: ltr; unicode-bidi: bidi-override; text-align: left; text-align: start;}


/* ========================================
  animation
======================================== */
@keyframes jump {
  0% {transform: translatey(0px);}
  30% {transform: translatey(0px); animation-timing-function: ease-out;}
  50% {transform: translatey(-200%); animation-timing-function: ease-in;}
  75% {transform: translatey(0px); animation-timing-function: ease-in;}
}
@keyframes morph {
  0% {transform: scaley(1);}
  10% {transform: scaley(1);}
  20%,25% {transform: scaley(0.6) scalex(1.3); animation-timing-function: ease-in-out;}
  30% {transform: scaley(1.15) scalex(0.9); animation-timing-function: ease-in-out;}
  40% {transform: scaley(1);}
  70%,85%,100% {transform: scaley(1);}
  75% {transform: scaley(0.8) scalex(1.2);}
}
@keyframes pulse-bounce {
  0%, 20%, 40%, 100% {
    transform: translatey(0);
  }
  10%, 30% {
    transform: translatey(-5px);
  }
}


/* ========================================
  definition
======================================== */
.none {display: none;}
.hidden {visibility: hidden;}
.clear {width: 100%; height: 0; line-height: 0; font-size: 0; overflow: hidden; clear: both; display: block; _display: inline;}
.clearfix {display: block;}
.clearfix:after {clear: both; content: ''; display: block; height: 0; visibility: hidden;}
.flowroot {display: flow-root;}
.wrapper {width: 100%; max-width: var(--wrapper-width);}
.inner {position: relative; width: auto; max-width: var(--inner-width); margin: 0 auto; z-index: 1;}


/* ========================================
  loading
======================================== */
.pre-loading-hidden {overflow: hidden; width: 100vw; height: 100vh;}
.loading-bounce {--uib-size: 45px; --uib-color: white; --uib-speed: 1.75s; display: flex; align-items: flex-end; justify-content: space-between; width: var(--uib-size); height: calc(var(--uib-size) * 0.6); position: absolute; inset: 0; margin: auto; transform: translatey(80px);}
.cube {flex-shrink: 0; width: calc(var(--uib-size) * 0.2); height: calc(var(--uib-size) * 0.2); animation: jump var(--uib-speed) ease-in-out infinite;}
.cube__inner {display: block; height: 100%; width: 100%; border-radius: 25%; background-color: var(--uib-color); transform-origin: center bottom; animation: morph var(--uib-speed) ease-in-out infinite; transition: background-color 0.3s ease;}
.cube:nth-child(2) {animation-delay: calc(var(--uib-speed) * -0.36);}
.cube:nth-child(2) .cube__inner {animation-delay: calc(var(--uib-speed) * -0.36);}
.cube:nth-child(3) {animation-delay: calc(var(--uib-speed) * -0.2);}
.cube:nth-child(3) .cube__inner {animation-delay: calc(var(--uib-speed) * -0.2);}
.page-loading-container {position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999;}
.loading-shade {position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(46, 96, 175, .8); backdrop-filter: blur(30px);}
.loading-logo {box-sizing: border-box; position: absolute; inset: 0; margin: auto; width: 100%; padding-inline: 24px; max-width: 360px; aspect-ratio: 1424 / 323;}
.loading-logo img {width: 100%; height: auto; object-fit: cover; vertical-align: middle;}


/* ========================================
  support
======================================== */
@supports (-moz-appearance: none) {
  * {
    scrollbar-color: rgba(144, 147, 153, .4) rgba(255, 255, 255, 1);
    scrollbar-width: thin;
  }
}