@font-face {
  font-family: "PingFang";
  src: url("../fonts/PingFangSC.ttf");
  font-weight: normal;
  font-style: normal;
}
html,
body {
  min-width: 1600px;
  width: 100%;
  margin: 0%;
  font-size: 1rem;
  font-family: "PingFang";
  font-size: 20px;
  font-weight: 600;
  background: #0E1116;
  position: relative;
}
.top-wrapper { width: 90%; margin: 0px auto; max-width: 1050px; display: flex; gap: 50px; justify-content: center; align-items: center;}
.top-wrapper .top-logo { width: 404px; margin: -50px -50px -50px -100px; }
.top-wrapper .top-logo img { width: 100%; }
.top-wrapper .top-slogan { max-width: 367px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.top-wrapper .top-slogan img { width: 100%; }
.top-wrapper .top-slogan .title-text { background-image: linear-gradient(259.14deg, #D47C33 27.82%, #FAFE8A 52.4%, #D47C33 99.13%); background-clip: text; -webkit-background-clip: text; /* Required for Safari */ color: transparent; font-family: "PingFang"; font-size: 29.69px; font-weight: 600; margin-top: -5px; }
.top-wrapper .top-cs { width: 356px; }
.top-wrapper .top-cs img { width: 100%;}
.main-container { min-height: 723px; display: flex; justify-content: center; align-items: flex-start; background: url(../imgs/bg.png)no-repeat center center; background-size: cover;}
.main-container .bgrgt { width: 25%;}
.main-container .bglft { width: 25%;}
.main-container .inner-contents { display: flex; width: 50%; margin-top: 30px; border: 2px solid #8E7878; height: 589px;background: #060B1D; border-radius: 16px;}
.main-container .inner-contents .inner__left {flex: 5; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; }
.main-container .inner-contents .inner__left .carousel-container {
  width: 95%;
  border-bottom: 1px solid #FFFFFF66;
}
.main-container .inner-contents .inner__left .carousel-container .slide-content { min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px; height: 80%;align-items: flex-start;
  padding-bottom: 80px;}

.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box { display: flex; justify-content: space-evenly; align-items: center; gap: 10px; font-size: 16px;}

.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box h4 {min-width: 80px; text-align: center; font-family:"PingFang"; font-weight: 600; font-size: 16px;  margin: 0; padding: 5px;border: 1px solid #8E7878;background: #0D193D; color: #ffffff; border-radius: 8px;  }
.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box .arrow { width: 20px; }
.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box .arrow img { width: 100%; }
.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box .box {font-family:"PingFang"; flex: 1; font-weight: 600; font-size: 16px; margin: 0; padding: 5px;border: 1px solid #8E7878;background: #0D193D; color: #ffffff; border-radius: 8px; min-width: 40%; text-align: center; }
.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box .boxlink {width: 100%; display: flex; justify-content: center; align-items: center;}
.main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box a { display:flex;justify-content: center; align-items: center; background: url(../imgs/gobtn.png)no-repeat center center; background-size: cover; width: 119px; height: 42px; padding: 15px 10px 30px 10px;font-family: PingFang SC; margin-bottom: -15px; color: #ffffff; text-decoration: none; }
.main-container .bottom-btn {text-decoration:none; background: linear-gradient(180deg, #F6BF23 0%, #902E19 44%, #D37412 98%); border-radius: 10px; margin: 20px auto; padding: 5px 20px; display: flex; justify-content: center; align-items: center; gap: 10px; font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
}
.main-container .bottom-btn img {
  width: 30px;
}
.main-container .inner-contents .inner__rgt {flex: 3; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  padding: 0 25px;}
.main-container .inner-contents .cmn-title {font-weight: 600; margin-bottom: 30px; color: #060B1D;  width: 280px; background: url(../imgs/titlebg.png)no-repeat top center; background-size: contain; height: 40px; text-align: center; padding: 5px;}
.main-container .inner-contents .inner__rgt .top-box { display: flex; gap: 30px; width: 100%;}
.main-container .inner-contents .inner__rgt .top-box .lft { width: 40%; flex: 1;}
.main-container .inner-contents .inner__rgt .top-box .lft img { width: 100%; flex: 1;}
.main-container .inner-contents .inner__rgt .top-box .rgt { width: 50%; flex: 1;}
.main-container .inner-contents .inner__rgt .top-box .rgt .qr-container {font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
}
.main-container .inner-contents .inner__rgt .top-box .rgt .qr-container img { width: 100%;}
.main-container .inner-contents .inner__rgt .top-box .rgt .qr-container .qr-txt {
  margin: 20px auto;
}
.main-container .inner-contents .inner__rgt .top-box .rgt .buttons {display: flex; flex-direction: column; gap: 20px;}
.main-container .inner-contents .inner__rgt .top-box .rgt .buttons .btn {font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color:#000000; display: flex; gap: 10px;justify-content: center; align-items: center; background: linear-gradient(259.14deg, #FFECCE 11.64%, #F3CD92 27.82%, #FFF2CA 52.4%, #EFD190 72.12%, #E4BD80 99.13%);}

.main-container .inner-contents .inner__rgt .top-box .rgt .buttons .btn img { height: 30px;}
.main-container .inner-contents .inner__rgt .bot-box { width: 100%; }
.main-container .inner-contents .inner__rgt .bot-box img { width: 100%; }
.main-container .inner-contents .slide-box { width: 70%; margin: 0 auto; }

.footer-logos { width: 95%; max-width: 1050px; margin: 50px auto; display: flex; justify-content: space-between;}
.footer-logos img {height: 40px;}

@media screen and (max-width: 768px) {
  html,body {min-width: unset;}
  .full-container {background:url(../imgs/bg-mobile.png)no-repeat center center; background-size: cover;}
  .top-wrapper .top-logo { margin: -50px;}
  .top-wrapper .top-slogan { display: none;}
  .main-container { background: unset;}
  .main-container .bgrgt { display: none;}
  .main-container .bglft { display: none;}
  .main-container .inner-contents { flex-direction: column; width: 90%;
    border: unset;
    height: unset;
    background: unset; gap: 20px;}
  .main-container .inner__left,
  .main-container .inner__rgt{ border: 2px solid #8E7878;
    padding: 0 20px;
    background: #060B1D; border-radius: 10px; }
  .main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box { width: 95%; flex-direction: column; align-items: flex-start;}
  .main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box .arrow {  display: none; }

  .main-container .inner-contents .inner__left .carousel-container .slide-content .slide-box h4 {
    border: 0;
    background: unset;
    padding: 0;
    text-align: left;}
  .footer-logos {flex-wrap: wrap; gap: 10px;
    max-width: 350px;
    margin: 0px auto;
    padding: 30px 20px;
    gap: 30px;
    width: 90%;
  }
  /* .footer-logos img {height: 20px;} */

}