@import url("../css/font.css");

body {
  background: #09203f;
  margin: 0;
}

p {
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
}

.pages {
  width: 375px;
  background: #364471;
  margin: auto;
  position: relative;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.tipmack {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  font-size: 18px;
  color: #ffffff;
  display: none;
}

.tipmack .content {
  width: 75%;
  margin: 70px 0 0 90px;
}

.tipmack span {
  display: inline-block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
  line-height: 21px;
  color: #000;
  font-size: 13px;
  margin-right: 8px;
}

.tipmack .top {
  display: flex;
  align-items: flex-end;
}

.tipmack .botm {
  margin-top: 27px;
  display: flex;
  align-items: center;
}

.tipmack .top .icon {
  margin-left: 16px;
}

.tipmack .tipbtns {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 4px;
  font-size: 11px;
  color: #000;
  margin-left: 7px;
  padding: 3px 4px;
}

.tipbtns .icon {
  margin-right: 3px;
}

/* 头部 */
.topnav {
  width: 375px;
  padding: 0 6px;
  height: 67px;
  background: #121d2a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 13px;
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translate(-50%);
  color: #ffffff;
}

.topleft,
.leftimg {
  display: flex;
  align-items: center;
}

.topleft .leftimg img {
  width: 52px;
  height: 52px;
  margin-right: 7px;
}

.imgfluid {
  width: 106px;
  height: 30px;
}

/* 悬浮球 */
.pikaqiu {
  width: 120px;
  height: 120px;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(70%);
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  font-family: "Dangrek";
}

.pikaqiu img {
  width: 65px;
  height: 65px;
}

.pikaqiu p {
  font-weight: bold;
  font-size: 7px;
  color: #ffffff;
  margin: 3px 0;
}

.pikaqiu .btn {
  width: 75px;
  height: 25px;
  background: linear-gradient(0deg, #ffa53a, #ffe32c);
  border-radius: 12px;
  font-weight: bold;
  font-size: 12px;
  color: #74371d;
  text-align: center;
  line-height: 25px;
}

/* 内容 */
#scrollBoxtip {
  width: 75%;
  height: 125px;
  background: #203e67;
  overflow: hidden;
  border-radius: 4px;
}
#scrollBoxtip #con1tip,
#con2tip {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
#scrollBoxtip li {
  font-size: 11px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
}
#scrollBoxtip li span {
  color: #fff36e;
}

.titlenav {
  width: 52%;
  height: 28px;
  background: #281e72;
  border-radius: 14px;
  margin: 65px auto 0;
  display: flex;
  align-items: center;
  padding: 0 4px 0 10px;
  justify-content: space-between;
  font-weight: normal;
  font-size: 10px;
  color: #ffffff;
}

.titlenav img {
  width: 20px;
  height: 20px;
}

.titlenav span {
  display: inline-block;
  width: 25px;
  height: 24px;
  background: #ffe12c;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  color: #332f8a;
  text-align: center;
  line-height: 24px;
}

.cntent1,
.cntent2 {
  width: 100%;
  height: 681px;
  background-image: url("../img/dtcp_01.png");
  background-size: 100%;
  overflow: hidden;
  text-align: center;
}

.cntent2 {
  background-image: url("../img/dtcp_02.png");
  position: relative;
  margin-top: -1px;
}

.cntent3 {
  width: 100%;
  background: #364471;
  padding: 0 0 80px;
  overflow: hidden;
  margin-top: -1px;
  position: relative;
}

.toptext {
  font-family: Dangrek;
  font-weight: 400;
  font-size: 26px;
  color: #ff6b52;
  background: linear-gradient(0deg, #e6d8a6 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 75px;
}

.centop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 44px;
  position: relative;
}

.centop .cenwarp {
  width: 75%;
  height: 76px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.centop .mangocls {
  width: 125px;
  height: 110px;
  background-image: url("../img/ewm_ren.png");
  background-size: 100% 100%;
  font-size: 10px;
  position: absolute;
  bottom: -60px;
  left: 0;
  z-index: 2;
  transform: rotateY(180deg);
}

.mangocls img {
  width: 50px;
  height: 50px;
}

.mangocls .clsbox {
  position: absolute;
  left: 6px;
  top: 24px;
}

.mangocls p img {
  width: 10px;
  height: 10px;
}

.centop .cenwarptw {
  width: 75%;
  height: 36px;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}

.cenlist {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  -webkit-animation: 20s moves infinite linear;
  width: 200%;
}

@-webkit-keyframes moves {
  0% {
    left: 0;
  }
  100% {
    left: -480px;
  }
}
@keyframes moves {
  0% {
    left: 0;
  }
  100% {
    left: -480px;
  }
}

.cenlist li {
  float: left;
  margin: 0 5px;
}

.cenlist li img {
  width: 150px;
  height: 76px;
  border-radius: 3px;
}

.cenlistw {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  -webkit-animation: 20s movet infinite linear;
  width: 200%;
}

@-webkit-keyframes movet {
  0% {
    left: 0;
  }
  100% {
    left: -450px;
  }
}
@keyframes movet {
  0% {
    left: 0;
  }
  100% {
    left: -450px;
  }
}

.cenlistw li {
  float: left;
  margin: 0 5px;
}

.cenlistw li img {
  width: 70px;
  height: 36px;
  border-radius: 3px;
}

/* 1 */
.phonecls {
  width: 100%;
  margin-top: 20px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.phonetop {
  position: absolute;
  top: -16px;
  left: 3px;
}

.titph {
  background-image: url("../img/deng01.png");
  background-size: 100% 100%;
  height: 50px;
  width: 100px;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0px 2px 0 #348ed4;
  font-style: italic;
  line-height: 27px;
  position: relative;
  z-index: 2;
}

.phonetop2 {
  position: absolute;
  top: -16px;
  right: 3px;
}

.phonemack {
  width: 85px;
  height: 100px;
  border: 1px solid;
  border-image: linear-gradient(to bottom, #396bb3, transparent);
  border-image-slice: 1;
  opacity: 0.43;
  position: absolute;
  left: 7px;
  top: 28px;
  border-bottom: none;
  background: linear-gradient(to bottom, #112645, transparent);
}

.phonecls .img {
  height: 148px;
  margin-top: 20px;
}

.phonebox {
  width: 71px;
  height: 71px;
  border: 1px solid transparent;
  border-radius: 12px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #253160, #253160),
    linear-gradient(to bottom, #ba76ff, #4b5daa);
  font-family: "Dangrek";
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.phonecls .phonetip,
.phonecls .phonetipw {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 85px;
  height: 26px;
  background: #e23a3a;
  border-radius: 13px 13px 13px 1px;
  color: #ffffff;
  font-family: "Dangrek";
}

.phonecls .phonetip {
  left: 50%;
  transform: translate(-50%);
  border-radius: 0;
  text-align: center;
  border-radius: 50px;
}

.phonetipw span {
  display: inline-block;
  font-size: 9px;
  float: left;
  margin: 3px 0 0 3px;
}

.phonetip span {
  font-size: 10px;
}

.textprice {
  font-weight: 400;
  font-size: 7px;
  color: #ffffff;
  margin-bottom: 9px;
}

.phonetip p,
.phonetipw p {
  position: absolute;
  top: -10px;
  left: 5px;
  font-weight: bold;
  text-shadow: 0 1px #ff0000;
}

.phonetip p {
  left: 50%;
  transform: translate(-50%);
}

.phonecls .phonetipw {
  width: 53px;
  height: 20px;
  border-radius: 11px 0px 10px 0px;
  top: 0;
  left: 0;
}

.phonetipw p {
  font-size: 10px;
}

.imgbtn {
  width: 110px;
  height: 40px;
  font-size: 10px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  font-family: "Dangrek";
  text-shadow: 0px 1px 1px rgba(216, 94, 27, 0.4);
  background-image: url("../img/jp_01_0.png");
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: -22px;
}

.imgbtn span {
  font-size: 16px;
}

.numbotom,
.numbotom2 {
  width: 90px;
  height: 3px;
  background: #4c6ec1;
  box-shadow: 0px 1px 1px 0px rgba(32, 48, 104, 0.85);
  border-radius: 2px;
}

.numbotom2 div,
.numbotom div {
  width: 85px;
  height: 100px;
  border: 1px solid;
  border-image: linear-gradient(to bottom, #396bb3, transparent);
  border-image-slice: 1;
  opacity: 0.43;
  border-bottom: none;
  background: linear-gradient(to bottom, #112645, transparent);
  margin: -100px 0 0 3px;
  transform: rotateX(180deg);
}

.numbotom {
  position: absolute;
  top: 1px;
  left: 8px;
}

.numbotom2 {
  position: absolute;
  top: 1px;
  right: 8px;
}

/* 111111111111 */

.scroll1 ul {
  margin: 0;
  padding: 0;
}

.scroll1 {
  height: 180px;
  overflow: hidden;
  margin: 13px 7px 0px 8px;
}

.scroll1 .scrollul,
.scrollul2 {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
.scroll1 li {
  font-size: 10px;
  text-align: center;
  color: #ffffff;
}

/* 1111111111111111 */

/* 2 */
#scrollBox {
  height: 75px;
  overflow: hidden;
  margin-top: 30px;
}
#scrollBox #con1,
#con2 {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
#scrollBox li {
  font-size: 10px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  color: #ffffff;
}
#scrollBox li span {
  color: #fff36e;
}

/* 1111111111111 */

/* 111111111111111 */

.itmtips {
  width: 64px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #e23a3a;
  border-radius: 11px 0px 10px 0px;
  font-weight: bold;
  font-size: 8px;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}

.itmtips span {
  display: inline-block;
  margin-top: 3px;
}

.itmtips p {
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 14px;
  text-shadow: 0 1px #ff0000;
  font-weight: bold;
}

.texts {
  font-size: 12px;
  color: #ffffff;
  margin-top: 2px;
  font-family: "Dangrek";
}

.texts span {
  font-size: 15px;
}

.facecls {
  width: 100%;
  margin-top: 100px;
  font-family: Dangrek;
  font-weight: 400;
  font-size: 25px;
  color: #ff6b52;
  background: linear-gradient(0deg, #e6d8a6 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.facecls p {
  display: flex;
  align-items: center;
  justify-content: center;
}

.facecls img {
  width: 31px;
  height: 31px;
  margin: 8px;
}

.facecls .tebom {
  font-size: 14px;
}

/* 脚 */
.footerbtn {
  width: 100%;
  text-align: center;
}

.contactus {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgba(88, 107, 168, 0.16);
}

.contactus .itemboxs {
  width: 99px;
  height: 80px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.itemboxs .newbtn {
  text-decoration: none;
  cursor: pointer;
}

.contactus .line {
  width: 2px;
  height: 50px;
  background: #364471;
  border-radius: 2px;
}

.itemboxs .itemtext {
  font-size: 0.6rem;
  margin-top: 4px;
  color: #ffffff;
}

.itemboxs .itemtexto {
  font-weight: bold;
  font-size: 0.7rem;
  color: #ffffff;
  margin-top: 4px;
}

.footerbtn p {
  margin: 22px 0 11px;
  font-size: 11px;
  color: #5073a0;
}

.alink {
  /* font-weight: bold; */
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  margin: 14px 0 15px;
  font-family: Dangrek;
}

.alink a {
  color: #7baaff;
}

.footbtn {
  width: 100%;
  position: absolute;
  bottom: 16px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* font-weight: bold; */
  font-size: 10px;
  color: #ffffff;
  font-family: Dangrek;
}

.footbtn .btn,
.footbtn .btn1 {
  width: 143px;
  padding: 0 11px 0 2px;
  height: 29px;
  background: linear-gradient(0deg, #ffffff, #abe8ff);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 0 0 #207ddd;
  font-family: Dangrek;
}

.btn span,
.btn1 span {
  font-size: 9px;
  color: #364471;
}

.footbtn .btn1 {
  background: linear-gradient(0deg, #ffffff, #c0d0ff);
  box-shadow: 0 2px 0 0 #d647ec;
}

.iconkef {
  margin-right: 2px;
}

.footbtn .mack {
  margin-top: 4px;
  width: 146px;
  height: 34px;
  background: #16224a;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* flex */
.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog.modal-fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* Custom button styles with gold gradient */
.google-btn {
  background: linear-gradient(
    to right,
    #fee370,
    #fac55d
  ); /* Gold gradient background */
  color: #753b14; /* White text */
  border: none;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.apple-btn {
  background: linear-gradient(
    to right,
    #fee370,
    #fac55d
  ); /* Gold gradient background */
  color: #753b14; /* White text */
  border: none;
  transition: background-color 0.3s, color 0.3s;
}

/* Adjust icon and text spacing */
.btn i {
  margin-right: 8px;
}

/* Ensure text and icons are vertically aligned in the middle */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover state for buttons */
.btn:hover {
  background-color: #d4a94b; /* Slightly darker on hover */
}

/* Active state for buttons */
.btn:active,
.btn:focus {
  background-color: #c89c48; /* Even darker for active state */
  outline: none; /* Removes the outline to maintain the clean look */
}

/* Custom styles for fullscreen modal */
.modal-dialog.modal-fullscreen {
  max-width: 480px; /* Maximum width of the modal */
  height: auto; /* Height is set to auto, respecting the content height */
  margin: auto; /* Center the modal horizontally */
}

/* Ensures the modal content takes full height if needed */
.modal-content {
  height: 100%; /* Full height */
}

/* Center the modal vertically */
.modal-dialog {
  display: flex;
  align-items: center; /* Align items vertically */
  min-height: calc(
    100vh - (1rem * 2)
  ); /* Minus top and bottom margins from vh */
}

.fullscreen-image {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.modal-content {
  position: relative; /* This makes sure that the child elements can be positioned absolutely relative to this container */
  height: 100vh;
}

.modal-body {
  padding: 0; /* Remove padding to allow image to be fullscreen */
}

.btn-close {
  position: absolute;
  top: 1rem; /* Position from the top of the modal-content */
  right: 1rem; /* Position from the right of the modal-content */
  z-index: 1050; /* Ensures the button is above other elements */
}

.terms-link {
  color: #5c7fae; /* 设置文字颜色为黑色 */
  font-size: 0.8rem; /* 设置文字大小，这里是稍微小一些的尺寸 */
  /* text-decoration: none; 移除下划线 */
}

.terms-link:hover {
  text-decoration: underline; /* 鼠标悬浮时添加下划线，以提供视觉反馈 */
  color: #fff; /* 鼠标悬浮时可以将颜色改为深灰色 */
}

/* Add custom styles for the smaller modal */
.modal-small .modal-dialog {
  max-width: 500px;
  margin: 30px auto;
}
.modal-small .modal-content {
  max-height: 40vh;
  overflow-y: auto;
}

.fixed-bottom {
  position: initial;
}

.bg-light {
  background-color: #364471 !important;
}

/* 弹框 */
.p-4 {
  padding: 1rem 1.5rem !important;
}

.newpop {
  height: 569px;
  background-image: url("../img/popupimg/dts.png");
  background-size: 100% 100%;
}

.newpop .p1 {
  font-family: Dangrek;
  font-size: 16px;
  color: #ffffff;
  font-style: italic;
  text-align: left;
}

.newpop .p1 span {
  font-size: 20px;
}

.newpop .p2 {
  margin-top: 33px;
  font-family: Dangrek;
  font-weight: 400;
  font-size: 16px;
  color: #baf3ff;
  font-style: italic;
  -webkit-text-stroke: 0 #112a63;
}

.newpop .p3 {
  font-family: Dangrek;
  font-weight: 400;
  font-size: 13px;
  color: #6ab0ff;
  font-style: italic;
  margin-top: 16px;
  line-height: 22px;
}

.newpop .popbtn {
  margin-top: 233px;
  position: relative;
  display: flex;
}

.newpop .popbtn .btndiv {
  width: 204px;
  height: 48px;
  margin: auto;
  text-align: center;
  line-height: 39px;
  font-family: Dangrek;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  font-style: italic;
  border-radius: 50px;
  background: linear-gradient(0deg, #fffa64, #ffd630);
  box-shadow: 0 2px 0 2px #ce623d;
  position: relative;
  /* 设置描边宽度及颜色 */
  text-stroke: 3px #d27022;
  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
  -webkit-text-stroke: 3px #d27022;
}

[data-content]::before {
  /* attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 */
  content: attr(data-content);
  position: absolute;
  /* 实现元素外描边的关键 */
  -webkit-text-stroke: 0;
  /* 文本颜色 */
  color: #fff;
}

.popbtn .mack {
  width: 215px;
  height: 53px;
  background: #032a5c;
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translate(-50%);
  border-radius: 50px;
}

.newpop .popbtn img {
  position: absolute;
  width: 230px;
  bottom: -35px;
  left: 50%;
  transform: translate(-50%);
}

.newpop .footerdv {
  margin: 44px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newpop .footerdv img {
  width: 39px;
  height: 34px;
  margin: 0 25px 0 -50px;
}

.footerdv .dvcen {
  font-family: Dangrek;
  font-weight: 400;
  font-size: 11px;
  color: #bdd4ff;
  font-style: italic;
  text-align: left;
  line-height: 20px;
}