/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@charset "UTF-8";

/* CSS Document */
.container.pc-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /*  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
  gap: 2vw 2vw;
  grid-auto-flow: row;
  -ms-grid-rows: auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto;
  grid-template-areas:
    ".    .    .     .     .     .     .    three three three three three three three"
    ".    .    .     .     .     .     .    three three three three three three three"
    ".    one  one  one  two  two  two three three three three three three three"
    ".    one  one  one  two  two  two  three three three three three three three"
    "four four four four two  two  two  three three three three three three three"
    "four four four four two  two  two  three three three three three three three"
    "four four four four five five five five  five six   six   six   six   six"
    "four four four four five five five five  five  six   six   six   six   six"
    "four four four four five five five five  five  seven seven seven .     ."
    "four four four four five five five five  five  seven seven seven .     ."
    "four four four four . . . . . seven seven seven . ."
    "four four four four . . . . . . . . . ."
    ". . . . . . . . . . . . . ."
  ;
  width: 100vw;
  height: auto;
  margin: 0;
}

/* SP */
@media only screen and (max-width: 768px) {
  .container.sp-grid {
    width: 100%;
    height: auto;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    /*  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
    gap: 2vw 2vw;
    grid-auto-flow: row;
    -ms-grid-rows: auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto 2vw auto;
    grid-template-areas:
    ".    .    .     .     .     .     .    three three three three three three three"
    ".    .    .     .     .     .     .    three three three three three three three"
    ".    one  one  one  two  two  two three three three three three three three"
    ".    one  one  one  two  two  two  three three three three three three three"
    "four four four four two  two  two  three three three three three three three"
    "four four four four two  two  two  three three three three three three three"
    "four four four four five five five five  five six   six   six   six   six"
    "four four four four five five five five  five  six   six   six   six   six"
    "four four four four five five five five  five  seven seven seven .     ."
    "four four four four five five five five  five  seven seven seven .     ."
    "four four four four . . . . . seven seven seven . ."
    "four four four four . . . . . . . . . ."
    ". . . . . . . . . . . . . ."
    ;
  }


}

.one {
  -ms-grid-row: 5;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 5;
  grid-area: one;
  margin-top: -6.2vw;
}

.two {
  -ms-grid-row: 5;
  -ms-grid-row-span: 7;
  -ms-grid-column: 9;
  -ms-grid-column-span: 5;
  grid-area: two;
}

.three {
  -ms-grid-row: 1;
  -ms-grid-row-span: 11;
  -ms-grid-column: 15;
  -ms-grid-column-span: 11;
  grid-area: three;
}

.five {
  -ms-grid-row: 13;
  -ms-grid-row-span: 7;
  -ms-grid-column: 9;
  -ms-grid-column-span: 9;
  grid-area: five;
}

.six {
  -ms-grid-row: 13;
  -ms-grid-row-span: 3;
  -ms-grid-column: 19;
  -ms-grid-column-span: 9;
  grid-area: six;
  margin-top: 2vw;
}

.seven {
  -ms-grid-row: 17;
  -ms-grid-row-span: 5;
  -ms-grid-column: 19;
  -ms-grid-column-span: 5;
  grid-area: seven;
}

.four {
  -ms-grid-row: 9;
  -ms-grid-row-span: 15;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: four;
}


.container {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */

.container * {
  /*  border: 1px solid red;*/
  position: relative;
}

.container *:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: grid;
  display: -ms-grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

div.container>div.one>div>div>div>div {
  padding-top: 70%;
}

div.container>div.two>div>div>div>div {
  padding-top: 124%;
}

div.container>div.three>div>div>div>div {
  padding-top: 70%;
}

div.container>div.four>div>div>div>div {
  padding-top: 140%;
}

div.container>div.five>div>div>div>div {
  padding-top: 69%;
}

div.container>div.six>div>div>div>div {
  padding-top: 53%;
}

div.container>div.six>div>div>div>div {
  padding-top: 63%;
}

div.container>div.seven>div>div>div>div {
  padding-top: 53%;
}

/* SP */
@media only screen and (max-width: 768px) {
  #panel>div.container>div.three>div>div>div>div {
    padding-top: 82.5%;
  }

  #panel>div.container>div.four>div>div>div>div {
    padding-top: 170%;
  }
}