*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

body {
  background:black;
  font-family: 'Noto Sans SC', 'Inter', Arial, sans-serif;
}

/* responsive layout frame  */
.row{
  display:flex;
}

.col{
   flex: 0 1 100%;
}
.small-horizontal, .small-h {flex-direction: row}
.small-vertical, .small-v {flex-direction: column}
.small-hidden{display:none}

.small-auto{flex:1}
.small-1{flex:0 1 calc(1 / 12 * 100%)}
.small-3 { flex: 0 1 calc(3 / 12 * 100%)}
.small-4 { flex: 0 1 calc(4 / 12 * 100%)}
.small-5 { flex: 0 1 calc(5 / 12 * 100%)}
.small-6 { flex: 0 1 calc(6 / 12 * 100%)}
.small-7 { flex: 0 1 calc(7 / 12 * 100%)}
.small-8 { flex: 0 1 calc(8 / 12 * 100%)}
.small-9 { flex: 0 1 calc(9 / 12 * 100%)}
.small-10 { flex: 0 1 calc(10 / 12 * 100%)}
.small-11 { flex: 0 1 calc(11 / 12 * 100%)}
.small-12 { flex: 0 1 calc(12 / 12 * 100%)}

.order-1 {order: 1}
.order-2 {order: 2}
.order-3 {order: 3}
.order-4 {order: 4}
.order-5 {order: 5}
.order-6 {order: 6}
.order-7 {order: 7}
.order-8 {order: 8}
.order-9 {order: 9}
.order-10 {order: 10}
.order-11 {order: 11}
.order-12 {order: 12}

@media screen and (min-width: 500px){
  
  .medium-horizontal, .medium-h {flex-direction: row}
  .medium-vertical, .medium-v {flex-direction: column}
  .small-hidden{display:flex}
  .medium-hidden{display:none}
  
  .medium-auto {flex: 1}
  .medium-1 { flex: 0 1 calc(1 / 12 * 100%)}
  .medium-2 { flex: 0 1 calc(2 / 12 * 100%)}
  .medium-3 { flex: 0 1 calc(3 / 12 * 100%)}
  .medium-4 { flex: 0 1 calc(4 / 12 * 100%)}
  .medium-5 { flex: 0 1 calc(5 / 12 * 100%)}
  .medium-6 { flex: 0 1 calc(6 / 12 * 100%)}
  .medium-7 { flex: 0 1 calc(7 / 12 * 100%)}
  .medium-8 { flex: 0 1 calc(8 / 12 * 100%)}
  .medium-9 { flex: 0 1 calc(9 / 12 * 100%)}
  .medium-10 { flex: 0 1 calc(10 / 12 * 100%)}
  .medium-11 { flex: 0 1 calc(11 / 12 * 100%)}
  .medium-12 { flex: 0 1 calc(12 / 12 * 100%)} 
  
  .medium-order-1 {order: 1}
  .medium-order-2 {order: 2}
  .medium-order-3 {order: 3}
  .medium-order-4 {order: 4}
  .medium-order-5 {order: 5}
  .medium-order-6 {order: 6}
  .medium-order-7 {order: 7}
  .medium-order-8 {order: 8}
  .medium-order-9 {order: 9}
  .medium-order-10 {order: 10}
  .medium-order-11 {order: 11}
  .medium-order-12 {order: 12}
}

@media screen and (min-width: 800px) {
  .medium-hidden{display:flex}
  .large-horizontal, .large-h {flex-direction: row}
  .large-vertical, .large-v {flex-direction: column}
  
  .large-hidden{display:none}
  
  .large-auto {flex: 1}
  .large-1 { flex: 0 1 calc(1 / 12 * 100%)}
  .large-2 { flex: 0 1 calc(2 / 12 * 100%)}
  .large-3 { flex: 0 1 calc(3 / 12 * 100%)}
  .large-4 { flex: 0 1 calc(4 / 12 * 100%)}
  .large-5 { flex: 0 1 calc(5 / 12 * 100%)}
  .large-6 { flex: 0 1 calc(6 / 12 * 100%)}
  .large-7 { flex: 0 1 calc(7 / 12 * 100%)}
  .large-8 { flex: 0 1 calc(8 / 12 * 100%)}
  .large-9 { flex: 0 1 calc(9 / 12 * 100%)}
  .large-10 { flex: 0 1 calc(10 / 12 * 100%)}
  .large-11 { flex: 0 1 calc(11 / 12 * 100%)}
  .large-12 { flex: 0 1 calc(12 / 12 * 100%)} 
  
  .large-order-1 {order: 1}
  .large-order-2 {order: 2}
  .large-order-3 {order: 3}
  .large-order-4 {order: 4}
  .large-order-5 {order: 5}
  .large-order-6 {order: 6}
  .large-order-7 {order: 7}
  .large-order-8 {order: 8}
  .large-order-9 {order: 9}
  .large-order-10 {order: 10}
  .large-order-11 {order: 11}
  .large-order-12 {order: 12}
}

/* responsive layout frame end */
:root{
  --banner-height: clamp(50vw, 100vh, 120vw);
  
  
  --bg-dark: oklch(0.92 0.03 307);
  --bg: oklch(0.96 0.03 307);
  --bg-light: oklch(1 0.03 307);
  --text: oklch(0.15 0.06 307);
  --text-muted: oklch(0.4 0.06 307);
  --highlight: oklch(1 0.06 307);
  --border: oklch(0.6 0.06 307);
  --border-muted: oklch(0.7 0.06 307);
  --primary: oklch(0.4 0.1 307);
  --secondary: oklch(0.4 0.1 127);
  --danger: oklch(0.5 0.06 30);
  --warning: oklch(0.5 0.06 100);
  --success: oklch(0.5 0.06 160);
  --info: oklch(0.5 0.06 260);
}
.dark {
  --bg-dark: oklch(0.1 0.025 307);
  --bg: oklch(0.15 0.025 307);
  --bg-light: oklch(0.2 0.025 307);
  --text: oklch(0.96 0.05 307);
  --text-muted: oklch(0.76 0.05 307);
  --highlight: oklch(0.5 0.05 307);
  --border: oklch(0.4 0.05 307);
  --border-muted: oklch(0.3 0.05 307);
  --primary: oklch(0.76 0.1 307);
  --secondary: oklch(0.76 0.1 127);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
}


.audiowide-regular {
  font-family: "Audiowide", sans-serif;
}
.inter-regular {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}


.kart-container {
  margin-bottom:20px;
  position: relative;
  width: 100%;
  height: var(--banner-height);

/*   border:solid green; */
  z-index:100;
}
.kart-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  filter:blur(1px) brightness(83%) sepia(0.12) hue-rotate(10deg);
  
  
}

.welcome-title {
  text-align: center;
  width:100%;
  height:calc(var(--banner-height) + 3px);
  position: absolute;
  left:0;
  top:0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  background-image:linear-gradient(to bottom,hsl(0,0%,0%,3%) 90%,var(--bg-dark) 100%);
}

.welcome-intro-name {
  border-radius:5px;
  padding:10px 19px;
  margin-top:calc(min(105vh,140vw) / 5 - 10px);
  display: inline-flex;
  border: 1px solid yellow;
  border-top:2px solid yellow;
  border-bottom:1px dotted yellow;
  font-size: min(9vw,80px);
  width: fit-content;
  color: #fff;
  backdrop-filter:blur(2px)
}

.welcome-intro-name span:not(:last-child) {
  margin-right: 9vw;
}

.name-cn{
  font-size:max(2vw,.7rem);
  color:#fff;
  transform:translate(0,-50%);
  filter: drop-shadow(0px 1px 5px hsl(0,0%,0%,30%));
}

.welcome-description{
  grid-column: span 2;
  font-size:min(20px,2vw)
}

.kart-no-bg {
  overflow:hidden;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  user-select: none;
  filter: drop-shadow(10px -30px 20px hsl(0,0%,100%,0.1)) sepia(0.05) hue-rotate(10deg) saturate(1.2) brightness(0.95) contrast(1.1);  
}

.interest-header{
  padding:25px 0px;
  background-image:linear-gradient(to bottom,var(--bg-dark) 90%,transparent 100%);
  width:100%;
  margin:auto;
  z-index:999;
  position:sticky;
  top:0;
}

.interest-tabbar{
  border-radius:999px;
  
/*   height:40px; */
  background:var(--bg-light);
}
.introduce-title{
  width:100%;
  font-size:min(5vw,30px);
  color:#fff
}
.interest-dropdown {
  border:none;
  color:var(--primary);
  background: var(--bg-light);
 
  
}
.tab-item{
  color:var(--primary);
  cursor : pointer;
  padding:1em;
  border-radius:999px;
/*   border:solid red; */
  display:flex;
  justify-content:center;
  align-items:center;
  list-style-type:none;
  background:var(--bg-light);
  transition:.3s;
  &:hover{
    filter:brightness(1.3);
  }
}

.introduce-content{
  width:85%;
  margin:auto;
}

.introduce-description{
  color:var(--text-muted)
}

 footer {
   width:100%;
   text-align:center;
   color:#fff;
    opacity: 0.7;
    font-size: 15px;
    padding: 2rem;
  }