/* ==========================================================
   深圳市显科科技有限公司
   官网 V2.0
   Layout.css

   页面布局
   Container
   Grid
   Flex
========================================================== */



/* ==========================================================
   Container
========================================================== */

.container{

    width:100%;

    max-width:calc(var(--container-width) + var(--container-padding) * 2);

    margin:0 auto;

    padding-left:var(--container-padding);

    padding-right:var(--container-padding);

}



/* ==========================================================
   Full Width
========================================================== */

.container-fluid{

    width:100%;

    padding-left:40px;

    padding-right:40px;

}



/* ==========================================================
   Display
========================================================== */

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}

.d-block{

    display:block;

}

.d-none{

    display:none;

}



/* ==========================================================
   Flex
========================================================== */

.flex{

    display:flex;

}

.flex-wrap{

    flex-wrap:wrap;

}

.flex-column{

    flex-direction:column;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-around{

    display:flex;

    justify-content:space-around;

    align-items:center;

}

.flex-evenly{

    display:flex;

    justify-content:space-evenly;

    align-items:center;

}

.flex-start{

    display:flex;

    justify-content:flex-start;

    align-items:center;

}

.flex-end{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}



/* ==========================================================
   Gap
========================================================== */

.gap-8{gap:8px;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.gap-20{gap:20px;}
.gap-24{gap:24px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.gap-60{gap:60px;}



/* ==========================================================
   Grid
========================================================== */

.grid{

    display:grid;

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:30px;

}

.grid-5{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:24px;

}



/* ==========================================================
   Width
========================================================== */

.w-100{

    width:100%;

}

.w-auto{

    width:auto;

}



/* ==========================================================
   Height
========================================================== */

.h-100{

    height:100%;

}

.min-vh{

    min-height:100vh;

}



/* ==========================================================
   Overflow
========================================================== */

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}



/* ==========================================================
   Position
========================================================== */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}



/* ==========================================================
   Z-index
========================================================== */

.z-1{

    z-index:1;

}

.z-10{

    z-index:10;

}

.z-100{

    z-index:100;

}



/* ==========================================================
   Margin Auto
========================================================== */

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}

.my-auto{

    margin-top:auto;

    margin-bottom:auto;

}



/* ==========================================================
   Section Layout
========================================================== */

.section__content{

    position:relative;

    width:100%;

}

.section__body{

    position:relative;

}



/* ==========================================================
   Card Layout
========================================================== */

.card{

    position:relative;

    background:#fff;

    border-radius:var(--radius-lg);

}

.card__image{

    position:relative;

    overflow:hidden;

}

.card__body{

    position:relative;

}

.card__footer{

    position:relative;

}



/* ==========================================================
   Responsive Container
========================================================== */

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

}

@media (max-width:1200px){

    .container{

        max-width:100%;

    }

}

@media (max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-2{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    .container-fluid{

        padding-left:16px;

        padding-right:16px;

    }

    .grid-3,

    .grid-4,

    .grid-5{

        grid-template-columns:1fr;

    }

}