@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700');

/* 定义 Poppins 字体 */
/* Poppins Regular / Normal */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/template-parts/Custom/custom_fonts/Poppins.ttf') format('truetype');
    font-weight: normal;
    /* 对应 400 */
    font-style: normal;
    font-display: swap;
}

/* Poppins Bold */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/twentytwenty/template-parts/Custom/custom_fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    /* 对应 700 */
    font-style: normal;
    font-display: swap;
}

/* Poppins Light */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/twentytwenty/template-parts/Custom/custom_fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Poppins Medium */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/twentytwenty/template-parts/Custom/custom_fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Poppins SemiBold */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/twentytwenty/template-parts/Custom/custom_fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 统一字体设置 */
body {
    font-family: 'Poppins', 'Microsoft YaHei', 'SimSun', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

/* 也可以为其他元素设置字体 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Microsoft YaHei', 'SimSun', sans-serif;
}

p, span, div, a, li, td, th {
    font-family: 'Poppins', 'Microsoft YaHei', 'SimSun', sans-serif;
}

/* 响应式框架宽度控制 */
.responsive-frame {
    width: 100%;
    max-width: 1400px; /* 在超大屏幕上限制最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 0 15px; /* 两侧留出内边距 */
}

/* 媒体查询：适用于不同屏幕尺寸 */
@media screen and (max-width: 576px) {
    .responsive-frame {
        width: 95%; /* 小屏幕下使用95%宽度 */
        max-width: none; /* 取消最大宽度限制 */
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    .responsive-frame {
        width: 90%; /* 中小屏幕下使用90%宽度 */
        max-width: 700px; /* 设置适中的最大宽度 */
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .responsive-frame {
        width: 85%; /* 平板尺寸使用85%宽度 */
        max-width: 900px; /* 设置适中的最大宽度 */
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .responsive-frame {
        width: 80%; /* 中等桌面屏幕使用80%宽度 */
        max-width: 1000px; /* 设置适中的最大宽度 */
    }
}

@media screen and (min-width: 1201px) and (max-width: 1440px) {
    .responsive-frame {
        width: 80%; /* 大屏幕使用80%宽度 */
        max-width: 1200px; /* 设置较大的最大宽度 */
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .responsive-frame {
        width: 75%; /* 超大屏幕使用75%宽度 */
        max-width: 1400px; /* 设置合理的最大宽度 */
    }
}

@media screen and (min-width: 1921px) {
    .responsive-frame {
        width: 70%; /* 超宽屏幕使用70%宽度 */
        max-width: 1400px; /* 固定最大宽度，避免内容过宽 */
    }
}