@charset "UTF-8";

/* ========================================
  Variable
======================================== */
:root {
  --transparent-color: transparent;
  --white-color: #ffffff;
  --black-color: #000000;
  --title-color: #333333;
  --hover-color: #a0d911;
  --border-color: #d9d9d9;
  --theme-color: #1677ff;
  --shadow-color: rgba(0, 0, 0, .15);
  --scrollbar-size: 6px;
  --radius-size: 4px;
  --container-width: 1400px;
  --transition-normal: all .4s ease-in-out;
}


/* ========================================
  Typography
======================================== */
*, ::after, ::before {box-sizing: border-box; padding: 0; margin: 0;}
html {font-family: '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%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; tab-size: 4;}
body {position: relative;}
body:before {content: ''; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; box-shadow: 0 0 10px var(--shadow-color); z-index: 50;}
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:#0961B0}
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: 0 2px; padding: 0.35em 0.75em 0.625em;}
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;}
dl, ol, ul {list-style: none; margin: 1em 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, body, 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 {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}


/* ========================================
  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
======================================== */
:focus {outline: 0;}
::-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(--transparent-color);}
::-moz-placeholder {color: var(--transparent-color);}
::-ms-input-placeholder {color: var(--transparent-color);}
::placeholder {color: var(--transparent-color);}


/* ========================================
  RTL
======================================== */
[dir="rtl"] {font-family: 'Tajawal', 'Noto Sans Arabic', 'sans-serif';}
[dir="rtl"] .wrapper, [dir="rtl"] .inner {text-align: right; direction: rtl;}
[dir="rtl"] a {padding-left: 0; padding-right: 8px;}
[dir="rtl"] blockquote {margin: 1em 0 1em 2em; padding-left: 0; padding-right: 1em;}
[dir="rtl"] pre {direction: ltr; unicode-bidi: bidi-override; text-align: left;}


/* ========================================
  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;}