/***************** 自定义公共样式 start *****************/
.container{
    padding-inline: var(--contents-side-padding);
    max-width: var(--design-width);
    margin-inline: auto;
}

article{
    max-width: 1090px;
    padding-inline: 15px;
    margin-inline: auto;
}

section{
    margin-top: 50px;
    padding-inline: var(--contents-side-padding);
    max-width: var(--design-width);
    margin-inline: auto;
}

@media screen and (max-width: 767px) {
    :root{
        --contents-side-padding: 15px;
    }
}

article section{
    padding-inline: 0;
}

a:link{
    text-decoration: none;
}

/* a:visited{
    color: #000;
} */


main{
    width: 100%;
    min-height: calc(100vh - var(--fixed-header-height) * 1px);
    padding-block: var(--fixed-header-height) 100px;
    min-height: 800px;
}

/* 顶部banner公共样式 start */
#headerBanner {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#headerBanner div{
    max-width: 1305px;
    width: 100%;
    padding-inline:15px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
#headerBanner div h1{
    font-size: 40px;
}

#headerPart .brandingArea{
    position: relative;
}

#headerPart .brandingArea h1{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 225%;
    color: #fff;
}
#headerPart .brandingArea picture{
    height: 260px;
}
#headerPart .brandingArea picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 767px) {
    #headerPart .brandingArea h1{
        font-size: 150%;
    }
    #headerPart .brandingArea picture{
        height: 200px;
    }
}
/* 顶部banner公共样式 end */

/******************* 网站标题 start *******************/
/* h1标题 */
.pageTitle{
    border-bottom: 1px solid var(--color-gray-5);
}

.pageTitle h1 span{
    position: relative;
}

.pageTitle h1 span::after{
    content: "";
    position: absolute;
    bottom: -41px;
    left: 0;
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--color-red-1);
}

/* h2标题 */
section *{
    line-height: 1.5;
}
section h2{
    color: #575757;
    font-size: 30px;
    margin-bottom: 25px;
}
section h3{
    color: #737373;
    margin-bottom: 25px;
    font-size: 25px;
}
section h4{
    color: #737373;
    margin-bottom: 15px;
    font-size: 16px;
}

/******************* 网站标题 end *******************/

/******************* 表格 start *******************/
.tableArea {
    margin-bottom: 50px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table tr th{
    flex: 1;
}
table tr th,
table tr td{
    padding: 10px;
    border: 1px solid #ddd;
}
table thead tr,
table tr th{
    background-color: #f2f2f2;
}
table tr td.redColor{
    color: #e60026;
}
table thead.center tr th:not(:first-child){
    text-align: center;
}
table tbody.center tr td:not(:first-child){
    text-align: center;
}

@media screen and (max-width: 767px) {
    .tableArea{
        overflow-x: scroll;
        padding-bottom: 8px;
    }
    table{
        min-width: 600px;
    }
}
/******************* 表格 end *******************/


/******************* 网站图片 start *******************/
picture{
    max-width: 100%;
    display: flex;
    align-items: center;
    line-height: 0;
}
picture img{
    width: 100%;
}
/******************* 网站图片 end *******************/

/******************* 网站banner start *******************/
.banner picture{
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/******************* 网站banner end *******************/



/* ---------------------------------------------
*   base end
--------------------------------------------- */
/******************* 面包屑列表 start *******************/
.breadcrumb ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 20px;
    padding-block: 15px;
}
.breadcrumb ul li{
    font-size: 12px;
}
.breadcrumb ul li a{
    cursor: pointer;
    position: relative;
    transition: .3s ease;
    color: #a94657;
}
.breadcrumb ul li a::after{
    display: none;
}
.breadcrumb ul li a:hover{
    text-decoration: underline;
    transition: .3s ease;
}
.breadcrumb ul li a::before{
    content: ">";
    position: absolute;
    top: 50%;
    right: -1.2em;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    transform: translateY(-50%);
    color: #333;
}
/******************* 面包屑列表 end *******************/

/* 列表圆点 start */
ol.disc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}
ol.disc li{
    position: relative;
    padding-left: 12px;
    font-size: 16px;
}
ol.disc li::before{
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background-color: #b3b3b3;
    position: absolute;
    left: 0;
    top: 11px;
}
/* 列表圆点 end */



/***************** 卡片列表模块 start *****************/
ul.cardList{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: var(--contents-width);
    margin-inline: auto;
    width: 100%;
}

ul.cardList.bdGray li{
    border: 1px solid #aaa;
}

ul.cardList.flexModule2 li{
    width: calc((100% - 24px) / 2);
}
ul.cardList.flexModule3 li{
    width: calc((100% - 48px) / 3);
}
ul.cardList.flexModule4 li{
    width: calc((100% - 72px) / 4);
}
ul.cardList.flexModule5 li{
    width: calc((100% - 96px) / 5);
}
ul.cardList li a {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
ul.cardList li a span{
    position: relative;
}
ul.cardList li .links{
    /* font-size: 14px; */
    /* transition: .3s ease; */
    position: relative;
}
ul.cardList li .links::after {
    content: '';
    width: 12px;
    aspect-ratio: 1;
    display: inline-block;
    background-image: url('/hcrd/image/icon/icon_arrow-ltr-red.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    transition: .3s ease;
}
ul.cardList li .links.out::after{
    width: 14px;
    background-image: url('/hcrd/image/icon/icon_out-red.png');
}
ul.cardList li .links.out_wh::after{
    width: 14px;
    background-image: url('/hcrd/image/icon/icon_out-wh.png');
}
ul.cardList li .links.arrow_wh::after{
    width: 12px;
    background-image: url('/hcrd/image/icon/icon_arrow-ltr-wh.png');
}
ul.cardList li a .links::after{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
ul.cardList li a:hover .links.arrow_wh::after{
    right: 8px;
}

ul.cardList li a::after{
    display: none;
}
ul.cardList li a picture{
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}
ul.cardList li a:hover picture img{
    transform: scale(1.05);
    transition: .3s ease;
}
ul.cardList li a picture img{
    transition: .3s ease;
}
/* ul.cardList li a span{
    color: #000;
    font-weight: bold;
    transition: .3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
} */

/* ul.cardList li a:hover{
    color: #B6001A;
    transition: .3s ease;
} */
@media screen and (max-width: 1084px) {
    ul.cardList.flexModule4 li{
        width: calc((100% - 48px) / 3);
    }
}
@media screen and (max-width: 767px) {
    ul.cardList.flexModule4 li{
        width: calc((100% - 24px) / 2);
    }

    ul.cardList li a span{
        font-size: 14px;
    }
}

@media screen and (max-width: 541px){
    ul.cardList{
        flex-direction: column;
    }
    ul.cardList li a{
        width: 100%;
    }
    ul.cardList li a picture{
        width: 100%;
    }
    ul.cardList.flexModule2 li,
    ul.cardList.flexModule3 li,
    ul.cardList.flexModule4 li{
        width: 100%;
    }
}
/***************** 卡片列表模块 end *****************/



/* 相关内容 */
.related ul li a {
    display: flex;
    flex-direction: column;
}
.related ul li a picture{
    margin-bottom: 0;
    border-radius: 0;
    aspect-ratio: 5/4;
    width: 100%;
}
.related ul li a span{
    width: 100%;
    background-color: #515151;
    padding: 12px;
    font-size: 96%;
    color: #fff;
    height: 70px;
    display: flex;
    align-items: center;
}
.related ul li a:hover span{
    background-color: #333;
    color: #fff;
}


@media screen and (max-width: 767px) {
    article section{
        margin-bottom: 50px;
    }
    .related ul.cardList.flexModule4 {
        flex-direction: row;
    }
    .related ul.cardList.flexModule4 li{
        width: calc((100% - 24px) / 2);
    }
}

@media screen and (max-width: 541px) {
    .related ul.cardList.flexModule4 li{
        width: 100%;
    }
}



/***************** 链接跳转模块化 start *****************/
/* 普通链接箭头样式 start  */
/* main a span{
    display: inline-flex;
    align-items: center;
} */

main a{
    display: inline;
    color: #B1000E;
}
main a::after{
    content: '';
    width: 10px;
    aspect-ratio: 1;
    display: inline-block;
    background-image: url('/hcrd/image/icon/icon_arrow-ltr-red.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    margin-left: 5px;
    transition: .3s ease-in-out;
}
main a.gray::after{
    background-image: url('/hcrd/image/icon/icon_arrow-ltr-gray.png');
}
main a:hover::after{
    margin-left: 8px;
}
/* 红色下划线 */
main a.btRed:hover{
    border-bottom: 1px solid #B1000E;
}
/* 没有箭头 */
main a.noArrow::after{
    display: none;
}
/* 普通链接箭头样式 end  */

/* pdf样式 start */
main a.pdf::after{
    background-image: url('/hcrd/image/icon/icon_pdf-red.png');
    background-size: contain;
    margin-left: 5px;
    width: 12px;
}
main a.pdf:hover::after{
    /* background-image: url('/hcrd/image/icon/icon_pdf-red.png'); */
    background-color: transparent;    
}
/* pdf样式 end */

/* 外链样式 start */
main a.out::after{
    width: 12px;
    background-image: url('/hcrd/image/icon/icon_out-red.png');
}
/* 外链样式 end */

/*****************按钮： 红色背景 + 普通箭头 start *****************/
.buttonArea{
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.buttonArea > a.btnLinks{
    min-width: 260px;
    height: 54px;
    font-size: 16px;
}
a.btnLinks{
    min-width: 150px;
    font-weight: bold;
    background-color: #e60027;
    padding: 10px 0;
    position: relative;
    transition: .3s ease;
    color: #fff;
    display: flex;
    justify-content: center;
}
a.btnLinks:hover{
    background-color: #b1000e;
    transition: .3s ease;
}
a.btnLinks{
    color: #fff;
    font-size: 14px;
}
a.btnLinks:hover{
    color: #fff;
    transition: .3s ease;
}
a.btnLinks::after{
    width: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('/hcrd/image/icon/icon_arrow-ltr-wh.png');
    margin: 0;
}
a.btnLinks:hover::after{
    right: 8px;
}
/* pdf */
a.btnLinks.pdf:hover::after{
    background-image: url('/hcrd/image/icon/icon_pdf.png');
}
/* 外链 */
a.btnLinks.out:hover::after{
    background-image: url('/hcrd/image/icon/icon_out-wh.png');
}
/*****************按钮： 红色背景 + 普通箭头 end *****************/





/* 日立的研究开发 */
/* 特点 */
article section{
    margin-bottom: 100px;
}
.feature br{
    display: none;
}

.feature br.br_pc{
    display: block;
}
.feature h2{
    text-align: center;
}
.feature.CenterAdjust{
    flex-direction: column;
}
.feature p{
    line-height: 1.8;
    font-size: 96%;
}
@media screen and (max-width: 767px) {
    .feature br{
        display: block;
    }
    .feature h2{
        font-size: 150%;
    }
}


/* 新闻列表公共样式 start */
.pressList{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pressList dl{
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin-top: 30px;
}
.pressList dl dt{
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: fit-content;
}

.pressList dl:first-child{
    margin-top: 0;
}

.pressList dl dt span:first-child{
    min-width: 100px;
}
.pressList dl dt span:last-child{
    background-color: #f2f2f2;
    padding: 3px 15px;
    min-width: fit-content;
    font-weight: bold;
    font-size: 12px;
}
.pressList dl dt span:last-child:hover{
    color: #fff;
    background-color: #cc0022;
    cursor: pointer;
    transition: .3s ease;
}
.pressList dl dd{
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.pressList dl dd a span{
    color: #cc0022;
    line-height: 1.8;
}
.pressList dl dd a span::after{
    padding-left: 5px;
}
.pressList dl dd a:hover span::after{
    padding-left: 10px;
}
@media screen and (max-width: 767px) {
    .pressList dl{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pressList dl dt{
        gap: 15px;
    }
}
/* 新闻列表公共样式 end */


/* 课题模块文章区域 / 新闻详情页 start */
article.details{
    max-width: 995px;
    padding-inline: 15px;
}
article.details section{
    margin-bottom: 0;
}
article.details h3{
    margin-bottom: 10px;
}
article.details p a{
    text-decoration: underline;
    color: #c02;
}
article.details p a span{
    color: #c02;
}
article.details p a:hover{
    text-decoration: none;
}
article.details hr{
    width: 100%;
    height: 1px;
    background-color: #b3b3b3;
    margin-block: 50px;
}
article.details .titleArea span{
    color: #000;
    font-size: 16px;
    padding: 10px;
    background-color: #f2f2f2;
    font-weight: bold;
    margin-bottom: 15px;
    display: inline-block;
}

article.details .titleArea h1{
    font-size: 210%;
    color: #575757;
    margin-bottom: 40px;
}
article.details .titleArea small{
    font-size: 14px;
}
article.details .titleArea .author{
    padding: 50px;
    display: flex;
    gap: 30px;
    background-color: #f2f2f2;
}
article.details .titleArea .author:last-child{
    margin-top: 30px;
}
article.details .titleArea .author picture{
    min-width: fit-content;
    align-items: flex-start;
    margin: 0;
}
article.details .titleArea .author dl{
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
article.details .titleArea .author dl dt{
    font-weight: bold;
    padding-bottom: 15px;
}
article.details .titleArea .author dl dd{
    line-height: 1.8;
}
article.details section div.notes{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
article.details section div.notes dl{
    display: flex;
    gap: 10px;
}
article.details section picture{
    margin-block: 30px;
}
article.details section:not(:first-child) picture{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
    margin-inline: auto;
}
article.details section:not(:first-child) picture span{
    font-size: 13px;
    margin-top: 10px;
}

@media screen and (max-width: 579px) {
    article.details .titleArea .author{
        padding: 30px;
    }
}
/* 课题模块文章区域 / 新闻详情页 end */




ul.listStyle{
    padding-left: 20px;
    list-style-type: dot;

}
ul.listStyle li{
    line-height: 1.8;
}

/* 网站地图 start */
#sitemap h1{
    font-size: 28px;
    margin-bottom: 30px;
    color: #777;
}
#sitemap .linksList section{
    margin-top: 0;
    margin-bottom: 50px;
}

#sitemap .linksList section h2{
    background-color: #f2f2f2;
    font-size: 110%;
    padding: 10px 15px;
    margin-bottom: 15px;
}
#sitemap .linksList section h2 a{
    color: #575757;
}
#sitemap .linksList section h2 a:hover{
    color: #B1000E;
}
#sitemap .linksList section h2 a::after{
    width: 13px;
}
#sitemap .linksList ul{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}