/* 此文件为hmi3.5的样式规范
 {
    8295前排CSD/CX1E靠背屏
    '2560*1600': 'res1',
    2560*1440: res1,
    '2880*1800':'res6',
    '3200*2000':'res7',

    BX1E/DC1E/EF1E-6S3.0
    '1920*1080': 'res2',
    '1920*1200': 'res2Repeat',

    EF1E-6S-TV/EF1E-A1后排/EF1E-4S-TV
    '1920*1080_tv': 'res3',
    '2880*1620_tv': 'res4'
    '3840*2160_tv': 'res5',
} */

:root {
    /* 字号/行高大小 */
    --size40: 40px;
    --size60: 60px;
    --size36: 36px;
    --size54: 54px;
    --size28: 28px;
    --size48: 48px;
    --size24: 24px;
    --size32: 32px;
    --size72: 72px;
    --size49: 49.536px;
    --size74: 74.304px;
    --size40: 40.5px;
    --size45: 45px;
    --size30: 30px;
    --size60: 60.75px;
    --size67: 67.5px;
    --size33: 33.32px;
    --size50: 75px;
    --size56: 56.25px;
    --padding80: 80px;
    --padding64: 64px;
    --padding60: 60px;
    --padding90: 90px;
    --padding66: 66.64px;
    /* 白天模式背景色 */
    --res1DayBg: #F2F3F4;
    --res2DayBg: #F7F8F9;
    /* 白天模式正文颜色#383A3D.08 */
    --dayContentColor: rgba(56, 58, 61, 0.8);
    --res2DayContentColor: #383A3D;
    /* 白天模式a链接文案颜色 */
    --dayLinkColor: #F88650;
    /* 白天模式a链接按压背景色#4FA9FD.04 */
    --dayLinkActiveBg: rgba(79, 169, 253, 0.4);
    /* a链接下有span标签，按压效果失效，增加span的按压效果 */
    --daySpanLinkActiveBg: rgba(79, 169, 253, 0);
    /* 白天模式表格边框颜色#383A3D.04 */
    --dayTableBorderColor: rgba(56, 58, 61, 0.4);
    /*  黑夜模式背景色 */
    --res1NightBg: #151619;
    --res2NightBg: #28282E;
    --res3NightBg: #1C1D21;
    /* 2560*1600黑夜模式超链接文案颜色 */
    --resTvNightLinkColor: #C86741;
    --res2NightLinkColor: #BE7153;
    /* 黑夜模式超链接按压背景色#1181D5.04 */
    --nightLinkActiveBg: rgba(17, 129, 213, 0.4);
    --nightSpanLinkActiveBg: rgba(17, 129, 213, 0);
    /* 黑夜模式8295文案颜色85898C.08 */
    --res1NightContentColor: rgba(133, 137, 140, 0.8);
    /* 黑夜模式表格边框颜色#B4B9BE.08 */
    --res3NightContentColor: rgba(180, 185, 190, 0.8);
    --res2NightContentColor: #E1E3E5;
    --res2RepeatNightContentColor: #B4B9BE;
    /* 黑夜模式表格边框颜色#B4B9BE.04 */
    --nightTableBorderColor: rgba(180, 185, 190, 0.4);
    /* 黑夜模式表格边框颜色#E1E3E5.04 */
    --res2NightTableBorderColor: rgba(225, 227, 229, 0.4);
    /* 黑夜模式8295表格边框颜色 #85898C.04*/
    --res1NightTableBorderColor: rgba(133, 137, 140, 0.4);
    /* 黑夜模式8295超链接颜色 */
    --res1NightLinkColor: #A65B3A;
    /* 黑夜模式8295超链接按压背景 */
    --res1NightLinkActiveBg: rgba(18, 120, 196, 0.4);
    --res1SpanNightLinkActiveBg: rgba(18, 120, 196, 0);
}

/* 文字方向设置为右序 */
.rtl-direction {
    direction: rtl;
}

p[style*="text-indent"] {
    text-indent: 2em !important;
}

/*
开始，阿拉伯语为右序，需排除阿拉伯的协议 
 1.处理h5文案设置两端对齐，导致url展示异常的情况，参考富文本20240617_0001
 2.U标签不换行展示
 3.英文文案换行不能分隔单词
 */
body,
table {
    word-wrap: break-word;
    /* 英文单词不换行 */
    word-break: break-word;
    /* word-break: break-all; */
}

p[style*="text-align: justify"] span:not(body.rtl-direction span) {
    /* display: inline-block; */
    text-align: left;
}

span.has-u,
span.inline-span {
    display: inline !important;
}

.normal-text {
    text-align: left !important;
}

/*
 结束 
 */

/* blockquote 样式重置 */
blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background: #f1f1f1;
}

body,
p,
h1,
h2,
h3,
ul,
ol,
li {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong {
    font-weight: normal;
}

a,
a span,
.day a span,
.day.res5 a span,
.day.res1 a span,
.day.res2 a span,
.day.res2Repeat a span,
.day.res3 a span,
.day.res4 a span,
.day.res6 a span,
.day.res7 a span,
.day.res8 a span {
    color: var(--dayLinkColor) !important;
    text-decoration: none;
}

a u {
    text-decoration: none !important;
}

/* ef1e-tv预留边距 */
.res3 a,
.res5 a,
.res4 a {
    padding: 0 4px;
}

a:focus-visible {
    outline: none !important;
    padding: 0;
}

/* ef1e-tv落焦增加边框 */
.day.res3 a:focus-visible,
.day.res5 a:focus-visible,
.day.res4 a:focus-visible {
    border: 4px solid var(--dayLinkColor);
}

/* 解决a标签行高超出导致落焦后上下边框不展示的问题 */

.res3 a {
    line-height: 64px !important;
}

.res4 a,
.res5 a {
    line-height: 74px !important;
}

.day.res3 a:focus-visible span,
.day.res5 a:focus-visible span,
.day.res4 a:focus-visible span {
    border-top: 4px solid var(--dayLinkColor);
    border-bottom: 4px solid var(--dayLinkColor);
}

.day.res3 a:focus-visible span {
    line-height: 45px !important;
}

.day.res4 a:focus-visible span,
.day.res5 a:focus-visible span {
    line-height: 67px !important;
}

/* 解决a标签行高超出导致落焦后上下边框不展示的问题 */

.night.res1 a,
.night.res1 a span,
.night.res6 a,
.night.res6 a span,
.night.res7 a,
.night.res7 a span,
.night.res8 a,
.night.res8 a span {
    color: var(--res1NightLinkColor) !important;
}

.night.res3 a,
.night.res3 a span,
.night.res5 a,
.night.res5 a span,
.night.res4 a,
.night.res4 a span {
    color: var(--resTvNightLinkColor) !important;
}

.night a,
.night a span,
.night.res2 a,
.night.res2 a span,
.night.res2Repeat a,
.night.res2Repeat a span {
    color: var(--res2NightLinkColor) !important;
}

.night.res3 a:focus-visible,
.night.res5 a:focus-visible,
.night.res4 a:focus-visible {
    border: 4px solid var(--resTvNightLinkColor);
}

.res1,
.res8 {
    padding: 0 var(--padding80);
}

body,
.res2,
.res2Repeat {
    padding: 0 var(--padding64);
}

.res3 {
    padding: 0 var(--size40);
}

.res4,
.res5 {
    padding: 0 var(--padding60);
}

.res6 {
    padding: 0 var(--padding90);
}

.res7 {
    padding: 0 var(--padding66);
}

table {
    width: 100%;
    border-spacing: 0;
    word-break: break-word;
    border-top: 1px solid;
    border-left: 1px solid;
}

table td,
table th {
    padding: 16px;
    border-bottom: 1px solid;
    border-right: 1px solid;
}

table,
table td,
table th,
.day table,
.day table td,
.day table th {
    border-color: var(--dayTableBorderColor);
}

.night table,
.night table th,
.night table td {
    border-color: var(--nightTableBorderColor);
}

.night.res1 table,
.night.res1 table th,
.night.res1 table td,
.night.res6 table,
.night.res6 table th,
.night.res6 table td,
.night.res7 table,
.night.res7 table th,
.night.res7 table td,
.night.res8 table,
.night.res8 table th,
.night.res8 table td {
    border-color: var(--res1NightTableBorderColor);
}

.night.res2 table,
.night.res2 table th,
.night.res2 table td {
    border-color: var(--res2NightTableBorderColor);
}

.res2 p,
.res2 h2,
.res2 h3,
.res2 h4,
.res2 h5,
.res2 table,
.res2 th,
.res2 td,
.res2 th span,
.res2 td span,
.res2Repeat p,
.res2Repeat h2,
.res2Repeat h3,
.res2Repeat h4,
.res2Repeat h5,
.res2Repeat table,
.res2Repeat span,
.res2Repeat th,
.res2Repeat td,
.res2Repeat th span,
.res2Repeat td span,
h2,
h3,
h4,
h5,
p,
span,
table,
th,
td {
    font-size: var(--size24) !important;
    line-height: var(--size40) !important;
}

.res1 h1,
.res1 h1 span,
.res8 h1,
.res8 h1 span {
    font-size: var(--size40) !important;
    line-height: var(--size60) !important;
}

.res6 h1,
.res6 h1 span {
    font-size: var(--size45) !important;
    line-height: var(--size56) !important;
}

.res7 h1,
.res7 h1 span {
    font-size: var(--size33) !important;
    line-height: var(--size50) !important;
}

.res1 p,
.res1 h2,
.res1 h3,
.res1 h4,
.res1 h5,
.res1 span,
.res1 table,
.res1 th,
.res1 td,
.res1 th span,
.res1 td span,
.res8 p,
.res8 h2,
.res8 h3,
.res8 h4,
.res8 h5,
.res8 span,
.res8 table,
.res8 th,
.res8 td,
.res8 th span,
.res8 td span {
    font-size: var(--size36) !important;
    line-height: var(--size54) !important;
}

.res6 p,
.res6 p span,
.res6 h2,
.res6 h3,
.res6 h4,
.res6 h5,
.res6 span,
.res6 table,
.res6 th,
.res6 td,
.res6 th span,
.res6 td span {
    font-size: var(--size40) !important;
    line-height: var(--size60) !important;
}

.res7 p,
.res7 p span,
.res7 h2,
.res7 h3,
.res7 h4,
.res7 h5,
.res7 span,
.res7 table,
.res7 th,
.res7 td,
.res7 th span,
.res7 td span {
    font-size: var(--size30) !important;
    line-height: var(--size45) !important;
}

.res2 h1,
.res2 h1 span,
.res2Repeat h1,
.res2Repeat h1 span,
h1,
h1 span {
    font-size: var(--size28) !important;
    line-height: var(--size48) !important;
}

.res3 h1,
.res3 h2,
.res3 h3,
.res3 h4,
.res3 h5,
.res3 p,
.res3 span,
.res3 table,
.res3 th span,
.res3 td span,
.res3 th,
.res3 td {
    font-size: var(--size32) !important;
    line-height: var(--size48) !important;
}

.res5 h1,
.res5 h2,
.res5 h3,
.res5 h4,
.res5 h5,
.res5 p,
.res5 span,
.res5 table,
.res5 th span,
.res5 td span,
.res5 th,
.res5 td {
    font-size: var(--size48) !important;
    line-height: var(--size72) !important;
}

.res4 h1,
.res4 h2,
.res4 h3,
.res4 h4,
.res4 h5,
.res4 p,
.res4 span,
.res4 table,
.res4 th,
.res4 td,
.res4 th span,
.res4 td span {
    font-size: var(--size48) !important;
    line-height: var(--size72) !important;
}

.day,
.day p,
.day span,
.day table,
.day.res2,
.day.res2 p,
.day.res2 span,
.day.res2 table,
.day.res2Repeat,
.day.res2Repeat p,
.day.res2Repeat span,
.day.res2Repeat table {
    color: var(--res2DayContentColor) !important;
    background: var(--res2DayBg) !important;
}

.day.res1,
.day.res1 p,
.day.res1 span,
.day.res1 table,
.day.res6,
.day.res6 p,
.day.res6 span,
.day.res6 table,
.day.res7,
.day.res7 p,
.day.res7 span,
.day.res7 table,
.day.res3,
.day.res3 p,
.day.res3 span,
.day.res3 table,
.day.res5,
.day.res5 p,
.day.res5 span,
.day.res5 table,
.day.res4,
.day.res4 p,
.day.res4 span,
.day.res4 table,
.day.res8,
.day.res8 p,
.day.res8 span,
.day.res8 table {
    color: var(--dayContentColor) !important;
    background: var(--res1DayBg) !important;
}

.night.res1,
.night.res1 p,
.night.res1 span,
.night.res1 table,
.night.res6,
.night.res6 p,
.night.res6 span,
.night.res6 table,
.night.res7,
.night.res7 p,
.night.res7 span,
.night.res7 table,
.night.res8,
.night.res8 p,
.night.res8 span,
.night.res8 table {
    background: var(--res1NightBg) !important;
    color: var(--res1NightContentColor) !important;
}

.night,
.night span,
.night.res2,
.night.res2 p,
.night.res2 span,
.night.res2 table {
    background: var(--res2NightBg) !important;
    color: var(--res2NightContentColor) !important;
}

.night.res2Repeat,
.night.res2Repeat p,
.night.res2Repeat span,
.night.res2Repeat table {
    background: var(--res2NightBg) !important;
    color: var(--res2RepeatNightContentColor) !important;
}

.night.res3,
.night.res3 p,
.night.res3 span,
.night.res3 table,
.night.res5,
.night.res5 p,
.night.res5 span,
.night.res5 table,
.night.res4,
.night.res4 p,
.night.res4 span,
.night.res4 table {
    background: var(--res3NightBg) !important;
    color: var(--res3NightContentColor) !important;
}

/* 按压增加背景色 */
a:active {
    background: var(--dayLinkActiveBg);
}

/* a链接下有span标签，按压效果失效，增加span的按压效果，由于a标签和span的active效果同时生效造成设置了两次背景色，设置span按压透明度为0 */
.day a span:active {
    background: var(--daySpanLinkActiveBg) !important;
}

.night a:active {
    background: var(--nightLinkActiveBg);
}

.night a span:active {
    background: var(--nightSpanLinkActiveBg) !important;
}

.night.res1 a:active,
.night.res6 a:active,
.night.res7 a:active,
.night.res8 a:active {
    background: var(--res1NightLinkActiveBg);
}

.night.res1 a span:active,
.night.res6 a span:active,
.night.res7 a span:active,
.night.res8 a span:active {
    background: var(--res1SpanNightLinkActiveBg) !important;
}