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, main, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Avenir", "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  font-size: 13px;
  color: #222C3C;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'DINMedium';
    src: url('../fonts/DINMedium.eot');
    src: url('../fonts/DINMedium.eot') format('embedded-opentype'),
         url('../fonts/DINMedium.woff2') format('woff2'),
         url('../fonts/DINMedium.woff') format('woff'),
         url('../fonts/DINMedium.ttf') format('truetype'),
         url('../fonts/DINMedium.svg#DINMedium') format('svg');
}

@font-face {
    font-family: 'DINBold';
    src: url('../fonts/DINBold.eot');
    src: url('../fonts/DINBold.eot') format('embedded-opentype'),
         url('../fonts/DINBold.woff2') format('woff2'),
         url('../fonts/DINBold.woff') format('woff'),
         url('../fonts/DINBold.ttf') format('truetype'),
         url('../fonts/DINBold.svg#DINBold') format('svg');
}
#body_bg {
  background-color: #1C1E23;
  opacity: 1;
  background-size: cover;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  background-size: cover;
}

.no-focus *:focus {
  outline: 0 !important
}

.bg_white {
  background-color: #fff !important;
  animation: 1s fadein;
  -moz-animation: 1s fadein;	/* Firefox */
  -webkit-animation: 1s fadein;	/* Safari 和 Chrome */
  -o-animation: 1s fadein;	/* Opera */
}

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
a {
  color: #FFF;
  font-weight: 400;
  text-decoration: none;
  -webkit-transition: color .12s ease-out;
  transition: color .12s ease-out
}

.sub-link li {
  position: relative;
}
.sub-link .link_tag {
  background-color: #2D3037;
  border-radius: 6.25rem;
  padding: 2px 9px;
  display: inline-block;
  text-decoration: none;
  font-size: 12px;
  color: #7A7C80;
  position: absolute;
  right: 0;

}
.sub-link .active a {
  opacity: 1 !important;
}

.sub-link .active:before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background-image: linear-gradient(135deg, #0CB1E6 0%, #23ECA4 100%);
}
/* #tab-1 .sub-link .active:before {
  background-color: #8D74E3;
}
#tab-2 .sub-link .active:before {
  background-color: #EF4F33;
}
#tab-3 .sub-link .active:before {
  background-color: #269CF4;
}
#tab-4 .sub-link .active:before {
  background-color: #FFCB00;
} */
a:hover, a:focus {
  color: #FFFFFF;
  text-decoration: none
}

a:hover.link-effect:before, a:focus.link-effect:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1)
}

.main-layout {
  height: 100%;
  /* display: grid;
  grid-template-columns: 338px 1fr; */
}
.iframe-box {
  display: block;
  height: 100%;
  width: calc(100% - 338px);
  right: 0;
  position: absolute;
}
.iframe-box .fame-bg {
  background-color: #fff;
}
.iframe-box iframe {
  position: absolute;
}

.sidebar-main {
  display: grid;
  grid-template-columns: 88px 250px;
  height: 100%;
  position: fixed;
}
.sidebar-space {
  position: relative;
  height: 100%;
  background: #22252B;
  border-right: 1px solid #2C2F36;
  z-index: 2;
}

.sidebar-space ul {
  margin: 0;
  padding: 0;
}
.sidebar-space .space-bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.sidebar-space .space-bottom a {
  display: block;
}
.sidebar-space li {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 20px auto;
  position: relative;
  cursor: pointer;
}
.space-top li {
  opacity: .2;
}
.space-bottom li:first-child {
  opacity: .2;
}
.sidebar-space span {
  display: block;
  box-sizing: border-box;
  border-radius: 100px;
  width: 48px;
  height: 48px;
  margin: 20px auto;
  position: relative;
  cursor: pointer;
}

.sidebar-space i {
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.sidebar-space .logo {
  cursor: pointer;
  background-image: linear-gradient(135deg, #0CB1E6 0%, #23ECA4 100%);
}
.sidebar-space .logo i {
  height: 19px;
  width: 19px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-image: url(../img/logo.svg);
}
.sidebar-space .space-main i {
  background-image: url(../img/main.svg);
}

.sidebar-space .space-resource i {
  background-image: url(../img/resource.svg);
}

.sidebar-space .space-tool i {
  background-image: url(../img/tool.svg);
}

.sidebar-space .space-money i {
  background-image: url(../img/money.svg);
}

.sidebar-space .space-fun i {
  background-image: url(../img/fun.svg);
}

.sidebar-space .space-log i {
  background-image: url(../img/log.svg);
}
.sidebar-space .space-contact i {
  background-image: url(../img/contact.svg);
}
.sidebar-sub {
  background: #22252B;
  box-shadow: 0px 0px 10px rgba(17, 21, 40, 0.5);
  padding: 10px 24px;
  overflow-y: auto;
}

.sidebar-sub ul,
.sidebar-sub li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-sub .category {
  font-family: DINBold;
  font-size: 12px;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 14px 0;
  display: block;
}
.sidebar-sub .sub-link {
  padding-bottom: 5px;
  font-weight: 300;
}
.sidebar-sub .sub-link:last-child {
  border-bottom: 0px;
}
.sidebar-sub .sub-link li {
  display: block;
  font-family: DINMedium;
  font-size: 14px;
  color: #FFFFFF;
  margin: 20px 0;
}

.sidebar-sub .sub-link li a {
  opacity: 0.4;
  padding: 7px 0;
}

.sidebar-sub::-webkit-scrollbar-thumb{
    background-color: #5B6779;
    height: 50px;
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -webkit-border-radius: 10px;
}
.sidebar-sub::-webkit-scrollbar{
    width: 6px;
    height: 8px;
}

.sidebar-sub::-webkit-scrollbar-track-piece{
    -webkit-border-radius:0;
}
.sidebar-content {
  display: none;
}
.sidebar-content.current {
	display: block;
}
.sidebar-space li.current {
  opacity: 1;
}
.sidebar-space li.current:after {
  pointer-events: none;
  position: absolute;
  width: 4px;
  height: 40px;
  background-image: linear-gradient(-135deg, #0CB1E6 0%, #23ECA4 100%);
  box-shadow: 0 0 10px 0 #19D2C1;
  content: '';
  top: 4px;
  left: 0;
  opacity: 1;
  transform: scale(.95);
}
.sub-link i {
  background-image: url(../img/link.svg);
  background-size: contain;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  margin-left: 6px;
  opacity: .5;
  display: inline-block;
}

.basic_info {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: fit-content;
}
.life_chart {
  display: inline-block;
}

.time {
  width: fit-content;
  margin: 0 auto;
}

.user_info {
  display: inline-block;
  position: relative;
  top: -100px;
  left: 60px;
}
.user_name {
  font-family: PingFangSC-Semibold;
  font-size: 40px;
  color: #FFFFFF;
  letter-spacing: 0;
}
.user_age {
  opacity: 0.4;
  font-family: DINMedium;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.36px;
}
.life_time {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  width: 790px;
  margin-top: 70px;
}

.life_time_years,
.life_time_months,
.life_time_days {
  background: #22252B;
  box-shadow: 0 5px 20px 0 rgba(21,26,49,0.62);
  border-radius: 10px;
  height: 320px;
  position: relative;
}

.life_time_years .title,
.life_time_months .title,
.life_time_days .title {
  border-radius: 10px 10px 0 0;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-family: DINBold;
  font-size: 18px;
}
.life_time_years .title {
  background-image: linear-gradient(135deg, #3053FF 0%, #40BFFF 100%);
}
.life_time_months .title {
  background-image: linear-gradient(-45deg, #F3A286 0%, #F15F88 100%);
}
.life_time_days .title {
  background-image: linear-gradient(-45deg, #E45BF1 0%, #6D44FF 100%);
}

.bg_1 {
  width: 236px;
  height: 60px;
  border-radius: 10px;
  position: absolute;
  z-index: -2;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .4;
}
.bg_2 {
  width: 224px;
  height: 60px;
  border-radius: 10px;
  position: absolute;
  z-index: -2;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .4;
}
.life_time_years .bg_1,
.life_time_years .bg_2 {
  background-image: linear-gradient(135deg, #3053FF 0%, #40BFFF 100%);
}
.life_time_months .bg_1,
.life_time_months .bg_2 {
  background-image: linear-gradient(-45deg, #F3A286 0%, #F15F88 100%);
}
.life_time_days .bg_1,
.life_time_days .bg_2 {
  background-image: linear-gradient(-45deg, #E45BF1 0%, #6D44FF 100%);
}
.life_time > div {
  text-align: center;
}
.life_time .years,
.life_time .months,
.life_time .days {
  font-family: DINBold;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 0;
  margin-top: 24px;
  margin-bottom: 22px;
}
.life_time .info {
  opacity: 0.2;
  font-family: DINMedium;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.life_time .years_number,
.life_time .months_number,
.life_time .days_number {
  font-family: DINBold;
  font-size: 60px;
  color: #FFFFFF;
  letter-spacing: 0;
}
.life_time .time_line {
  width: 80%;
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  background: #343A50;
  border-radius: 100px;
  margin-top: 50px;
}
.life_time .line_years {
  height: 4px;
  background-image: linear-gradient(135deg, #3053FF 0%, #40BFFF 100%);
  border-radius: 100px;
}
.life_time .line_months {
  width: 40%;
  height: 4px;
  background-image: linear-gradient(-45deg, #F3A286 0%, #F15F88 100%);
  border-radius: 100px;
}
.life_time .line_days {
  width: 40%;
  height: 4px;
  background-image: linear-gradient(-45deg, #E45BF1 0%, #6D44FF 100%);
  border-radius: 100px;
}
#showtime_hours,
#showtime_minutes {
  font-family: "Helvetica", "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  font-size: 150px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.colon {
  font-family: "Helvetica", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  font-size: 160px;
  font-weight: 500;
  color: #fff;
  position: relative;
  top: -10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.say_hi {
  font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 44px;
  margin-top: -10px;
}
.quotes {
  font-family: TimesNewRomanPS-ItalicMT;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 60px;
  letter-spacing: 0.67px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  width: 70vw;
}
.quotes span {
  display: block;
}
#quotes_author {
  font-size: 16px;
  margin-top: 10px;
}
#quotes_author:before {
  content: "- "
}
.user_data > span {
  margin-right: 20px;
}
.time i,
.weather i,
.city i {
  display: inline-block;
  height: 18px;
  width: 20px;
  position: relative;
  top: 2px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-size: contain;
}
.time i {
  background-image: url(../img/time.svg);
}
.weather i {
  background-image: url(../img/weather.svg);
}
.city i {
  background-image: url(../img/city.svg);
}
.user_data {
  color: #fff;
  font-family: DINBold;
  font-size: 18px;
  margin-top: 20px;
}
.weather .weather_tmp {
  font-size: 28px;
  font-weight: 500;
}
.weather .weather_cond {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: -5px;
}
.weather .weather_tmp span:last-child {
  margin-left: -6px;
}
.log {
  color: #fff;
  margin-left: 140px;
  margin-top: 80px;
}
.log_content {
  margin-bottom: 40px;
}
.log_title {
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 40px;
}
.log_version {
  font-family: DINBold;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 2px;
}
.log_date {
  font-weight: 500;
  opacity: 0.4;
  font-size: 14px;
  letter-spacing: 0.33px;
}
.log_item {
  font-weight: 500;
  margin-top: 18px;
  font-size: 14px;
}
.log_item > span {
  display: block;
  margin: 12px 0;
  color: rgba(255,255,255, .8)
}
.log_item .item_title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
  color: rgba(255,255,255, .8)
}
.log_item .tag {
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 8px;
  background-color: #2D3037;
  color: rgba(255,255,255, .8)
}
.inline {
  display: inline;
  margin-left: -10px;
}
.basic_info ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.basic_info ul li {
  font-family: DINBold;
  color: #fff;
  display: inline-block;
  font-size: 50px;
  margin: .5rem;
  text-align: center;
}
.basic_info ul li span,
.basic_info ul li .inline {
  position: relative;
  top: -15px;
}
.basic_info ul li .chart-info {
  line-height: 30px;
  position: relative;
  top: -115px;
  opacity: 0.2;
  font-family: DINMedium;
  font-size: 18px;
  color: #FFFFFF;
}

.basic_info small {
  color: #333;
}
.basic_info small a {
  color: #333;
}
.chart {
  position: relative;
}

.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}