/* EXTRA ANIMATION KEYFRAMES */
@keyframes loading-2 { 0%, to { transform: scaleY(1); } 50% { transform: scaleY(.4); } }
@keyframes closeMove { 0% { transform: translateX(-600%) rotate(-720deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes closeFade { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/*---------------GENERAL---------------*/
* {scroll-behavior: smooth;scrollbar-width: thin;scrollbar-color: #3e3e41 #1b1e24;}
*::-webkit-scrollbar {width: 12px;}
*::-webkit-scrollbar-track {background: #1b1e24;}
*::-webkit-scrollbar-thumb {background-color: #3e3e41;border-radius: 20px;border: 3px solid #1b1e24;}
html {background-color: #4f4f4f;}
body, html {font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;position: relative;display: block;width: 100%;margin: 0;line-height: 1.2;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: 400;padding: 10px 5px;}
ol, ul {list-style: none;}
img {border: 0;vertical-align: middle;display: inline-block;user-select: none;}
input, select, textarea {font-family: inherit;font-size: inherit;font-weight: inherit;outline: 0;resize: none;padding: 12px;border: 1px solid #444;border-radius: 4px;width: 100%;box-sizing: border-box;background-color: #2a2a2a;color: #f0f0f0;transition: border 0.3s, background 0.3s;}
a, area {color: inherit;text-decoration: none;}
table {border-collapse: collapse;border-spacing: 0;font-size: 100%;}

/*---------------CLEARFIX---------------*/
.clearfix:after {content: "";display: block;height: 0;visibility: hidden;clear: both;}
.clearfix {zoom: 1;padding: 0;}

/*---------------CONTAINER---------------*/
.section.black {background-color: #1a1a1a;min-height: 1000px;height: auto;}
.section.white {background-color: #ededed;min-height: 1000px;height: auto;}
.container, .inner, .wrap {position: relative;}
.container, .inner {display: block; margin: 0 auto;}
.inner {z-index: 1; width: 1340px;}
.container {max-width: 1920px;width: 100%;overflow-y: hidden;}
@media only screen and (max-width: 1300px) {.container {min-width: 1920px;}}
/*---------------HEADER---------------*/
.header {height: 399px;}
.header .breads {color: #e1e1e1;position: absolute;left: 0;top: 362px;}
.header .breads a {color: #e1e1e1;}
.header .breads a:hover {color: #fff;text-decoration: underline;}
.header .breads .breadstitle {color: #efefec;width: 210px;height: 70px;font-size: 48px;display: block;position: absolute;top: -80px;left: 50px;text-shadow: -5px 0px 10px #454545;}

/*---------------MENU---------------*/
.menu-main {background-color: #171717; border-bottom: 2px solid #fff;}
.menu-content {display: flex;justify-content: space-between;align-items: center;max-width: 1340px;margin: 0 auto;height:60px}
.menu-logo-container {width:150px;}
.menu-logo {color: #fff;text-decoration: none;font-size: 24px;font-weight: bold;}
.main-navigation {width:990px;}
.main-navigation .menu-list {display: flex;list-style: none;padding: 0;margin: 0;gap: 12px;justify-content: flex-end;}
.main-navigation .menu-list li {position: relative;display: flex;align-items: center;}
.main-navigation .menu-list form {margin: 0;display: flex;align-items: center;}
.main-navigation .menu-list a {color: #fff;text-decoration: none;font-size: 16px;padding: 8px 16px;transition: background-color 0.3s ease;}
.main-navigation .menu-list a:hover {background-color: rgba(255, 255, 255, 0.1);}
.logout-button {padding: 8px 16px;border: none;background: none;color: #fdff07;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;}
.logout-button:hover {background-color: rgba(255, 255, 255, 0.1);}
.navclock {background: none;border-radius: 10px;text-align: center;width: 200px;}
.clockdate-wrapper {display: flex;flex-direction: column;align-items: center;}
#timeDisplay {font-size: 16px;font-weight: bold;color: #ffffff;margin: 2px 0;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
#dateDisplayEN, #dateDisplayZH {font-size: 16px;color: #dfdfdf;}

/*---------------MODAL---------------*/
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, .9);transition: opacity .25s ease;z-index: 99999;}
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
.modal-state {display: none;}
.modal-state:checked + .modal {opacity: 1;visibility: visible;}
.modal-state:checked + .modal .modal__inner {top: 0;}
.modal__inner {transition: top .25s ease;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 720px;margin: auto;overflow: visible;border-radius: 5px;padding: 1em 2em;height: 360px;}
.modal__close {position: absolute !important;right: -1em;top: -1em;width: 1.1em !important;height: 1.1em !important;cursor: pointer !important;}
.modal__close:after, .modal__close:before {content: '';position: absolute;width: 5px;height: 3.5em;background: #ccc;display: block;transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
.modal__close:hover:after, .modal__close:hover:before {background: #aaa;}
.modal__close:before {transform: rotate(-45deg);}
.modal__inner .video-js {width: 640px;height: 340px;}
.modal__inner .vjs-fluid {padding-top: 56.25%;}
@media screen and (max-width: 768px) {.modal__inner {width: 90%;height: 90%;box-sizing: border-box;}}

/*------------PAGINATION-------------*/
.pagination {margin: 20px 0px;text-align: center;}
.pagination a {display: inline-block;padding: 5px 10px;margin: 0 5px;background-color: #f5f5f5;color: #333;text-decoration: none;border-radius: 5px;}
.pagination a:hover {background-color: #e9e9e9;}
.pagination .current {padding: 5px 10px;margin: 0 5px;background-color: #337ab7;color: #fff;border-radius: 5px;}
.pagination .inactive {padding: 5px 10px;margin: 0 5px;color: #999;}
.paginate {color: inherit;}
.paginate-form {margin-top: 20px;text-align: center;}
.paginate-select {padding: 5px 10px;margin: 0 5px;font-size: 14px;border-radius: 5px;}
.paginate-button {padding: 5px 10px;font-size: 14px;border: none;background-color: #337ab7;color: #fff;cursor: pointer;border-radius: 5px;}
.paginate-button:hover {background-color: #235a8b;}

/*------------LEGALISATION-----------*/
.legalisation {background-color:#171717;height: 59px;padding-top: 70px;}
.legalisation .links-wrap {display: flex;justify-content: center;}
.legalisation .links-wrap li {float: left;margin-right: 8px;margin-bottom: 8px;}
.legalisation .links-wrap li a {display: block;color: #ffffff;width: 140px;font-size: 18px;height: 26px;text-align: center;line-height: 26px;border: 1px solid #ffe000;border-radius: 2px;}
.legalisation .links-wrap li a:hover {background-color: #ffeb00;color: #000;}
.legalisation .reminder {display: flex;justify-content: center;font-size: 18px;color: #f3f3f3;padding-bottom: 20px;}

/*------------COPYRIGHT-----------*/
.copyright {  background-color:#171717;height: 75px;max-width: 1920px;min-width: 1300px;padding: 70px;}

/*------------VOTESITES-----------*/
.votesites {background-color:#171717;height: 5px;padding-top: 25px;}
.votesites .links-wrap {display: flex;justify-content: center;}
.votesites .links-wrap li {float: left;margin-right: 8px;margin-bottom: 8px;}
.votesites .links-wrap li a {display: block;color: #ffffff;width: 88px;font-size: 18px;height: 50px;text-align: center;line-height: 26px;border-radius: 2px;}
.votesites .links-wrap li a:hover {color: #000;filter: brightness(1.1);}
.votesites .reminder {display: flex;justify-content: center;font-size: 18px;color: #f3f3f3;}

/*------------FOOTER-----------*/
.footer-box {display:flex;justify-content:center;align-items:center;}
.footer {display:flex;justify-content:space-between;align-items:center;gap:20px;}
.footer-cplogo {flex:0 0 50%;text-align:right;margin-left:-20px;}
.footertxt {flex:0 0 100%;text-align:left;line-height:21px;padding:0;color:#fff;}
.footer-cplogo img {max-width:100px;height:auto;}
.footer-cplogo span {color:#fff;}
.footertxt a {color:inherit;text-decoration:underline;}
.footertxt a:hover {text-decoration:underline;}

/*------------SIDEBAR-----------*/
#navbar { position: absolute; right: 0; top: 60px; width: 178px; height: auto; background-color: #e0e2e5; z-index: 2; border-left: 1px solid #c3c3c3; transition: transform 0.4s ease-out, height 0.4s ease-out; }
#navbar input[type="checkbox"] { appearance: none; -webkit-appearance: none; }
#navbar:has(label > input:checked) { transform: translateX(100%); position: fixed; }
#navbar input:checked::before { transform: rotate(180deg); }
#navbar .switch { position: absolute; left: -61px; top: 0; width: 60px; height: 60px; cursor: pointer; border: 1px solid #c3c3c3; transition: all 0.3s ease-out; border-bottom-left-radius: 3px; background-color: #e0e2e5; margin: 0; }
#navbar .switch:hover { background-color: #ffffff; border-color: #5d7a8d; }
#navbar .switch::before { position: absolute; content: ""; width: 18px; height: 30px; left: 50%; top: 50%; margin-left: -9px; margin-top: -15px; transition: transform 0.2s ease-out; background: url(../images/main/dark/main-icon.png) no-repeat -738px -145px; }
#navbar .download { width: 178px; height: 140px; line-height: 120px; display: block; font-family: STFangsong, sans-serif; position: relative; font-size: 34px; color: #fff; text-align: center; font-weight: 700; letter-spacing: 0; background: url(../images/main/dark/main-icon.png) no-repeat -513px -477px; }
#navbar .download span { font-size: 12px; font-family: STFangsong, sans-serif; position: absolute; bottom: -13px; font-weight: 400; text-align: center; transform: scale(.72); letter-spacing: .4em; }
#navbar .download::before { position: absolute; content: ""; width: 172px; height: 134px; left: 3px; top: 3px; background: url(../images/main/dark/main-icon.png) no-repeat -513px -730px; }
#navbar .download:hover { letter-spacing: .08em; }
#navbar .download:hover::before { transform: scale(.96); }
#navbar .download:hover span { letter-spacing: .8em; }
#navbar ul { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; margin: 0; }
#navbar li { cursor: pointer; color: #6a6a6a; position: relative; margin: 0; width: 100%; }
#navbar .download, #navbar .download span, #navbar .download::before, #navbar li a, #navbar li a i { transition: all 0.2s ease-out; }
#navbar li a { display: flex; align-items: center; justify-content: flex-start; height: 70px; position: relative; font-size: 18px; color: #4e4e4e; padding-left: 72px; border-bottom: 1px solid #c3c3c3; }
#navbar li a:hover { letter-spacing: .12em; }
#navbar li a:hover i { transform: translateX(-10%); }
#navbar li a i { position: absolute; background-image: url(../images/main/dark/main-icon.png); left: 28px; top: 21px; }
#navbar li a i.i1 { width: 32px; height: 28px; background-position: -513px -873px; }
#navbar li a i.i2 { width: 32px; height: 32px; background-position: -567px -873px; }
#navbar li a i.i3 { width: 33px; height: 29px; background-position: -622px -873px; }
#navbar li a i.i4 { width: 33px; height: 33px; background-position: -676px -873px; }
#navbar .wx { width: 154px; height: 180px; margin: 12px auto; background: url(/assets/images/menu/discord.png) no-repeat 0 0 / 100%; }
#navbar .wz { width: 154px; height: 180px; margin: 12px auto; background: url(/assets/images/menu/bitcoin.png) no-repeat 0 0 / 100%; }
#navbar .tips { border-bottom: 1px solid #c3c3c3; border-top: 1px solid #c3c3c3; height: 36px; line-height: 36px; padding-left: 44px; font-size: 14px; color: #4e4e4e; position: relative; }
#navbar .tips::before { position: absolute; content: ""; width: 22px; height: 22px; left: 16px; top: 7px; background: url(../images/main/dark/main-icon.png) no-repeat -747px -512px; }
#top { text-align: center; width: 60px; height: 60px; box-sizing: border-box; background-color: #e0e2e5; border: 1px solid #c3c3c3; position: fixed; right: 178px; bottom: 114px; z-index: 2; font-size: 14px; font-weight: 700; color: #171717; cursor: pointer; transition: all 0.2s ease-out; }
#top::before { display: block; content: ""; width: 28px; height: 22px; margin: 12px auto 2px; background: url(../images/main/dark/main-icon.png) no-repeat -701px -548px; }
#top:hover { background-color: #ffffff; border-color: #5d7a8d; color: #000000; }
#top:hover::before { background-position: -743px -548px; }

/*------------Loading-----------*/
.loading-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 9999;justify-content: center;align-items: center;}
.spinner {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;}
.loading-text {color: white;margin-top: 10px;font-size: 18px;}