/* Reset some default browser styles */
body, html {
   margin: 0;
   padding: 0;
   font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
   background-color: white;
}

/* Container for the whole page */
.container {
   max-width: 1200px; /* Set a maximum width */
   margin: 0 auto; /* Center the container */
   display: flex;
   flex-direction: column;
   justify-content: center; 
   align-items: center; 
}
.wide-container {
   width: 100%; /* Set a maximum width */
   margin: 0 auto; /* Center the container */
   display: flex;
   flex-direction: column;
   justify-content: center; 
   align-items: center; 
}
/* Header styles */
.header {
   margin-bottom: 20px;
   
}

.header .img {
   width: 500px;
   height: 250px;
   background-image: url(../source/largelogo.svg);
   background-size: 100% 100%;
}

.promotion {
   font-size: 30px;
   font-weight: bold;
   line-height: 50px;
   padding: 15px;
}
@keyframes pfun {
   0%{transform: rotateY(0deg);}
   100% {transform: rotateY(360deg);}
}
.pfun {
   display: inline-block;
   animation: pfun 1s infinite;
   margin: 0 5px;
}
.note {
   font-size: 10px;
   color: #999;
   padding: 15px;
 }
.search-form {
   color:white;
   position: relative;
   text-align: center;
   margin-bottom: 20px;
   background: url(/source/inputBackground.svg);
   animation: formbg 10s linear infinite;
   box-sizing: border-box;
   width: 100%;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.search-form .title {
   font-size: 30px;
   font-weight: bold;
   line-height: 50px;
   padding-top: 15px;
}
.search-form .title2 {
   font-size: 24px;
   font-weight: bold;
   line-height: 40px;
   padding: 15px;
}
.search-input {
   width: 500px;
   display: block;
   box-sizing: border-box;
   overflow: hidden;
   max-height: 180px;
   max-width: 600px;
   resize: none;
   height: auto;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 20px;
   line-height: 40px;
   margin: 10px;
}

.search-button {
   padding: 10px 20px;
   background-color: #fff;
   border: none;
   border-radius: 5px;
   color: #0052D9;
   cursor: pointer;
   transition: background-color 0.3s ease;
   font-size: 20px;
   line-height: 36px;
   margin: 10px;
   font-weight: bold;
}

.search-button:hover {
   background-color: #9ab7e7;
}
.disabled,.disabled:hover {
   background: #666;
}

.search-form  .options {
   margin-top: 15px;
   font-size: 15px;
}
.slide-card {
   margin: 40px;
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 0 5px 10px rgba(0,0,0,0.1);
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 15px;
}
.slide-card .figure {
   position: relative;
   flex-shrink: 0;
   width: 200px;
   height: 200px;
}
.slide-card .figure img {
   position: absolute;
   width: 100%;
   height: 100%;
   transition: 1s all;
}
.slide-card .text {
   flex-direction: column;
}
.slide-card .title {
   font-size: 36px;
   font-weight: bold;
}
.slide-card .description {
   padding: 15px 0;
   font-size: 26px;
   color:#666;
}
.table-container {
   box-sizing: border-box;
   max-width: 100%;
   margin: 30px 0;
 }
 
 .table {
   display: flex;
   flex-direction: column;
   overflow-x: scroll; /* 横向滚动 */
   max-width: 100%;
 }
 .header-row,
 .content-row {
   display: flex;
 }
 .header-cell,
 .content-cell {
   flex: 1;
   min-width: 70px; /* 设置单元格最小宽度 */
   padding: 18px 5px;
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: center;
   justify-content: center;
   font-weight:lighter;
   font-size: 18px;
 }
 .header-cell .info {
   display: block;
   color: #999;
   font-weight: normal;
   font-size: 12px;
 }
 .content-cell:nth-child(1) {
   font-weight: normal;
   font-size: 14px;
 }
 .content-cell:nth-child(2) {
   color:#0052D9;
   font-weight: bold;
 }
 .header-cell {
   justify-content: end;
   font-weight: bold;
 }
 
 .content-cell {
   
 }

.example-container {
   box-sizing: border-box;
   width: 100%;
   padding: 15px;
}
.example {
   position: relative;
   margin: 15px 0;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: flex-start;
   font-weight: bold;
   width: 100%;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 0 50px -20px #000;
}
.example .info {
   box-sizing: border-box;
   padding: 20px;
   background: url(/source/inputBackground.svg);
   width: 375px;
   color: white;
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: space-between;
   align-items: stretch;
   flex-shrink: 0;
   gap: 20px;
}
.example .info .title {
   font-size: 30px;
}
.example .info .download {
   padding: 10px;
   color: #0052D9;
   background-color: #fff;
   border-radius: 10px;
}
.example .section {
   flex: 1;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
}
.example .section .title{
   font-size: 16px;
}
.example .section .content{
   position: relative;
   margin-top: 10px;
   font-size: 20px;
   width: 100%;
   display: flex;
   align-content: center;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
   gap: 15px;
   justify-content: center;
   overflow: hidden;
}
.example .section .content .figure {
   max-width: 350px;
   min-width: 150px;
}
.example .section .content .figure img {
   width: 100%;
}
.example .section .content .words {
   flex-grow: 1;
   min-width: 270px;
   flex-basis: 0;
}
/* Footer styles */
.footer {
   text-align: center;
   padding-top: 50px;
}

.promise {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   padding: 15px;
}
.promise .figure {
   width: 350px;
   height: 350px;
   margin: 20px 0;
   background: url(/source/promise.png);
   background-size: 100%;
}

/* Media query for responsiveness */
@media only screen and (max-width: 768px) {
   .header .img {
      width: 200px;
      height: 100px;
   }
   .search-input {
       width: 100%;
   }
   .slide-card {
      margin: 10px;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 5px 10px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
   }
   .slide-card .figure {
      position: relative;
      width: 240px;
      height: 240px;
   }
   .slide-card .title {
      font-size: 25px;
      font-weight: bold;
   }
   .slide-card .description {
      font-size: 20px;
   }
   .header-cell,
   .content-cell {
      font-size: 14px;
      padding: 14px 2px;
   }
   .example-container {
      padding: 5px;
   }
   .example {
      flex-direction: column;
      align-items: start;
   }
   .example .info {
      width: 100%;
   }
   .hide-on-small {
      display: none;
   }
}