body{
    background-color: #eef1e9;
    color: #fff;
}

section {
    position: relative;
    /*	width: 100%;*/
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.main-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.main-img-slide{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-right{
    width: 400px;
    height: 275px;
    border-radius: 32.5px;
    box-shadow: 0 0 3px #000;
    overflow: hidden;
}

.main-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .sec-arrow-left,
.sec-arrow-right {
    top: calc(40vh - 25px);
} */

.main-left{
    font-family: Verdana;
    width: 500px;
    /* height: 350px; */
    margin-right: 20px;
    padding: 15px;
    /* box-shadow: 0 0 2px #666; */
    border-radius: 20px;
    /* background-color: rgba(20, 20, 20, 0.45); */
}

.main-left h2{
    font-size: 45px;
    text-shadow: 0 0 1px #333;
    margin-bottom: 7.5px;
}

.main-left .main-desc{
    font-size: 20px;
    background-color: rgba(70, 70, 70, 0.45);
    border-radius: 20px;
    text-shadow: 0 0 1px #333;
}

.main-desc{
    text-indent: 1.5em;
    padding: 10px;
}

.mainer{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.img-abs-bg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.logo:not(.banner-logo){
    position: absolute;
    top: 20px;
    background-color: rgba(70, 70, 70, 0.45);
    left: 50px;
    z-index: 10;
    border-radius: 70px;
}

span.b {
    font-weight: bold;
    color: rgb(92, 198, 255);
    font-size: 50px;
    margin-left: 8px;
    text-shadow: none;
}
span.b0 {
    font-weight: bold;
    color: rgb(255, 238, 0);
    font-size: 45px;
    margin-left: 8px;
    text-shadow: none;
}

/* dir */
.dir-container 
{
    margin-top: 20px;
	position: relative;
	width: 1360px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}
.dir-container .serviceBox 
{
	position: relative;
	width: 375px;
	height: 280px;
	border-radius: 20px;
	background: #f9f9f9;
	overflow: hidden;
}
.dir-container .serviceBox .icon 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--i);
	transition: 0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	transition-delay: 0.25s;
    overflow: hidden;
}
.dir-container .serviceBox:hover .icon 
{
	top: 5px;
	left: calc(50% - 40px);
	width: 75px;
	height: 75px;
	border-radius: 50%;
	transition-delay: 0s;
}
/* .dir-container .serviceBox:hover .in-icon h2{
    display: none;
    opacity: 0;
} */
.dir-content 
{
	position: relative;
	padding: 5px 20px;
	color: #111;
	text-align: center;
	margin-top: 80px;
	z-index: 1;
	transform: scale(0);
	transition: 0.5s;
	transition-delay: 0s;
}
.dir-container .serviceBox:hover .dir-content
{
	transform: scale(1);
	transition-delay: 0.25s;
}
.dir-content h2
{
	margin-top: 10px;
	margin-bottom: 5px;
} 
.dir-content p 
{
	font-weight: 300;
	line-height: 1.5em;
}

/* other */
#top4::before {
    content: '专业与适配方向';
    padding: 0 10px;
    z-index: 1;
    background-color: #eef1e9;
}
#top5::before {
    content: '合作模式';
    padding: 0 10px;
    z-index: 1;
    background-color: #212121;
}
#top6::before {
    content: '已落地项目';
    padding: 0 10px;
    z-index: 1;
    background-color: #ddd;
}

#top6.stat-top::after {
    background-color: #212121;
}

.in-icon{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.in-icon h2{
    z-index: 1;
    font-size: 35px;
    border-radius: 10px;
    white-space: wrap;
    padding: 15px;
    text-align: center;
    background-color: rgba(70, 70, 70, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 150ms ease-in;
}

.in-icon img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.dir-content{
    display: block;
    text-align: start;
}

.dir-content ul{
    list-style-type: none;
}

/* cards */
/* body {
  display: grid;
  place-items: center;
  font-family: "League Spartan", system-ui, sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
  background-color: #212121;
  color: #ddd;
} */

.section-dark{
    font-family: system-ui, sans-serif;
    background-color: #212121;
    color: #ddd;
}

.section-white{
    font-family: system-ui, sans-serif;
    background-color: #ddd;
    color: #212121;
}

.main-cards ul {
  list-style: none;
}

.main-cards {
  max-width: 75rem;
  padding: 3em 1.5em;
  font-size: 1.1rem;
  line-height: 1.2;
}

.main__heading {
  font-weight: 600;
  font-size: 2.25em;
  margin-bottom: 0.75em;
  text-align: center;
  color: #eceff1;
}

.cards {
  position: relative;
}

.cards__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em;
}

.card {
  --flow-space: 0.5em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  flex: 1 1 14rem;
  padding: 1.5em 2em;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  gap: 1.25em;
  color: #eceff1;
  background-color: #2b2b2b;
  border: 1px solid #eceff133;
  border-radius: 15px;
}

.card:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}

.card:nth-child(2) {
  --hue: 291.34;
  --saturation: 95.9%;
  --lightness: 61.76%;
}

.card:nth-child(3) {
  --hue: 338.69;
  --saturation: 100%;
  --lightness: 48.04%;
}

.card__bullets {
  line-height: 1.4;
}

.card__bullets li::before {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' title='check' fill='%23dddddd'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' /%3E%3C/svg%3E");
  transform: translatey(0.25ch);
  margin-right: 1ch;
}

.card__heading {
  font-size: 1.05em;
  font-weight: 600;
}

.card__price {
  font-size: 1.75em;
  font-weight: 700;
}

.flow > * + * {
  margin-top: var(--flow-space, 1.25em);
}

.cta {
  display: block;
  align-self: end;
  margin: 1em 0 0.5em 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #0d0d0d;
  padding: 0.7em;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  opacity: var(--opacity, 0);
  -webkit-mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
}

.overlay .card {
  background-color: hsla(var(--hsl), 0.15);
  border-color: hsla(var(--hsl), 1);
  box-shadow: 0 0 0 1px inset hsl(var(--hsl));
}

.overlay .cta {
  display: block;
  grid-row: -1;
  width: 100%;
  background-color: hsl(var(--hsl));
  box-shadow: 0 0 0 1px hsl(var(--hsl));
}

:not(.overlay) > .card {
  transition: 400ms background ease;
  will-change: background;
}

:not(.overlay) > .card:hover {
  --lightness: 95%;
  background: hsla(var(--hsl), 0.1);
}

.grad-black{
    background: linear-gradient(to bottom, #eef1e9, #212121);
    width: 100%;
    height: 35px;
}

.grad-to-white{
    background: linear-gradient(to bottom, #212121, #ddd);
    width: 100%;
    height: 35px;
}

.sec-ball-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sec-ball:nth-child(1){
    position: absolute;
    width: 200px;
    height: 200px;
    top: 350px;
    left: 75px;
    border-radius: 100%;
    background: rgba(166, 61, 61, 0.75);
}
.sec-ball:nth-child(2){
    position: absolute;
    width: 100px;
    height: 100px;
    top: 120px;
    right: 125px;
    border-radius: 100%;
    background: rgba(164, 61, 166, 0.5);
}
.sec-ball:nth-child(3){
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 50px;
    right: 35px;
    border-radius: 100%;
    background: rgba(89, 61, 166, 0.25);
}

/* pill */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* general styling */
/* html {
	color-scheme: dark light;
} */
.pills img{
  max-width: 100%;
}
/* Hide radio buttons */
.pills input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* body{
  min-height: 100svh;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 1rem;
  font: 1rem system-ui;
} */

.pills{
  --img-w: 200px;
  --duration: 300ms;
  --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  width: min(100% - 4rem, 800px);
  margin-inline: auto;
  display: grid;
  height: 600px;
  padding-bottom: 200px;

  counter-reset: my-counter;
}

.pill{
  --pills-grid-cols: auto;
  --pills-grid-rows: var(--img-w) auto;
  --pills-grid-gap: 2rem;
  --pills-footer-justify: center;
  
  grid-area: 1/1;
  display: grid;
 place-items: center; 
  grid-template-columns: var(--pills-grid-cols);
  grid-template-rows: var(--pills-grid-rows);
  gap: var(--pills-grid-gap);
  position: relative;
  padding: 20px;
  border-radius: 30px;
  overflow: hidden;
  margin-top: 25px;
}
.pill-bg{
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
}
.pill-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* dna */
.left {
  background: #ff554d;
  animation: left 2s linear infinite;
  position: relative;
}
.left:after {
  content: "";
  background: #ff554d;
  height: 2rem;
  transition: all 0.35s linear;
  transform-origin: bottom;
  width: 2px;
  position: absolute;
  bottom: 1rem;
  right: 0.5rem;
  transform: var(--transform, scaleY(0));
}

.right {
  background: #3d6eb3;
  animation: right 2s linear infinite;
  position: relative;
}
.right:before {
  content: "";
  background: #3d6eb3;
  height: 2rem;
  width: 2px;
  position: absolute;
  transition: all 0.35s linear;
  transform-origin: top;
  top: 1rem;
  right: 0.5rem;
  transform: var(--transform, scaleY(0));
}

.item {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  width: 1rem;
}
.item:nth-child(1) {
  --i: 1;
}
.item:nth-child(2) {
  --i: 2;
}
.item:nth-child(3) {
  --i: 3;
}
.item:nth-child(4) {
  --i: 4;
}
.item:nth-child(5) {
  --i: 5;
}
.item:nth-child(6) {
  --i: 6;
}
.item:nth-child(7) {
  --i: 7;
}
.item:nth-child(8) {
  --i: 8;
}
.item:nth-child(9) {
  --i: 9;
}
.item:nth-child(10) {
  --i: 10;
}
.item:nth-child(11) {
  --i: 11;
}
.item:nth-child(12) {
  --i: 12;
}
.item:nth-child(13) {
  --i: 13;
}
.item:nth-child(14) {
  --i: 14;
}
.item:nth-child(15) {
  --i: 15;
}
.item:nth-child(16) {
  --i: 16;
}
.item:nth-child(17) {
  --i: 17;
}
.item:nth-child(18) {
  --i: 18;
}
.item > div {
  animation-delay: calc(0.2s * var(--i));
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}

@keyframes left {
  from {
    transform: translateY(0) scale(0.5);
    z-index: -100;
    --transform: scaleY(0.1);
  }
  25% {
    transform: translateY(110%) scale(0.3);
    filter: blur(4px);
    background: #1a0100;
    z-index: -100;
  }
  49% {
    z-index: -100;
  }
  50% {
    transform: translateY(220%) scale(0.5);
    z-index: 100;
    --transform: scaleY(1.1);
  }
  75% {
    transform: translateY(110%) scale(1);
    z-index: 100;
    filter: blur(0);
    background: #ff554d;
    --transform: scaleY(0.1);
  }
  90% {
    z-index: 100;
  }
  to {
    transform: translateY(0) scale(0.5);
    --transform: scaleY(0);
  }
}
@keyframes right {
  from {
    transform: translateY(0) scale(0.5);
    --transform: scaleY(0);
  }
  25% {
    transform: translateY(-110%) scale(1);
    filter: blur(0);
    background: #3d6eb3;
    --transform: scale(0.6);
  }
  50% {
    transform: translateY(-220%) scale(0.5);
    --transform: scale(1.4);
  }
  75% {
    transform: translateY(-110%) scale(0.3);
    background: #070c13;
    filter: blur(4px);
  }
  to {
    transform: translateY(0) scale(0.5);
    background: #7a9ed1;
    --transform: scale(0.1);
  }
}
dna {
  position: absolute;
  top: 55px;
  right: -0px;
  z-index: 2;
  display: flex;
  /* gap: 0.25rem; */
  transform: rotate3d(0, 0, 1, 32.5deg);
  animation: dna 8s ease infinite;
}

@keyframes dna {
  from {
    transform: rotate3d(0, 0, 1, 32.5deg);
  }
  50% {
    transform: rotate3d(0.4, 0, 1, 32.5deg) scale(1.3);
  }
  to {
    transform: rotate3d(0, 0, 1, 32.5deg);
  }
}

@media (600px < width){
  .pill{
      --pills-grid-cols: var(--img-w) auto;
      --pills-grid-rows: auto;
      --pills-grid-gap: 4rem;
      --pills-footer-justify: start;
  }
}

.pill-img{
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1 ;
  rotate: var(--angle, 0deg);
  border-radius: 10px;
  border: 3px solid #FFF;
  overflow: hidden;
  transform-origin: center;
  object-fit: cover;
  box-shadow: 0 0 5px 3px rgba(0 0 0 / .05);
}

input:nth-of-type(1):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-1 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(2):checked) > .pill-img,
input:nth-of-type(2):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-2 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(3):checked) > .pill-img,
input:nth-of-type(3):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-3 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(4):checked) > .pill-img,
input:nth-of-type(4):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-4 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(5):checked) > .pill-img,
input:nth-of-type(5):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-5 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(6):checked) > .pill-img,
input:nth-of-type(6):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-6 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.pill:has(~input:nth-of-type(7):checked) > .pill-img,
input:nth-of-type(7):checked + .pill ~ .pill > .pill-img{
  animation: straighten-img-7 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
/* as CSS can't remove animations, we change the animation according to which checkbox is checked  - all animations are the same (would be simpler with SCSS) */
@keyframes straighten-img-1 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-2 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-3 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-4 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-5 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-6 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-7 { 50%{ --angle: 0deg;} }

/* stacking order - these are updated according to which pill is selected */
.pill{
  z-index: -1;
}
input:checked + .pill{
  z-index:10 !important;
}
/* next pill checked - place behind */
.pill:has(+input:checked){
  z-index:9;
}
/* next pill +1 checked - place behind */
.pill:has(+input + .pill + input:checked){
  z-index:8;
}
/* next pill +2 checked - place behind */
.pill:has(+input + .pill +input + .pill + input:checked){
  z-index:7;
}
/* next pill +3 checked - place behind */
.pill:has(+input + .pill +input + .pill +input + .pill + input:checked){
  z-index:6;
}
/* next pill +4 checked - place behind */
.pill:has(+input + .pill +input + .pill +input + .pill +input + .pill + input:checked){
  z-index:5;
}
/* next pill +5 checked - place behind */
.pill:has(+input + .pill +input + .pill +input +input + .pill +input + .pill +input + .pill + input:checked){
  z-index:4;
}
/* next pill +6 checked - place behind */
.pill:has(+input + .pill +input + .pill +input  + .pill +input +input + .pill +input + .pill +input + .pill + input:checked){
  z-index:3;
}

.pill-data{
  display: grid;
  gap: 1rem;
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(70, 70, 70, 0.45);
  color: #e1efea;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.pill-data > .pill-num{
  opacity: var(--data-opacity, 0);
  font-size: .8rem;
  color: #d1dfda;
}
.pill-data > p{
  font-size: 0.9rem;

}
.pill-data > h2,
.pill-data > p{
  transition: var(--duration) ease-in-out;
  transition-delay: var(--data-delay,0ms);
  opacity: var(--data-opacity, 0);
  translate: 0 var(--data-y, 20px);
}
.pill-data > footer{
  display: flex;
  justify-content: var(--pills-footer-justify);
  gap: 2rem;
}
.pill-data > footer label{
  margin-block-start: auto;
  cursor: pointer;
  pointer-events: var(--pill-events, none);
  opacity: var(--data-opacity, 0);
  transition: color var(--duration) ease-in-out;
  color: var(--label-clr-txt,#000);
  background-color:var(--label-clr-bg,#EEE);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  transition: background-color 300ms ease-in-out,color  300ms ease-in-out;
}


input:checked:focus-visible + .pill > .pill-data > footer label,
.pill-data > footer label:hover{
  --label-clr-txt: #FFF;
  --label-clr-bg: steelblue;
}

input:checked + .pill{
  --data-opacity: 1;
  --data-y: 0;
  --data-delay: var(--duration);
  --pill-events: auto;
  transition: z-index;
  transition-delay: 300ms;
  /*z-index: 1;*/
}

input:checked +.pill > .pill-img{
  animation: reveal-img calc(var(--duration) * 2) forwards;
}

@keyframes reveal-img{
  50%{
    translate: -150% 0;
    --angle: 0deg;
  }
}

/* PC 半屏：通常是平板或PC窗口缩小到一半时 */
@media screen and (min-width: 620px) and (max-width: 1200px) {
}

/* 移动端：小屏幕手机 */
@media screen and (max-width: 619px) {
    dna {
        position: absolute;
        top: 5px;
        right: -100px;
        display: none;
    }

    .mainer{
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: fit-content;
    }

    .main-left{
        width: 100%;
        margin-right: 7.5px;
        padding: 5px;
        border-radius: 10px;
    }

    .main-left h2{
        margin-top: 40px;
        margin-left: 0;
        font-size: 20.5px;
        margin-bottom: 4px;
        display: inline-block;
    }

    .main-desc{
        height: calc(100vh - 240px);
        margin-bottom: 5px;
        overflow-y: auto;
    }
    span.b0,
    span.b{
        font-size: 24px;
    }

    .ls-logo{
        display: none;
    }

    header.nav{
        background-color: rgba(70, 70, 70, 0.45);
        padding: 6px 10px;
    }

    .dir-container{
        width: fit-content;
    }

    .pill{
        height: 500px;
        margin-bottom: 100px;
    }
}