* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page {
    width: 100%;
}

/* 视频区域 - 固定26rem，与原版H5一致 */
.video-section {
    width: 100%;
    height: 26rem;
    background-color: #000;
    position: relative;
    flex-shrink: 0;
}

.video-section canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

/* 路单区域 - 固定27rem，与原版H5一致 */
.road-all {
    height: 27rem;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

/* 珠子路 - 占50% */
.chart_left {
    position: relative;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #fff;
}

.chart_left .big-grid {
    flex-grow: 0;
    width: 5.5556%;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}

.chart_left .zhuzi_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chart_left .zhuzi_box .content {
    position: absolute;
}

.chart_left .zhuzi_box .content img {
    position: absolute;
    left: 2%;
    top: 2%;
    max-width: 96%;
    min-height: 96%;
}

/* 大路 - 占25% */
.dalu {
    position: relative;
    height: 25%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #fff;
}

.dalu .small-grid {
    width: 2.7778%;
    height: 16.67%;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}

.dalu .dalu-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dalu .dalu-box .content {
    position: absolute;
    clear: both;
    z-index: 1;
}

.dalu .dalu-box .content .content_num {
    text-align: left;
    position: absolute;
    clear: both;
    z-index: 2;
    margin-top: 2px;
    margin-left: 7px;
}

.dalu .dalu-box .content img {
    border: none;
    position: absolute;
    left: 2%;
    top: 2%;
    max-width: 96%;
    min-height: 96%;
}

/* 大眼路 - 占12.5% */
.dayan {
    position: relative;
    height: 12.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #fff;
}

.dayan .small-grid {
    width: 2.7778%;
    height: 33.33%;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}

.dayan .dayan-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dayan .dayan-box .content {
    position: absolute;
    clear: both;
    z-index: 1;
}

.dayan .dayan-box .content img {
    border: none;
    position: absolute;
    left: 2%;
    top: 2%;
    max-width: 96%;
    min-height: 96%;
}

/* 小路 + 小强路 - 占12.5% */
.xiaolu-xiaoqiang {
    position: relative;
    height: 12.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #fff;
}

.xiaolu-xiaoqiang .small-grid {
    width: 2.7778%;
    height: 33.33%;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}

.xiaolu-xiaoqiang-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xiaolu-box,
.xiaoqiang-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 50.8%;
    height: 100%;
}

.xiaoqiang-box {
    left: 50.8%;
    width: 49.2%;
}

.xiaolu-xiaoqiang-box .content {
    position: absolute;
    clear: both;
    z-index: 1;
}

.xiaolu-xiaoqiang-box .content img {
    border: none;
    position: absolute;
    left: 2%;
    top: 2%;
    max-width: 96%;
    min-height: 96%;
}

/* content_num_img */
.content_num_img img {
    z-index: 3;
}