body {
    font-family: 'MiSans', 'CreatoDisplay', Arial, sans-serif;
    margin: 0;
    padding: 0;
    
}
[data-lang="zh"] {
    font-family: 'MiSans', Arial, sans-serif;
}

[data-lang="en"] {
    font-family: 'CreatoDisplay', Arial, sans-serif;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: 30px; 
}
@font-face {
    font-family: 'MiSans';
    src: url('../fonts/中文/MiSans-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'CreatoDisplay';
    src: url('../fonts/英文/CreatoDisplay-Black.otf') format('opentype');
    font-weight: 900;
}
.logo img {
    height: 60px;
}
.language-switch {
    position: relative;
    height: 60px; /* 设置与 header 高度相同 */
    
}
.language-switch img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;/* 大小 */
    cursor: pointer;
    margin-left: 10px;
    padding-right: 0px; /* 添加一些中英切换右侧内边距 */
    vertical-align: bottom; 
}

.content {
    display: flex;
    flex-direction: column;
}

.image-carousel {
    margin-top: 24px; /* 高度 */
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 16:9 aspect ratio */
    position: relative;
    overflow: hidden;
    position: relative;
    order: -1; 
}
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-inner img {
    width: 100%;
    flex-shrink: 0;
}
.image-carousel img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: cover; 
}

.text-content {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.language-content {
    display: none;
}

.language-content.active {
    display: block;
}

.qr-codes {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 20px;
    margin-left: -7px;
}

.qr-code {
    width: 100px;
    height: 100px;
}
.info-block {
    border-bottom: 1px solid black;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.info-block:last-child {
    border-bottom: none;
}
p#asd {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .content {
        flex-direction: row;
    }

    .image-carousel {
        width: 75%;/*图*/
        padding-bottom: 41%; /* Maintain 16:9 aspect ratio */
        order: 0; 
    }
    .image-carousel img {
        object-fit: cover; 
    }
    .text-content {
        width: 30%;
        max-width: 400px;
    }
    .info {
        width: 15vw; /* 25% of viewport width */
        margin-right: auto; /* Push content to the left */
    }

    
}
@media (max-width: 767px) {
    main {
        margin-top: -30px; /* 调整这个值来减少空间 */
    }
    .logo img {
        height: 40px; /* 为手机端设置更小的 logo 大小 */
        margin-left: -10px; /* 向左移动 5 像素 */
    }
    .info-block {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .info-block h2{
        width: 30%;
        margin: 0;
        font-size: 14px;
    }
    p#asd {
        font-size: 14px;
        font-weight: bold;
        margin: 0.83em 0;
        width: 100%;
        box-sizing: border-box;
    }
    .info-block p {
        width: 70%;
        margin: 0;
        font-size: 12px;
    }
    body {
        font-size: 14px; /* 减小整体字体大小 */
    }
    header {
        margin-top: 0%; /* 为手机端设置更小的上边距 */
    }
    .language-switch {
        height: auto;
        display: flex;
        align-items: center;
    }
    .language-switch img {
        position: static;
        width: 60px; /* 可以根据需要调整大小 */
        margin: 0;
        padding: 0;
        transform: translateY(2px);
    }
    
}

@media (min-width: 768px) {
    .info-block {
        display: flex;
        flex-direction: column;
    }

    .info-block h2 {
        margin-bottom: 10px;
    }

    .info-block p {
        margin-top: 0;
    }
    .language-switch img {
        
        padding-right: 80px; /* Padding for wide screens */
    }
}
@media (min-width: 1024px) {
    .text-content {
        width: 25%;
        max-width: 500px;
    }
}

@media (min-width: 1440px) {
    .text-content {
        width: 20%;
        max-width: 600px;
    }
}
.container {
    max-width: 1860px; /* 或者您想要的任何固定宽度 */
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 1861px) {
    .container {
        max-width: 80%; /* 或者您认为合适的任何百分比 */
    }

    .content {
        justify-content: flex-start; /* Change from space-between to flex-start */
        gap: 5%; /* Add a gap property to control space between elements */
    }


    .image-carousel {
        width: 55%; /* 进一步减小图片宽度 */
        padding-bottom: 30.9375%; /* 保持16:9的宽高比 */
        margin-right: 90px; /* 将图片推到左侧 */
    }

    .text-content {
        width: 35%; /* 减小宽度 */
        max-width: 500px; /* 限制最大宽度 */
        height: 80vh; /* 增加高度，使用视口高度的80% */

    }
    header {
        margin-top: 150px; 
        padding-bottom: 30px; 
    }
    .language-switch img {
        right: 505px;
    }

}