:root {
    --primary: #0066ff;
    --pink: #ff57a0;
    --white: #ffffff;
    --black: #000000;
    --grey1: #f4f4f4;
    --grey2: #d9d9d9;
    --grey3: #f2f2f2;
    --main-width: 1200px;

    --primary-light: #e6f4ff;
    --primary-dark: #0052cc;
    --success: #52c41a;
    --warning: #faad14;
    --error: #f5222d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Yu Gothic', 'Meiryo', sans-serif;
    /* font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; */
    font-style: normal;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    margin: auto;
}

a:hover {
    color: inherit;
}

.title-bar .logo:hover {
    cursor: pointer;
}

.container {
    container-type: inline-size;
    width: 83%;
    max-width: var(--main-width);
    margin: 0 auto;
}

.container.m {
    width: 63%;
    max-width: 900px;
}

.container.x {
    width: 93%;
    max-width: 1400px;
}

.h50px {
    height: 50px;
}

.as-container {
    container-type: inline-size;
}

.no-show {
    display: none;
}

.fixed {
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* 字体闪烁放大 */
.twinkle span {
    animation: twinkle 1s infinite;
}

@keyframes twinkle {
    0% {}

    50% {
        transform: scale(1.1);
    }

    100% {}
}

/* 按钮 */

button {
    border: 0px;
    cursor: pointer;
}

.btn-darkblue {
    background-color: #00529a;
    color: white;
}

.btn-darkblue:hover {
    background-color: #013563;
    /* box-shadow: 0 4px 8px rgba(0, 82, 154, 0.5); */
}

.btn-blue {
    background-color: #027de5;
    color: white;
}

.btn-blue:hover {
    background-color: #036cc3;
}

.btn-green {
    background-color: #00b86c;
    color: white;
}

.btn-green:hover {
    background-color: #029256;
}

.btn-detail {
    background-color: #00d394;
    color: white;
}

.btn-detail:hover {
    background-color: #03b169;
}

/* 背景色 */
.bgc-lightblue {
    background-color: #00ace7;
    color: white;
}

.bgc-darkblue {
    background-color: #0071c3;
    color: white;
}

/* 面包屑导航 */
.breadcrumb {
    margin-top: 2cqw;
    font-size: max(16px, 1.5cqw);
    color: #64748b;
}

.breadcrumb a {
    color: #0060ff;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 1cqw;
    color: #94a3b8;
}

.breadcrumb .current {
    color: #1e293b;
    font-weight: 600;
}

/* header */
header {
    background-color: var(--white);
    /* background-color: rgba(255, 255, 255, 0.95); */
    z-index: 1000;
    width: 100%;
}

.gray-bar {
    width: 100%;
    height: 5px;
    background-color: #baccde;
}

.blue-bar {
    width: 100%;
    height: 2px;
    background-color: #007de5;
}

.title-bar {
    width: 80%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: min(20px, 1.4cqw);
    padding-bottom: min(10px, 0.7cqw);
    margin: 0 auto;
    /* background-color: rgba(255, 255, 255, 0.5); */
}

.title-bar .toggle_buttons {
    display: none;
}

.title-bar .logo {
    width: 26.2cqw;
    max-width: 300px;
    min-width: 220px;
}

.title-bar .logo img {
    width: 100%;
}

.title-bar .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4cqw;
}

.title-bar .buttons .button-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: max(3px, 0.6cqw);
}

.title-bar .buttons .btn-default {
    width: max(120px, 11cqw);
    background-color: white;
    border: 1px solid #cfcfcf;
    border-radius: 30px;
    color: #494949;
    padding-top: 0.3cqw;
    padding-bottom: 0.3cqw;
    cursor: pointer;
}

.title-bar .buttons .btn-default:hover {
    border-color: #494949;
}

.span-mid {
    display: inline-block;
    padding-left: 1cqw;
    padding-right: 1cqw;
}

.title-bar .buttons .btn-darkblue {
    width: max(20cqw, 180px);
    /* height: 3.57cqw; */
    aspect-ratio: 42/9;
    font-size: max(14px, 1.6cqw);
    font-weight: 600;
    border-radius: 30px;
    letter-spacing: 0.15cqw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
}

.btn-darkblue img {
    vertical-align: middle;
    height: max(15px, 1.7cqw);
}

.navbar {
    width: 83%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: min(20px, 1.4cqw);
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
}

#blue-bar0 {
    display: none;
}

.navbar>.navbar-item:nth-child(8),
.navbar>.navbar-item:nth-child(9) {
    display: none;
}

.no-show {
    display: none;
}

.navbar>.navbar-item {
    height: 100%;
    min-width: 100px;
    position: relative;
    color: #333333;
    text-align: center;
    line-height: clamp(20px, 2.5cqw, 28px);
    padding: 0 clamp(10px, 1.7cqw, 20px);
    font-weight: 700;
    font-size: clamp(14px, 1.6cqw, 18px);
    letter-spacing: 0.1cqw;
    white-space: nowrap;
    border-left: 1px solid #cfcfcf;
}

.navbar>.navbar-item:nth-of-type(7) {
    border-right: 1px solid #cfcfcf;
}

.navbar>.navbar-item:hover {
    cursor: pointer;
    background-color: var(--primary);
    color: var(--white);
}

.navbar>.navbar-item div img {
    vertical-align: middle;
    width: 10px;
}

.navbar>.navbar-item>.first>img:nth-of-type(2),
.navbar>.navbar-item>.first>img:nth-of-type(3),
.navbar>.navbar-item>.link>img:first-of-type {
    display: none;
}

.navbar >.navbar-item:hover .dropdown {
    max-height: 200px;
}

/* 二级导航 */
.dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    position: absolute;
    /* top: clamp(30px, 3cqw, 36px); */
    left: 0;
    padding-top: 2px;
    width: 100%;
    max-height: 0;
    transition: max-height 0.8s ease;
    overflow: hidden;
    z-index: 1000;
}

.auto-width {
    width: auto;
}

.dropdown a {
    width: 100%;
    white-space: nowrap;
    color: #333333;
    background-color: var(--grey1);
    border-radius: 10px;
    /* height: 40px; */
    padding: 0 10px;
    border: 1px solid var(--primary-light);
}

.dropdown a:hover {
    cursor: pointer;
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* 固定按钮 */
#mobileStickyButton {
    display: none;
}

/* 第一种标题 */
.title-type1 {
    width: 100%;
    margin: 0 auto;
    margin-top: 4cqw;
    margin-bottom: 2cqw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* gap: 1cqw; */
    color: #39499d;
    font-size: 2cqw;
    font-weight: 600;
    letter-spacing: 0.17cqw;
    padding-bottom: 0;
}

.title-type1 span {
    font-size: 3cqw;
    font-weight: 100;
    margin-left: 0.8cqw;
    margin-right: 0.8cqw;
}

.title-type1 span.font-big {
    letter-spacing: 0.2cqw;
    font-weight: 600;
    margin-left: 0;
    margin-right: 0;
}

/* 标题（第二种） */
.container>.title {
    color: #394a99;
    font-size: 3.2cqw;
    font-weight: 600;
    letter-spacing: 0.5cqw;
    margin: 0 auto;
    padding-top: 4.5cqw;
    padding-bottom: 3cqw;
    text-align: center;
}

.container .title p:last-child {
    color: #288bcc;
    font-size: 1.2cqw;
    letter-spacing: 0.15cqw;
    margin-top: 0.3cqw;
    transform: scaleY(1.1);
}

/* 3按钮组 */
.buttons-x3 {
    margin-top: 5cqw;
    margin-bottom: 5cqw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 5cqw; */
}

.buttons-x3 button {
    width: 28cqw;
    /* height: 3.57cqw; */
    aspect-ratio: 42/9;
    font-size: 2.2cqw;
    font-weight: 500;
    border-radius: 30px;
    letter-spacing: 0.15cqw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
}

.buttons-x3 button img {
    vertical-align: middle;
    height: 2.4cqw;
}

.margin-top-0 {
    margin-top: 0;
}

/* footer */
footer {
    background-color: #00539b;
    padding-top: 2.5cqw;
    color: white;
}

.grid-2 {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0;
}

.bottom-info-logo {
    width: clamp(280px, 28.5cqw, 342px);
}

.bottom-info-logo img {
    width: 100%;
}

.bottom-info-item.cinfo {
    letter-spacing: 0.1cqw;
}

.bottom-info-item.cinfo .bottom-info-item-title {
    letter-spacing: 0.2cqw;
    padding-top: 0.7cqw;
    padding-bottom: 0.2cqw;
}

.bottom-info-item {
    margin-bottom: 2cqw;
    font-size: 1.5cqw;
    line-height: 2.1cqw;
}

.bottom-info-item-title {
    font-weight: 500;
    font-size: 1.8cqw;
    line-height: 3cqw;
    letter-spacing: 0.1cqw;
}

.bottom-nav p:hover {
    cursor: pointer;
}

.bottom-navbar {
    display: none;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1cqw;
    padding-bottom: 2cqw;
    font-size: 1cqw;
}