body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    font-family: Arial, sans-serif;
    background: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap {
    width: 100%;
    height: 100%;
  }

  #container3d {
    width: 100% ;
    height: 100% ;
   
  }


.container {
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    /* 为了录屏效果，增加左右边距 */
    padding: 0px 50px;
    pointer-events: none;
}

.section {
    display: grid;
    /* 每行6列 */
    grid-template-columns: repeat(6, 1fr); 
    width: 25%;
    margin: 0 10px;
}
.a,  .b,  .c,  .d {
    display: grid;
    /* 设置每一行的高度为100px */
    grid-template-rows: repeat(11, 120px); 
    /* 去除网格间隙 */
    gap: 0; 
}

.box {
    display: flex;
    flex-wrap: wrap;
    /* 确保包括边框和内边距 */
    box-sizing: border-box; 
}

.item {
    /*必须通过border撑开边界*/
    border: 3px solid green;
    display: flex;
    /* 使子元素纵向排列，便于展示3D图和国家名 */
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    /* 每行展示6个 */
    /* border 3px * 2 + 90 = 96  */
    width: 96px; 
    height: 120px; /* 设置高度为100px */
    box-sizing: border-box; 
    position: relative; 
}

.chart-container{
    border: 1px solid green;
    width: 100%;
}

.scene{
    background-color: green;
    /* 高宽比必须和屏幕高宽比一致，否则图形会被拉伸 */
    /* width: 100%; */
    width: 90px;
    height: 90px;
    margin: 10;
    /* 让3D场景可见 */
    opacity: 0;
}

.countryName{
    background-color: green;
    color:#ccc;
    width: 100px;
    height: 20px;
    /* TODO:超过一行会撑开高度，导致下面的元素无法对齐 */
    /* overflow: hidden; */
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 10px;
    /* text-overflow: ellipsis;
    white-space: nowrap; */
}


.ratio {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 100;
    white-space: nowrap;
    /* background-color: #333; */

}

.up{
    color: #FB2531 ;
}
.down{
    color: #1CB869;
}

/*标题*/
.box .item:first-child {
     /* 使子元素横向排列 */
    flex-direction: row;
    background-color: green;
    color:#fff;
    width: 100%;
    /* 文字左对齐 */
    justify-content: flex-start; 
    /* 添加一些内边距使文字不紧贴边框 */
    padding-left: 10px; 
    padding-top: 50px;
    font-size: 24px;
}

/* 几个不同区域的定位 */
.a1 { grid-area: 1 / 1 / 3 / 7; }
.a2 { grid-area: 3 / 1 / 12 / 7; }
.b1 { grid-area: 1 / 1 / 12 / 7; }
.c1 { grid-area: 1 / 1 / 5 / 7; }
.c2 { grid-area: 5 / 1 / 12 / 7; }
.d1 { grid-area: 1 / 1 / 5 / 7; }
.d2 { grid-area: 5 / 1 / 12 / 7; }