yos_web/buildAnnexation/ZB/css/bng.css

@font-face {
    font-family: "almm";
    src: url("../font/almm/AlimamaAgileVF-Thin.woff2") format("woff2"),
        url("../font/almm/AlimamaAgileVF-Thin.woff") format("woff");
}
html{ overflow:hidden;
}
body{
    font-family: Microsoft YaHei, Microsoft YaHei,almm;
}
.post-title-EN{
    font-family: "almm";
}
#usercenter{
    font-size: 20px;
}
.btn{
    height: 50px;
    width: 150px;
    border-radius: 40px;
    letter-spacing: 2px;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    /* 其他样式 */  
    line-height: 1.5; /* 行高，根据你的需要调整 */  
}
#loginBtn{
    background: #fff;
}
.opacity-05{
    background-color: rgba(255, 255, 255, 0.5);
    
}
.mr-20{
    margin-right:20px;
}
.mbox2Brief p{
    margin-bottom: 15px;
}
#videoModal{
    position: fixed;
    height: calc(100vh);
    width: calc(100vw);
    z-index: 99;
    display: none;
    background: rgba(0, 0, 0, .5);
}
.mobileLanglist{
    display: none;
}
.timeline {  
    position: relative;  
    display: flex;  
    align-items: center;  
    padding: 0 50px;  
}  

.timeline::before {  
    content: '';  
    position: absolute;  
    width: 6px;  
    background-color: #ddd;  
    top: 0;  
    bottom: 0;  
    left: 50px;  
    margin-left: -3px;  
}  

.timeline-item {  
    padding: 20px 30px;  
    position: relative;  
    background-color: inherit;  
    width: 30%;  
}  

.timeline-item:not(:first-child)::before {  
    content: '';  
    position: absolute;  
    width: 50%;  
    height: 2px;  
    background-color: #ddd;  
    top: 29px;  
    right: -25%;  
    z-index: -1;  
}  
.flex-index{
    display: flex !important;
    align-items: center !important;
}
.timeline-item:not(:last-child)::after {  
    content: '';  
    position: absolute;  
    width: 50%;  
    height: 2px;  
    background-color: #ddd;  
    top: 29px;  
    left: 100%;  
    z-index: -1;  
}  

.timeline-icon {  
    border: 5px solid #fff;  
    border-radius: 50%;  
    position: absolute;  
    background-color: #ddd;  
    left: -50px;  
    height: 40px;  
    width: 40px;  
    line-height: 30px;  
    text-align: center;  
    font-size: 1.5em;  
    color: white;  
}  

.timeline-content {  
    padding: 10px 20px;  
    background-color: white;  
    position: relative;  
    border-radius: 6px;  
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  
}  

.timeline-content h3 {  
    margin-top: 0;  
    color: #333;  
}  

.timeline-content p {  
    color: #777;  
    font-size: 0.9em;  
}
#timeLineBox{
    position: absolute;
    transition: 1s linear;
    top:0
}
.mbox5Img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 117px !important;
    padding: 10px;
}
.mbox5Img img{
    width: 80px !important;
}
.mbox5Hov{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff
}
.footer{
    position: relative;
    bottom:0;
    left: 0;
    padding: 25px 10px;
    width: 100%;
    text-align: center;
    color:#fff;
    background: #003399;
}
.videoPlayBtn{
    position: absolute;
    right: 20%;
    top:50%;
    font-size: 6rem;
    color: #fff;
}
.videoPlayBtnPhone{
    display: none;
    font-size: 6rem;
    color: #333;
}
.menu:hover .child-menu{
    /* display: block; */
    opacity: 1;
}
.child-menu{
    /* display: none; */
    opacity: 1;
    transition: .5s linear;
}
.child-menu p{
    height: 30px;
    line-height: 30px;
    font-size: 1.5rem;
    margin: 10px 0;
}
.child-menu p:hover{
    color:#fff !important
}
.menu-info{
    padding: 50px 0 0 10%;
}
.menu-info-p{
    margin: 10px 0;
    font-size: 1.25rem;
}
.mbox2Bg{
    background-image: url(assets/bg.jpg);
    background-size: cover;
}
.mbox4Lef{
    background-image: url(assets/bg2.png);
    background-size: cover;
}
.counter{
    font-size: 7rem;
    letter-spacing: 5px;
}
.mbox5Bg{
    background: url('./assets/box5Bg.jpg') no-repeat;
    background-size:cover ;
}
.mbox2TitEn{
    display: flex;
    align-items: center;
    justify-content: center;
    /* position: absolute; */
    width: 100%;
    height: 200px;
    top:0;
    left:0;
    color: #fff;
    background-image: url('./assets/bg3.pic.jpg');
    background-size: cover;
}
.mbox2TitEn_counter{
    display:flex;
    width: 100%;
    justify-content: center;
}
/* .mbox5List .swiper-slide a{
    background-color: #fff;
} */
.mOnLine{
    background-color: #003399;
    transition: 0.2s linear;
}
.mOnLineIco{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003399;
    transition: 0.2s linear;
    height: 60px;
}
.onLineWx, .onLineQQ{
    border:none !important;
}
.menu{
    cursor: pointer;
}
.page-breadcrumb li{ padding: 0.1em 0;line-height: 30px;cursor: pointer; }
.mOnLine{
    background-color: #003399;
    transition: 0.1s linear;
    z-index: 8;
}
.mOnLineIco{
    background: #003399;
    transition: 0.1s linear;
}
.mOnLineCon {
    /* background: #003399; */
    transition: 0.1s linear;
}
.mOnLine:hover .mOnLineCon{
    /* background: #009966; */
}
.menu{
    cursor: pointer;
}
.menuBg{
    z-index: 8;
}
.navList li a{
    color:#fff !important;
}
.navList li a:hover{
    color: #009966 !important;
}
#vd{
    width: 50%;height: auto;position: absolute;top:25%;left: 25%;
}
.video-close{
    font-size: 2rem;position: absolute;top:25%;left: 20%;z-index: 999;
    cursor: pointer;
    background: #fff;
    height: 20px;
    width: 20px;
    line-height: 24px;
    text-align: center;
    border-radius: 100%;
}
.mbox8Mes li input{
    background-color: #fff;
    border-radius: 3px;
    padding: 0 10px;
    height: 40px;
    color:#333;
}
.mbox8Mes li{
    margin-bottom: 20px;
}
.mbox8Mes li textarea{
    width: calc(100%);
    background-color: #fff;
    border-radius: 3px;
    padding: 0 10px;
    margin: 0;
    color:#333
}
.svbutton{
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #fff;
    cursor: pointer;
}
.mbox8RigBotflex{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    text-align: left;
    width: 90%;
    margin-left: 5%;
}
.mbox8RigBotflexmtop{

    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid #f1f2f3;
}
.mbox8RigBotflexmr{
    margin-right: 20px;
    flex:0 0 100%
}
.mbox8RigBotflex h3{
    margin-bottom: 16px;
    font-size: 16px;
    color:#333 ;
}
.mbox8RigBotflex p{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #333;
    justify-content: space-between;
}
.mbox8RigBotflex p a{
    display: inline-block;
    width: 30%;
    color: #333;
    margin-right:10px;
    line-height: 25px;
}
.mbox8RigBotflex p a i{
    margin-right:5px;
}
.foot{
    padding: 25px 10px;
    width: 100%;
    text-align: center;
    color: #fff;
    background: #003399;
}
.form-group-flex{
    display: flex;
    align-items: center;
    padding: 8px 0;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    margin-bottom: 20px !important;

}
.form-group-flex a{
    display: block;
    /* width: 100px; */
    padding:15px 10px;
    /* height: 30px; */
    line-height: 0px ;
    flex: 1 0 auto;
    margin:0 8px 0 10px;
    color: #003399 !important;
    text-align: center;
    border: 1px solid #003399;
    border-radius: 2px;
    cursor: pointer;
}
.form-group-flex input{
    font-size: 1.6rem;
    border: none;
    margin-bottom: 0;
    outline: none;
    box-shadow: none !important;
}
.form-group-input{
    font-size: 1.6rem !important;

    padding:9px 15px !important;
    height: 50px !important;
    border: 1px solid #CCCCCC !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}
.form-group-btn{
    display: block;
    width: 200px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #fff !important;
    background: #009966;
    border-radius: 5px 5px 5px 5px;
    margin: 0 auto;
    cursor: pointer;

}
.bottomLine{
    display: inline-block;
    border-bottom: 2px solid #009966 !important;
    padding-bottom: 14px;
}
.mOnLineCon{
    cursor: pointer;
}
.onLineWx .mOnLineCon{
    bottom: -47px;
}
.menu-info-container{
    width: 40%;
}
#navlodin{
    border-bottom: 1px solid #f1f2f3;
}
.mOnLineCon{
    border-radius: 4px 0 0 4px;
}
.loginInBtn .mOnLineCon{
    background: #fff;
    bottom: 0px;
}
.onLineWx,.onLineQQ{
    border-bottom: 1px solid #337ab74a;
}
.input-error-message{
    text-align: right;
    margin: -10px 0 10px 0;
    color: #a94442;
    font-size: 12px;
}
.idxpage5 .fp-tableCell{
    display:block !important;
}

.mbox8{
    padding-top: calc(100vh - 820px);
}

.mytag{
    font-size: 12px;
    padding: 5px;
    margin: 5px 0 0 15px;
    color:#3685FC ;
    border: 1px solid #3685FC;
    border-radius: 3px;
    line-height: 10px !important;
}
.imgBg{
    position: relative;
}
.imgBg::after{
    content: '';
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
}
.mbox5Bg{
    background-image: url('../assets/timelineBg.jpg');
}
.new-timeline-item{
    display: flex;
    position: absolute;
    width: 180px;
    /* overflow: hidden; */
}
.new-timeline-item h5{
    overflow: hidden; /* 确保超出的内容会被隐藏 */
    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
    word-wrap:break-word;
    -webkit-line-clamp: 2; /* 限制在两行 */
    -webkit-box-orient: vertical; /* 垂直排列盒子 */
    text-overflow: ellipsis; /* 超出的文本显示为省略号 */
    white-space: normal; /* 允许文本换行 */
    color: #fff;
    text-align: left;
    transition: .5s ease-in-out;
    font-size: 1.4rem;
}
.new-timeline-item > div > img{
    margin-bottom: 10px;
    transition: .5s ease-in-out;
}
.new-timeline-item>div{
    /* overflow: hidden; */
    transition: .5s ease-in-out;
    
}
.lineIcon{
    position: absolute;
    top:0;
    left: -35px;
    height: 200px;
}
.dot{
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    border: 1px solid #fff;
    background-color: #061045;
}
.new-timeline-item>div:hover .timeline-item-text{
    transform: translateX(-20px);
}
.new-timeline-item>div:hover img{
    transform: translateX(-20px);
    box-shadow: 0 0 10px #999;
}
.new-timeline-item>div:hover h5{
    transform: translateX(-20px);
}
.new-timeline-item:hover .dot{
    background: #fff;
    box-shadow: 0 0 10px #999;
}
.timeline-item-text{
    position: absolute;
    top: 145px;
    padding:0 15px;
    font-size: 12px;
    text-align: left;
    overflow: hidden; /* 确保超出的内容会被隐藏 */
    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
    word-wrap:break-word;
    -webkit-line-clamp: 4; /* 限制在两行 */
    -webkit-box-orient: vertical; /* 垂直排列盒子 */
    text-overflow: ellipsis; /* 超出的文本显示为省略号 */
    white-space: normal; /* 允许文本换行 */
    transition: .5s ease-in-out;

}
.timeline-item1{
    top:262px;
    left: 105px;
}
.timeline-item2{
    top:258px;
    left: 320px;
}
.timeline-item3{
    top:234px;
    left: 525px;
}
.timeline-item4{
    top:167px;
    left: 745px;
}
.timeline-item5{
    top:460px;
    left: 35px;
}
.timeline-item6{
    top:460px;
    left: 240px;
}
.timeline-item7{
    top:457px;
    left: 460px;
}
.timeline-item8{
    top:436px;
    left: 666px;
}
.timeline-item9{
    top:386px;
    left: 870px;
}
.timeline-item10{
    top:93px;
    left: 935px;
}
.timeline-item11{
    top:286px;
    left: 1100px;
}
.dot1{
    bottom: -56px;
    left: -41px;
}
.dot2{
    bottom: -60px;
    left: -41px;
}
.dot3{
    bottom: -80px;
    left: -39px;
}
.dot4{
    bottom: -114px;
    left: -39px;
}
.dot5{
    top: -29px;
    left: -39px;
}
.dot6{
    top: -29px;
    left: -39px;
}
.dot7{
    top: -27px;
    left: -41px;
}
.dot8{
    top: -27px;
    left: -42px;
}
.dot9{
    top: -27px;
    left: -42px;
}
.dot10{
    bottom: -132px;
    left: -39px;
}
.dot11{
    top: -27px;
    left: -42px;
}
.mobdot{
    position: absolute;
    height: 13px;
    width: 13px;
    border-radius: 100%;
    border: 1px solid #fff;
    background-color: #061045;
    color: #fff;
}
.mobdot1{
    left: -5px;
    bottom: -28px;
}
.mobdot1::before{
    content: '1909';
    position: absolute;
    left: -10px;
    top: -28px;
}
.mobdot2{
    left: 25px;
    bottom: -28px;
}
.mobdot2::before{
    content: '1920';
    position: absolute;
    left: -10px;
    bottom: -28px;
}
.mobdot3{
    left: 60px;
    bottom: -27px;
}
.mobdot3::before{
    content: '1932';
    position: absolute;
    left: -10px;
    top: -28px;
}
.mobdot4{
    left: 95px;
    bottom: -26px;
}
.mobdot4::before{
    content: '1960';
    position: absolute;
    left: -10px;
    bottom: -28px;
}
.mobdot5{
    left: 130px;
    bottom: -26px;
}
.mobdot5::before{
    content: '1973';
    position: absolute;
    left: -10px;
    top: -28px;
}
.mobdot6{
    left: 175px;
    bottom: -22px;
}
.mobdot6::before{
    content: '2010';
    position: absolute;
    left: -10px;
    bottom: -28px;
}
.mobdot7{
    left: 210px;
    bottom: -16px;
}
.mobdot7::before{
    content: '2011';
    position: absolute;
    left: -10px;
    top: -28px;
}
.mobdot8{
    left: 255px;
    top:41px
}
.mobdot8::before{
    content: '2012';
    position: absolute;
    left: -10px;
    bottom: -28px;
}
.mobdot9{
    left: 283px;
    top:30px
}
.mobdot9::before{
    content: '2020';
    position: absolute;
    left: -20px;
    top: -20px;
}
.mobdot10{
    left: 314px;
    top:14px
}
.mobdot10::before{
    content: '2023';
    position: absolute;
    left: -4px;
    top: 22px;
}
.mobdot11{
    left: 350px;
    top:-10px
}
.mobdot11::before{
    content: '2025';
    position: absolute;
    left: -20px;
    top: -20px;
}
.mobactive{
    background: #fff;
    box-shadow: 0 0 10px #999;
}
.brandModal{
    display: flex;
    align-items: center;
    justify-content: center;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:9;
    background:rgba(34,34,34,.9);
    opacity:1;
    transition:all .5s ease 0s;
    transform:translate(-100%,0)}
.modalImagePanel{
    /* transform: scale(1.2); */
    width: 400px;
    background: #fff;
    border-radius: 0 0 30px 0;
}

.modalImagePanel > div {
    padding: 0 20px 20px 20px;
}
.modalImagePanel > div > h5{
    margin-bottom: 20px;
    font-size: 18px;
}
.modalImagePanel > div > p {
    line-height: 25px;
    font-size: 14px;
    color: #666;
}
.brandModal > img{
    transition: .5s linear;
    cursor: pointer;
}
.brandModal > img:hover{
    transform: scale(1.5);
}
.brandModal .navClose{
    position: absolute;
    top:20px;
    right: 20px;
}
.mbox6 .mbox4List{
    padding: 0 110px;
}
.flex-mbox6{
    display: flex;
    align-items: flex-start;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.16);

}
.mbox6Bg{
    background-color: #f1f2f3;
}
.newsItemCover{
    /* flex:1 0 auto; */
    width: 320px;
    height: 200px;
    margin-right: 15px;
}
.titleBox{
    flex:1;
    padding: 20px 20px 0 20px;
    text-align: left;
}
.summary{
    line-height: 30px;
    color: #999;
    margin-top: 30px;
}
@media (max-width:375px) {
    .mbox8Mes li {
        margin-bottom: 10px !important;
    }
    .mbox8Left{
        padding: 10px 10px 1px 10px !important;
    }
    .mbox2TitEn_counter{
        margin-top: 20px;
    }
    .mbox2Brief p{
        line-height: 18px;
    }
    .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 1rem !important;
        min-height: auto;
    }
    .timeLineMobile{
        transform: scale(0.8);
    }
    .mbox6 .mbox4List{
        padding: 0;
    }
    /* 超小屏缩放 */
    .mbox2Text{
        transform: scale(0.85);
    }
    .mbox3 {
        transform: scale(0.85);
    }
}
@media (max-width:400px) {
    /* 超小屏缩放 */
    .mbox2Text{
        transform: scale(0.85);
    }
    .mbox3 {
        transform: scale(0.85);
    }
}
@media (max-width:640px) {
    .logo{
        a {
            display: flex;
            align-items: center;
            .flex-index{
                display: block;
                margin: 0 0 0 5px;
            }
        }
    }
    .child-menu p{
        font-size: 12px;
    }
    .idxpage5 .fp-tableCell{
        display:block
    }
    .foot{
        font-size: 10px;
    }
    .mobileLanglist{
        display: flex;
        align-items: center;
    }
    
    .mobileLang{
       flex:1 0 auto;
       height: 20px;
       width: 20px;
       line-height: 22px;
       text-align: center;
       border-radius: 2px;
       margin: 0 5px;
       font-size: 12px;
       background: #fff; 
    }
    .mobileNavLogin{
       flex:1 0 auto;
       height: 20px;
       padding: 0 3px;
       line-height: 22px;
       text-align: center;
       border-radius: 2px;
       margin: 0 5px;
       font-size: 12px;
       background: #003399; 
       color:#fff;
       border: 1px solid #fff;
    }
    .mobileMbox5Tit{
        margin-top: 40px;
    }
    .footer{
        display: none;
    }
    .mbox2Brief{
        max-height: 504px;
    }
    .videoPlayBtn{
        display: none;
    }
    .videoPlayBtnPhone{
        display: block;
        text-shadow: 0 0 2px #000;
    }
    .banText2{
        transform:translate(-50%,-50%) scale(0.8);
    }
    .menu-info-container{
        width: 100%;
    }
    .menu-info{
        padding: 20px 0 0 20px !important;
    }
    .mbox2TitEn{
        height: 150px;
        position: relative;
    }
    .mbox2TitEn_counter{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mbox2TitEn_counter span{
        margin-right: 0 !important;
    }
    .counter{
        font-size: 4rem;
        margin-top: 20px;
    }
    #vd{
        height: 100%;
        width: 100%;
        left: 0;
        top:0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .video-close{
        font-size: 4rem;
        position: absolute;
        top:20%;
        left: 10px;
        color:#fff;
        z-index: 999;
    }
    .mbox8Right{
        padding: 15px 20px;
    }
    .box3RigImg {
        position: relative !important;
        height: 200px;
        top: 0%;
        left: 0;
        width: 100%;
        transform: translateY(0%) !important;
    }
    .mbox{
        padding-top:0
    }
    .mbox8RigBotflexmr{
        margin: 15px 20px 0 0;
        flex: 0 0 100%;
    }
    .mbox8RigBotflex {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-end;
        text-align: left;
        width: 100%;
        margin: 0;
    }
    .mbox8Mes{
        font-size: 0;
    }
    .mbox8Mes li textarea{
        background-color: #fff;
        border-radius: 3px;
        padding: 0 10px;
        margin: 0;
        color:#333
    }
    .svbutton{
        font-size: 14px;
        width: calc(50% - 5px);
        flex: 1 0 auto;
    }
    .mbox8Mes li:nth-child(1), .mbox8Mes li:nth-child(2) {
        display: inline-block;
        width: calc(50% - 5px);
        vertical-align: middle;
    }
    .mbox8Mes li:nth-child(1){
        margin-right: 10px;
    }
    .mbox8Right{
        line-height: 20px;
    }
    .mbox8RigBotflex h3{
        margin-bottom: 8px;
    }
    .mbox8RigEn{
        display: none;
    }
    .mbox8RigBotflexmr:nth-child(1){
        margin-top: 0;
    }
    .footer {
        display: block;
        padding:20px 10px;
        font-size: 10px;
    }
    .page-banner-content span{
        font-size: 12px;
    }
    .section-space{
        height: 20px !important;
    }
    .flex-mbox6{
        display: block;
        padding: 0;
    }
    .mbox6{
        padding: 30px;
    }
    .newsItemCover{
        width: 100%;
    }
    .titleBox{
        flex: 1;
        padding: 20px;
        text-align: left;
    }
    .summary{
        display: none;
    }
    .flex-mbox6 img{
        display: none;
    }
    .flex-mbox6:nth-child(1) img{
        display: block;
    }
    .flex-mbox6 h4{
        font-size: 16px;
    }
    .mbox6 .mbox4List{
        padding: 0;
    }
    .mbox8RigBotflex p a{
        display: inline-block;
        width: 45%;
        color: #333;
        margin-right:10px;
        line-height: 25px;
    }
}
.empty{
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.mOnLineIco:hover,.mOnLineLang:hover{
    background-color: #009966;
}
.mOnLine{
    padding:0;
}
.onLineWx .mOnLineCon a{
    color: #333 !important;
    font-size: 12px;
}
.onLineWx .mOnLineCon{
    padding: 0;
    overflow: hidden;
}
.mOnLineLang {
    display:flex;
    align-items: center;
    justify-content: center;
    /* background-color: #009966; */
    padding:10px 0 25px 0;
}
.lang-item{
    line-height: 48px;
    color: #666;
    font-size: 14px;
    transition: .1s linear;
}
/* .lang-item:hover{
    background-color: #009966;
    color: #fff !important;
} */
@media only screen and (max-width: 767px) {
    .page-banner-content .page-breadcrumb {
        right: 20px;
        position: absolute !important;
        top: 0;
        transform: none;
        margin-top: 0px;

        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .modal-login-dialog {
        width: 400px;
        margin: 30px auto;
    }
}
@media (max-width: 992px) {
    .box3RigImg {
        position: relative !important;
        top: 0%;
        left: 0;
        width: 100%;
        transform: translateY(0%) !important;
    }
    .mbox4LefBtn {
        line-height: 32px;
    }
    .mbox8Wrap{
        padding: 10px;
    }
}
@media (max-width: 1600px) {
    .menu-info {
        padding: 50px 0 0 15%;
    }
    .mOnLineCon {
        right:50px;
    }
    .mOnLineIco{
        height: 50px;
    }
}
/* 定义元素样式 */  
.breath-effect { 
    animation: breathe 2s ease-in-out infinite;  
}  

/* 定义动画 */  
@keyframes breathe {  
    0%, 100% {  
        transform: scale(0.9); /* 起始和结束时缩小 */  
    }  
    50% {  
        transform: scale(1); /* 中间时恢复原始大小 */  
}  
}