/* =============BOM 频道页 start============== */
textarea:focus::-webkit-input-placeholder {
    color: transparent
}

textarea:focus::-moz-placeholder {
    color: transparent
}

textarea:focus:-moz-placeholder {
    color: transparent
}

/* banner */
.bom_Divcom {
    width: 100%;
    background:url(../../css/images/new_BOMbanner.png) no-repeat center;
    display: inherit
}
.bom_Index {
    width: 1400px;
    margin: 0 auto;
    /* height: 500px; */
    height: 390px;
    box-sizing: border-box
}
.bom_Index_title {
    font-size: 32px;
    font-weight: 500;
    padding-top: 85px;
    /* margin-bottom: 66px; */
    width: 680px;
    text-align: center;
    color: #0070BC;
    font-family: 'Source Han Sans CN',sans-serif;
}
.bom_Index_title p{
    display: block;
    margin-top: 5px;
    font-size: 20px !important;
    font-weight: normal;
    padding-left: 85px;
    color: #333333;
    text-align: left;
}
.bom_Index_title p i{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #333;
    display: inline-block;
    margin: 0 11px;
    vertical-align: 4px;
}
/* banner - 型号匹配 start */
.bom_Index_left {
    width: 800px;
    height: 339px;
    border-radius: 10px;
    overflow: hidden;
    /* padding: 0 20px; */
    box-sizing: border-box;
    /* display: flex; */
    position: relative;
    z-index: 99;
    background: #fff;
    bottom: -76px;
    left: 50%;
    transform: translateX(-50%);
}

/* 新加tab切换 2026-05-07 */
.bom_Index_left .bom_Index_left_tab{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bom_Index_left .bom_Index_left_tab li{
    padding: 0 20px;
    margin-right: 100px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
}
.bom_Index_left .bom_Index_left_tab li.active{
    font-weight: bold;
    border-bottom: 2px solid #1F6BDE;
}
.bom_Index_left .bom_Index_left_tab li:last-child{
    margin-right: 0;
}
.bom_Index_left_upload{
    /* width: 295px;
    height: 264px; */
    border-radius: 10px;
    display: inline-block;
    background: #fff;
    /* box-shadow: 0px 10px 30px 0px #BBE3FF; */
    /* margin-right: 35px; */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    display:block;
}
.bom_Index_left_upload:last-child{
    margin-right: 0;
}
.bom_Index_left_upload .bom_download {
    color: #1F6BDE;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    margin-top: 25px;
    margin-bottom: 12px;
    /* width: 100%; */
    display: inline-block;
    text-decoration: underline;
}
.bom_Index_left_upload .bom_download:hover{
    color: rgba(53,90,239);
}
.online_signature .question-mark-tip{
    left: 60px;
}
.bom_Index_left_upload span{
    color: #B5B5B5;
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 16px;
    display: inline-block;
}
.bom_Index_left_upload .history_bom{
    font-size: 12px;
    color: #1F6BDE;
}
.bom_upload_btn {
    width: 760px;
    height: 205px;
    /* background: #F6F6F6; */
    background: #F0F1F5;
    /* border: 1px dashed #B3C8E4; */
    text-align: center;
    border-radius: 4px;
    position: relative;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.box_uploading {
    font-size: 14px;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box_Frame2 {
    /* background: url(../../css/images/new_table.svg) no-repeat center center; */
    width: 208px;
    height: 50px;
    font-size: 18px!important;
    color: #fff!important;
    background: #1F6BDE;
    display: block;
    /* background-size: 100% 100%; */
    margin-top: 20px;
    border-radius: 30px;
    line-height: 50px !important;
}
.box_Frame2::before{
    font-family: 'iconfont';
    content:'\e791';
    color: #fff;
    font-size: 22px;
    margin-right: 5px;
    display: inline-block;
}

#importView {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0
}
.bom_right_upload {
    opacity: 0;
    width: 100%;
    height: 100%
}
.bom_left_input {
    width: 100%;
    height: 190px;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 21px;
    background-color: #F0F1F5;
    resize: none;
    box-sizing: border-box
}
.bom_left_input::-webkit-input-placeholder {
    color: #B2BBD1
}
.bom_btnBox {
    margin: 13px auto;
    font-size: 16px;
    color: #fff
}

.bom_btnBox div {
    cursor: pointer
}

.bom_btnBox a {
    color: #fff
}

.bom_btn {
    width: 180px;
    height: 37px;
    border-radius: 30px;
    /* background: linear-gradient(102.02deg,#63BDFE 8.77%,#317EFE 78%); */
    background: #1F6BDE;
    color: #ffffff;
    font-size: 18px;
    /* font-weight: 700; */
    line-height: 37px;
    text-align: center;
    cursor: pointer;
}

/* 上传提示 */
.uploadNotic {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.2);
    z-index: 999
}

.uploadNotic div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-51%,-49%);
    border: 2px solid #d7d7d7;
    border-radius: 8px;
    padding: 15px 30px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 700
}
/* banner - 型号匹配 end */
/* ================模块标题小标题 公用================ */
.bom_title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    width: 1055px;
    margin: 60px auto 0 auto;
}
.bom_titlediscript {
    font-size: 18px;
    text-align: center;
    width: 1055px;
    margin: 15px auto auto;
    line-height: 30px;
}

/* =====================第一栏===================== */
.bom_secondbox {
    height:1053px;
    padding: 200px 0 0 0;
    width: 100%;
    position: relative;
    min-width: 1500px;
    background: #F6F6F6;
    box-sizing: border-box;
}
.bom_secondbox .bom_intro_item{
    width: 1100px;
    margin: 0 auto;
}

/* 
.bom_secondbox .bom_secondtitle{
    opacity: 0;
}
.bom_secondbox .bom_second {
    margin: 60px auto 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 19px;
    box-sizing: border-box;
}
.bom_secondbox .bom_second .bom_second_com{
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 84px 46px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.bom_secondbox .bom_second .bom_second_com .bom_second_left{
    text-align: center;
    width: 325px;
    height: 248px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}
.bom_secondbox .bom_second .bom_second_com .bom_second_left .bom_second_left_top{
    background: #F1F7FF;
    width: 150px;
    height: 138px;
    border-radius: 10px;
    border: 1px dashed #B3C8E4;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}
.bom_secondbox .bom_second .bom_second_com .bom_second_left .bom_second_left_top p{
    width: 100%;
    text-align: center;
    margin-top: 7px;
}
.bom_secondbox .bom_second .bom_second_com .bom_second_left .bom_second_left_text{
    font-size: 16px;
    color: #333333;
    margin-top: 35px;
}
.bom_secondbox .bom_second .bom_second_com .bom_second_left span{
    font-size: 14px;
    margin-top: 15px;
    line-height: 20px;
    color: #B5B5B5;
}
.bom_secondbox .bom_second .bom_second_com  .bom_second_right{
    border: 1px solid #B3C8E4;
    background: #fff;
    width: 375px;
    height: 250px;
    border-radius: 10px;
    padding: 10px 10px 20px 10px;
    box-sizing: border-box;
    text-align: center;
}
.bom_secondbox .bom_second .bom_second_com  .bom_second_right .bom_second_right_text{
    background: #F6F8FC;
    padding: 10px 0 0 30px;
    margin-bottom: 15px;
    height: 168px;
    text-align: left;
    box-sizing: border-box;
}
.bom_secondbox .bom_second .bom_second_com  .bom_second_right .bom_second_right_text p{
    color: #999999;
     font-size: 15px;
    line-height: 24px;
}
.bom_secondbox .bom_second .bom_second_com  .bom_second_right span{
    margin: 0 auto;
    width: 180px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #63BDFE, #317EFE);
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    border-radius: 30px;
}
.bom_secondbox .file-icon {
    position: absolute;
    top: 164px;
    left: 192px;
    width: 63px;
    height: 61px;
    opacity: 0;
    background: url(../../css/images/new_xls_1.png) no-repeat;
    background-size: 63px 61px;
    z-index: 999;
}
.bom_secondbox .graph{ 
    width: 690px;
    height: 25px;
    position: absolute;
    bottom: 66px;
    left: 70px;
    background: #eee;
    border-radius: 30px;
    padding: 3px;
    box-sizing: border-box;
    opacity: 0;
} 

.bom_secondbox .graph #bar{ 
    display: block; 
    background: #317EFE; 
    float: left; 
    height: 100%; 
    text-align: center; 
    font-family: Verdana; 
    line-height: 25px; 
    color: #FFF; 
    border-radius: 30px;
    max-width: 100%;
    transition: width 0.3s ease;
} 
.bom_secondbox .graph .graph_text{
    font-size: 16px;
    position: absolute;
    right: -50px;
    top: 0px;
    color: #317EFE;
} */

/* 动态效果 */
/* .bom_secondbox .bom_intro_item.animate-0 .bom_secondtitle{
    -webkit-animation: fadeInRight 1s forwards;
    animation: fadeInRight 1s forwards;
} 
 .bom_secondbox .bom_intro_item.animate-0 .bom_second{
    -webkit-animation: fadeInLeft 1s forwards;
    animation: fadeInLeft 1s forwards;
}

.bom_secondbox .bom_intro_item.animate-0 .bom_second_left_top{
    -webkit-animation: bounceIn 1s 1.5s forwards;
    animation: bounceIn 1s 1.5s forwards
}

.bom_secondbox .bom_intro_item.animate-0 .bom_second_right{
    -webkit-animation: bounceIn 1s 2s forwards;
    animation: bounceIn 1s 2s forwards
}

.bom_secondbox .bom_intro_item.animate-0 .file-icon{
    -webkit-animation: fileIconFadeIn 1s 3s;
    animation: fileIconFadeIn 1s 3s;
}
.bom_secondbox .bom_intro_item.animate-0 .graph{
    -webkit-animation: fadeIn .5s 4s forwards;
    animation: fadeIn .5s 4s forwards;
} */

/* 第一屏改版样式 */
.bom_secondbox .bom_screenOne{
    margin: 60px auto 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 19px;
    box-sizing: border-box;
    position: relative;
}

.bom_secondbox .bom_screenOne .bom_secondId_com{
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 84px 46px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border: 2px solid #e0e8f4;
}

.bom_secondbox .bom_screenOne .bom_secondId_com .bom_secondId_img{
    margin: 0 auto;
    opacity:1;
}
.bom_secondbox .file-iconId {
    position: absolute;
    top: 212px;
    left: 408px;
    width: 63px;
    height: 61px;
    opacity: 0;
    background: url(../../css/images/new_xls_1.png) no-repeat;
    background-size: 63px 61px;
    z-index: 999;
}

.bom_secondbox .graphId{ 
    width: 570px;
    height: 20px;
    position: absolute;
    bottom: 280px;
    left: 50%;
    transform: translateX(-50%);
    background: #eee;
    border-radius: 30px;
    padding: 3px;
    box-sizing: border-box;
    opacity: 0;
} 

.bom_secondbox .graphId #barId{ 
    display: block; 
    background: #317EFE; 
    float: left; 
    height: 100%; 
    text-align: center; 
    font-family: Verdana; 
    line-height: 25px; 
    color: #FFF; 
    border-radius: 30px;
    max-width: 100%;
    transition: width 0.3s ease;
} 
.bom_secondbox .graphId .graph_textId{
    font-size: 30px;
    position: absolute;
    left: 50%;
    top: 35px;
    color: #317EFE;
} 

.bom_secondbox .bom_screenOne .bom_secondId_img2{
    position: absolute;
    opacity: 0;
}


/* 动态效果 */
.bom_secondbox .bom_intro_item.animate-0 .bom_screenOne{
    -webkit-animation: fadeInDown 1s forwards;
    animation: fadeInDown 1s forwards;
}

.bom_secondbox .bom_intro_item.animate-0 .file-iconId{
    -webkit-animation: fileIconFadeIn 1s 2s forwards;
    animation: fileIconFadeIn 1s 2s forwards;
}
.bom_secondbox .bom_intro_item.animate-0 .bom_secondId_img{
    -webkit-animation: fadeInId 1s 3s ease forwards;
    animation: fadeInId 1s 3s ease forwards;
}
/* fadeInId */

.bom_secondbox .bom_intro_item.animate-0 .graphId{
    -webkit-animation: fadeIn .5s 4s forwards;
    animation: fadeIn .5s 4s forwards;
}

.bom_secondbox .bom_intro_item.animate-0 .bom_secondId_img2{
    -webkit-animation: fadeInUp 1s 6s forwards;
    animation: fadeInUp 1s 6s forwards;
}






/* =====================第二栏===================== */

.bom_thirdbox {
    height:860px;
    padding-top: 62px;
    padding-bottom: 42px;
    width: 100%;
    margin: 0 auto;
    background: #E9F1FA;
    overflow: hidden;
    /* box-sizing: border-box; */
}

.bom_thirdbox .bom_secondtitle{
    opacity: 0;
}
.bom_thirdbox .bom_intro_item{
    width: 1500px;
    margin: 0 auto;
}
.bom_thirdbox .bom_second{
    margin: 60px auto 0;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 20px;
    box-sizing: border-box;
    position: relative;
    opacity: 0;
}
/* .bom_thirdbox .bom_second .bom_second_progress{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.bom_thirdbox .bom_second .bom_second_progress .bom_second_div{ 
    width: 600px;
    height: 25px;
    position: absolute;
    top: 236px;
    left: 128px;
    background: #eee;
    border-radius: 30px;
    padding: 3px;
    box-sizing: border-box;
    opacity: 0;
} 

.bom_thirdbox .bom_second .bom_second_progress .bom_second_div #progress{ 
    display: block; 
    background: #317EFE; 
    float: left; 
    height: 100%; 
    text-align: center; 
    font-family: Verdana; 
    line-height: 25px; 
    color: #FFF; 
    border-radius: 30px;
    max-width: 100%;
    transition: width 0.3s ease;
} 
.bom_thirdbox .bom_second .bom_second_progress .bom_second_text{
    display: block;
    text-align: center;
    font-size: 24px;
    color: #317EFE;
    position: absolute;
    bottom: 40%;
    left: 47%;
} */

.bom_thirdbox .file_animate01 {
    position: absolute;
    top: 129px;
    left: 76px;
    width: 31px;
    height: 30px;
    opacity: 0;
    background: url(../../css/images/new_vector.png) no-repeat;
    z-index: 999;
}
.bom_thirdbox .file_animate02 {
    position: absolute;
    top: 129px;
    left: 130px;
    width: 31px;
    height: 30px;
    opacity: 0;
    background: url(../../css/images/new_vector.png) no-repeat;
    z-index: 999;
}
.bom_thirdbox .file_animate03 {
    position: absolute;
    top: 129px;
    left: 178px;
    width: 31px;
    height: 30px;
    opacity: 0;
    background: url(../../css/images/new_vector.png) no-repeat;
    z-index: 999;
}
.bom_thirdbox .bom_second img{
    width: 836px;
    height: 420px;
}
.bom_thirdbox .bom_second .bom_second_img_1{
    opacity: 0;
    position: absolute;
    top: 42px;
    transition: all 0.3s ease-in-out;
}
.bom_thirdbox .bom_second .bom_second_img_2{
    opacity: 0;
    position: absolute;
    top: 42px;
    transition: all 0.3s ease-in-out;
}
.bom_thirdbox .bom_second .bom_second_img_3{
    opacity: 0;
    position: absolute;
    top: 42px;
    transition: all 0.3s ease-in-out;
}

.bom_thirdbox .bom_second .bom_second_boximg_1{
    position: absolute;
    top: 216px;
    left: -138px;
    opacity: 0;
}
.bom_thirdbox .bom_second .bom_second_boximg_1 img{
    width: 458px;
    height: 247px;
}
.bom_thirdbox .bom_second .bom_second_boximg_2{
    position: absolute;
    top: 97px;
    left: 625px;
    opacity: 0;
}
.bom_thirdbox .bom_second .bom_second_boximg_2 img{
    width: 453px;
    height: 247px;
}
.bom_thirdbox .bom_second .bom_second_boximg_3{
    position: absolute;
    top: 307px;
    left: 456px;
    opacity: 0;
}
.bom_thirdbox .bom_second .bom_second_boximg_3 img{
    width: 451px;
    height: 247px;
}
.bom_thirdbox .bom_second .bom_second_boximg_4{
    position: absolute;
    top: 105px;
    left: -138px;
    opacity: 0;
}
.bom_thirdbox .bom_second .bom_second_boximg_4 img{
    width: 390px;
    height: 153px;
}

/* 动态效果 */
.bom_thirdbox .bom_intro_item.animate-1 .bom_secondtitle{
    -webkit-animation: fadeInUp 1s forwards;
    animation: fadeInUp 1s forwards
}
.bom_thirdbox .bom_intro_item.animate-1 .bom_second{
    -webkit-animation: fadeInDown 1s forwards;
    animation: fadeInDown 1s forwards
}
/* .bom_thirdbox .bom_intro_item.animate-1 .bom_second_div{
     -webkit-animation: fadeIn 1s 1s forwards;
    animation: fadeIn 1s 1s forwards;
} */

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_img_1{
    -webkit-animation: fadeInUp 1s 1s;
    animation: fadeInUp 1s 1s;
}
.bom_thirdbox .bom_intro_item.animate-1 .file_animate01{
    -webkit-animation: fileIconFadeInMouse 1s 2s;
    animation: fileIconFadeInMouse 1s 2s;
}

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_boximg_1{
    -webkit-animation: zoomIn 2s 3s forwards;
    animation: zoomIn 2s 3s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.bom_thirdbox .bom_intro_item.animate-1 .file_animate02{
    -webkit-animation: fileIconFadeInMouse 1s 4s;
    animation: fileIconFadeInMouse 1s 4s;
}

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_img_2{
    -webkit-animation: fadeInOut 1s 5s;
    animation: fadeInOut 1s 5s;
}

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_boximg_2{
    -webkit-animation: zoomIn 2s 6s forwards;
    animation: zoomIn 2s 6s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.bom_thirdbox .bom_intro_item.animate-1 .file_animate03{
    -webkit-animation: fileIconFadeInMouse 1s 8s;
    animation: fileIconFadeInMouse 1s 8s;
}

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_img_3{
    -webkit-animation: fadeInOut 1s 9s;
    animation: fadeInOut 1s 9s;
}

.bom_thirdbox .bom_intro_item.animate-1 .bom_second_boximg_3{
    -webkit-animation: zoomIn 2s 10s forwards;
    animation: zoomIn 2s 10s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.bom_thirdbox .bom_intro_item.animate-1 .bom_second_boximg_4{
    -webkit-animation: fadeInBig 1s 12s  forwards;
    animation: fadeInBig 1s 12s  forwards;
}

/* =====================第三栏===================== */
.bom_fourthbox {
    height:860px;
    padding: 62px 0;
    width: 100%;
    margin: 0 auto;
    background: #f6f6f6;
    overflow: hidden;
        box-sizing: border-box;
}
.bom_fourthbox .bom_intro_item{
    width: 1500px;
    margin: 0 auto;
}
.bom_fourthbox .bom_secondtitle{
    opacity: 0;
}
.bom_fourthbox .bom_second {
    margin: 60px auto 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 19px;
    box-sizing: border-box;
    position: relative;
}
.bom_fourthbox .file_animate04 {
    position: absolute;
    top: 226px;
    left: 395px;
    width: 31px;
    height: 30px;
    opacity: 0;
    background: url(../../css/images/new_vector.png) no-repeat;
    z-index: 999;
}
.bom_fourthbox .file_animate05 {
    position: absolute;
    top: 307px;
    left: 437px;
    width: 31px;
    height: 30px;
    opacity: 0;
    background: url(../../css/images/new_vector.png) no-repeat;
    z-index: 999;
}

.bom_fourthbox .bom_second .bom_second_img_4{
    opacity: 1;
    position: absolute;
    top: 42px;
}
.bom_fourthbox .bom_second .bom_second_boximg_1{
    position: absolute;
    top: 166px;
    left: -200px;
    opacity: 0;
}
.bom_fourthbox .bom_second .bom_second_boximg_1 img{
    width: 590px;
    height: 236px;
}
.bom_fourthbox .bom_second .bom_second_boximg_2{
    position: absolute;
    top: 247px;
    left: 470px;
    opacity: 0;
}
.bom_fourthbox .bom_second .bom_second_boximg_2 img{
    width: 730px;
    height: 220px;
}

/* 动态效果 */
.bom_fourthbox .bom_intro_item.animate-2 .bom_secondtitle{
    -webkit-animation: fadeInUp 1s forwards;
    animation: fadeInUp 1s forwards
}
.bom_fourthbox .bom_intro_item.animate-2 .bom_second{
    -webkit-animation: fadeInDown 1s forwards;
    animation: fadeInDown 1s forwards
}
.bom_fourthbox .bom_intro_item.animate-2 .file_animate04{
    -webkit-animation: fileIconFadeInMouse 1s 2s;
    animation: fileIconFadeInMouse 1s 2s;
}
.bom_fourthbox .bom_intro_item.animate-2 .bom_second_boximg_1{
    -webkit-animation: zoomIn 2s 3s forwards;
    animation: zoomIn 2s 3s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.bom_fourthbox .bom_intro_item.animate-2 .file_animate05{
    -webkit-animation: fileIconFadeInMouse 1s 5s;
    animation: fileIconFadeInMouse 1s 5s;
}

.bom_fourthbox .bom_intro_item.animate-2 .bom_second_boximg_2{
    -webkit-animation: zoomIn 2s 6s forwards;
    animation: zoomIn 2s 6s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

/* =====================第四栏===================== */

.bom_fifthbox{
    height:860px;
    padding: 62px 0;
    width: 100%;
    margin: 0 auto;
    background: rgba(237, 247, 254);
    overflow: hidden;
        box-sizing: border-box;
}
.bom_fifthbox .bom_intro_item{
    width: 1100px;
    margin: 0 auto;
}
.bom_fifthbox .bom_second{
    margin: 60px auto 0;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 20px;
    box-sizing: border-box;
    position: relative;
}
.bom_fifthbox .bom_secondtitle{
    opacity: 0;
}
.bom_fifthbox .bom_second .bom_second_img_5{
    /* opacity: 0; */
    position: absolute;
    top: 42px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_1{
    position: absolute;
    top: 163px;
    left: 787px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_1 img{
    width: 35px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_2{
    position: absolute;
    left: 753px;
    top: 163px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_2 img{
    width: 30px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_3{
    position: absolute;
    left: 206px;
    top: 208px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_3 img{
    width: 12px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_4{
    position: absolute;
    top: 426px;
    left: 137px;
}
.bom_fifthbox .bom_second .bom_second_iconfont_4 img{
    width: 44px;
}
.bom_fifthbox .bom_second .bom_second_boximg_1{
    position: absolute;
    top: 20%;
    left: 720px;
    opacity: 0;
}
.bom_fifthbox .bom_second .bom_second_boximg_1 img{
    width: 320px;
}
.bom_fifthbox .bom_second .bom_second_boximg_2{
    position: absolute;
    top: 200px;
    left: 720px;
    opacity: 0;
}
.bom_fifthbox .bom_second .bom_second_boximg_2 img{
    width: 350px;
}
.bom_fifthbox .bom_second .bom_second_boximg_3{
    position: absolute;
    top: -15px;
    left: -124px;
    opacity: 0;
}
.bom_fifthbox .bom_second .bom_second_boximg_3 img{
    width: 380px;
}
.bom_fifthbox .bom_second .bom_second_boximg_4{
    position: absolute;
    top: 240px;
    left: -124px;
    opacity: 0;
}
.bom_fifthbox .bom_second .bom_second_boximg_4 img{
    width: 440px;
}
/* 动态效果 */
.bom_fifthbox .bom_intro_item.animate-3 .bom_secondtitle{
    -webkit-animation: fadeInLeft 1s forwards;
    animation: fadeInLeft 1s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second{
    -webkit-animation: fadeInRight 1s forwards;
    animation: fadeInRight 1s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_iconfont_1{
    -webkit-animation: fadeInHide 1s 2s forwards;
    animation: fadeInHide 1s 2s forwards;
    z-index: 11;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_boximg_1{
    -webkit-animation: fadeIngBig 1s 3s forwards;
    animation: fadeIngBig 1s 3s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_iconfont_2{
    -webkit-animation: fadeInHide 1s 4s forwards;
    animation: fadeInHide 1s 4s forwards;
    z-index: 12;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_boximg_2{
    -webkit-animation: fadetopBig 1s 5s forwards;
    animation: fadetopBig 1s 5s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_iconfont_3{
    -webkit-animation: fadeInHide 1s 6s forwards;
    animation: fadeInHide 1s 6s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_boximg_3{
    -webkit-animation: fadeInLittleBig 1s 7s forwards;
    animation: fadeInLittleBig 1s 7s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_iconfont_4{
    -webkit-animation: fadeInHide 1s 8s forwards;
    animation: fadeInHide 1s 8s forwards;
}
.bom_fifthbox .bom_intro_item.animate-3 .bom_second_boximg_4{
    -webkit-animation: fadeInLittleBig 1s 9s forwards;
    animation: fadeInLittleBig 1s 9s forwards;
}


/* =====================第五栏===================== */

.bom_Sixthbox{
    height:860px;
    padding: 62px 0;
    width: 100%;
    margin: 0 auto;
    background: #f6f6f6;
    overflow: hidden;
        box-sizing: border-box;
}
.bom_Sixthbox .bom_intro_item{
    width: 1100px;
    margin: 0 auto;
}
.bom_Sixthbox .bom_second{
    margin: 60px auto 0;
    width: 876px;
    height: 502px;
    border-radius: 15px;
    background: #F6F9FD;
    box-shadow: 0 5px 30px 0 rgba(0, 55, 169, 0.25);
    padding: 41px 20px;
    box-sizing: border-box;
    position: relative;
}
.bom_Sixthbox .bom_secondtitle{
    opacity: 0;
}
.bom_Sixthbox .bom_second .bom_second_img_6{
    /* opacity: 0; */
    position: absolute;
    top: 42px;
}
.bom_Sixthbox .bom_second .bom_second_boximg_1{
    position: absolute;
    top: 110px;
    left: 670px;
    opacity: 0;
}
.bom_Sixthbox .bom_second .bom_second_boximg_1 img{
    width: 280px;
}
.bom_Sixthbox .bom_second .bom_second_boximg_2{
    position: absolute;
    top: 381px;
    left: 347px;
    opacity: 0;
}
.bom_Sixthbox .bom_second .bom_second_boximg_2 img{
    width: 690px;
}

/* 动态效果 */
.bom_Sixthbox .bom_intro_item.animate-4 .bom_secondtitle{
    -webkit-animation: fadeInUp 1s forwards;
    animation: fadeInUp 1s forwards
}
.bom_Sixthbox .bom_intro_item.animate-4 .bom_second{
    -webkit-animation: fadeInDown 1s forwards;
    animation: fadeInDown 1s forwards
}

.bom_Sixthbox .bom_intro_item.animate-4 .bom_second_boximg_1{
    -webkit-animation: fadeInBig 1s 2s  forwards;
    animation: fadeInBig 1s 2s  forwards;
}
.bom_Sixthbox .bom_intro_item.animate-4 .bom_second_boximg_2{
    -webkit-animation: fadeInBig 1s 3s  forwards;
    animation: fadeInBig 1s 3s  forwards;
}


/* =====================第六栏===================== */
.bom_Sevenbox{
    width: 100%;
    height: 545px;
    background: #E9F1FA;
    padding: 69px 0 39px 0;
    box-sizing: border-box;
}
.bom_Sevenbox .bom_Sevenbox_com{
    width: 1300px;
    margin: 0 auto;
}
.bom_Sevenbox .bom_Sevenbox_list{
    background: #fff;
    width: 100%;
    height: 262px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.bom_Sevenbox_list_li{
    width: 110px;
    height: 162px;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.bom_Sevenbox_list_li img{
    width: 90px;
    height: 90px;
    display: block;
    margin-bottom: 20px;
}
.bom_Sevenbox_list_li p{
    font-size: 16px;
    color: #6C8FFF;
    display: block;
    text-align: center;
}
.bom_Sevenbox_com span{
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #1F6BDE;
    /* background: linear-gradient(to right, #267DFF, #5A4CF6); */
    
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    display: inline-block;
}
.bom_Sevenbox_com button{
    width: 196px;
    height: 48px;
    display: block;
    border-radius: 30px;
    /* background: linear-gradient(to right,#7FD6FD,#4A74FF); */
    background: #1F6BDE;
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 24px;
    margin: 0 auto;
}

/* =============BOM 频道页 end============== */

/* 公用的动画效果 */
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate(-20%);
        transform: translate(-20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate(-20%);
        transform: translate(-20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}


@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(20%);
        transform: translate(20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(20%);
        transform: translate(20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}


@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20%);
        transform: translateY(20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20%);
        transform: translateY(20%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}


@-webkit-keyframes fileIconFadeIn {
    0% {
        -webkit-transform: translate(600px,175px);
        transform: translate(600px,175px)
    }

    10% {
        opacity: 1
    }

    95% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        opacity: 0
    }
}

@keyframes fileIconFadeIn {
    0% {
        -webkit-transform: translate(600px,175px);
        transform: translate(600px,175px)
    }

    10% {
        opacity: 1
    }

    95% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes fileIconFadeInMouse {
    0% {
        -webkit-transform: translate(200px,175px);
        transform: translate(200px,175px)
    }

    10% {
        opacity: 1
    }

    95% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        opacity: 0
    }
}

@keyframes fileIconFadeInMouse {
    0% {
        -webkit-transform: translate(200px,175px);
        transform: translate(200px,175px)
    }

    10% {
        opacity: 1
    }

    95% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        opacity: 0
    }
}


@-webkit-keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97);
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeInId {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadeInId {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform:  translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform:  translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform:  translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform:  translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 1;
    }
    to {
        opacity: 1;
    }   
}
@-webkit-keyframes fadeInOut{
    0% { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInOut{
    0% { opacity: 0; }
    to { opacity: 1; }
} 

@-webkit-keyframes fadeInBig {
  from {
    opacity: 0;
    transform: scale(0.2); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}

@keyframes fadeInBig {
  from {
    opacity: 0;
    transform: scale(0.2); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}

@-webkit-keyframes fadeInLittleBig {
  from {
    opacity: 0;
    transform: scale(0.2); /* 初始缩放比例 */
  }
  50%{
    opacity: 1;
    transform: scale(1.5); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}

@keyframes fadeInLittleBig {
  from {
    opacity: 0;
    transform: scale(0.2); /* 初始缩放比例 */
  }
50%{
    opacity: 1;
    transform: scale(1.5); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}

@-webkit-keyframes fadeInHide{
    from {
    opacity: 1;
    transform: scale(3); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}
@keyframes fadeInHide{
from {
    opacity: 1;
    transform: scale(3); /* 初始缩放比例 */
  }
  to {
    opacity: 1;
    transform: scale(1); /* 最终缩放比例 */
  }
}


@-webkit-keyframes fadeIngBig {
  from {
    opacity: 0;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-73%, 0%) scale(0.2);
    transform: translate(-72%, 0%) scale(0.2);
  }
  to {
    opacity: 1;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeIngBig {
  from {
    opacity: 0;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-73%, 0%) scale(0.2);
    transform: translate(-73%, 0%) scale(0.2);
  }
  to {
    opacity: 1;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}


@-webkit-keyframes fadetopBig {
  from {
    opacity: 0;
    top: 10%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-73%, 0%) scale(0.2);
    transform: translate(-73%, 0%) scale(0.2);
  }
  to {
    opacity: 1;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-50%, 30%) scale(1);
    transform: translate(-50%, 30%) scale(1);
  }
}

@keyframes fadetopBig {
  from {
    opacity: 0;
    top: 10%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-73%, 0%) scale(0.2);
    transform: translate(-73%, 0%) scale(0.2);
  }
  to {
    opacity: 1;
    top: 20%;
    left: 100%;
    bottom: auto;
    right: auto;
    -webkit-transform:  translate(-50%, 30%) scale(1);
    transform: translate(-50%, 30%) scale(1);
  }
}




























