anxiao_web/pages/newIndex/css/mainCenter.css

.mainContentC{
    float:left;
    width:1051px;
    margin:0 23px;
    height:100%;
    box-sizing: border-box;
}

.mainContentC>div:nth-child(1){
    width:1051px;
    height:217px;
    background-image: url("../image/center_bg_div1.png");
    background-size:auto;
    background-repeat:no-repeat; 
    display: flex;
    align-items: center;
    justify-content:space-evenly;

}
.mainContentC>div:nth-child(1)>div{
    position: relative;
    width:146px;
    height:144px;
    cursor: pointer;
}

.mainContentC>div:nth-child(1)>div>div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.mainContentC>div:nth-child(1)>div>div:first-child{
    z-index:999;
    text-align: center;
    font-size: 26px;
    margin-top: 42px;
}
.mainContentC>div:nth-child(1)>div>div:last-child{
    background-image: url("../image/center_nav.png");
    background-size:auto;
    background-repeat:no-repeat; 
    animation: rotate 10s infinite linear; 
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.mainContentC>div:nth-child(2){
    width:1051px;
    height:calc(100% - 420px);
    position: relative;
    top:-36px;
}
#marinContentMapContent>div,
#marinContentMapContent>div>div{
    width:100%;
    height:100%;
}

#systemIntroduction{
    width:calc(100% - 60px);
    margin:0px 30px;
}

#systemIntroduction>p{
    font-size:16px;
    line-height:30px;
    text-indent: 2em;
    margin-bottom:10px;
}

#systemIntroduction>p:nth-child(1){
    line-height:40px;
    text-align: center;
    font-size:26px;
    text-indent: -5px;
    color:#0D97A7;
    margin:7px 0;
}

#alarmTrends{
    height:200px;
}
#alarmTrendsTab{
    height:100%;
}
#alarmTrendsTab>ul{
    height:79px;
    background-image: url("../image/center_bottom_bg.png");
    background-size:auto;
    background-repeat:no-repeat; 
    background-position: center;
}
#alarmTrendsTab>ul>li{
    width:146px;
    height:45px;
    float:left;
    font-size:18px;
    position: relative;
    z-index:1000;
    line-height:45px;
    top:28px;
    color:#fff;
}
#alarmTrendsTab>ul>li:nth-child(1){
   left:100px;
}
#alarmTrendsTab>ul>li:nth-child(2){
    left:100px;
}




#alarmTrends  .layui-tab-content{
    padding:0;
    width:calc(100% - 250px);
    height:100%;
    margin-left:120px;
    height:calc(100% - 79px);
}
#alarmTrends  .layui-tab-item {
    height:100%;
}

#alarmTrends  .layui-tab{
    margin:0 !important;
}
#alarmTrends  .layui-tab-title{
    border:0;
}
#alarmTrends .layui-tab-title .layui-this:after{
    border:0 !important
}

.videoTrendInfo{
    width:100%;
    height:100%;
    display:flex;
    /* justify-content:space-between; */
    align-items:center;
}
.videoTrendInfo>div{
    width:24%;
    height:100%;
    background: #000;
    text-align: center;
    box-sizing: border-box;
    border:1px solid #172c60;
    margin-right:1%;
}
.videoTrendInfo>div>iframe{
    width:100%;
    height:100%;
}