/*布局控制*/
/*全局设置*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-width: 320px;
}

div {
    display: block;
}

.page_header {
    width: 100%;
    height: 72px;
}

.size-control {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 22px;
    padding-right: 22px;
    max-width: 1276px;
}

.navigation {
    padding-left: 16px;
    padding-right: 16px;
    height: 72px;
    display: flex;
}

.logo-and-name {
    display: flex;
    align-items: center;
    width: auto;
}

.align-items-center-logo-and-name {
    display: flex;
    align-items: center;
    gap: 16px;
}

.SF-logo {
    max-height: 36px;
}

.main-menu {
    display: flex;
    flex-grow: 1;
    justify-content: end;
}

.main-menu-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.page_content {
    flex: 1 0 auto;
    position: relative;
    width: 100%;
    max-width: 100%;
}

/*首页*/

.page-1 {
    width: 100%;
    height: 720px;
    padding-bottom: 96px;
}

.page-1-text-container {
    margin-left: 16px;
    margin-right: 16px;
    height: 720px;
    width: auto;
    padding-top: 96px;
    padding-bottom: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.page-2 {
    width: 100%;
    min-height: 720px;
    max-height: 1440px;
    padding-top: 96px;
    padding-bottom: 96px;
}

.page-2-main-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 22px;
    padding-right: 22px;
    max-width: 1276px;
}

.page-2-top-text {
    margin-left: 16px;
    margin-right: 16px;
}

.page-2-top-text p {
    margin-top: 16px;
}

.page-2-software-container {
    align-self: center;
    width: 100%;
    margin-top: 64px;
}

.page-2-software-card {
    padding: 64px;
    /* 假设我们希望卡片之间的间隙是 24px */
    --card-gap: 24px;
}

.page-2-main-software-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 确保卡片在行间分布均匀 */
    gap: var(--card-gap); /* 使用自定义属性设置间隙 */
}

.software-card {
    padding: 24px;
    flex: 1; /* 允许卡片增长以填充空间 */
    min-width: 250px; /* 设置卡片的最小宽度，确保内部布局不被压缩 */
    margin-top: 32px; /* 设置顶部外边距 */
}

.software-card-design {
    display: flex;
    align-items: center;
    gap: 24px;
}

.software-logo img {
    max-width: 72px;
    margin-top: 8px;
}

.software-card-design {
    max-width: 100%;
    flex-basis: auto;
}

.software-text p {
    margin-top: 8px;
    white-space: nowrap; /* 保持文本不换行 */
    overflow: hidden; /* 隐藏溢出容器的文本 */
    text-overflow: ellipsis; /* 显示省略号表示文本被截断 */
}

/*CRIE*/
.second-header-container {
    position: relative;
    top: 0;
    left: 0;
    z-index: 905;
    margin-top: 0;
    margin-bottom: 0;
    width: auto;
    border-top: 1px solid #3c3d40;
    border-bottom: 1px solid rgba(39, 40, 44, .2);
}

.second-header {
    padding: 4px 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.second-header-title-box {
    margin-left: 16px;
    margin-right: 16px;
    max-width: 100%;
    flex-basis: auto;
}

.second-header-title-CRIE {
    display: inline-flex;
    flex-wrap: nowrap;
    vertical-align: middle;
    margin: 8px 0;
}

.second-header-menu-box {
    flex-grow: 1;
    max-width: 100%;
    margin-left: 8px;
    margin-right: 8px;
}

.second-header-menu {
    align-items: center;
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;
}

.function-box {
    margin-left: 16px;
    padding: 8px 0;
}

.function-main {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: hsla(0, 0%, 100%, .7);
}

.function-main:hover {
    color: white;
}

.function-main svg {
    margin-left: 4px;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.second-header-button-1 {
    margin: 8px 0 8px 10px;
    padding: 8px 24px;
    position: relative;
    display: inline-block;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 20px;
}

.second-header-button-1:hover {
    background: hsla(0, 0%, 100%, .1);
}

.second-header-button-2 {
    margin: 8px 0 8px 10px;
    padding: 8px 24px;
    position: relative;
    display: inline-block;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 20px;
    background: #088484;
}

.second-header-button-2:hover {
    background: #099e9e;
}

.CRIE-page {
    min-height: 498px;
    padding-top: 144px;
    padding-bottom: 96px;
    background: black url("img/CRIE-BG-1.png") no-repeat center; /* 设置背景色、图片、不重复、垂直居中 */
    background-size: auto 100%; /* 自动调整图片宽度以保持它的高度始终填充元素的高度 */
}

.CRIE-introduce-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.CRIE-introduce {
    margin-left: 16px;
    margin-right: 16px;
}

.CRIE-introduce h1 {
    color: white;
    font-size: 34px;
}

.CRIE-introduce h2 {
    margin-top: 32px;
    color: white;
    font-size: 56px;
    font-weight: 600;
}

.CRIE-introduce p {
    margin-top: 24px;
    margin-left: 4px;
    font-size: 24px;
    font-weight: 300;
    color: white;
}

.CRIE-introduce-download-button {
    max-width: 100%;
    flex-basis: auto;
    margin-top: 32px;
    margin-left: 4px;
    margin-right: 4px;
}

.CRIE-introduce-download-button a {
    padding: 12px 32px;
    position: relative;
    display: inline-block;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 26px;
    background: #088484;
    text-decoration: none;
    color: white;
}

.CRIE-introduce-download-button a:hover {
    background: #099e9e;
}

/*CRIE下载*/
.CRIE_download_main_page {
    background: #19191c;
    padding-bottom: 96px;
}

.CRIE_download_introduce_box {
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    flex-wrap: wrap;
}

.CRIE_download_introduce {
    max-width: 720px;
}

.CRIE_download_introduce p {
    margin-top: 64px;
    font-size: 30px;
    color: white;
    line-height: 40px;
}

.CRIE_download_box {
    margin-top: 64px;
}

.CRIE_download_box_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.CRIE_download_box_flex img {
    margin-left: 6px;
    margin-right: 6px;
    width: 48px;
}

.CRIE_download_box_flex h2 {
    margin-left: 6px;
    margin-right: 6px;
    color: white;
    font-size: 32px;
}

.CRIE_download_box p {
    margin-top: 12px;
}

.download_CRIE {
    margin-top: 48px;
}

.download_CRIE a {
    text-decoration: none;
    color: white;
    padding: 8px 24px;
    position: relative;
    display: inline-block;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 20px;
}

/*CRIE定价*/
.CRIE-price-title {
    margin-top: 96px;
    margin-bottom: 48px;
    padding-left: 16px;
    padding-right: 16px;
}

.CRIE-price-title h1 {
    color: #19191c;
    font-size: 42px;
    font-weight: 600;
}

.CRIE-buyers {
    margin-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.buyers-button-box button {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px 16px;
    padding: 12px 16px;
    background: none;
    border: 2px solid black;
    border-radius: 12px;
    font-size: 20px;
}

.buyers-button-box button:hover {
    background: hsl(0, 0%, 90%);
}

.buyers-button-box button svg {
    width: auto;
    height: 28px;
}

.CRIE-price-box {
    display: flex;
    flex-wrap: wrap;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 96px;
}

.CRIE-price {
    display: block;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 48px;
    padding: 24px;
    min-width: 400px;
    max-width: 400px;
    border: 1px solid hsl(0, 0%, 75%);
    border-radius: 12px;
    font-size: 16px;
    color: #19191c;
}

.CRIE-price-card-top p {
    margin-top: 16px;
    min-height: 48px;
}

.CRIE-price-card-bottom {
    margin-top: 64px;
}

.CRIE-price-card-bottom-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.CRIE-price-card-bottom-time p {
    font-size: 32px;
}

.button-buy {
    margin-top: 48px;
}

.button-buy a {
    padding: 8px 24px;
    border-radius: 20px;
    background: hsl(180, 89%, 27%);
    color: white;
    text-decoration: none;
}

.button-buy a:hover {
    background: hsl(180, 87%, 33%);
}

/*页脚*/
.footer {
    padding-top: 64px;
    padding-bottom: 96px;
    width: 100%;
}

.footer-top {
    padding-bottom: 64px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
}

.footer-catalog {
    display: flex;
    gap: 16px;
    margin-top: -48px;
    margin-left: -16px;
    margin-right: -16px;
}

.footer-catalog-item {
    margin-top: 48px;
    margin-left: 16px;
    margin-right: 16px;
}

.footer-catalog-item-list {
    margin-top: 8px;
}

.footer-catalog-item-list li a {
    padding-bottom: 1px;
}

.footer-main-social {
    margin-top: 24px;
    flex: 1 1 0;
}

.footer-social-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
    gap: 6px;
}

.footer-social-list a {
    padding: 6px;
    margin-left: 6px;
    margin-right: 6px;
}

.footer-social-list a svg {
    width: auto;
    height: 20px;
}

.footer-main-legal {
    flex: 1 1 100%;
    margin-top: 24px;
}

.footer-legal-list-1 {
    display: flex;
    gap: 8px;
}

.footer-legal-list-1 {
    max-width: 100%;
    flex-basis: auto;
    margin-left: 8px;
    margin-right: 8px;
}

.footer-copyright {
    margin-top: 24px;
    margin-left: 8px;
}

/*风格化*/
/*全局设置*/
* {
    font-family: sans-serif;
}

body {
    color: #343434;
    background-color: #fff;
}

ol, ul {
    list-style: none;
}

.page_header {
    background: #27282c;
}

.align-items-center-logo-and-name {
    text-decoration: none;
}

.SF-name {
    color: #e4e4e4;
    font-size: 24px;
}

.main-menu-item {
    font-size: 20px;
    font-weight: 400;
    border: none;
    background: none;
    opacity: .6;
    color: #fff;
}

.main-menu-item:hover {
    opacity: 1;
}

/*首页*/

.page-1 {
    background: black url("img/page1-BG.png");
}

.page-1-text-1 {
    color: white;
    font-size: 60px;
    font-weight: bold;
}

.page-1-text-2 {
    color: white;
    font-size: 30px;
    font-weight: bold;
}

.page-2 {
    background: black;
}

.page-2-top-text h2 {
    color: orangered;
}

.page-2-top-text p {
    color: white;
    font-size: 48px;
    font-weight: bold;
}

.page-2-software-card {
    background: rgba(90, 31, 208, .3);
    border-radius: 24px;
}

.page-2-software-card h3 {
    color: white;
    font-size: 24px;
}

.software-card {
    background-color: #2e106a;
    background-image: linear-gradient(130deg, #5a1fd0 10%, rgba(46, 16, 106, 0) 70%);
    background-position: 50% 50%;
    background-size: 300% 300%;
    border-radius: 16px;
    border: 1px solid #7b61ff;
    text-decoration: none;
}

.software-card:hover {
    background-color: #391485;
    background-image: linear-gradient(130deg, #6623eb 10%, rgba(46, 16, 106, 0) 70%);
    background-position: 50% 50%;
    background-size: 300% 300%;
    border-radius: 16px;
    border: 1px solid #7b61ff;
    text-decoration: none;
}

.software-text h4 {
    color: white;
    font-size: 24px;
}

.software-text p {
    color: white;
    font-size: 16px;
}

/*CRIE*/
.second-header-container {
    background: #27282c;
}

.second-header-title-CRIE {
    text-decoration: none;
}

.second-header-title-CRIE span {
    color: white;
    letter-spacing: normal;
    font-size: 20px;
    font-weight: 600;
}

.function-box {
    color: hsla(0, 0%, 100%, .7);
}

.function-box:hover {
    color: white;
}

.function-main span{
    font-size: 100%;
}

.second-header-button-box a {
    text-decoration: none;
    color: white;
}

/*页脚*/
.footer {
    background: #27282c;
}

.footer-catalog-item-title {
    font-size: 12px;
    color: white;
}

.footer-catalog-item-list li a {
    color: hsla(0, 0%, 100%, .7);
    font-size: 12px;
    text-decoration: none;
}

.footer-catalog-item-list li a:hover {
    color: white;
    text-decoration: underline;
}

.footer-social-list a {
    fill: hsla(0, 0%, 100%, .6);
}

.footer-social-list a:hover {
    fill: white;
}

.footer-legal-list-1 {
    letter-spacing: .0045em;
    font-size: 12px;
    line-height: 20px;
}

.footer-legal-list-1 a {
    color: hsla(0, 0%, 100%, .6);
    text-decoration: none;
    font-size: 12px;
}

.footer-legal-list-1 a:hover {
    text-decoration: underline;
}

.footer-copyright span {
    color: hsla(0, 0%, 100%, .5);
    letter-spacing: .0045em;
    font-size: 12px;
}