/*-----360 * 640-----*/
/*-----360 * 640-----*/
/*-----360 * 640-----*/

@media screen and (max-width: 360px) {

  .uxui {
    grid-area: repeat(8, 1fr) / repeat(1, 1fr);
  }
  .grid {
    display: none;
  }

  /*-----360 * 640-----*/

  .header {
    height: 52px;
  }
  .header ul a {
    font-size: 1em;
  }
  .header img.logo {
    width: 20px;
    height: 32px;
  }
  .header .menu-icon .nav-icon {
    height: 3px;
    width: 30px;
  }
  .header .menu-icon .nav-icon:before {
    top: 10px;
  }
  .header .menu-icon .nav-icon:after {
    top: -10px;
  }

  /*-----360 * 640-----*/

  .pic {
    grid-area: 2 / 1 / 8 / span 1;
    width: 100vw;
    flex-direction: column;
    margin-top: 20%;
  }
  .gallery {
    margin-left: 10%;
    width: 80%;
  }
}

/*-----430*932-----*/
/*-----430*932-----*/
/*-----430*932-----*/

@media screen and (min-width: 361px) and (max-width: 430px) {

  .uxui {
    grid-area: repeat(8, 1fr) / repeat(1, 1fr);
  }
  .grid {
    display: none;
  }

  /*-----430*932-----*/

  .header {
    height: 60px;
  }
  .header ul a {
    font-size: 1.25em;
  }
  .header img.logo {
    width: 25px;
    height: 40px;
  }
  .header .menu-icon .nav-icon {
    height: 4px;
    width: 35px;
  }
  .header .menu-icon .nav-icon:before {
    top: 15px;
  }
  .header .menu-icon .nav-icon:after {
    top: -15px;
  }

  /*-----430*932-----*/

  .pic {
    grid-area: 2 / 1 / 8 / span 1;
    width: 100vw;
    flex-direction: column;
    margin-top: 20%;
  }
  .gallery {
    margin-left: 10%;
    width: 80%;
  }
}

/*-----744*1133-----*/
/*-----744*1133-----*/
/*-----744*1133-----*/

@media screen and (min-width: 431px) and (max-width: 744px) {

  .uxui {
    grid-area: repeat(8, 1fr) / repeat(1, 1fr);
  }
  .grid {
    display: none;
  }

  /*-----744*1133-----*/

  .header {
    height: 68px;
  }
  .header ul a {
    font-size: 1.25em;
  }
  .header img.logo {
    width: 30px;
    height: 48px;
  }
  .header .menu-icon .nav-icon {
    height: 5px;
    width: 40px;
  }
  .header .menu-icon .nav-icon:before {
    top: 20px;
  }
  .header .menu-icon .nav-icon:after {
    top: -20px;
  }

  /*-----744*1133-----*/

  .pic {
    grid-area: 2 / 1 / 8 / span 1;
    width: 100vw;
    flex-direction: column;
    margin-top: 20%;
  }
  .gallery {
    margin-left: 10%;
    width: 80%;
  }
}

/*-----1024 * 1366-----*/
/*-----1024 * 1366-----*/
/*-----1024 * 1366-----*/

@media screen and (min-width: 745px) and (max-width: 1024px) {

  .uxui {
    grid-area: repeat(4, 1fr) / repeat(2, 1fr);
  }
  .header {
    display: none;
  }

  /*-----1024 * 1366-----*/

  .grid {
    grid-area: 1 / 1 / 1 / span 2;
    width: 100vw;
    height: 100px;
  }
  .b2 img.log {         /*logo*/
    grid-area: 1 / 1 / 1 / span 1;
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.5em;
  }

  /*-----1024 * 1366-----*/

  .pic {
    grid-area: 2 / 1 / 4 / span 2;
    margin-left: 10%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 40%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 40%;
  }
  .pic .C {
    grid-area: 3 / 1 / 3 / span 1;
    width: 40%;
  }
  .pic .D {
    grid-area: 3 / 2 / 3 / span 1;
    width: 40%;
  }
  .pic .E {
    grid-area: 4 / 1 / 4 / span 1;
    width: 40%;
  }
  .pic .F {
    grid-area: 4 / 2 / 4 / span 1;
    width: 40%;
  }
}

/*-----1280 * 832-----*/
/*-----1280 * 832-----*/
/*-----1280 * 832-----*/

@media screen and (min-width: 1025px) and (max-width: 1280px) {

  .uxui {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .header {
    display: none;
  }

  /*-----1280 * 832-----*/

  .grid {
    height: 100px;
    grid-area: 1 / 1 / 1 / span 3;
    width: 100vw;
    height: 100px;
  }
  .b2 img.log {         /*logo*/
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.5em;
  }

  /*-----1280 * 832-----*/

  .pic {
    grid-area: 2 / 1 / 3 / span 3;
    margin-left: 5%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 30%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 30%;
  }
  .pic .C {
    grid-area: 3 / 3 / 3 / span 1;
    width: 30%;
  }
  .pic .D {
    grid-area: 4 / 1 / 4 / span 1;
    width: 30%;
  }
  .pic .E {
    grid-area: 4 / 2 / 4 / span 1;
    width: 30%;
  }
  .pic .F {
    grid-area: 4 / 3 / 4 / span 1;
    width: 30%;
  }
}

/*-----1440*1024-----*/
/*-----1440*1024-----*/
/*-----1440*1024-----*/

@media screen and (min-width: 1281px) and (max-width: 1440px) {

  .uxui {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .header {
    display: none;
  }

  /*-----1440*1024-----*/

  .grid {
    grid-area: 1 / 1 / 1 / span 3;
    height: 100px;
    width: 100vw;
  }
  .b2 img.log {         /*logo*/
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.5em;
  }

  /*-----1440*1024-----*/

  .pic {
    grid-area: 2 / 1 / 3 / span 3;
    margin-left: 5%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 30%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 30%;
  }
  .pic .C {
    grid-area: 3 / 3 / 3 / span 1;
    width: 30%;
  }
  .pic .D {
    grid-area: 4 / 1 / 4 / span 1;
    width: 30%;
  }
  .pic .E {
    grid-area: 4 / 2 / 4 / span 1;
    width: 30%;
  }
  .pic .F {
    grid-area: 4 / 3 / 4 / span 1;
    width: 30%;
  }
}

/*-----1512*982-----*/
/*-----1512*982-----*/
/*-----1512*982-----*/

@media screen and (min-width: 1441px) and (max-width: 1512px) {

  .uxui {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }

  .header {
    display: none;
  }

  /*-----1512*982-----*/

  .grid {
    grid-area: 1 / 1 / 1 / span 3;
    height: 100px;
    width: 100vw;
  }

  .b2 img.log {         /*logo*/
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.5em;
  }

  /*-----1512*982-----*/

  .pic {
    grid-area: 2 / 1 / 3 / span 3;
    margin-left: 5%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 30%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 30%;
  }
  .pic .C {
    grid-area: 3 / 3 / 3 / span 1;
    width: 30%;
  }
  .pic .D {
    grid-area: 4 / 1 / 4 / span 1;
    width: 30%;
  }
  .pic .E {
    grid-area: 4 / 2 / 4 / span 1;
    width: 30%;
  }
  .pic .F {
    grid-area: 4 / 3 / 4 / span 1;
    width: 30%;
  }
}

/*-----1728*1117-----*/
/*-----1728*1117-----*/
/*-----1728*1117-----*/

@media screen and (min-width: 1513px) and (max-width: 1728px) {

  .uxui {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .header {
    display: none;
  }

  /*-----1728*1117-----*/

  .grid {
    grid-area: 1 / 1 / 1 / span 3;
    height: 100px;
    width: 100vw;
  }
  .b2 img.log {         /*logo*/
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.5em;
  }

  /*-----1728*1117-----*/

  .pic {
    grid-area: 2 / 1 / 3 / span 3;
    margin-left: 5%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 30%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 30%;
  }
  .pic .C {
    grid-area: 3 / 3 / 3 / span 1;
    width: 30%;
  }
  .pic .D {
    grid-area: 4 / 1 / 4 / span 1;
    width: 30%;
  }
  .pic .E {
    grid-area: 4 / 2 / 4 / span 1;
    width: 30%;
  }
  .pic .F {
    grid-area: 4 / 3 / 4 / span 1;
    width: 30%;
  }
}

/*-----1729 +++ *1117-----*/
/*-----1729 +++ *1117-----*/
/*-----1729 +++ *1117-----*/

@media screen and (min-width: 1729px) {

  .uxui {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .header {
    display: none;
  }

  /*-----1729 +++ *1117-----*/

  .grid {
    grid-area: 1 / 1 / 1 / span 3;
    height: 100px;
    width: 100vw;
  }
  .b2 img.log {         /*logo*/
    width: 50px;
    height: 80px;
  }
  .i ul li {
    font-size: 1.75em;
  }

  /*-----1729 +++ *1117-----*/

  .pic {
    grid-area: 2 / 1 / 3 / span 3;
    margin-left: 5%;
    margin-top: 10%;
  }
  .pic .A {
    grid-area: 2 / 1 / 2 / span 1;
    width: 30%;
  }
  .pic .B {
    grid-area: 2 / 2 / 2 / span 1;
    width: 30%;
  }
  .pic .C {
    grid-area: 3 / 3 / 3 / span 1;
    width: 30%;
  }
  .pic .D {
    grid-area: 4 / 1 / 4 / span 1;
    width: 30%;
  }
  .pic .E {
    grid-area: 4 / 2 / 4 / span 1;
    width: 30%;
  }
  .pic .F {
    grid-area: 4 / 3 / 4 / span 1;
    width: 30%;
  }
}