/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./public/static/css/web/col.css ***!
  \*************************************************************************************************************/
:root {
    /* 
       --cell-column-number 格子列数 比如pc一排几列，mobile一排几列
       --cell-row-number 格子行数
       --column-width 每格子的宽度
       --border-color 格子边框颜色
       --col-cell-height 格子高度
       --border-line 格子border宽度
     */
    --cell-column-number: 11;
    --cell-row-number: var(--cell-column-number);
    --column-width: 9.09091vw; 
    --border-color: #EDEDED;
    --border-line: 2px;
    --col-cell-height: var(--column-width);
    --grid-border-line: calc(var(--border-line) / 2);
    --grid-item-width: calc(var(--column-width) - var(--border-line) / 2);
    /* input */
    --input-border-color:rgba(0, 0, 0, 0.5);
    --input-border-width: var(--border-line);
    --form-placeholder-color: rgba(0, 0, 0, 0.5);
}
.col-1 {
    width: var(--column-width);
}
.col-2 {
    width: calc(var(--column-width) * 2);
}
.col-3 {
    width: calc(var(--column-width) * 3);
}
.col-4 {
    width: calc(var(--column-width) * 4);
}
.col-5 {
    width: calc(var(--column-width) * 5);
}
.col-6 {
    width: calc(var(--column-width) * 6);
}
.col-7 {
    width: calc(var(--column-width) * 7);
}
.col-8 {
    width: calc(var(--column-width) * 8);
}
.col-9 {
    width: calc(var(--column-width) * 9);
}
.col-10 {
    width: calc(var(--column-width) * 10);
}
.col-11 {
    width: 100%;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.col-3 .col-1 {
    width: 33.33333%;
}
.col-cell {
    margin-top: calc(-1 * var(--border-line));
    margin-left: calc(-1 * var(--border-line));
    border: var(--border-line) solid var(--border-color);
    min-height: var(--col-cell-height);
}
.right-none {
   border-right: none;
}
.cell-height-1 {
    min-height: var(--col-cell-height);
}
.cell-height-2 {
    min-height: calc(var(--col-cell-height) * 2 - var(--border-line));
}
.cell-height-3 {
    min-height: calc(var(--col-cell-height) * 3 - var(--border-line) * 2);
}
.cell-height-4 {
    min-height: calc(var(--col-cell-height) * 4 - var(--border-line) * 3);
}
.cell-height-5 {
    min-height: calc(var(--col-cell-height) * 5 - var(--border-line) * 4);
}
.cell-height-6 {
    min-height: calc(var(--col-cell-height) * 6 - var(--border-line) * 5);
}
.cell-height-7 {
    min-height: calc(var(--col-cell-height) * 7 - var(--border-line) * 6);
}
.relative {
    position: relative;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-align-center {
    display: flex;
    align-items: center;
}
.flex-align-bottom {
    display: flex;
    align-items: flex-end;
}
.pd-title {
    font-size: 7rem;
    font-weight: 600;
    /* padding-right: 2.6042vw; */
    line-height: 1.16;
}
.pd-subtitle {
    font-size: 2.0833vw;
    font-weight: 600;
    line-height: 1.1;
}
.pd-des {
    font-size: 1.8229vw;
    padding-right: 2.6042vw;
    font-weight: 500;
    line-height: 1.17;
}
.img-box img {
    display: block;
    width: 100%;
}
.img-box.panel-ani {
    position: absolute;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.img-box.panel-ani img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    object-fit: cover;
}
.horizontal-halve {
    flex-direction: initial;
}
.vertical-halve li {
    flex: 1;
    border-bottom: var(--border-line) solid var(--border-color);
}
.horizontal-halve li {
    flex: 1;
    border-right: var(--border-line) solid var(--border-color);
}
.horizontal-halve li:last-child  {
    border-right: none;
}
.vertical-halve li:last-child {
    border-bottom: none;
}
.arrow {
    position: absolute;
    width: 3.6458vw;
    height: 3.6458vw;
    border-radius: 50%;
    background: #8733FF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: background .4sease-in;
    font-size: 1.6667vw;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
}
.part-50 {
    height: 75%;
}
.part-75 {
    height: 75%;
}

@media (max-width: 828px) {
    :root {
        --cell-column-number: 5;
        --column-width: 29.2834vw;
        --spread-distance: 23vw;
        --padding-gap: calc(var(--column-width) - var(--spread-distance));
    }
    .flex {
        justify-content: center;
    }
    .pd-title {
        font-size: 3rem;
        line-height: 1;
    }
    .pd-subtitle {
        font-size: 5.6075vw;
    }
    .pd-des {
        font-size: 4.6728vw;
    }
     .wrapper-box {
        overflow-x: hidden;
     }
    .spread-box {
        margin: 0 calc(-1 * var(--spread-distance));
        margin-top: var(--border-line);
    }
    .arrow {
        width: 9.8131vw;
        height: 9.8131vw;
        font-size: 3.8647vw;
    }
    
}

/* grid布局 */

.grid-container {
    --cell-row-number: 6;
    --grid-width: var(--column-width);
    display: grid;
    grid-template-columns: repeat(var(--cell-column-number), var(--grid-width));
    grid-template-rows: repeat(var(--cell-row-number), var(--grid-width));
    background: #fff;
    /* grid-gap: var(--grid-border-line); */
    position: relative;
}
.retro-grid {
    --border-line: 1px;
    /* background-size: var(--column-width) var(--column-width); */
    background-size: calc(100% / var(--cell-column-number)) calc(100% / var(--cell-row-number));
    background-repeat: repeat;
    /* background-image: linear-gradient(90deg, var(--border-color) var(--border-line), transparent 0), linear-gradient(90deg, transparent calc(100% - var(--border-line)), var(--border-color) 0),  linear-gradient(180deg, var(--border-color) var(--border-line), transparent 0), linear-gradient(180deg, transparent calc(100% - var(--border-line)), var(--border-color) 0); */
    width: 100%;
    height: 100%;
    transform-origin: 100% 0 0;
    position: absolute;
}
.grid-container .col-cell {
    border: none;
}
.combine-bg {
    background: #fff;
}
.grid-item {
    margin: 1px;
}
.grid-item.grid-column-all {
    grid-column: 1 / 10;
}
.grid-row-2 {
    grid-row: span 2;
}
@media (max-width: 828px) {
    
    :root {
        --grid-width: 1fr;
        --cell-number: 5;
        --grid-item-width: calc(var(--column-width));
        /* input */
        --input-border-width: 1px;
    }
    .grid-item {
        margin: 1px;
    }
    .grid-container {
        grid-template-columns: repeat(5, var(--column-width));
    }
    .grid-item.grid-column-all {
        grid-column: 1 / 5;
    }
    .grid-subtitle {
        display: grid;
        align-items: center;
    }
}