@charset "UTF-8";
/*---------------------------------------------"
// Template Name: Infinity Multi
// Template URL: https://techpedia.co.uk/template/infinity-multi
// Description: Infinity Multi HTML Template
// Version: 1.0.0

===============================================   
STYLE SHEET INDEXING
|
|___ Fonts
|___ Variables
|___ Reset Styles
|___ Responsive
|___ Spacing
|___ Helper Classes
|___ Buttons
|___ Headings
|___ Layout Styles
|___ END STYLE SHEET INDEXING

--------------------------------------------*/
/*-------------------------
    Fonts
-------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/*-------------------------
    Variables
-------------------------*/
/* Fonts */
/* Colors */
/* Transitions */
/* Gradients */
/* Shadows */
/*-------------------------
    Reset Styles
-------------------------*/

/* record.css */


.video-controls {
  height:50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* background-color: #0dcaf0;  */
}


.image-section {
  background-color: white;
  flex: 1; /* Takes 1 part of the available space */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}


.header {
  background-color: lightblue; /* Light blue background for the header */
  color: white;
  padding: 10px;
  text-align: center;
  width: 100%;
}
.custom-scrollbar::-webkit-scrollbar {
  background-color: #495057;
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
}


.logo-img {
  width: auto;
  height: 1.5em; /* 调整图片的高度，使其与文字相适应 */
  margin-right: 5px; /* 为了在图片和文字之间添加一些间距 */
}

.vertical-scrollable>.row {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 100%;
  overflow-y: scroll;
}
  


#hoverLink {
  font-size: 18px; /* 设置字体大小 */
  font-family: Arial, sans-serif; /* 设置字体族 */
  color: #ffffff; /* 设置字体颜色 */
  text-decoration: none; /* 移除下划线 */
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* 添加颜色变化的过渡效果 */
  /* 添加背景颜色 */
  border: 1px solid transparent; /* 添加边框，初始为透明 */
  border-radius: 5px; /* 添加圆角 */
  padding: 10px 20px; /* 添加内边距 */
  display: inline-block; /* 设置为块级元素，以便于添加宽度 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
  text-align: center; /* 设置文本居中 */
}

#hoverLink:hover {
  color: #fff; /* 鼠标悬停时字体颜色保持不变 */
  background-color: #053466; /* 鼠标悬停时改变背景颜色 */
  border-color: #004085; /* 鼠标悬停时改变边框颜色 */
}

#popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#popup img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

#popup span {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.page-number {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 16px;
}

.arrow-container {
  position: relative;
  /* 使箭头相对于图片容器定位 */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 使用CSS的transform属性垂直居中 */
  font-size: 2em;
  color: #000;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
}

.prev-arrow {
  left: 10px;
  /* 左箭头距离左侧的距离 */
}

.next-arrow {
  right: 10px;
  /* 右箭头距离右侧的距离 */
}

.arrow-container:hover .prev-arrow,
.arrow-container:hover .next-arrow {
  opacity: 1;
  /* 鼠标悬停时增加透明度 */
}

.icon-button {
  position: relative;
  padding: 0; /* 根据需要调整内边距 */
  border: none; /* 根据需要调整边框样式 */
  background-color: transparent; /* 根据需要调整背景色 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
}

.icon-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; /* 根据图标大小调整 */
  height: 300px; /* 根据图标大小和文字位置调整 */
  background-color: #fff; /* 矩形框的背景色 */
  border: 1px solid #000; /* 矩形框的边框 */
  z-index: -1; /* 确保矩形框在文字和图标后面 */
}



.heading {
  max-width: 847px;
}

/*-------------------------
  layouts
-------------------------*/
header {
  width: 100%;
  background: transparent;
  /*---------------------
      HAMBURGER MENU
  ----------------------*/
}
header.large-screens {
  height: 100px;
  padding: 10px 0;
  background-color: #e4e0e5;
}
@media (max-width: 992px) {
  header.large-screens {
    display: none;
  }
}
header nav.navbar-expand-lg {
  padding: 0;
}
header nav .navbar-brand {
  padding: 0;
  margin: 0;
  width: auto;
}
header nav .navbar-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
header nav .navbar-nav .menu-item a {
  font-size: 21px;
  font-weight: 500;
  line-height: 130%;
}
header nav .navbar-nav .menu-item a:hover {
  color: #66CC66;
}
header.small-screen {
  position:absolute;
  z-index: 990;
  top: 40px;
  height: 62px;
  padding: 16px 0 8px;
  background: #ECECF2;
}
@media (min-width: 991px) {
  header.small-screen {
    display: none;
  }
}
header.small-screen .mobile-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
header.small-screen .hamburger-menu {
  display: grid;
  justify-content: end;
  width: 100%;
  height: 22px;
  cursor: pointer;
  z-index: 9998;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
header.small-screen .hamburger-menu .bar {
  position: relative;
  transform: translateY(10px);
  background: #0B0C0D;
  transition: all 0ms 300ms;
  width: 24px;
  height: 2px;
  cursor: pointer;
}
header.small-screen .hamburger-menu .bar:before {
  width: 24px;
  height: 2px;
  cursor: pointer;
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background: #0B0C0D;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
header.small-screen .hamburger-menu .bar:after {
  width: 24px;
  height: 2px;
  cursor: pointer;
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #0B0C0D;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
header.small-screen .hamburger-menu .bar.animate {
  background: rgba(255, 255, 255, 0);
}
header.small-screen .hamburger-menu .bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
header.small-screen .hamburger-menu .bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
header.small-screen .mobile-navar ul {
  margin: 0;
  padding: 0;
}
header.small-screen .mobile-navar ul li {
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  overflow: hidden;
  padding: 5px;
  position: relative;
  text-align: left;
  text-transform: uppercase;
  padding-left: 15px;
}
header.small-screen .mobile-navar ul li:first-child {
  margin-top: 20px;
}
header.small-screen .mobile-navar ul li a {
  text-decoration: none;
  color: #0B0C0D;
}
header.small-screen .mobile-navar ul li a.active {
  color: #0B0C0D;
}
header.small-screen .mobile-navar ul li a:hover {
  color: #0B0C0D;
}
header.small-screen .mobile-navar {
  top: 0px;
  padding-top: 70px;
  max-width: 300px;
  right: -300%;
  width: 100%;
  background: linear-gradient(90deg, #8CC7F0 0%, #DCAAF4 100%);
  color: #0B0C0D;
  height: 100%;
  padding-bottom: 20px;
  position: fixed;
  z-index: 9997;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 205px);
  -moz-transform: translate3d(0, 0, 205px);
  transform: translate3d(0, 0, 205px);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
header.small-screen .mobile-navar.active {
  right: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
header.small-screen .has-children.active {
  color: #66CC66;
}
header.small-screen .has-children:hover {
  cursor: pointer;
}
header.small-screen .mobile-navar .children {
  display: none;
}
header.small-screen .mobile-navar .children li a {
  font-size: 18px;
  line-height: 30px;
}
header.small-screen .mobile-navar .children li:first-child {
  margin-top: 0px;
}
header.small-screen .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #66CC66;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
}
header.small-screen .icon-arrow:after {
  content: "▼";
}
header.small-screen .icon-arrow:hover {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
}



:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

/* end record.css */

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul.list-style,
ol.list-style {
  padding: 0;
}

ul.list-style li::marker,
ol.list-style li::marker {
  color: #66CC66;
}

.unstyled {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.page-content {
  margin: 20px 0;
}

/*-------------------------
    Typography
-------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: #212627;
  background-color: #F8F8FF;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  height: 100%;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
address,
p,
pre,
blockquote,
table,
hr {
  margin: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-weight: 700;
  font-size: 61px;
  line-height: 120%;
  letter-spacing: -1.22px;
}
@media (max-width: 992px) {
  h1 {
    font-size: 52px;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: 44px;
  }
}
@media (max-width: 575px) {
  h1 {
    font-size: 36px;
  }
}

h2 {
  font-weight: 500;
  font-size: 47px;
  line-height: 125%;
  letter-spacing: -0.47px;
}
@media (max-width: 992px) {
  h2 {
    font-size: 42px;
  }
}
@media (max-width: 767px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 32px;
  }
}

h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: -0.27px;
}
@media (max-width: 992px) {
  h3 {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  h3 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  h3 {
    font-size: 26px;
  }
}

h4 {
  font-weight: 500;
  font-size: 27px;
  line-height: 120%;
  letter-spacing: -0.01em;
}
@media (max-width: 992px) {
  h4 {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  h4 {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  h4 {
    font-size: 22px;
  }
}

h5 {
  font-weight: 600;
  font-size: 21px;
  line-height: 130%;
}
@media (max-width: 1199px) and (min-width: 992px) {
  h5 {
    font-size: 18px;
  }
}
@media (max-width: 992px) {
  h5 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  h5 {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  h5 {
    font-size: 16px;
  }
}

h6 {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.32px;
}
@media (max-width: 992px) {
  h6 {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  h6 {
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  h6 {
    font-size: 13px;
  }
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.32px;
}
@media (max-width: 992px) {
  p {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  p {
    font-size: 14px;
  }
}

a {
  display: inline-block;
  text-decoration: none;
  color: unset;
}
a:hover {
  color: #66CC66;
  transition: all 0.5s ease;
}

span {
  display: inline-block;
}

b,
strong {
  font-family: "Inter", sans-serif;
}

.top-bar-img {
  height: 80px;
  object-fit: cover;
}
@media (max-width: 1440px) {
  .top-bar-img {
    height: 60px;
  }
}
@media (max-width: 1199px) {
  .top-bar-img {
    object-position: -100px;
  }
}
@media (max-width: 992px) {
  .top-bar-img {
    position: fixed;
    top: 0;
    height: 40px;
  }
}

/*-------------------------
Helpers
-------------------------*/
.color-primary {
  color: #66CC66 !important;
}

.bg-primary {
  background-color: #66CC66 !important;
}

.color-white {
  color: #F8F8FF !important;
}

.bg-white {
  background-color: #F8F8FF !important;
}

.light-black {
  color: #212627 !important;
}

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

.color-black {
  color: #0B0C0D !important;
}

.bg-black {
  background-color: #0B0C0D !important;
}

.medium-black {
  color: #16191A !important;
}

.bg-medium-black {
  background-color: #16191A !important;
}

.lightest-gray {
  color: #ECECF2 !important;
}

.bg-lightest-gray {
  background-color: #ECECF2 !important;
}

.light-gray {
  color: #C6CBD2 !important;
}

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

.bg-medium-gray {
  background-color: #9EA2A8 !important;
}

.medium-gray {
  color: #9EA2A8 !important;
}

.dark-gray {
  color: #7A7F85 !important;
}

.bg-dark-gray {
  background-color: #7A7F85 !important;
}

.b-unstyle {
  border: 0;
  background: transparent;
}

.bg-gradient {
  background: linear-gradient(90deg, #8CC7F0 0%, #DCAAF4 100%) !important;
}

.shadow {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0) !important;
}

.br-30 {
  border-radius: 30px;
}

.br-25 {
  border-radius: 25px;
}

.br-20 {
  border-radius: 20px;
}

.br-15 {
  border-radius: 15px;
}

.br-10 {
  border-radius: 10px;
}

.br-5 {
  border-radius: 5px;
}

/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/
.m-80 {
  margin: 80px 0;
}
@media (max-width: 1199px) {
  .m-80 {
    margin: 64px 0;
  }
}
@media (max-width: 991px) {
  .m-80 {
    margin: 54px 0;
  }
}
@media (max-width: 767px) {
  .m-80 {
    margin: 42px 0;
  }
}

.mt-80 {
  margin-top: 80px;
}
@media (max-width: 1199px) {
  .mt-80 {
    margin-top: 64px;
  }
}
@media (max-width: 991px) {
  .mt-80 {
    margin-top: 54px;
  }
}
@media (max-width: 767px) {
  .mt-80 {
    margin-top: 42px;
  }
}

.mb-80 {
  margin-bottom: 80px;
}
@media (max-width: 1199px) {
  .mb-80 {
    margin-bottom: 64px;
  }
}
@media (max-width: 991px) {
  .mb-80 {
    margin-bottom: 54px;
  }
}
@media (max-width: 767px) {
  .mb-80 {
    margin-bottom: 42px;
  }
}

.mt-64 {
  margin-top: 64px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mt-64 {
    margin-top: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mt-64 {
    margin-top: 42px;
  }
}
@media (max-width: 767px) {
  .mt-64 {
    margin-top: 32px;
  }
}

.mb-64 {
  margin-bottom: 64px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mb-64 {
    margin-bottom: 48px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mb-64 {
    margin-bottom: 42px !important;
  }
}
@media (max-width: 767px) {
  .mb-64 {
    margin-bottom: 32px !important;
  }
}

.mt-48 {
  margin-top: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mt-48 {
    margin-top: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mt-48 {
    margin-top: 32px;
  }
}
@media (max-width: 767px) {
  .mt-48 {
    margin-top: 24px;
  }
}

.mb-48 {
  margin-bottom: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mb-48 {
    margin-bottom: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mb-48 {
    margin-bottom: 36px;
  }
}
@media (max-width: 767px) {
  .mb-48 {
    margin-bottom: 32px;
  }
}

.m-40 {
  margin: 40px 0;
}
@media (max-width: 1199px) {
  .m-40 {
    margin: 32px 0;
  }
}
@media (max-width: 991px) {
  .m-40 {
    margin: 28px 0;
  }
}
@media (max-width: 767px) {
  .m-40 {
    margin: 22px 0;
  }
}

.mt-40 {
  margin-top: 40px;
}
@media (max-width: 1199px) {
  .mt-40 {
    margin-top: 32px;
  }
}
@media (max-width: 991px) {
  .mt-40 {
    margin-top: 28px;
  }
}
@media (max-width: 767px) {
  .mt-40 {
    margin-top: 22px;
  }
}

.mb-40 {
  margin-bottom: 40px;
}
@media (max-width: 1199px) {
  .mb-40 {
    margin-bottom: 32px;
  }
}
@media (max-width: 991px) {
  .mb-40 {
    margin-bottom: 28px;
  }
}
@media (max-width: 767px) {
  .mb-40 {
    margin-bottom: 22px;
  }
}

.mb-32 {
  margin-bottom: 32px;
}
@media (max-width: 1199px) {
  .mb-32 {
    margin-bottom: 28px;
  }
}
@media (max-width: 991px) {
  .mb-32 {
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .mb-32 {
    margin-bottom: 20px;
  }
}

.mb-24 {
  margin-bottom: 24px;
}
@media (max-width: 1199px) {
  .mb-24 {
    margin-bottom: 22px;
  }
}
@media (max-width: 991px) {
  .mb-24 {
    margin-bottom: 22px;
  }
}
@media (max-width: 767px) {
  .mb-24 {
    margin-bottom: 20px;
  }
}

.mb-16 {
  margin-bottom: 16px;
  font-size: 55px; /* 修改字体大小 */
}

@media (max-width: 1199px) {
  .mb-16 {
    margin-bottom: 15px;
    font-size: 70px; /* 对应的媒体查询下修改字体大小 */
  }
}

@media (max-width: 991px) {
  .mb-16 {
    margin-bottom: 14px;
    font-size: 50px; /* 对应的媒体查询下修改字体大小 */
  }
}

@media (max-width: 767px) {
  .mb-16 {
    margin-bottom: 12px;
    font-size: 46px; /* 对应的媒体查询下修改字体大小 */
  }
}

.mb-26 {
  margin-bottom: 16px;
  font-size: 65px; /* 修改字体大小 */
}

.mb-12 {
  margin-bottom: 12px;
  font-size: 16px;
}
@media (max-width: 1199px) {
  .mb-12 {
    margin-bottom: 11px;
  }
}
@media (max-width: 991px) {
  .mb-12 {
    margin-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .mb-12 {
    margin-bottom: 8px;
  }
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-4p {
  margin-bottom: 4px;
}

.p-80 {
  padding: 80px 0;
}
@media (max-width: 1199px) {
  .p-80 {
    padding: 64px 0;
  }
}
@media (max-width: 991px) {
  .p-80 {
    padding: 54px 0;
  }
}
@media (max-width: 767px) {
  .p-80 {
    padding: 42px 0;
  }
}

.pt-80 {
  padding-top: 80px;
}
@media (max-width: 1199px) {
  .pt-80 {
    padding-top: 64px;
  }
}
@media (max-width: 991px) {
  .pt-80 {
    padding-top: 54px;
  }
}
@media (max-width: 767px) {
  .pt-80 {
    padding-top: 42px;
  }
}

.pb-80 {
  padding-bottom: 80px;
}
@media (max-width: 1199px) {
  .pb-80 {
    padding-bottom: 64px;
  }
}
@media (max-width: 991px) {
  .pb-80 {
    padding-bottom: 54px;
  }
}
@media (max-width: 767px) {
  .pb-80 {
    padding-bottom: 42px;
  }
}

.p-64 {
  padding: 64px 0;
}
@media (max-width: 1199px) {
  .p-64 {
    padding: 56px 0;
  }
}
@media (max-width: 991px) {
  .p-64 {
    padding: 48px 0;
  }
}
@media (max-width: 767px) {
  .p-64 {
    padding: 42px 0;
  }
}

.p-40 {
  padding: 40px 0;
}
@media (max-width: 1199px) {
  .p-40 {
    padding: 32px 0;
  }
}
@media (max-width: 991px) {
  .p-40 {
    padding: 28px 0;
  }
}
@media (max-width: 767px) {
  .p-40 {
    padding: 22px 0;
  }
}

.pt-40 {
  padding-top: 40px;
}
@media (max-width: 1199px) {
  .pt-40 {
    padding-top: 32px;
  }
}
@media (max-width: 991px) {
  .pt-40 {
    padding-top: 28px;
  }
}
@media (max-width: 767px) {
  .pt-40 {
    padding-top: 22px;
  }
}

.pb-40 {
  padding-bottom: 40px;
}
@media (max-width: 1199px) {
  .pb-40 {
    padding-bottom: 32px;
  }
}
@media (max-width: 991px) {
  .pb-40 {
    padding-bottom: 28px;
  }
}
@media (max-width: 767px) {
  .pb-40 {
    padding-bottom: 22px;
  }
}

.p-16 {
  padding: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .p-16 {
    padding: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .p-16 {
    padding: 13px;
  }
}
@media (max-width: 767px) {
  .p-16 {
    padding: 10px;
  }
}
@media (max-width: 490px) {
  .p-16 {
    padding: 10px;
  }
}

/*-------------------------
Elements
-------------------------*/
#preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: #F8F8FF;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 9999999;
  display: flex;
}
#preloader .loader {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#preloader .loader .circle {
  position: absolute;
  border-radius: 50%;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#preloader .loader .circle-1 {
  width: 60px;
  height: 60px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.1855) 0%, rgba(68, 253, 38, 0.196) 100%);
  animation-name: circle-1-animation;
}
#preloader .loader .circle-3 {
  width: 40px;
  height: 40px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
  animation-name: circle-3-animation;
}
#preloader .loader .circle-4 {
  width: 20px;
  height: 20px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
  animation-name: circle-4-animation;
}

@keyframes circle-1-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes circle-2-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes circle-3-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes circle-4-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.back-to-top {
  position: fixed;
  bottom: 35px;
  right: 5px;
  display: block;
  width: 120px;
  height: 120px;
  line-height: 50px;
  font-size: 80px;
  padding: 20px 0;
  background: #66CC66;
  color: #F8F8FF;
  text-align: center;
  opacity: 0;
  text-decoration: none;
  border-radius: 50%;
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.back-to-top.show {
  opacity: 1;
}
.back-to-top:hover {
  bottom: 38px;
  transition: all 0.5s ease;
}
@media (max-width: 490px) {
  .back-to-top {
    right: -20px;
    bottom: -20px;
  }
}
.back-to-top i {
  color: #F8F8FF;
}

.cus-btn {
  padding: 16px 32px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.32px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: all 0.5s ease;
  color: #F8F8FF;
  width: fit-content;
}
@media (max-width: 492px) {
  .cus-btn {
    padding: 12px 24px;
    border-radius: 15px;
  }
}
.cus-btn.primary {
  background: #66CC66;
}
.cus-btn.primary:hover {
  color: #F8F8FF;
  transform: scale(1.01);
}
.cus-btn.dark {
  background: #16191A;
}
.cus-btn.dark:hover {
  color: #F8F8FF;
  transform: scale(1.01);
}

button {
  border: 0;
}

/*-------------------------
  Form Styling
-------------------------*/
.form-group {
  position: relative;
}

.input-group {
  background: #ECECF2;
  padding: 16px;
  position: relative;
  box-shadow: none;
  border: 0;
  border-radius: 5px;
  max-width: 416px;
}
@media (max-width: 492px) {
  .input-group {
    padding: 12px 8px;
  }
}
.input-group input {
  border: none;
  background: transparent;
  width: 75%;
  color: #7A7F85;
  font-size: 16px;
  padding: 0;
  box-shadow: none;
}
@media (max-width: 492px) {
  .input-group input {
    width: 65%;
  }
}
.input-group input:focus {
  outline: 0;
  box-shadow: none;
  background: transparent;
  border: none;
}
.input-group input::placeholder {
  color: #7A7F85;
  opacity: 1;
}
.input-group button {
  border: none;
  background: transparent;
  width: 25%;
  color: #0B0C0D;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: 0.32px;
  text-align: end;
  padding-left: 16px;
  border-left: 1px solid #0B0C0D;
}
@media (max-width: 492px) {
  .input-group button {
    width: 35%;
    text-align: center;
    padding-left: 8;
  }
}

.form-control {
  border-radius: 5px;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  color: #0B0C0D;
  border: 0;
  background: linear-gradient(90deg, #8CC7F0 0%, #DCAAF4 100%);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
}
.form-control:focus {
  color: #0B0C0D;
  outline: 0;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border: none;
  background: linear-gradient(90deg, #8CC7F0 0%, #DCAAF4 100%);
}
.form-control::placeholder {
  color: #0B0C0D;
  opacity: 1;
}

label.error {
  color: #bc0f0f;
  margin-top: 10px;
}

input[type=checkbox] {
  height: auto;
  width: auto;
  background-color: #9EA2A8;
}

input[type=checkbox]:checked {
  accent-color: #66CC66;
}

input[type=checkbox]:checked {
  accent-color: #66CC66;
  background-color: #66CC66;
  width: 18px;
  height: 16px;
  border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
  background: #66CC66;
}

input[type=radio] {
  height: auto;
  width: auto;
}

input[type=radio]:checked {
  accent-color: #66CC66;
}

.select {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 0;
}
.select::after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro";
  color: #0B0C0D;
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 4px;
  cursor: pointer;
  pointer-events: none;
  transition: 0.25s all ease;
}
.select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0 !important;
  border: 0;
  border-bottom: 1px solid rgba(111, 111, 111, 0.5);
  background: transparent;
  background-image: none;
  flex: 1;
  padding-bottom: 8px;
  color: #0B0C0D;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  border-radius: 0;
  width: 100%;
}
.select select::-ms-expand {
  display: none;
}
.select select option {
  background-color: #66CC66;
  outline: 0 !important;
  border: 0;
  color: #66CC66;
  padding: 4px 8px;
}
.select select option:hover {
  background-color: #66CC66 !important;
  color: white;
}
.select select option:checked {
  background-color: #66CC66;
  color: white;
}

.alert-message {
  display: none;
}

footer .widget {
  max-width: 500px;
}
@media (max-width: 1199px) {
  footer .widget {
    margin-bottom: 48px;
  }
}
footer .widget .social-icons {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 992px) {
  footer .widget .list li a {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  footer .widget .list li a {
    font-size: 14px;
  }
}
footer .widget .cus-btn {
  justify-content: center;
}

.hero-banner {
  background: linear-gradient(90deg, #8CC7F0 0%, #DCAAF4 100%);
  padding: 64px 0;
}
@media (max-width: 992px) {
  .hero-banner {
    margin-top: 62px;
  }
}
@media (max-width: 768px) {
  .hero-banner {
    padding: 48px 0;
  }
}
.hero-banner .content-block {
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: center;
}
@media (max-width: 992px) {
  .hero-banner .content-block {
    padding-bottom: 64px;
  }
}
@media (max-width: 492px) {
  .hero-banner .content-block {
    padding-bottom: 42px;
  }
}
.hero-banner .content-block .btn-block {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .hero-banner .content-block .btn-block {
    gap: 24px;
  }
}

.about .img-block {
  background-color: #ECECF2;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border-radius: 30px;
  padding: 64px 0;
}
@media (max-width: 991px) {
  .about .img-block {
    padding: 48px 0;
  }
}
@media (max-width: 768px) {
  .about .img-block {
    padding: 32px;
  }
}
.about .content-block {
  height: 100%;
  display: grid;
  align-content: center;
}
.about .content-block ul li {
  display: flex;
  gap: 8px;
}
.about .content-block ul li h6 {
  color: #7A7F85;
}
.about .content-block .block {
  background-color: #ECECF2;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border-radius: 10px;
  padding: 16px 28px;
}

.steps .step-block {
  padding: 15px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border-radius: 30px;
  background-color: #ECECF2;
  transition: all 0.5s ease;
}
.steps .step-block:hover {
  background-color: #66CC66;
  transition: all 0.5s ease;
}
.steps .step-block:hover h1 {
  color: #F8F8FF;
}
.steps .step-block:hover h4 {
  color: #F8F8FF;
}
.steps .step-block:hover p {
  color: #F8F8FF;
}

.benefits .benefit-block {
  padding: 16px 32px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border-radius: 20px;
  background: #ECECF2;
}
.benefits .img-block {
  padding: 64px 0;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 2px 8px 0px rgba(0, 0, 0, 0.06), 14px 7px 15px 0px rgba(0, 0, 0, 0.05), 31px 15px 21px 0px rgba(0, 0, 0, 0.03), 55px 27px 24px 0px rgba(0, 0, 0, 0.01), 86px 43px 27px 0px rgba(0, 0, 0, 0);
  border-radius: 30px;
  background: #ECECF2;
}
@media (max-width: 991px) {
  .benefits .img-block {
    padding: 48px 0;
  }
}
@media (max-width: 768px) {
  .benefits .img-block {
    padding: 32px;
  }
}

.download-banner .text-block {
  height: 100%;
  display: grid;
  align-content: center;
}
@media (max-width: 991px) {
  .download-banner .text-block {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}
@media (max-width: 768px) {
  .download-banner .text-block {
    padding-bottom: 32px;
  }
}
.download-banner .text-block .btn-block {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .download-banner .text-block .btn-block {
    gap: 24px;
  }
}

.extract{
  background: linear-gradient(90deg, #f4aaea 0%, #91ccf7 100%) !important;
  height: 760px;
  margin-top: 20px;
}

.border-right{
  /* border-right: 3px solid #000; 
   */
   border-right: 3px dashed #fff; /* 虚线边框，白色 */
}


.border-bottom{
  border-bottom: 2px #110720;
  width: 90%; /* 设置边框的宽度，可以根据需要调整 */
  margin: 0 auto; /* 使元素水平居中 */
}

.border-top{
  border-top: 2px #110720;
  width: 90%; /* 设置边框的宽度，可以根据需要调整 */
  margin: 0 auto; /* 使元素水平居中 */
}


.card-header {
  padding: 0;
  border: none;
  background-color: #FFA500;
}

/*# sourceMappingURL=app.css.map */


#upload-container {
  position: center;
  border: 2px dashed #dee2e6;
  border-radius: 5px;
  padding: 20px;
  margin: 20px;
  text-align: center;
  background-color: #d3d3c1;
  width: 480px; /* 设置宽度 */
  height: 360px; /* 设置高度 */
}
#upload-container h5 {
  margin-bottom: 20px;
}
#upload-container p {
  color: #6c757d;
}



/* #drop-area {
  border: 2px dashed #0db0f0;
  padding: 60px 0px;
  transition: border-color 0.3s;
}

#drop-area.highlight {
  border-color: #ff0000; 
} */
#drop-area {
  border: 3px dashed #0db0f0;
  padding: 56px 20px;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s; /* 添加动画效果 */
}

#drop-area.highlight {
  border-color: #ff2600;
  background-color:rgb(101, 197, 152);
  box-shadow: 0 0 10px rgba(0, 255, 64, 0.5);
  color: #33ff00; /* 改变文本颜色 */
  font-weight: bold; /* 加粗字体 */
  text-transform: uppercase; /* 转换为大写 */
  border-radius: 10px; /* 改变边框半径 */
}

#uploadBtn-container{
  display: flex;
  align-items: center;
}
#uploadBtn-container .btn {
  margin: 0 16px;
}
/* #reselectfiles {
  display: none;
} */



.file-item {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
  padding: 5px 0;
  position: relative; /* 相对定位 */
}

.file-item i {
  cursor: pointer;
  margin-left: 10px;
  color: #f00;
  position: absolute; /* 绝对定位 */
  right: 0; /* 右侧对齐 */
}

.progress {
  width: 100%;
  height: 20px;
  margin-top: 5px;
}

.progress-bar {
  width: 0%;
  height: 20px;
  font-size: 20px;
  background-color: #0db0f0;
  text-align: center; /* 居中文字 */
  color: white; /* 进度条上的文字颜色 */
}


.custom-file-input:lang(en)~.custom-file-label::after {
  content: "选择文件";
}

.resizable {
  display: flex;
  height: 100vh;
}
.content {
  overflow-y: auto;
  transition: flex 0.3s;
}
.grip {
  display: none;
}
#chat-section {
  display: none;
  overflow-y: auto;
  transition: flex 0.3s;
}
#toggle-chat {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 10;
  background: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

/* Ensure text does not overflow the container */
#content-container {
  overflow-y: auto;
  height: 610px ;
  display: none; 
}
#keywords, #chapter, #summary, #speech {
  /* overflow: auto; */
  background:white;
  padding: 10px 200px 20px 0px;
  word-wrap: break-word;
  white-space: pre-wrap; /* 保留空格和换行符，并自动换行 */
}

#keywords-text,#summary-text,#speech-text{
  font-size:24px;
}
#summary-text{
  font-size:48px;
}

#image-container-3{
  margin: 20px 10px 0px 0px;
  height: 300px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background-color: #faf9f8;
}

#image-container-1,#image-container-2{
  margin: 0px 10px;
  height: 180px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background-color: #faf9f8;
}




/* Container for placeholder text */
.placeholder-text {
  font-size: 48px;
  color: #666666;
}

/* Time-stamp styling */
.time-stamp {
  font-weight: bold;
  margin-top: 10px;
}



.spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 24px;
  height: 24px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


 /* 支付模态框背景样式 */
#payModal.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 50px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

/* 模态框内容样式 */
#payContent.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 660px; 
  box-sizing: border-box; 
  position: relative;
  overflow: hidden; /* 防止溢出 */
}

/* 关闭按钮样式 */
.close_payModal {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
}

.close_payModal:hover,
.close_payModal:focus {
  color: rgb(228, 22, 22);
  text-decoration: none;
  cursor: pointer;
}

/* 标题样式 */
#payContent.modal-content h4 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}


/* 二维码容器样式 */
#qrCodeContainer {
  text-align: center;
  margin-bottom: 20px;
  border-right: 3px dashed #090404;
}
#qrCodeContainer img {
  max-width: 86%; /* 图片最大宽度为100% */
  height: auto; /* 自动调整高度 */
  padding-top: 12px;
  display: block;
  margin: 0 auto; /* 图片居中 */
}

/* 订单状态样式 */
#orderStatus {
  text-align: center;
  margin-bottom: 20px;
}

/* 按钮居中对齐 */
.query_text-center {
  text-align: center;
  margin-top: 10px;
  font-size: 22px;
}

/* 表单样式 */
.verification-form {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap; 
  margin-top: 20px;
}

.verification-form label {
  margin-right: 10px;
  font-weight: normal;
  font-size: 25px;
}

.verification-form input {
  margin-right: 10px;
  width: 40%;
  padding: 10px; 
  box-sizing: border-box; 
}

.verification-form button {
  padding: 10px 20px; 
  margin:10px 0px 0px 0px;
  width: 50%  ;
  background-color: #4CAF50; 
  color: white; 
  border: none; 
  cursor: pointer; 
  font-weight: bold;
}

.verification-form button:hover {
  background-color: #45a049; 
}

#result {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}






/* PPT 模态框背景样式 */
.pptmodal {
  display: none; /* 隐藏模态框，默认情况下 */
  position: fixed; /* 固定位置 */
  z-index: 1; /* 放置在其他内容之上 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  background-color: rgb(0,0,0); /* 黑色背景 */
  background-color: rgba(0,0,0,0.4); /* 透明黑色背景 */
}

/* 模态框内容样式 */
.pptModal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% 上边距和自动水平居中 */
  padding: 25px 10px 20px 20px;
  border: 1px solid #888;
  width: 80%; /* 宽度为80% */
  max-width: 460px; /* 最大宽度 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度和高度计算 */
}

/* 关闭按钮样式 */
.close_pptModal {
  padding-top: 0px;
  color: #aaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
}

.close_pptModal:hover,
.close_pptModal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 图片样式 */
.pptModal-content img {
  max-width: 100%; /* 图片最大宽度为100% */
  height: auto; /* 自动调整高度 */
  display: block;
  margin: 0 auto; /* 图片居中 */
}

/* 表单和文本样式 */
.pptModal-content p, 
.pptModal-content form, 
.pptModal-content label, 
.pptModal-content input{
  width: 100%; /* 宽度为100% */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度和高度计算 */
  text-align: start; /* 居中对齐 */
  margin-bottom: 10px; /* 底部外边距 */
}

.pptModal-content button {
  width: 100%; /* 宽度为100% */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度和高度计算 */
  text-align: center; /* 居中对齐 */
  margin-bottom: 50px; /* 底部外边距 */
}
.pptModal-content input {
  padding: 10px; /* 内边距 */
  margin-top: 10px; /* 顶部外边距 */
}

.pptModal-content button {
  padding: 10px; /* 内边距 */
  background-color: #4CAF50; /* 按钮背景色 */
  color: rgb(255, 255, 255); /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  cursor: pointer; /* 鼠标悬停时变成手型 */
}

.pptModal-content button:hover {
  background-color: #45a049; /* 鼠标悬停时按钮背景色 */
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
}

#begintips {
  color: white;
  font-size: 50px;
  display: none; /* Initially hidden */
}

/* .content-container
{overflow-y:auto; max-height: 100%; word-wrap: break-word; white-space: normal;} */

/* 教程模态 */
 /* Custom modal styles */
 #tutorialModal.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  transition: transform 0.3s ease-out;
}

#tutorialModal.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#tutorialModal .modal-content {
  background-color: #fff;
  border-radius: 8px;
  border: none;
}

#tutorialModal .modal-header {
  border-bottom: 1px solid #e9ecef;
}

#tutorialModal .modal-body {
  padding: 20px;
}

#tutorialModal .modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 10px;
}