@charset "utf-8";
/* CSS Document */

*{
    margin: 0;padding: 0;box-sizing: border-box;
}

body{min-width: 320px;/* max-width: 1920px; */
    margin: 0 auto;}

/* section{background-color: #929292;}
.wrap{background-color: #FF0000;}
.container{background-color: #00AAFF;}
.content{background-color: #00FF00;}
.inner{background-color: #FFF600;} */
.link{background-color: #ffffff;}
/* img{background-color: #FF00D0;} */

main{width: 100%;margin: 0 auto;}
section{width: 100%;margin: 0 auto;padding: 64px 0;}
.wrap{width: 1280px;margin: 0 auto;padding: 0 40px;}
.container{width: 1125px;margin: 0 auto;padding: 0 24px;}
.content{width: 100%;margin: 0 auto;/* margin-bottom: 12px; */}
.inner{width: 750px;margin: 0 auto;}
.link{padding: 16px;}

@media only screen and (max-width: 1280px) {
    .wrap{width: 750px;padding: 0;}
    .container, .content, .inner{width: 100%;}
    .container{padding: 0;}
}
@media only screen and (max-width: 768px) {
    .wrap{width: 100%;}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    section{
        padding-top: calc(56px + (72 * ((100vw - 320px) / (768 - 320)))); /* 从56px增加到128px */
        padding-bottom: calc(56px + (72 * ((100vw - 320px) / (768 - 320)))); /* 从56px增加到128px */
    }
    .wrap{
        padding-left: calc(12px + (12 * ((100vw - 320px) / (768 - 320)))); /* 从12px增加到24px */
        padding-right: calc(12px + (12 * ((100vw - 320px) / (768 - 320)))); /* 从12px增加到24px */
    }
    .link{
        padding: calc(12px + (4 * ((100vw - 320px) / (768 - 320)))); /* 从12px增加到16px */
    }
}
@media only screen and (max-width: 320px) {
    section{padding: 56px 0;}
    .wrap{padding: 0 12px;}
    .container{padding: 0;}
    .link{padding: 12px;}
}


/* h1, h2, h3{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 600;
    font-style: normal;
}
h4, h5, h6, button{
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 600;
    font-style: normal;
}
p, .notes, label, input, select, textarea{
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 400;
    font-style: normal;
} */

h1, h2, h3, h4, h5, h6 {line-height: 1.4;}
p, .notes {line-height: 1.6;}
h1 {font-size: 48px;}
h2 {font-size: 32px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 22px;}
h6 {font-size: 20px;}
p {font-size: 16px;}
.notes {font-size: 14px;}

@media only screen and (min-width: 320px) and (max-width: 768px) {
    h1 {font-size: calc(36px + (20 * ((100vw - 320px) / (448)))); /* 从36px增加到56px */}
    h2 {font-size: calc(32px + (16 * ((100vw - 320px) / (768 - 320)))); /* 从32px增加到48px */}
    h3 {font-size: calc(28px + (14 * ((100vw - 320px) / (768 - 320)))); /* 从28px增加到42px */}
    h4 {font-size: calc(24px + (12 * ((100vw - 320px) / (768 - 320)))); /* 从24px增加到36px */}
    h5 {font-size: calc(22px + (10 * ((100vw - 320px) / (768 - 320)))); /* 从22px增加到32px */}
    h6 {font-size: calc(20px + (8 * ((100vw - 320px) / (768 - 320)))); /* 从20px增加到28px */}
    p {font-size: calc(16px + (8 * ((100vw - 320px) / (768 - 320)))); /* 从16px增加到24px */}
    .notes {font-size: calc(14px + (6 * ((100vw - 320px) / (768 - 320)))); /* 从14px增加到20px */}
}
@media only screen and (max-width: 320px) {
    h1 {font-size: 36px;}
}

/* 颜色变量 */
:root {
    /* 主色 */
    --primary-color-1: #103244;
    
    /* 辅助色 */
    --accent-color-1: #c5004e;
    --accent-color-2: #a50e4a;
    --accent-color-3: #fff7b8;
    --accent-color-4: #fffce7;
    
    /* 其他配色 */
    --neutral-color-1: #1b1b1b;
    --neutral-color-2: #919191;
    --neutral-color-3: #f3f3f3;
}

.accent-color-1{color: var(--accent-color-1);}
.accent-color-3{color: var(--accent-color-3);}
.highlight-yellow-fade{background: linear-gradient(transparent 60%, #fff7b8 60%);}
.highlight-dark-fade{background: linear-gradient(transparent 60%, #1b1b1b 60%);}
.text-emphasis{
    color: #fff7b8;
    background-color: var(--neutral-color-1);
    padding: 0 4px;
}
.text-emphasis-red{
    color: #fff7b8;
    background-color: var(--accent-color-1);
    padding: 0 4px;
}
.large{font-size: 160%;}
.medium{font-size: 120%;}
.small{font-size: 70%;}
.italic{font-style: italic;}
.letter_spacing{letter-spacing: 8px;}
.uppercase {
    text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
    .pc_item{display: none;}
}
@media only screen and (min-width: 769px) {
    .sp_item{display: none;}
}

img{width: 100%;height: auto;/* height: 280px; */}

.stacked-image-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.stacked-image-text .link:last-child {
    margin-bottom: 0;
}
.stacked-image-text .item{
    /* width: calc(50% - 12px); */
    flex: 0 1 calc(50% - 12px);
}
.reversed-stacked-image-text{
    flex-direction: row-reverse;
}
@media only screen and (max-width: 1280px) {
    .stacked-image-text, .reversed-stacked-image-text{
        flex-direction: column;
    }
    .stacked-image-text .item{
        /* width: 100%; */
        flex: 0 1 100%;
    }
}

.flexible-columns{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* link元素的基本样式，确保在大屏幕上一行能容纳两个 */
.flexible-columns .link {
    flex: 0 1 calc(50% - 12px); /* 每个link元素占用行宽的近一半，允许在一行放两个 */
    margin-bottom: 24px; /* 给点垂直间距 */
}
@media only screen and (min-width: 768px) {
    .flexible-columns .link:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
} 
/* 在小屏幕上调整布局，使每行只显示一个link */
@media only screen and (max-width: 768px) { /* 假设768px为小屏幕的断点 */
    .flexible-columns .link {
        flex: 0 1 100%; /* 在小屏幕上，每个link元素占满整行 */
    }
    .flexible-columns .link:last-child {
        margin-bottom: 0;
    }
}

.full-width-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.full-width-column .link {
    flex: 1 1 auto; /* 默认自动填充空间 */
    margin-right: 16px; /* 设置相邻元素间的间距 */
}
/* 删除最后一个元素的右侧间距 */
.full-width-column .link:last-child {
    margin-right: 0;
}
/* 在小屏幕上调整为垂直排列，并取消水平间距 */
@media only screen and (max-width: 1280px) {
    .full-width-column {
        flex-direction: column; /* 切换到垂直排列 */
    }
    .full-width-column .link {
        flex: 0 1 100%; /* 让每个 link 元素在小屏幕上占满整行 */
        margin-right: 0; /* 在小屏幕上取消右侧间距 */
        margin-bottom: 24px;
    }
    .full-width-column .link:last-child {
        margin-bottom: 0;
    }
}


.img-container{max-width: 1920px;margin: 0 auto;}
/* PC端样式（宽度大于1200px） */
@media only screen and (min-width: 1201px) {
    .pc_img{width: 100%;height: auto;margin: 0 auto;text-align: center;}
    .pc_fv_medium {display: none;}
    .sp_img {display: none;}
}
/* 平板样式（宽度在769px至1200px之间） */
@media only screen and (max-width: 1200px) and (min-width: 769px) {
    .pc_fv_medium{width: 100%;height: auto;margin: 0 auto;}
    .pc_img {display: none;}
    .sp_img {display: none;}
}
/* 移动端样式（宽度小于等于768px） */
@media only screen and (max-width: 768px) {
    .pc_img {display: none;}
    .pc_fv_medium {display: none;}
    .sp_img {width: 100%;height: auto;margin: 0 auto;}
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
}

/* fv */
.fv {
    padding: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    
}
.fv_container {
    height: 100%;
    padding: 0 64.5px;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between; /* 顶部和底部对齐 */
}
.fv_logo {
    height: calc((80 / 768) * 100%);
    padding: 16px 0;
    display: flex;
    align-items: center; /* 垂直居中图片 */
}
.fv_logo img {
    height: 100%;
    width: auto;
}
.fv_photo {
    display: flex;
    justify-content: center; /* 居中图片 */
    align-items: flex-end; /* 确保图片贴近容器底部 */
    margin-top: auto; /* 将元素推到底部 */
}
.fv_photo picture img {
    max-width: 100%; /* 图片宽度自适应 */
    height: auto;
}

/* 响应式媒体查询 */
@media only screen and (max-width: 1280px) {
    .fv_logo {
        height: calc((64 / 1280) * 100vw);
        min-height: 56px;
        padding: 8px 16px;
    }
}
@media only screen and (max-width: 768px) {
    .fv {
        background-image: url("../images/fv_back_sp.webp");
    }
    .fv_wrap {
        padding: 0;
    }
    .fv_container {
        padding: 0;
    }
    .fv_logo {
        height: calc((120 / 768) * 100vw);
        min-height: 72px;
        padding: 8px 16px 24px;
    }
}
@media only screen and (min-width: 769px) {
    .fv {
        background-image: url("../images/fv_back_pc.webp");
    }
}



/* title */
.title{
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    color: var(--primary-color-1);
    margin-bottom: 48px;
}

.subtitle{
    letter-spacing: 6px;
    color: var(--neutral-color-2);
}
.title_line{
    width: 64px;
    height: 1px;
    background-color: var(--neutral-color-2);
    margin: 16px auto;
}
@media only screen and (max-width: 768px) {
    .title{
        margin-bottom: calc((64 / 750 ) * 100vw);
    }
    .title_line{
        width: calc((72 / 750 ) * 100vw);
        margin-top: calc((24 / 750 ) * 100vw);
        margin-bottom: calc((24 / 750 ) * 100vw);
    }
    .subtitle{
        font-size: max(calc((24 / 750) * 100vw), 14px) !important;
        line-height: max(calc((24 * 1.5 / 750) * 100vw), 24px) !important;
        letter-spacing: calc((6 / 750 ) * 100vw);
    }
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .title h1 {font-size: calc(30px + (34 * ((100vw - 320px) / (448))));}
}


/* footer */
footer{
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: var(--primary-color-1);
}
.footer_logo{
    width: 202px;
    height: 100%;
    margin-bottom: 24px;
}
@media only screen and (max-width: 768px) {
    .footer_logo{
        width: max(calc((340 / 750) * 100vw), 202px);
        margin-bottom: calc((48 / 750 ) * 100vw);
    }
}