/* init.css */
/* 初始化 */

/* 英文字体 */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-3.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium-12.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-14.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 中文字体 */
@font-face {
    font-family: 'Roboto2';
    src: url('../fonts/zh-Bold-700.woff2') format('woff'),
    url('../fonts/zh-Bold-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto2';
    src: url('../fonts/zh-Normal-500.woff2') format('woff'),
    url('../fonts/zh-Normal-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto2';
    src: url('../fonts/zh-Regular.woff2') format('woff'),
    url('../fonts/zh-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* 英文字体 */
html[lang='en'] body {
    font-family: 'Roboto';
}
/* 中文字体 */
html[lang='zh'] body {
    font-family: 'Roboto2';
}


:root {
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color-scheme: light;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
}
body {
    min-width: 1370px;
    font-size: 16px;
}
img {
    display: block;
    width: 100%;
}
.img-height {
    width: auto;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}

input,
textarea {
    -webkit-appearance: none;
    outline: none;
    border: none;
}
:link {
    color: #1581f7;
}
::placeholder {
    color: #97a3b7;
}
button{
    border: none;
}

/* PcPublic.css */
.line-16 {
    line-height: 16px;
}
.line-18 {
    line-height: 18px;
}
.line-20 {
    line-height: 20px;
}
.line-25 {
    line-height: 25px;
}
.line-28 {
    line-height: 28px;
}
.line-40 {
    line-height: 40px;
}

/* 字体 */
.font-12 {
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}
.font-14 {
    font-size: 14px;
}
.font-15 {
    font-size: 15px;
}
.font-16 {
    font-size: 16px;
}
.font-17 {
    font-size: 17px;
}
.font-18 {
    font-size: 18px;
}
.font-20 {
    font-size: 20px;
}
.font-22 {
    font-size: 22px;
}
.font-24 {
    font-size: 24px;
}
.font-26 {
    font-size: 26px;
}
.font-28 {
    font-size: 28px;
}
.font-30 {
    font-size: 30px;
}
.font-32 {
    font-size: 32px;
}
.font-35 {
    font-size: 35px;
}
.font-40 {
    font-size: 40px;
}
/* .pad + 上下 + 左右的 边距规定  */
/* 只有一个数字 则是上下左右相同 */
/* 建议在使用的时候来完善这里 这是一个颗粒性的问题 */

/* 上下边距为0 左右边距增加 */
.pad-0-5 {
    padding: 0 5px;
}
.pad-0-10 {
    padding: 0 10px;
}
.pad-0-15 {
    padding: 0 15px;
}
.pad-0-20 {
    padding: 0 20px;
}
.pad-0-25 {
    padding: 0 25px;
}

/* 上下边距为5 左右边距增加 */
.pad-5-0 {
    padding: 5px 0;
}
.pad-5 {
    padding: 5px;
}
.pad-5-10 {
    padding: 5px 10px;
}
.pad-5-15 {
    padding: 5px 15px;
}
.pad-5-20 {
    padding: 5px 20px;
}

/* 上下边距为10 左右边距增加 */
.pad-7-0 {
    padding: 7px 0;
}
.pad-10-0 {
    padding: 10px 0;
}
.pad-10-5 {
    padding: 10px 5px;
}
.pad-10 {
    padding: 10px;
}
.pad-10-15 {
    padding: 10px 15px;
}
.pad-8-15 {
    padding: 8px 15px;
}
.pad-8-20 {
    padding: 8px 20px;
}
.pad-10-20 {
    padding: 10px 20px;
}

.pad-12-0 {
    padding: 12px 0;
}

/* 上下边距为15 左右边距增加 */
.pad-15-0 {
    padding: 15px 0;
}
.pad-15-5 {
    padding: 15px 5px;
}
.pad-15-10 {
    padding: 15px 10px;
}
.pad-15 {
    padding: 15px;
}
.pad-15-20 {
    padding: 15px 20px;
}

/* 上下边距为20 左右边距增加 */
.pad-20-0 {
    padding: 20px 0;
}
.pad-20-5 {
    padding: 20px 5px;
}
.pad-20-10 {
    padding: 20px 10px;
}
.pad-20-15 {
    padding: 20px 15px;
}
.pad-20 {
    padding: 20px;
}
.pad-20-25 {
    padding: 20px 25px;
}

/* 上下边距为25 左右边距增加  */
.pad-25 {
    padding: 25px;
}

/* 上下边距为30 左右边距增加  */
.pad-30 {
    padding: 30px;
}
.pad-50-0 {
    padding: 50px 0;
}

.pad-50-100 {
    padding: 50px 100px;
}

/* 单方向上 */
/* 上 */
.pad-top-2 {
    padding-top: 2px;
}
.pad-top-5 {
    padding-top: 5px;
}
.pad-top-10 {
    padding-top: 10px;
}
.pad-top-15 {
    padding-top: 15px;
}
.pad-top-20 {
    padding-top: 20px;
}
.pad-top-22 {
    padding-top: 22px;
}
.pad-top-25 {
    padding-top: 25px;
}
.pad-top-30 {
    padding-top: 30px;
}
.pad-top-35 {
    padding-top: 35px;
}
.pad-top-40 {
    padding-top: 40px;
}
.pad-top-50 {
    padding-top: 50px;
}
.pad-top-60 {
    padding-top: 60px;
}
.pad-top-64 {
    padding-top: 64px;
}
.pad-top-80 {
    padding-top: 80px;
}
/* 左 */
.pad-left-5 {
    padding-left: 5px;
}
.pad-left-10 {
    padding-left: 10px;
}
.pad-left-15 {
    padding-left: 15px;
}
.pad-left-20 {
    padding-left: 20px;
}
.pad-left-25 {
    padding-left: 25px;
}
.pad-left-30 {
    padding-left: 30px;
}
.pad-left-40 {
    padding-left: 40px;
}
.pad-left-45 {
    padding-left: 45px;
}
.pad-left-50 {
    padding-left: 50px;
}
.pad-left-60 {
    padding-left: 60px;
}
.pad-left-80 {
    padding-left: 80px;
}
/* 下 */
.pad-bottom-5 {
    padding-bottom: 5px;
}
.pad-bottom-10 {
    padding-bottom: 10px;
}
.pad-bottom-15 {
    padding-bottom: 15px;
}
.pad-bottom-20 {
    padding-bottom: 20px;
}
.pad-bottom-22 {
    padding-bottom: 22px;
}
.pad-bottom-25 {
    padding-bottom: 25px;
}
.pad-bottom-30 {
    padding-bottom: 30px;
}
.pad-bottom-35 {
    padding-bottom: 35px;
}
.pad-bottom-40 {
    padding-bottom: 40px;
}
.pad-bottom-50 {
    padding-bottom: 50px;
}
.pad-bottom-60 {
    padding-bottom: 60px;
}
.pad-bottom-80 {
    padding-bottom: 80px;
}

/* 右 */
.pad-right-5 {
    padding-right: 5px;
}
.pad-right-10 {
    padding-right: 10px;
}
.pad-right-15 {
    padding-right: 15px;
}
.pad-right-20 {
    padding-right: 20px;
}
.pad-right-25 {
    padding-right: 25px;
}
.pad-right-30 {
    padding-right: 30px;
}
.pad-right-40 {
    padding-right: 40px;
}
.pad-right-60 {
    padding-right: 60px;
}
.pad-right-80 {
    padding-right: 80px;
}

/* mar和pad大致相同 多了auto */
.mar-0-auto {
    margin: 0 auto;
}
.mar-0-5 {
    margin: 0 5px;
}
.mar-0-10 {
    margin: 0 10px;
}
.mar-0-15 {
    margin: 0 15px;
}
.mar-0-20 {
    margin: 0 20px;
}

.mar-5-auto {
    margin: 5px auto;
}
.mar-5-0 {
    margin: 5px 0;
}
.mar-5 {
    margin: 5px;
}
.mar-5-10 {
    margin: 5px 10px;
}
.mar-5-15 {
    margin: 5px 15px;
}
.mar-5-20 {
    margin: 5px 20px;
}

.mar-10-auto {
    margin: 10px auto;
}
.mar-10-0 {
    margin: 10px 0;
}
.mar-10-5 {
    margin: 10px 5px;
}
.mar-10 {
    margin: 10px;
}
.mar-10-15 {
    margin: 10px 15px;
}
.mar-10-20 {
    margin: 10px 20px;
}

.mar-15-auto {
    margin: 15px auto;
}
.mar-15-0 {
    margin: 15px 0;
}
.mar-15-5 {
    margin: 15px 5px;
}
.mar-15-10 {
    margin: 15px 10px;
}
.mar-15 {
    margin: 15px;
}
.mar-15-20 {
    margin: 15px 20px;
}

.mar-20-auto {
    margin: 20px auto;
}
.mar-20-0 {
    margin: 20px 0;
}
.mar-20-5 {
    margin: 20px 5px;
}
.mar-20-10 {
    margin: 20px 10px;
}
.mar-20-15 {
    margin: 20px 15px;
}
.mar-20 {
    margin: 20px;
}

/* 上 */
.mar-top-auto {
    margin-top: auto;
}
.mar-top-5 {
    margin-top: 5px;
}
.mar-top-10 {
    margin-top: 10px;
}
.mar-top-12 {
    margin-top: 12px;
}
.mar-top-15 {
    margin-top: 15px;
}
.mar-top-20 {
    margin-top: 20px;
}
.mar-top-25 {
    margin-top: 25px;
}
.mar-top-30 {
    margin-top: 30px;
}
.mar-top-32 {
    margin-top: 32px;
}
.mar-top-40 {
    margin-top: 40px;
}
.mar-top-60 {
    margin-top: 60px;
}

/* 左 */
.mar-left-auto {
    margin-left: auto;
}
.mar-left-4 {
    margin-left: 4px;
}
.mar-left-8 {
    margin-left: 8px;
}
.mar-left-10 {
    margin-left: 10px;
}
.mar-left-12 {
    margin-left: 12px;
}
.mar-left-15 {
    margin-left: 15px;
}
.mar-left-20 {
    margin-left: 20px;
}
.mar-left-25 {
    margin-left: 25px;
}
.mar-left-30 {
    margin-left: 30px;
}
.mar-left-35 {
    margin-left: 35px;
}
.mar-left-40 {
    margin-left: 40px;
}
.mar-left-45 {
    margin-left: 45px;
}
.mar-left-50 {
    margin-left: 50px;
}
.mar-left-100 {
    margin-left: 100px;
}

/* 右 */
.mar-right-0 {
    margin-right: auto;
}
.mar-right-5 {
    margin-right: 5px;
}
.mar-right-10 {
    margin-right: 10px;
}
.mar-right-15 {
    margin-right: 15px;
}
.mar-right-20 {
    margin-right: 20px;
}
.mar-right-25 {
    margin-right: 25px;
}
.mar-right-30 {
    margin-right: 30px;
}
.mar-right-38 {
    margin-right: 38px;
}
.mar-right-40 {
    margin-right: 40px;
}
.mar-right-45 {
    margin-right: 45px;
}
.mar-right-48 {
    margin-right: 48px;
}
.mar-right-60 {
    margin-right: 60px;
}
.mar-right-100 {
    margin-right: 100px;
}

/* 下 */
.mar-bottom-auto {
    margin-bottom: auto;
}
.mar-bottom-4 {
    margin-bottom: 4px;
}
.mar-bottom-8 {
    margin-bottom: 8px;
}
.mar-bottom-10 {
    margin-bottom: 10px;
}
.mar-bottom-15 {
    margin-bottom: 15px;
}
.mar-bottom-20 {
    margin-bottom: 20px;
}
.mar-bottom-25 {
    margin-bottom: 25px;
}
.mar-bottom-30 {
    margin-bottom: 30px;
}
.mar-bottom-40 {
    margin-bottom: 40px;
}
.mar-bottom-45 {
    margin-bottom: 45px;
}

.radius-3 {
    border-radius: 3px;
}
.radius-4 {
    border-radius: 4px;
}
.radius-6 {
    border-radius: 6px;
}
.radius-8 {
    border-radius: 8px;
}
.radius-10 {
    border-radius: 10px;
}
.radius-12 {
    border-radius: 12px;
}
.radius-8-8-0-0 {
    border-radius: 8px 8px 0 0;
}
.radius-0-0-8-8 {
    border-radius: 0 0 8px 8px;
}
.radius-8-0-0-8 {
    border-radius: 8px 0 0 8px;
}
.radius-12-12-0-0 {
    border-radius: 12px 12px 0 0;
}
.radius-0-0-12-12 {
    border-radius: 0 0 12px 12px;
}
.radius-12-0-0-12 {
    border-radius: 12px 0 0 12px;
}
.radius-0-12-12-0 {
    border-radius: 0 12px  12px 0;
}


.height-1 {
    height: 0.05vw;
}
.height-50 {
    height: 50px;
}
.height-100 {
    height: 100px;
}

.width-1 {
    width: 0.05vw;
}
.width-10 {
    width: 10px;
}
.width-100 {
    width: 100px;
}
.width-1000 {
    width: 1000px;
}

/* project.css */
/* 这个项目公共的样式 */

/* 阅读红点 */
.read-bot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff6d6d;
    position: absolute;
    top: 4px;
    right: 4px;
}

.z-index-1009 {
    z-index: 1009;
}

/* 垂直线 */
.vertical-F0F {
    width: 1px;
    background-color: #f0f0f0;
}

/* 水平线 */
.horizontal-F0F {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.new-arrow-left {
    left: -54px;
}
.new-arrow-right {
    right: -54px;
}

.new-shadow:hover {
    box-shadow: 0 0 20px 0 rgba(37, 161, 239, 0.15);
}

.gap-24-40 {
    gap: 40px 24px;
}
.gap-24 {
    gap: 24px;
}
.gap-15 {
    gap: 15px;
}
.gap-25 {
    gap: 25px;
}
.gap-32 {
    gap: 32px;
}
.gap-36 {
    gap: 36px;
}
.gap-40-48 {
    gap: 40px 48px;
}
.gap-20-80 {
    gap: 20px 80px;
}
.gap-30-40 {
    gap: 30px 40px;
}

.job-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_jobBanner_Cn.png');
}
.job-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_jobBanner_Cn.png');
}

.about-us-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_adouts_Cn.png');
}
.about-us-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_adouts_En.png');
}

.doctor-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_yltd_Cn.png');
}
.doctor-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_yltd_En.png');
}

.vaccine-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_vacBanner_Cn.png');
}
.vaccine-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/PC_vacBanner_En.png');
}
.therapy-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_therapy_banner_zh.png');
}
.therapy-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_therapy_banner_en.png');
}
.patient-story-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_patient_story_banner_zh.png?x-oss-process=image/format,avif');
}
.patient-story-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_patient_story_banner_en.png?x-oss-process=image/format,avif');
}
.book-appointment-banner-zh {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_book_appointment_banner_zh.png?x-oss-process=image/format,avif');
}
.book-appointment-banner-en {
    background-image: url('https://sinoapp-international.oss-ap-southeast-1.aliyuncs.com/website_Singapore/website_book_appointment_banner_en.png?x-oss-process=image/format,avif');
}

.grayscale-100-p {
    transition: all 0.5s;
    filter: grayscale(100%);
}
.base-contact:hover .grayscale-100-p,
.feature-card-box:hover .grayscale-100-p {
    transform: scale(1.2);
    filter: grayscale(0);
}

.detail-normal img {
    width: auto;
    max-width: 1200px;
}

.sup-ul .border-bottom-D8D:last-child {
    border-bottom: none;
}

.card-doc-img {
    background-position: center 10px;
    background-size: 80%;
}

.bg-10-cover {
    background-position: center 10px;
    background-size: cover;
}

.bg-20-cover {
    background-position: center 20px;
    background-size: cover;
}

.list-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #000c17;
}

.doctor-search {
    transition: all 0.3s;
    position: absolute;
    width: 100%;
    box-shadow: 0px 0px 20px 0px rgba(37, 161, 239, 0.15);
}
.doctor-search:hover {
    box-shadow: 0px 0px 30px 5px rgba(37, 161, 239, 0.15);
}
.top--30 {
    top: -30px;
}
.top-500 {
    top: 500px;
}

.letter-1 {
    letter-spacing: 1px;
}

/* r20 l20 表示左右 t20 b20 表示上下 */
.absolute-r20-b20 {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.absolute-l30-t30 {
    position: absolute;
    top: 30px;
    left: 30px;
}

.bottom-20 {
    bottom: 20px;
}
.left-8 {
    left: 8px;
}
.left-10 {
    left: 10px;
}
.left-13 {
    left: 13px;
}
.left-20 {
    left: 20px;
}

.left-30 {
    left: 30px;
}

.right-4 {
    right: 4px;
}
.right-8 {
    right: 8px;
}
.right-15 {
    right: 15px;
}
.right-20 {
    right: 20px;
}
.right-30 {
    right: 30px;
}

.height-6 {
    height: 6px;
}
.height-12 {
    height: 12px;
}
.height-24 {
    height: 24px;
}
.height-28 {
    height: 28px;
}
.height-44 {
    height: 44px;
}
.height-50 {
    height: 50px;
}
.height-56 {
    height: 56px;
}
.height-60 {
    height: 60px;
}
.height-68 {
    height: 68px;
}
.height-80 {
    height: 80px;
}
.height-100 {
    height: 100px;
}
.height-104 {
    height: 104px;
}
.height-165 {
    height: 165px;
}
.height-187 {
    height: 187px;
}
.height-200 {
    height: 200px;
}
.height-210 {
    height: 210px;
}
.height-217 {
    height: 217px;
}
.height-230 {
    height: 230px;
}
.height-235 {
    height: 235px;
}
.height-250 {
    height: 250px;
}
.height-282 {
    height: 282px;
}
.height-300 {
    height: 300px;
}
.height-380 {
    height: 380px;
}
.height-405 {
    height: 405px;
}
.height-420 {
    height: 420px;
}
.height-460 {
    height: 460px;
}
.height-480 {
    height: 480px;
}
.height-510 {
    height: 510px;
}
.height-580 {
    height: 580px;
}

.width-1 {
    width: 1px;
}
.width-8 {
    width: 8px;
}
.width-10 {
    width: 10px;
}
.width-12 {
    width: 12px;
}
.width-14 {
    width: 14px;
}
.width-16 {
    width: 16px;
}
.width-18 {
    width: 18px;
}
.width-21 {
    width: 21px;
}
.width-24 {
    width: 24px;
}
.width-28 {
    width: 28px;
}
.width-30 {
    width: 30px;
}
.width-35 {
    width: 35px;
}
.width-40 {
    width: 40px;
}
.width-44 {
    width: 44px;
}
.width-50 {
    width: 50px;
}
.width-60 {
    width: 60px;
}
.width-68 {
    width: 68px;
}
.width-80 {
    width: 80px;
}
.width-90 {
    width: 90px;
}
.width-100 {
    width: 100px;
}
.width-115 {
    width: 115px;
}

.width-120 {
    width: 120px;
}
.width-123 {
    width: 123px;
}
.width-148 {
    width: 148px;
}
.width-150 {
    width: 150px;
}
.width-152 {
    width: 152px;
}
.width-180 {
    width: 180px;
}
.width-200 {
    width: 200px;
}
.width-223 {
    width: 223px;
}
.width-220 {
    width: 220px;
}
.width-240 {
    width: 240px;
}
.width-264 {
    width: 264px;
}
.width-266 {
    width: 266px;
}
.width-280 {
    width: 280px;
}
.width-300 {
    width: 300px;
}
.width-320 {
    width: 320px;
}
.width-340 {
    width: 340px;
}
.width-356 {
    width: 356px;
}
.width-376 {
    width: 376px;
}
.width-400 {
    width: 400px;
}
.width-412 {
    width: 412px;
}
.width-420 {
    width: 420px;
}
.width-442 {
    width: 442px;
}
.width-450 {
    width: 450px;
}
.width-500 {
    width: 500px;
}
.width-548 {
    width: 548px;
}

.width-580 {
    width: 580px;
}
.width-584 {
    width: 584px;
}
.width-588 {
    width: 588px;
}
.width-614 {
    width: 614px;
}
.width-700 {
    width: 700px;
}
.width-750 {
    width: 750px;
}
.width-800 {
    width: 800px;
}
.width-873 {
    width: 873px;
}
.width-860 {
    width: 860px;
}
.width-920 {
    width: 920px;
}
.width-950 {
    width: 950px;
}
.width-975 {
    width: 975px;
}
.width-1000 {
    width: 1000px;
}
.width-1090 {
    width: 1090px;
}
.width-1200 {
    width: 1200px;
}
.width-1240 {
    width: 1240px;
}
.width-1250 {
    width: 1250px;
}
.width-1440 {
    width: 1440px;
}

.min-width-75 {
    min-width: 75px;
}
.min-width-100 {
    min-width: 100px;
}
.min-width-290 {
    min-width: 290px;
}
.min-width-300 {
    min-width: 300px;
}

.min-height-48 {
    min-height: 48px;
}

.min-height-64 {
    min-height: 64px;
}

.min-height-68 {
    min-height: 68px;
}
.min-height-95 {
    min-height: 95px;
}
.min-height-160 {
    min-height: 160px;
}
.min-height-220 {
    min-height: 220px;
}

.min-height-400 {
    min-height: 400px;
}
.max-width-190 {
    max-width: 190px;
}
.max-width-210 {
    max-width: 210px;
}
.max-width-230 {
    max-width: 230px;
}
.max-width-290 {
    max-width: 290px;
}

.max-height-48 {
    max-height: 48px;
}

.max-height-400 {
    max-height: 400px;
}

.box-shadow-normal {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.pad-left-130 {
    padding-left: 130px;
}
.mar-left-80 {
    margin-left: 80px;
}

.pad-50-77 {
    padding: 50px 0 50px 77px;
}

.ant-modal-header {
    border-radius: 8px 8px 0 0 !important;
}
.ant-modal-content {
    border-radius: 8px !important;
}
.ant-form-item {
    margin-bottom: 0;
}

/* 首页卡片样式 */
.article-modal-form-card {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 30px 40px;
}
.article-modal-submit-btn {
    border-radius: 10px;
    height: 48px;
    font-size: 16px;
    background: #1B3564;
    border-color: #1B3564;
}
.article-modal-submit-btn:hover {
    background: #264785;
    border-color: #264785;
}



.the-menu-children {
    display: none;
    left: 0;
    background-color: #ffffff;
}
.the-menu-box:last-child .the-menu-children {
    left: auto;
    right: 0;
}
.the-menu-box:hover .the-menu-children {
    display: block;
}
.the-menu-children-item:hover {
    color: #115fa3;
    background-color: #f5f7f9;
}

.the-menu {
    bottom: 0;
    height: 20%;
    z-index: -1;
    box-shadow: 0 3px 10px 0 rgba(109, 144, 192, 0.15);
}

.search {
    padding: 4px 20px;
    background-image: linear-gradient(270deg, #1d64c8 0%, #60a2ff 100%);
}

/* public.css */
/* 复用的样式 */
/* 全局公共的css */
html {
    --theme: #1d64c8;
}

/* color + 颜色 */
/* 以下的颜色统一采取数字+大写 */
.color-2D3 {
    color: #2d3139;
}
.color-242 {
    color: #242f43;
}
.color-2A3 {
    color: #2a3548;
}
.color-3C4 {
    color: #3c485c;
}
.color-A2A {
    color: #A2A4A8;
}
.color-115 {
    color: #115fa3;
}
.color-171 {
    color: #171C25;
}
.color-FFF {
    color: #ffffff;
}
.color-747 {
    color: #74777C;
}
.color-97A {
    color: #97a3b7;
}
.color-A5A {
    color: #a5a5a5;
}
.color-6E6 {
    color: #6e6f73;
}
.color-666A {
    color: #666a71;
}
.color-8E9 {
    color: #8e95a2;
}
.color-788 {
    color: #78808d;
}
.color-6D7 {
    color: #6d747d;
}
.color-626 {
    color: #626262;
}
.color-BAB {
    color: #bababa;
}
.color-1F2 {
    color: #1f2936;
}
.color-000 {
    color: #000000;
}
.color-869 {
    color: #86909c;
}
.color-3B8 {
    color: #3b81ef;
}
.color-theme {
    color: var(--theme);
}
.color-004 {
    color: #00499f;
}
.color-909 {
    color: #909090;
}
.color-F1B {
    color: #f1b579;
}

/* line + 行高 */
.line-15-p {
    line-height: 1.5;
}
.line-10-p {
    line-height: 1;
}
.line-11-p {
    line-height: 1.1;
}
.line-12-p {
    line-height: 1.2;
}
.line-14-p {
    line-height: 1.4;
}
.line-20-p {
    line-height: 2;
}
/* 渐变背景  */
/* linear-gradient + 颜色 */
.linear-gradient-F0A {
    background: linear-gradient(349deg, #f0af47 0%, #ffc568 100%);
}
/* 纯色背景 bg + 颜色 */
/* 不推荐写background 会覆盖其他的属性 */
.bg-68A {
    background-color: #68af19;
}
.bg-EDF {
    background-color: #edf2fa;
}
.bg-E0E {
    background-color: rgba(224, 232, 239, 0.15);
}
.bg-115 {
    background-color: #115FA3;
}
.bg-F6F {
    background-color: #f6f8fc;
}
.bg-FFF-02 {
    background-color: rgba(255, 255, 255, 0.2);
}
.bg-4D5 {
    background-color: #4d5868;
}
.bg-FFF {
    background-color: #fff;
}
.bg-ECF {
    background-color: #ecf0f7;
}
.bg-FAF {
    background-color: #fafbfd;
}
.bg-F8F {
    background-color: #f8fafe;
}
.bg-none {
    background-color: transparent;
}
.bg-theme {
    background-color: var(--theme);
}
.bg-00A {
    background-color: #00acec;
}
.bg-1D6 {
    background-color: #1d64c8;
}
.bg-1A3 {
    background-color: #1a327c;
}
.bg-0E4-07 {
    background-color: rgba(14, 76, 110, 0.74);
}
.bg-CCD {
    background-color: #ccdbf2;
}
.bg-BFE {
    background-color: #f7fbfe;
}
.bg-F7F {
    background-color: #f7fcfa;
}
.bg-FEF {
    background-color: #fefdf9;
}
.bg-202 {
    background-color: #202d42;
}
.bg-F5F {
    background-color: #f5f5f8;
}
.bg-862 {
    background-color: #F8F6F2;
}

.weight-100 {
    font-weight: 100;
}
.weight-400 {
    font-weight: 400;
}
.weight-500 {
    font-weight: 500;
}
/* 不要600了指定为700  切莫更改 */
.weight-600 {
    font-weight: 700;
}
.weight-700 {
    font-weight: 700;
}

/* flex-主轴-测轴 */
.flex {
    display: flex;
}
/* 主轴 end */
.flex-end {
    display: flex;
    justify-content: flex-end;
}
.flex-end-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* 主轴 between */
.flex-between {
    display: flex;
    justify-content: space-between;
}
.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 主轴 center */
.flex-center {
    display: flex;
    justify-content: center;
}
.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-end {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
/* 主轴 start  */
.flex-start {
    display: flex;
    justify-content: flex-start;
}
.flex-start-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-start-end {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
/* 换行 */
.wrap {
    flex-wrap: wrap;
}
.column {
    flex-direction: column;
}
.flex-1 {
    flex: 1;
}
.grow {
    flex-grow: 1;
}
.shrink {
    flex-shrink: 0;
}
.basis {
    flex-basis: 0;
}

.self-start {
    align-self: flex-start;
}
.self-center {
    align-self: center;
}
.self-end {
    align-self: end;
}

.block {
    display: block;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* radius-50-p  -p表示百分比 没有-p表示固定尺寸 */
.radius-100 {
    border-radius: 100px;
}
.radius-50-p {
    border-radius: 50%;
}

/* 定位 */
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}

.fixed {
    position: fixed;
}

/* 单方向 */
.absolute-center-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.absolute-center-top {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/* 绝对定位居中 */
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.absolute {
    position: absolute;
}
.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}
.left-100-p {
    left: 100%;
}
.right-0 {
    right: 0;
}
.top-0 {
    top: 0;
}
.top-100-p {
    top: 100%;
}

/* 遮罩 */
.mask-fixed {
    z-index: 5;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.mask-absolute {
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 单行文本 */
.one-txt-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ect-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
.ect-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.sizing {
    box-sizing: border-box;
}
.sizing-w {
    width: 100%;
    box-sizing: border-box;
}
.sizing-h {
    height: 100%;
    box-sizing: border-box;
}
.sizing-w-h {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* border + 方向 + 颜色  */
/* 方向没有则是四个方向 */
.border-D5D {
    border: 1px solid #d5d8dc;
}
.border-top-D5D {
    border-top: 1px solid #d5d8dc;
}
.border-bottom-D8D {
    border-bottom: 1px solid #d8d8d8;
}
.border-D8D {
    border: 1px solid #d8dce6;
}
.border-E8E {
    border: 1px solid #e8ebf2;
}
.border-457 {
    border: 1px solid #457cd9;
}
.border-97a {
    border: 1px solid #97a3b7;
}
.border-theme {
    border: 1px solid var(--theme);
}
.border-189 {
    border: 1px solid #1890ff;
}
.border-bottom-189 {
    border-bottom: 1px solid #1890ff;
}
.border-48A {
    border: 1px solid #48a6fc;
}
.border-3B8 {
    border: 1px solid #3b81ef;
}
.border-DFE {
    border: 1px solid #dfe0e4;
}
.border-EDE {
    border: 1px solid #ededed;
}
.border-CEC {
    border: 1px solid #cecece;
}
.border-top-F0F {
    border-top: 1px solid #eeeeee;
}
.border-top-EBE {
    border-top: 1px solid #EBEDF0;
}
.border-left-F0F {
    border-left: 1px solid #eeeeee;
}
.border-right-F0F {
    border-right: 1px solid #eeeeee;
}
.border-bottom-F0F {
    border-bottom: 1px solid #eeeeee;
}
.border-none {
    border: none;
}
.outline-none {
    outline: none;
}

.cursor {
    cursor: pointer;
}

/* 高 -p表示百分比 */
.height-50-p {
    height: 50%;
}
.height-100-p {
    height: 100%;
}

/* 宽 */
.width-25-p {
    width: 25%;
}
.width-33-p {
    width: 33.333%;
}
.width-50-p {
    width: 50%;
}
.width-80-p {
    width: 80%;
}
.width-100-p {
    width: 100%;
}

/*  */
.auto {
    overflow: auto;
}
.auto-x {
    overflow-x: auto;
}
.auto-y {
    overflow-y: auto;
}
.hidden {
    overflow: hidden;
}
.opacity-0 {
    opacity: 0;
}
.opacity-5 {
    opacity: 0.5;
}
.opacity-6 {
    opacity: 0.6;
}
.opacity-8 {
    opacity: 0.8;
}

.z-index-2 {
    z-index: 2;
}
.z-index-100 {
    z-index: 100;
}
.z-index-top {
    z-index: 10000;
}
.z-index-masker {
    z-index: 10002;
}

.all-3 {
    transition: all 0.3s;
}

.inline-block {
    display: inline-block;
}

.bg-center-100-p {
    background-position: center;
    background-size: 100%;
}

.bg-center-cover {
    background-position: center;
    background-size: cover;
}
.bg-top-100-p {
    background-position: top center;
    background-size: 100%;
}
.bg-top-cover {
    background-position: top center;
    background-size: cover;
}

.no-wrap {
    white-space: nowrap;
}

.hover-color-theme:hover {
    color: var(--theme);
}

.hover-bg-theme:hover {
    background-color: var(--theme);
}

.clear {
    clear: both;
}

.custom-bg-bottom {
    background-position: center 30px;
    background-size: auto 90%;
}

.custom-bg-t {
    background-position: center bottom;
    background-size: 80%;
}