.container{
    max-width: 1200px;
    margin: auto;
    padding-inline:15px ;
}

.row{
    display: flex;
    flex-wrap: wrap;
    /* margin-left: -15px;
    margin-right: -15px; */
    margin-inline: -15px;
}
[class*="col-"], .col{
    /* 選取器：當class有"col-" */
    padding-inline:15px;
    box-sizing:border-box;
}

/* 以下適用複雜組合e.g. (2,6,4)的多裝置RWD */
.col-1  { width: 8.333333%;}
.col-2  { width: 16.666666%;}
.col-3  { width: 25%;}
.col-4  { width: 33.333333%;}
.col-5  { width: 41.666666%;}
.col-6  { width: 50%;}
.col-7  { width: 58.333333%;}
.col-8  { width: 66.666666%;}
.col-9  { width: 75%;}
.col-10 { width: 83.333333%;}
.col-11 { width: 91.666666%;}
.col-12 { width: 100%;}

.offset-1  { margin-left: 8.333333%;}
.offset-2  { margin-left: 16.666666%;}
.offset-3  { margin-left: 25%;}
.offset-4  { margin-left: 33.333333%;}
.offset-5  { margin-left: 41.666666%;}
.offset-6  { margin-left: 50%;}
.offset-7  { margin-left: 58.333333%;}
.offset-8  { margin-left: 66.666666%;}
.offset-9  { margin-left: 75%;}
.offset-10 { margin-left: 83.333333%;}
.offset-11 { margin-left: 91.666666%;}

@media screen and (min-width: 768px){
    .col-md-1 {width: 8.333333%;}
    .col-md-2 {width: 16.666666%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.333333%;}
    .col-md-5 {width: 41.666666%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.333333%;}
    .col-md-8 {width: 66.666666%;}
    .col-md-9 {width: 75%;}
    .col-md-10{width: 83.333333%;}
    .col-md-11{width: 91.666666%;}
    .col-md-12{width: 100%;}

    .offset-md-1  { margin-left: 8.333333%;}
    .offset-md-2  { margin-left: 16.666666%;}
    .offset-md-3  { margin-left: 25%;}
    .offset-md-4  { margin-left: 33.333333%;}
    .offset-md-5  { margin-left: 41.666666%;}
    .offset-md-6  { margin-left: 50%;}
    .offset-md-7  { margin-left: 58.333333%;}
    .offset-md-8  { margin-left: 66.666666%;}
    .offset-md-9  { margin-left: 75%;}
    .offset-md-10 { margin-left: 83.333333%;}
    .offset-md-11 { margin-left: 91.666666%;}
}

@media screen and (min-width: 1024px){
    .col-lg-1 {width: 8.333333%;}
    .col-lg-2 {width: 16.666666%;}
    .col-lg-3 {width: 25%;}
    .col-lg-4 {width: 33.333333%;}
    .col-lg-5 {width: 41.666666%;}
    .col-lg-6 {width: 50%;}
    .col-lg-7 {width: 58.333333%;}
    .col-lg-8 {width: 66.666666%;}
    .col-lg-9 {width: 75%;}
    .col-lg-10{width: 83.333333%;}
    .col-lg-11{width: 91.666666%;}
    .col-lg-12{width: 100%;}
}

@media screen and (min-width: 1200px){
    .col-xl-1 {width: 8.333333%;}
    .col-xl-2 {width: 16.666666%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.333333%;}
    .col-xl-5 {width: 41.666666%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.333333%;}
    .col-xl-8 {width: 66.666666%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10{width: 83.333333%;}
    .col-xl-11{width: 91.666666%;}
    .col-xl-12{width: 100%;}
}

@media screen and (min-width: 1400px){
    .col-xxl-1 {width: 8.333333%;}
    .col-xxl-2 {width: 16.666666%;}
    .col-xxl-3 {width: 25%;}
    .col-xxl-4 {width: 33.333333%;}
    .col-xxl-5 {width: 41.666666%;}
    .col-xxl-6 {width: 50%;}
    .col-xxl-7 {width: 58.333333%;}
    .col-xxl-8 {width: 66.666666%;}
    .col-xxl-9 {width: 75%;}
    .col-xxl-10{width: 83.333333%;}
    .col-xxl-11{width: 91.666666%;}
    .col-xxl-12{width: 100%;}
}

/* 以下適用單一組合、多裝置RWD */
.row-cols-1 > .col{width: 100%;}
.row-cols-2 > .col{width: 50%;}
.row-cols-3 > .col{width: 33.333333%;}
.row-cols-4 > .col{width: 25%;}
.row-cols-5 > .col{width: 20%;}
.row-cols-6 > .col{width: 16.666666%;}
.row-cols-7 > .col{width: 14.2857142857%;}
.row-cols-8 > .col{width: 12.5%;}
.row-cols-9 > .col{width: 11.111111%;}
.row-cols-10 > .col{width: 10%;}
.row-cols-11 > .col{width: 9.090909%;}
.row-cols-12 > .col{width: 8.333333%;}

@media screen and (min-width: 768px){
    .row-cols-md-1 > .col{width: 100%;}
    .row-cols-md-2 > .col{width: 50%;}
    .row-cols-md-3 > .col{width: 33.333333%;}
    .row-cols-md-4 > .col{width: 25%;}
    .row-cols-md-5 > .col{width: 20%;}
    .row-cols-md-6 > .col{width: 16.666666%;}
    .row-cols-md-7 > .col{width: 14.2857142857%;}
    .row-cols-md-8 > .col{width: 12.5%;}
    .row-cols-md-9 > .col{width: 11.111111%;}
    .row-cols-md-10 > .col{width: 10%;}
    .row-cols-md-11 > .col{width: 9.090909%;}
    .row-cols-md-12 > .col{width: 8.333333%;}
}

@media screen and (min-width: 1024px){
    .row-cols-lg-1 > .col{width: 100%;}
    .row-cols-lg-2 > .col{width: 50%;}
    .row-cols-lg-3 > .col{width: 33.333333%;}
    .row-cols-lg-4 > .col{width: 25%;}
    .row-cols-lg-5 > .col{width: 20%;}
    .row-cols-lg-6 > .col{width: 16.666666%;}
    .row-cols-lg-7 > .col{width: 14.2857142857%;}
    .row-cols-lg-8 > .col{width: 12.5%;}
    .row-cols-lg-9 > .col{width: 11.111111%;}
    .row-cols-lg-10 > .col{width: 10%;}
    .row-cols-lg-11 > .col{width: 9.090909%;}
    .row-cols-lg-12 > .col{width: 8.333333%;}
}

@media screen and (min-width: 1200px){
    .row-cols-xl-1 > .col{width: 100%;}
    .row-cols-xl-2 > .col{width: 50%;}
    .row-cols-xl-3 > .col{width: 33.333333%;}
    .row-cols-xl-4 > .col{width: 25%;}
    .row-cols-xl-5 > .col{width: 20%;}
    .row-cols-xl-6 > .col{width: 16.666666%;}
    .row-cols-xl-7 > .col{width: 14.2857142857%;}
    .row-cols-xl-8 > .col{width: 12.5%;}
    .row-cols-xl-9 > .col{width: 11.111111%;}
    .row-cols-xl-10 > .col{width: 10%;}
    .row-cols-xl-11 > .col{width: 9.090909%;}
    .row-cols-xl-12 > .col{width: 8.333333%;}
}
@media screen and (min-width: 1400px){
    .row-cols-xxl-1 > .col{width: 100%;}
    .row-cols-xxl-2 > .col{width: 50%;}
    .row-cols-xxl-3 > .col{width: 33.333333%;}
    .row-cols-xxl-4 > .col{width: 25%;}
    .row-cols-xxl-5 > .col{width: 20%;}
    .row-cols-xxl-6 > .col{width: 16.666666%;}
    .row-cols-xxl-7 > .col{width: 14.2857142857%;}
    .row-cols-xxl-8 > .col{width: 12.5%;}
    .row-cols-xxl-9 > .col{width: 11.111111%;}
    .row-cols-xxl-10 > .col{width: 10%;}
    .row-cols-xxl-11 > .col{width: 9.090909%;}
    .row-cols-xxl-12 > .col{width: 8.333333%;}
}