@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
.inter {
  font-family: "Inter", sans-serif;
}
@font-face {
  font-family: "Cyb";
  src: url("./font/Cyberion-Demo.otf");
}
.cu {
  cursor: pointer !important;
}
.cyb {
  font-family: "Cyb";
}
/* html {
  cursor: url("./images/hs1.png"), pointer;
}
li a button div {
  cursor: url("./images/hs1.png"), pointer !important;
}
.cu {
  cursor: url("./images/hs1.png"), pointer !important;
} */

body {
  /* background: #000000; */
  /* background: #EFEFFC; */
  /* height: 100vh; */
  /* cursor: url("./images/hs1.png"), pointer; */
  overflow-x: hidden!important;
}
html{
  overflow-x: hidden!important;
}

@font-face {
  font-family: "ClashDisplay-Bold";
  src: url("./fonts/ClashDisplay-Bold.woff2") format("woff2"),
    url("./fonts/ClashDisplay-Bold.woff") format("woff"),
    url("./fonts/ClashDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
.qqpenguin {
  background: linear-gradient(
    180deg,
    #ffffff 2%,
    #c8e8ff 37%,
    #ffffff 57%,
    #bee4ff 71.5%,
    #43b1fe 80.5%,
    #3baeff 100%
  );
  -webkit-background-clip: text;
  color: transparent;

  font-size: 74.92px;
  font-weight: 800;
  line-height: 120.63px;
  text-align: left;
  letter-spacing: -3px;
}
.qqpenguin1 {
  background: linear-gradient(
    180deg,
    #ffffff 2%,
    #c8e8ff 37%,
    #ffffff 57%,
    #bee4ff 71.5%,
    #43b1fe 80.5%,
    #3baeff 100%
  );

  -webkit-background-clip: text;
  color: transparent;

  font-size: 74.92px;
  font-weight: 800;
  line-height: 120.63px;
  text-align: left;
  letter-spacing: -3px;
  /* text-shadow: 2px 4px 3px #000000, 0px 2px 0px #000000, 0px 1px 2px #000000; */
  /* text-shadow: 0px 4px 5.6px 0px #000000; */
}
.ts {
  text-shadow: 0px 4px 5.6px 0px #000000 !important;
}
.Marquee {
  overflow: hidden;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 250px;
  overflow-x: hidden;
  /* cursor: url("./images/hs1.png"), pointer !important; */

  /* direction: ltr; */
}
.Marquee-content {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 8s linear infinite;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}
.Marquee-content:hover {
  animation-play-state: paused;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}
.Marquee-tag {
  /* width: 200px; */
  margin: 0 0.5em;
  padding: 0.5em;
  /* background: rgba(255, 255, 255, 0.1); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  cursor: url("./images/hs1.png"), pointer !important;
}
.Marquee-tag:hover {
  /* background: rgba(255, 255, 255, 0.5); */
  /* cursor: pointer; */
  cursor: url("./images/hs1.png"), pointer !important;
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
.left {
  left: 0px !important;
}
.bc {
  border: 1px solid white;
}
@media (min-width: 1000px) and (max-width: 1300px) {
  .sooper {
    right: -80px !important;
    top: -80px !important;
  }
}
@media (max-width: 768px) {
  .gr {
    background: #fff !important;
  }
  .tb {
    color: black !important;
  }
  .bc {
    border: 1px solid #000000;
  }
}
/* 
@media (min-width:1400px) and (max-width:1920px) {
  .mtfix{
    margin-top: 200px;
  }
} */
@media (max-width: 768px) {
  .wfull {
    width: 100%;
  }
  .qqpenguin {
    background: linear-gradient(
      180deg,
      #ffffff 2%,
      #c8e8ff 37%,
      #ffffff 57%,
      #bee4ff 71.5%,
      #43b1fe 80.5%,
      #3baeff 100%
    );
    -webkit-background-clip: text;
    color: transparent;

    font-size: 41.92px;
    font-weight: 800;
    line-height: 120.63px;
    text-align: left;
    letter-spacing: -3px;
  }
  .oc {
    object-fit: cover;
  }
}
@media (min-width: 1200px) and (max-width: 1436px) {
  .h450 {
    height: 450px !important;
  }
}
@media (min-width: 500px) {
  .large {
    display: block !important;
  }
  .small {
    display: none !important;
  }
  .toke {
    background-image: url("https://qqpengiun.b-cdn.net/join.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: 100%;
  }
  .how {
    background-image: url("https://qqpengiun.b-cdn.net/d-how.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: 100%;
  }
  .footer {
    background-image: url("https://qqpengiun.b-cdn.net/com.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    width: 100%;
  }
}
@media (max-width: 499px) {
  .large {
    display: none !important;
  }
  .small {
    display: block !important;
  }
  .toke {
    background-image: url("https://qqpengiun.b-cdn.net/m-join.jpg");
    background-repeat: no-repeat;
    /* background-position: center; */
    background-size: cover;
    width: 100%;
    height: 760px !important;
    /* padding-bottom: 400px; */
  }
  .how {
    background-image: url("https://qqpengiun.b-cdn.net/m-how.jpg");
    background-repeat: no-repeat;
    /* background-position: center; */
    background-size: cover;
    width: 100%;
    height: 760px !important;
    /* padding-bottom: 400px; */
  }
  .footer {
    background-image: url("https://qqpengiun.b-cdn.net/m-c.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 500px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1536px) {
  .one1 {
    max-width: 1100px !important;
    width: 100%;
  }
  .py16 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .qqpenguin {
    font-size: 41.92px;
    line-height: 80.63px;
  }
  .pycustom{
    max-width: 1200px!important;
    padding-top: 120px!important;
    padding-bottom: 40px!important;
  }
  .pycustom h1{
    font-size: 90px;
    line-height: 90px;
  }
}
@media (min-width: 1300px) and (max-width: 1536px) {
  .pycustom{
    max-width: 1200px!important;
    padding-top: 120px!important;
    padding-bottom: 40px!important;
  }
  .pycustom h1{
    font-size: 90px;
    line-height: 90px;
  }
}
@media (min-width: 1200px) and (max-width: 1300px) {
  .pycustom{
    max-width: 1050px!important;
    padding-top: 100px!important;
    padding-bottom: 40px!important;
  }
  .pycustom h1{
    font-size: 80px;
    line-height: 80px;
  }
}
@media(max-width: 768px) {
  .pycustom{
    max-width: 1050px!important;
    padding-top: 100px!important;
    padding-bottom: 40px!important;
  }
  .pycustom h1{
    font-size: 80px;
    line-height: 80px;
  }
}
.stroke {
  -webkit-text-stroke: 2px black;
}