@font-face {
    font-family: 'MyFont';
    font-display: swap;
    font-weight: 700;
    src: local('MyFont'),
    url('title.woff2') format('woff2');
}

@font-face {
    font-family: 'font';
    font-display: swap;
    font-weight: 500;
    src: local('font'),
    url('html.woff2') format('woff2');
}

body {
    font-family: font, sans-serif;
    line-height: 1;
}

/* 灰色背景 */
.bg_gray {
    background-color: rgb(239, 242, 244);
}

/* 黄色背景 */
.bg_yellow {
    background-color: rgb(255, 209, 0);
}

/* 浅蓝色背景 */
.bg_light_blue {
    background-color: rgb(192, 225, 244);
}

/* 白色背景 */
.bg_white {
    background-color: #FFF;
}

.bg_blue{
    background-color: #2b467b;
}

/* 蓝色文字颜色 */
.color_blue {
    color: #2b467b;
}

/* 白色文字颜色 */
.color_white {
    color: #FFF;
}

/* 浅色渐变背景 */
.bg_light {
    background: linear-gradient(to right, #00bfb3, #43b02a);
}

/* 浅绿黄渐变背景 */
.bg_light_green_yellow {
    background: linear-gradient(to right, #5ba50e, #dfd51c);
}

/* 浅蓝浅蓝渐变背景 */
.bg_light_blue_lightblue {
    background: linear-gradient(to right, #2b467b, #00a3e0);
}

/* 浅蓝紫色渐变背景 */
.bg_light_blue_purple {
    background: linear-gradient(to right, #4b31d1, #b836f2);
}

.bg_linear_cyan_green {
    background: linear-gradient(45deg, #00bfb3, #43b02a);
}

/* 地图背景 */
.bg_map {
    background-image: url("/static/image/tmp/map.png");
    background-size: 100% 100%;
    height: 1000px;
}


/* 右侧图片，顶部边距-350像素 */
.right_img {
    float: right;
    margin-top: -350px;
}

/* 视图标题 */
.view_title {
    font-size: 80px;
    font-weight: bold;
    margin-left: -20px;
}

/* 二级标题 */
.h2 {
    font-size: 36px;
}

/* 四级标题 */
.h4 {
    font-size: 28px;
}

/* 相关标题 */
.related_title {
    font-size: 48px;
    color: #FFF;
    line-height: 48px;
    width: 90%;
}

/* 底部边线 */
.div_bottom_line {
    border-bottom: 1px solid rgb(171, 168, 221);
}

.bottom_yellow {
    border-bottom: 3px solid rgb(255 209 0);
}

/* 右边线 */
.right_line {
    border-right: 1px solid rgb(213, 212, 216);
}

/* 图片自适应宽度 */
.img_width_auto {
    margin: 0 auto;
}

/* 图片自适应宽度，图片样式 */
.img_width_auto img {
    max-width: 100%;
    height: 500px;
    max-height: 500px;
    font-size: 0;
    object-fit: cover;
}

/* 按钮盒子 */
.button_box {
    height: 54px;
    background-color: white;
    color: #1297e4;
    line-height: 30px;
    padding: 12px;
    font-weight: bold;
}

/* 搜索输入框 */
.input_search_box {
    border-radius: 50px;
    width: 75%;
    border: 1px solid rgb(171, 168, 221);
    padding: 10px 25px;
    line-height: 30px;
}

/* 搜索按钮盒子 */
.search_button_box {
    background-color: #1297e4;
    color: white;
    font-size: 20px;
    line-height: 38px;
    padding: 7px;
    font-weight: bold;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .button_box{
        font-size: 16px;
        padding: 3px 5px;
        white-space: nowrap;
    }
    .input_search_box{
        width: 60%;
    }
}

/* 蓝色底部 */
.blue_bottom {
    background-color: #1297e4;
    padding: 10px 20px;
    color: white;
    font-size: 20px;
}

/* 新闻订阅盒子 */
.sub_new_box {
    font-size: 14px;
    padding: 8px 15px;
    margin: 0 5px;
    color: #2b467b;
    background-color: rgba(219, 218, 241, .4);
    border-radius: 30px;
}

/* 下载按钮 */
.download_button {
    background-color: #eff2f4;
    padding: 0 15px;
}

/* 下载按钮悬停效果 */
.download_button:hover {
    cursor: pointer;
}

/* 新容器 */
.new_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 子标题 */
.sub_title {
    font-size: 20px;
    color: #FFF;
    margin-top: 15px;
}

/* 子内容 */
.sub_content {
    font-size: 16px;
    color: #FFF;
    margin-top: 15px;
}

/* 盒子内容 */
.box_content {
    width: 90%;
}

/* 选择框 */
.select_box {
    width: 100%;
    padding: 10px 20px;
    border-radius: 10px;
}


/* 右边界线 */
.border_right {
    border-right: 1px solid rgb(128 127 139);
}

/* 页码选择 */
.page_select {
    border-bottom: 5px solid rgb(255, 209, 0);
}

/* 图片自适应宽度并居中 */
.img_width_auto {
    margin: 0 auto;
}

/* 工作 */
.job {
    font-size: 35px;
}

.job .input {
    float: left;
}

.job .input input {
    color: black;
    padding-left: 30px;
    border-radius: 30px 0 0 30px;
    line-height: 1.5;
}

.job .input input::placeholder {
    font-size: 25px;
    line-height: 40px;
}

.job .button {
    float: left;
}

.job .button img {
    width: 30px;
    height: 30px;
}

.job .button button {
    width: 52.5px;
    height: 52.5px;
    background-color: white;
    border-radius: 0 30px 30px 0;
}

.swiper_box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.btn_blue_box {
    width: 120px;
    padding: 2px 10px;
    text-align: center;
    background-color: #2b467b;
    color: white;
    font-size: 16px;
    font-weight: bold;
}