body *{
    box-sizing: border-box;
}
.pane{
    padding: 8px;
    background: #dadada;
    margin-bottom: 30px;
}
.mb15{
    margin-bottom: 20px;
}

.mb30{
    margin-bottom: 30px;
}

.mb40{
    margin-bottom: 40px;
}

.mWidth620{
    max-width: 620px;
}

.pane p.TextStyle1{
    margin: 0;
    padding: 25px;
    background-color: #f7f7f7;
}

ul.navList {
    display: flex;
    justify-content: space-around;
    background-color: #D8D8D8;
    padding: 10px;
    margin-bottom: 30px;
}

ul.navList.fixed {
    position: fixed;
    top: 0;
    width: calc(100% - 30px);
    max-width: 965px;
    z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

.navList-placeholder {
    display: none;
    height: 0;
}

@keyframes slideDown {
    from {
        top: -45px;
    }

    to {
        top: 0;
    }
}

ul.navList li a{
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #000;
    transition: all 0.3s ease;
}

ul.navList li a.active{
    color: #B33F3F;
}

ul.navList li a:hover{
    color: #B33F3F;
}

ul.navList li a::after{
    content: '';
    width: 10px;
    height: 5px;
    display: block;
    background: url('/image/ifg/plant_construction/down_arrow_red.svg')no-repeat;
    background-size: contain;
    margin-left: 10px;
}

ul.navList li a:link{
    text-decoration: none;
    /* color: #000; */
}

h3.title{
    display: flex;
    color: #B33F3F;
    gap: 8px;
    margin-bottom: 15px;
}

h3.title i {
    font-style: normal;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    border: 2px solid #B33F3F;
    display: block;
    margin-top: 6px;
}

div.icon_title{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

div.icon_title i.icon{
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 15px;
}

div.icon_title i.digitize{
    background-image: url('/image/ifg/plant_construction/digitize_title_icon.svg');     
}

div.icon_title i.construct{
    background-image: url('/image/ifg/plant_construction/construct_title_icon.svg');     
}

div.icon_title i.warehouse{
    background-image: url('/image/ifg/plant_construction/warehouse_title_icon.svg');     
}

div.icon_title i.dx{
    background-image: url('/image/ifg/plant_construction/dx_title_icon.svg');     
}

div.icon_title h4{
    margin-bottom: 0;
    font-size: 120%;
}

div.icon_title h4 span{
    font-weight: normal;
    font-size: 16px;
}

dl ul {
    display: flex;
    gap: 20px;
    padding: 15px;
}

/* 数字工厂资讯 */
dl.informationArea,
dl.productList{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

dl.informationArea dt,
dl.productList dt{
    order: 1;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

dl.informationArea dt{
    background-color: #2766A0;
}

dl.informationArea dd{
    background-color: #2E79BF;
}


dl.informationArea ul li{
    width: calc((100% - 60px) / 4);
    font-size: 14px;
    color: #fff;
    display: flex;
}

dl.informationArea ul li p.TextStyle1{
    margin-bottom: 0;
    flex: 1;
}

dl ul li i.icon{
    width: 30px;
    height: 30px;
    background-size: 90% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 15px;
}

dl ul li i.icon.digitize_icon_01{
    background-image: url('/image/ifg/plant_construction/digitize_icon_01.svg');
    background-size: 100% 80%;
}

dl ul li i.icon.digitize_icon_02{
    background-image: url('/image/ifg/plant_construction/digitize_icon_02.svg');
    background-size: contain;
}

dl ul li i.icon.digitize_icon_03{
    background-image: url('/image/ifg/plant_construction/digitize_icon_03.svg');
}

dl ul li i.icon.digitize_icon_04{
    background-image: url('/image/ifg/plant_construction/digitize_icon_04.svg');
}

dl.productList{
    margin-bottom: 30px;
}

dl.productList dt{
    background-color: #1C3272;
}

dl.productList dd ul{
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
    background-color: #213C88;
}

dl.productList dd ul li{
    display: grid;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 10px 5px;
    flex-grow: 1;
}

dl.productList dd ul li:nth-child(1),
dl.productList dd ul li:nth-child(2){
    width: calc(15% - 15px);
}

dl.productList dd ul li:nth-child(3){
    width: calc(20% - 15px);
}

dl.productList dd ul li:nth-child(4){
    width: calc(20% - 15px);
}

dl.productList dd ul li:nth-child(5){
    width: calc(25% - 15px);
}

dl.productList dd ul li:nth-child(2){
    background-color: #4EBB5C;
}

dl.productList dd ul li:nth-child(2) h4{
    color: #fff;
}

dl.productList dd ul li:nth-child(6),
dl.productList dd ul li:nth-child(7),
dl.productList dd ul li:nth-child(8),
dl.productList dd ul li:nth-child(9){
    flex: 1;
}

dl.productList dd ul li h4{
    color: #000;
    margin-bottom: 0;
    text-align: center;
}

dl.productList dd ul li span{
    font-size: 12px;
    line-height: 1.4;
    color: #213C88;
    padding-top: 5px;
}

ul.flexBox2,
ul.flexBox3,
ul.flexBox4{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 40px;
}

ul.flexBox2 li{
    width: calc((100% - 25px) / 2);
}

ul.flexBox3 li{
    width: calc((100% - 50px) / 3);
}

ul.flexBox4 li{
    flex-grow: 1;
}

ul.flexBox2 li dl,
ul.flexBox3 li dl,
ul.flexBox4 li dl{
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 0;
}

ul.flexBox2 li dl dt,
ul.flexBox3 li dl dt,
ul.flexBox4 li dl dt{
    font-weight: bold;
    color: #213C88;
    font-size: 14px;
    order: -1;
    background: transparent;
    text-align: left;
    padding: 0 0 5px;
}

ul.flexBox2 li dl dd,
ul.flexBox3 li dl dd,
ul.flexBox4 li dl dd{
    background: transparent;
    /* font-size: 14px; */
    font-size: 12px;
    line-height: 180%;
    position: relative;
    padding-left: 20px;
}

ul.flexBox2 li dl dd::before,
ul.flexBox3 li dl dd::before,
ul.flexBox4 li dl dd::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background-color: #213C88;
}

.deviceArea{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.deviceArea dl{
    width: calc((100% - 30px) / 2);
    display: flex;
    flex-direction: column;
    position: relative;
    border-top: 1px solid black;
}

.deviceArea dl:nth-child(3){
    width: 100%;
    margin-top: 10px;
}

.deviceArea dl dt{
    position: absolute;
    top: -15px;
    min-width: 150px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 20px;
    font-weight: bold;
    text-align: center;
}

.deviceArea dl:nth-child(3) dt{
    min-width: 185px;
}

.deviceArea dl dd{
    display: flex;
    margin-top: 30px;
    gap: 10px;
    width: 100%;
}

.deviceArea dl dd ul {
    display: flex;
    padding: 0;
    margin-bottom: 0;    
    width: 100%;
}

.deviceArea dl dd ul {
    gap: 10px;
}
.deviceArea dl:nth-child(3) dd ul li{
    width: 20%;
}
.deviceArea dl dd ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deviceArea dl dd ul li p.ImgOnlyStyle{
    flex-grow: 1;
    margin-bottom: 0;
    height: 100px;
    display: flex;
    align-items: center;
    overflow: hidden;

}

.deviceArea dl dd ul li p.ImgOnlyStyle img{
    height: 100% !important;
}

.deviceArea dl dd ul.flexBox2 {
    width: 100%;
    gap: 30px;
    justify-content: space-evenly;
}

.deviceArea dl dd ul.flexBox2 li{
    width: calc((100% - 30px) / 2);
}

.deviceArea dl dd ul li p.ImgOnlyStyle img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-bottom: 0;
}

.deviceArea dl dd ul li span{
    display: block;
    text-align: center;
    font-size: 12px;
}


/* 实际问题 */
.scrollBar.practical_problem>span,
.scrollBar.classify>span{
    display: none;
}

.scrollBar.practical_problem p.ImgOnlyStyle,
.scrollBar.classify p.ImgOnlyStyle{
    overflow-x: none;
}

.scrollBar.practical_problem p.ImgOnlyStyle img,
.scrollBar.classify p.ImgOnlyStyle img{
    width: 100%;
}

.practical_problem ul{
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.practical_problem ul li{
    /* width: calc((100% - 45px) / 4); */
    text-align: center;
    background-color: #D8D8D8;
    border-radius: 8px;
    display: flex;
    align-items: center;
}




.practical_problem ul li:nth-child(1){
    background-color: #BB4C7E;
    width: 20%;
}

.practical_problem ul li:nth-child(2){
    background-color: #9CB956;
    width: 25%;
}

.practical_problem ul li:nth-child(3){
    background-color: #0070C0;
    width: 30%;
}

.practical_problem ul li:nth-child(4){
    background-color: #7D64A2;
    width: 25%;
}

.practical_problem ul li a{
    width: 100%;
    padding: 12px 5px;
    text-decoration: none;
    color: #fff;
    transition: .3s;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.practical_problem ul li a span{
    display: block;
    /* background-image: url('../../../image/cn/r1/icon/icon_link_right_white_hd.gif'); */
    background-image: url('/image/cn/r1/icon/icon_link_right_white_hd.gif');
    background-size: 20px 20px;
    font-variant: diagonal-fractions;
    background-position: center right;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 20px;
    transition: all .3s;
    font-size: 15px;
    background-position: right center;
}


.practical_problem ul li a:hover span{
    color: #000;
    transition: all .3s;
    /* background-image: url('../../../image/cn/r1/icon/icon_link_right_hd.gif'); */
    background-image: url('/image/cn/r1/icon/icon_link_right_hd.gif');
}
.practical_problem ul li:hover{
    background-color: #f2f2f2;
    transition: all .3s;

}

/* 示例 */
.scrollBar{
    overflow: hidden;
    margin-bottom: 30px;
}

.scrollBar p.ImgOnlyStyle{
    overflow-x: auto;
    margin-bottom: 5px;
}

.scrollBar p.ImgOnlyStyle img{
    width: auto;
    padding-bottom: 0;
    max-width: 800px;
    margin-bottom: 0;
}

.scrollBar span{
    text-align: center;
    display: block;
    font-size: 14px;
}

.scrollBar span.sp{
    display: none;
}

/* 客户题 */
.topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.topic h2{
    background: transparent;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 35px;
    line-height: 100%;
}

.topic h6{
    color: #FF9100;
    margin-bottom: 20px;
}

.topic>div{
    width: 100%;
    border-radius: 15px;
    padding: 20px;
    position: relative;
}

.topic .topicArea{
    border: 2px solid #137882;
    margin-bottom: 40px;
}

.topic .topicArea::after{
    content: '';
    display: block;
    width: 60px;
    height: 40px;
    background: url('/image/ifg/plant_construction/down_arrow.svg') no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.topic .topicArea h2{
    color: #137882;
}

.topic .topicArea div{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.topic.list_column .topicArea div{
    flex-direction: column;
}

.topic .topicArea div dl{
    width: calc((100% - 25px) / 2);
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    background-color: #D2EDF0;
    padding: 20px;
    position: relative;
    gap: 10px;
}

.topic.list_column .topicArea div dl{
    width: 100%;
}

.topic .topicArea div dl:nth-last-child(1){
    width: 100%;
}

.topic .topicArea div dl dt{
    font-weight: bold;
    position: absolute;
    top: -14px;
    left: 20px;
    text-shadow: 1px 1px rgba(255, 255, 255, 1);
}

.topic .topicArea div dl dd{
    font-size: 12px;
    position: relative;
    display: flex;
}

.topic .topicArea div dl dd::before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('/image/ifg/plant_construction/exclamation_point.svg') no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 8px;
}

.topic .solution{
    border: 2px solid #376092;
}

.topic .solution h2{
    color: #376092;

}

.topic .solution div{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.topic .solution div dl{
    width: calc((100% - 30px) /2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.topic .solution div dl dt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #fff;
    font-weight: bold;
    background: #376092;
    border-radius: 10px;
    line-height: 1.2;
    font-size: 14px;
    text-align: center;
    width: 20%;
    padding: 8px 0;
}

.topic .solution div dl dd{
    width: 90%;
    height: 100%;
    font-weight: bold;
    background: #DEDEDE;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    font-size: 16px;
}

.topic.list_column .solution ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #DEDEDE;
    border-radius: 5px;
    padding: 15px;
}

.topic.list_column .solution ul li{
    font-weight: bold;
    display: flex;
}

.topic.list_column .solution ul li i{
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50px;
    background-color: #376092;
    margin: 9px 10px 0 0;
}
.topic.list_column .solution ul li span{
    flex: 1;
}
.topic.list_column .solution ul li:nth-child(2n - 1){
    width: calc(60% - 5px);
}

.topic.list_column .solution ul li:nth-child(2n){
    width: calc(40% - 5px);
}

.relatedLinks{
    margin-top: 30px;
}

.relatedLinks h2{
    color: #fff;
    background-color: #737373;
    background-image: none;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    margin-bottom: 0;
}

.relatedLinks div{
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
    padding: 15px;
}

.relatedLinks div h3{
    font-size: 14px;
    font-weight: bold;
    color: #000;
}
.relatedLinks div ul.LinkListStyle2:last-child{
    margin-bottom: 0;
}



@media screen and (max-width: 994px) {
    .scrollBar p.ImgOnlyStyle img{
        max-width: 800px !important;
    }
}

@media screen and (max-width: 767px){
    .JS h2.navTop{
        margin-bottom: 15px;
    }

    ul.navList{
        margin-bottom: 15px;
    }

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

    ul.navList li a::after{
        margin-left: 5px;
    }

    .pane p.TextStyle1{
        padding: 15px;
    }

    ul.flexBox3 li,
    ul.flexBox4 li{
        width: calc((100% - 25px) / 2);
    }

    dl.informationArea ul{
        width: 100%;
        flex-wrap: wrap;
    }

    dl.informationArea ul li{
        width: calc((100% - 20px) / 2);
    }
    h3.title span{
        font-size: 90%;
    }

    dl.productList dd ul li h4{
        font-size: 90%;
    }

    dl.productList dd ul li:nth-child(4){
        width: calc(30% - 15px);
    }

    dl.productList dd ul li:nth-child(6),
    dl.productList dd ul li:nth-child(7),
    dl.productList dd ul li:nth-child(8),
    dl.productList dd ul li:nth-child(9){
        flex: auto;
    }

    .deviceArea{
        gap: 20px;
    }

    .deviceArea dl{
        width: calc((100% - 20px) / 2)
    }

    .deviceArea dl dd ul {
        gap: 20px;
    }

    .deviceArea dl:nth-child(2) dd{
        width: 100%;
        justify-content: center;
    }
    .deviceArea dl dd ul.flexBox2{
        width: 85%;
    }

    .deviceArea dl:nth-child(3) dd ul {
        flex-wrap: wrap;
    }

    .deviceArea dl:nth-child(3) dd ul li{
        width: 20%;
    }

    .deviceArea dl:nth-child(3) dd ul li {
        width: calc((100% - 80px) / 5);
    }

    .topic>div{
        padding: 15px;
    }

    .topic .topicArea{
        margin-bottom: 33px;
    }

    .topic .topicArea h2{
        padding-bottom: 30px;
    }

    .topic .topicArea::after{
        width: 56px;
        height: 33px;
        bottom: -33px;
    }

    .topic .solution div dl dd{
        font-size: 14px;
    }

    .Contact{
        margin-bottom: 50px;
    }

    .topic .topicArea div dl dt{
        font-size: 90%;
    }
    .topic .solution div dl dt{
        font-size: 12px;
    }

    .practical_problem ul{
        gap: 10px;
    }

    .practical_problem ul li {
        width: calc((100% - 30px) / 4);
    }

    .practical_problem ul li a{
        font-size: 12px;
        padding: 5px 2px;
    }

    .relatedLinks {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 541px) {
    dl.productList dd ul{
        gap: 10px;
    }
    dl.productList dd ul li:nth-child(1), 
    dl.productList dd ul li:nth-child(2) {
        width: calc(25% - 15px);
    }

    dl.productList dd ul li:nth-child(3) {
        width: calc(30% - 15px);
    }

    dl.productList dd ul li:nth-child(5) {
        width: calc(40% - 15px);
    }

    ul.navList{
        padding: 7px 5px;
    }

    ul.navList li a{
        font-size: 10px;
    }
    .deviceArea{
        flex-direction: column;
        justify-content: center;
    }

    .deviceArea dl{
        width: 100%;
    }

    .deviceArea dl:nth-child(3) dd ul li {
        width: calc((100% - 60px) / 4);
    }

    .deviceArea dl:nth-child(1) dd{
        justify-content: center;
    }

    .deviceArea dl:nth-child(1) dd ul,
    .deviceArea dl:nth-child(2) dd ul{
        width: 80%;
    }
    
    div.icon_title h4{
        font-size: 100%;
    }

    div.icon_title h4 span{
        font-size: 12px;
    }

    ul.flexBox2, 
    ul.flexBox3, 
    ul.flexBox4{
        margin-bottom: 20px;
    }

    .topic{
        margin-bottom: 30px;
    }

    .topic h2{
        font-size: 20px;
        padding-bottom: 20px;
    }

    .topic .solution div{
        flex-direction: column;
        gap: 15px;
    }

    .topic .solution div dl{
        width: 100%;
    }

    .topic .solution div dl dd{
        font-size: 14px;
    }
    .topic.list_column .solution ul li{
        font-size: 14px;
    }

    .topic.list_column .solution ul li:nth-child(2n - 1),
    .topic.list_column .solution ul li:nth-child(2n){
        width: 100%;
    }

    .scrollBar p.ImgOnlyStyle img{
        max-width: 650px !important;
    }

    .topic .topicArea div {
        flex-direction: column;
    }

    .topic .topicArea div dl{
        width: 100%;
    }

    .scrollBar.practical_problem p.ImgOnlyStyle img,
    .scrollBar.classify p.ImgOnlyStyle img{
        max-width: 650px;
        width: auto;
    }

    .scrollBar.practical_problem span,
    .scrollBar.classify span{
        display: block;
    }

    .scrollBar span{
        font-size: 12px;
    }

    .scrollBar span.pc{
        display: none;
    }

    .scrollBar span.sp{
        display: block;
    }

    .deviceArea dl dt{
        font-size: 90%;
    }

    div.icon_title i.icon {
        width: 35px;
        height: 35px;
    }

    .practical_problem ul{
        flex-wrap: wrap;
    }

    .practical_problem ul li {
        /* width: calc((100% - 10px) / 2); */
    }
    .practical_problem ul li:nth-child(1),
    .practical_problem ul li:nth-child(2),
    .practical_problem ul li:nth-child(3),
    .practical_problem ul li:nth-child(4){
        width: calc((100% - 10px) / 2);
    }

    .practical_problem ul li a span{
        background-size: 16px 16px;
        font-size: 14px;
    }
}

@media screen and (max-width: 440px){
    dl.productList dd ul li{
        padding: 8px 5px;
    }

    dl.productList dd ul li h4 {
        font-size: 12px;
    }

    dl.productList dd ul li:nth-child(4) {
        width: calc(40% - 15px);
    }

}