#gray-text {
            color: gray;
        }
        #white-text{
            color: white;
        }

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            background-image: url('https://midiphrase.com/imgs/MeiLanLogo_colorful_1.png'); /* 替换为你的背景图片路径 */
            background-size: 246px 128px; /* 保持原尺寸并确保整个背景图片都能显示 */
            background-position: 98% 100%; /* 图片居中显示 */
            background-repeat:no-repeat;
            background-color: #123456;
            color: white;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav {
            text-align: center;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        section {
            padding: 2em;
        }

        h2 {
            color: #333;
        }

        p {
            padding: 1em;
            color: white;
        }
        p  a {
            color: #FFA500;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        .triangle1 {
            width: 0;
            height: 0;
            border-top: 10px solid skyblue;
            border-right: 10px solid transparent;
        }
        .triangle2 {
            width: 0;
            height: 0;
            border-top: 10px solid LightSkyBlue;
            border-right: 10px solid transparent;
        }
        .triangle3 {
            width: 0;
            height: 0;
            border-top: 10px solid LightSkyBlue;
            border-right: 10px solid transparent;
        }

        .container{  
            background-color: #123456;
            align-items: stretch;  

            display: flex;
        }
        .container-item{
            display: flex;
            font-weight: 20px;
            flex-basis: 33.33%;
            height: 190px;
        }
        .container-item p{
            margin: 0px 5px;
            color: black;
        }
        .green{
            background-color: #4F94CD;
        }
        .Moccasin{
            background-color: #5CACEE;
        }
        .PaleGreen3{
            background-color: #63B8FF;
        }


        .content {
            
            overflow: hidden; /* 确保内容在圆角边框内显示 */            
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            align-content: flex-start;
        }

        .content-item {
            border-radius: 10px; /* 设置圆角的半径，根据需要进行调整 */
            background-color: #123456; /* 设置背景颜色，根据需要进行调整 */
            width: 48%; /* 控制内容块的宽度，这里设置为48%以确保在各种屏幕上都能正常显示 */
            margin-top: 20px;    

        }

        .content-item2 {
            border-radius: 10px; /* 设置圆角的半径，根据需要进行调整 */
            background-color: #123456; /* 设置背景颜色，根据需要进行调整 */
            width: 48%; /* 控制内容块的宽度，这里设置为48%以确保在各种屏幕上都能正常显示 */            

        }

        .content-showMidiPackage {
            border-radius: 10px; /* 设置圆角的半径，根据需要进行调整 */
            background-color: #778899; /* 设置背景颜色，根据需要进行调整 */
            width: 95%; /* 控制内容块的宽度，这里设置为48%以确保在各种屏幕上都能正常显示 */            

        }

        .content-showMidiPackage-pageageImg{
            width: 48%;
            height: auto;
        }
        .content-showMidiPackage-pageageImg-float-left {
    float: left;
    margin: 0px 40px 20px 20px;
}

        .content img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;

        }

        .cta-button {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 15px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }

        /* banner样式 */
.banner {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #f8fafc 0%, #e0e7ef 100%);
  padding: 40px 0;
}
/* banner 内 h1 样式 */
.banner h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #22223b;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

/* banner 内 p 样式 */
.banner p {
  font-size: 1.1rem;
  color: #4a4e69;
  margin: 0;
}

.banner a {
  color: #ff6f61;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.banner a:hover {
  color: #22223b;
}
/* banner样式 */

        footer {
            background-color: #123456;
            color: white;
            padding: 1em;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }