.flexList { --x-gap:2.5rem; --y-gap:3.125rem;   display:flex;  flex-wrap:wrap;  gap:var(--y-gap) var(--x-gap);}
.flexList > .box{width:calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)); }
.flexList[layoutStyle="fullbox"] {--x-gap:0; --y-gap:0; }
.flexList[layoutStyle="fullbox"] > .box{  width:calc(100% / var(--count)) }

/* boxCout */
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }

.mt-5{margin-top: .3125rem;}
.mt-10{margin-top: .625rem;}
.mt-20{margin-top: 1.25rem;}
.mt-24{margin-top: 1.5rem;}  
.mt-30{margin-top: 1.875rem;}
.mt-35{margin-top: 2.1875rem;}
.mt-40{margin-top: 2.5rem;}
.mt-50{margin-top: 3.125rem;}
.mt-80{margin-top: 5rem;}

.mb-20{margin-bottom: 1.25rem;}
.mb-50{margin-bottom: 3.125rem;}

.pb-0{padding-bottom: 0!important;}
.pt-0{padding-top: 0!important;}

.width100 {width: 100% !important;width:100%}
.width95 {width: 95%;}
.width90 {width: 90%;}
.width85 {width: 85%;}
.width80 {width: 80%;}
.width75 {width: 75%;}
.width70 {width: 70%;}
.width65 {width: 65%;}
.width60 {width: 60%;}
.width55 {width: 55%;}
.width50 {width: 50%;}
.width45 {width: 45%;}
.width40 {width: 40%;}
.width35 {width: 35%;}
.width30 {width: 30%;}
.width25 {width: 25%;}
.width20 {width: 20%;}
.width15 {width: 15%;}
.width10 {width: 10%;}
 
.font-20{font-size: 1.25rem;} 
.font-28{font-size: 1.75rem}  
.font-30{font-size: 1.875rem;} 
.font-40{font-size: 2.5rem;}
.font-48{font-size: 3rem;}
.font-64{font-size: 4rem;}

 
html,body{font-size:16px}
@media (max-width:1580px){html, body {font-size: 14px;}}
@media (max-width:1240px){html, body {font-size: 13px;}} 
@media (max-width:768px) {html, body {font-size: 11px;}}

 
.section   {padding:5rem 0;}
.container {width: var(--layoutwidth); margin:auto;}
.container_min {width: var(--layoutwidthmin); margin:auto;}
.cont_box  {margin-top: 3.4375rem;} 

.section-left  {padding-left : calc((100% - var(--layoutwidth)) / 2);width:100%;}
.section-right {padding-right: calc((100% - var(--layoutwidth)) / 2);width:100%;}

.text-center{text-align: center;}

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-wrap{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;}


@media (max-width:1500px) {
    .container{width:90%;margin:auto;}
 
    .section-left  {padding-left : 5%}
    .section-right {padding-right: 5%}
}
 
@media (max-width:1340px) {
    .container_min {width:90%;margin:auto;}
}

@media (max-width: 990px) {
    .container{padding: 0;} 
}

@media (max-width: 768px) {  
    .cont_box {margin-top:  1.5rem}
}

@media (max-width:1240px){
    .md-direction{flex-direction: column;}
    .md-w100{width:100%}
    .md-w90{width:90%}
    .md-w80{width:80%}
    .md-w50{width:50%}
    .md-order{order: 1}
    .md-cont_box {margin-top: 4.68rem;}

    .md-wrap3{--count:3}
    .md-wrap2{--count:2}
    .md-wrap1{--count:1}
}
@media (max-width:990px){
    .sm-direction{flex-direction: column;}
    .sm-w100{width:100%}
    .sm-w90{width:90%}
    .sm-w80{width:80%}
    .sm-order{order: 1}
    .sm-cont_box {margin-top: 4.68rem;}

    .sm-wrap3{--count:3}
    .sm-wrap2{--count:2}
    .sm-wrap1{--count:1}
}
@media (max-width:768px){
    .xs-direction{flex-direction: column;}
    .xs-w100{width:100%}
    .xs-w90{width:90%}
    .xs-w80{width:80%}
    .xs-order{order: 1}
    .lg-cont_box,.md-cont_box,.sm-cont_box,.xs-cont_box {margin-top: 1.5rem;}

    .xs-wrap3{--count:3}
    .xs-wrap2{--count:2}
    .xs-wrap1{--count:1}
}
@media (max-width:550px){
    .xxs-direction{flex-direction: column;}
    .xxs-w100{width:100%}
    .xxs-w90{width:90%}
    .xxs-w80{width:80%}
    .xxs-order{order: 1}
    .xxs-cont_box {margin-top: 1.5rem}

    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}