@charset "UTF-8";

.wrapper{
    width:100%;
}

.container{
    width:100%;
}

.gwrap {
    display: grid;
    grid-template-rows: 80px auto 100px;/*head:80px body:auto footer:100px*/
    grid-template-columns: auto 200px;/*main:auto leftside:200px*/
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.main {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.sidebar {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}



.flx{
    display:flex;
}

.flx_r{
    display:flex;
    flex-direction: row;
}

.flx_c{
    display:flex;
    flex-direction: column;
}


.flx-c{
    display:flex;
    justify-content: center;
}

.flx-e{
    display:flex;
    justify-content: end;
}

.flx-sa{
    display:flex;
    justify-content: space-around;
}

.flx-sb{
    display:flex;
    justify-content: space-between;
}

.flx-se{
    display:flex;
    justify-content: space-evenly;
}

.flx_r{
    display:flex;
    flex-direction: row;
}

.flx_c{
    display:flex;
    flex-direction: column;
}


.jc-s{justify-content: start;}
.jc-c{justify-content: center;}
.jc-e{justify-content: end;}
.jc-sa{justify-content: space-around;}
.jc-sb{justify-content: space-between;}
.jc-se{justify-content: space-evenly;}
.jc-fs{justify-content: flex-start;}
.jc-fe{justify-content: flex-end;}

.ali-s{align-items: start;}
.ali-e{align-items: end;}
.ali-c{align-items: center;}
.ali-st{align-items: stretch;}
.ali-fs{align-items: flex-start;}
.ali-fe{align-items: flex-end;}

.flxdir-rev{flex-direction: row-reverse;}
.flxdir-c-rev{flex-direction: column-reverse;}
.fwrap{flex-wrap: wrap;}
.fwrap-r{flex-wrap: wrap-reverse;}
.fnowrap{flex-wrap: nowrap;}

.f-child1{order:1;}
.f-child2{order:2;}
.f-child3{order:3;}
.f-child4{order:4;}
.f-child5{order:5;}