.keyvisual {
  width: 100%;
  height: 100vh;
  position: relative;
}
article {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.bg {
  width: 100%;
  height: 100%;
}
.keyvisual_bg1 {
  background: url(../../img/brand/identity/brand-identity-kv.jpg) no-repeat
    center/cover;
}
.keyvisual_bg2 {
  background: url(../../img/brand/identity/brand-identity-img-01.jpg) no-repeat
    center/cover;
}
.keyvisual_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.keyvisual_texts {
  text-align: center;
}
.keyvisual_title h1,
.keyvisual_title h2 {
  padding-bottom: 7px;
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.7px;
}
.keyvisual_texts p {
  font-size: 14px;
  color: #fff;

  letter-spacing: -0.7px;
  font-weight: 300;
}
.keyvisual_logo {
  width: 470px;
  margin-bottom: 20px;
}
.keyvisual_title h2 {
  padding-bottom: 12px;
  font-size: 34px;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.14px;
}
/* systems */
.systems {
  padding: 100px 0;
}
.colorsystem_wrap {
  margin-bottom: 100px;
}
.colorsystem_wrap,
.logosystem_wrap {
  display: flex;
}
.systems_title {
  flex: 1;
}
.systems_title h3 {
  font-size: 26px;
  color: #333;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.colorsystem_contents,
.logosystem_contents {
  flex: 3;
}
.colorsystem_contents_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 160px 88px;
  row-gap: 10px;
}
.colorsystem_content {
  width: 100%;
  height: 100%;
  padding: 11px 18px;
}
.colorsystem_red {
  background-color: #da4325;
}
.colorsystem_darkgray {
  background-color: #626469;
}
.colorsystem_gray {
  background-color: #a4a8ab;
}
.colorsystem_black {
  background-color: #000;
}
.colorsystem_content h4 {
  display: block;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 10px;

  letter-spacing: -0.1px;
}
.colorsystem_content p {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 13px;
  font-weight: 300;

  letter-spacing: -0.1px;
  margin-bottom: 5px;
}
.colorsystem_content_text span:nth-child(4) {
  margin-right: 15px;
}
.logosystem_img {
  width: 100%;
  position: relative;
}
.logosystem_img:after {
  content: "Master Brand";
  position: absolute;
  left: 0;
  bottom: -25px;
  font-size: 14px;
  color: #707070;
  font-weight: 300;
  letter-spacing: -0.1px;
}

/* firstword */
.firstword {
  width: 100%;
  height: 100vh;
}
.firstword .container {
  max-width: 1920px;
}
.firstword_bg {
  width: 100%;
  height: 100%;
  background: url(../../img/brand/identity/brand-identity-img-02.jpg) no-repeat
    center/cover;
}
.firstword_wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 5%;
}
.firstword_title h4 {
  padding-bottom: 7px;
  font-size: 24px;
  color: #333;
  font-weight: 300;
  letter-spacing: -0.7px;
}
.firstword_title p {
  font-size: 14px;
  letter-spacing: -0.7px;
  color: #333;
  font-weight: 300;
}

/* blackspace */
.blackspace {
  width: 100%;
  height: 100vh;
}
.blackspace_bg {
  width: 100%;
  height: 100%;
  background: url(../../img/brand/identity/brand-identity-img-03.jpg) no-repeat
    center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blackspace_bg2 {
  background: url(../../img/brand/identity/brand-identity-img-05.jpg) no-repeat
    center/cover;
}
.blackspace_bg3 {
  background: url(../../img/brand/identity/brand-identity-img-07.jpg) no-repeat
    center/cover;
}
.blackspace_logo {
  width: 370px;
}
.blackspace_bg3 .blackspace_logo {
  width: 624px;
}

/* rects */
.rects {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rects_wrap {
  height: 100%;
  flex: 1;
  background-color: #da4325;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rects_wrap2 {
  background-color: #6d6f71;
}
.rects_bg {
  background: url(../../img/brand/identity/brand-identity-img-04.jpg) no-repeat
    center/cover;
}
.rects_bg2 {
  background: url(../../img/brand/identity/brand-identity-img-06.jpg) no-repeat
    center/cover;
}

.rects_text h5 {
  padding-bottom: 9px;
  font-size: 24px;
  color: #fff;
  font-weight: 300;
  line-height: 36px;
  letter-spacing: -0.7px;
  text-align: center;
}
.rects_text p {
  font-size: 14px;
  color: #fff;
  line-height: 24px;
  letter-spacing: -0.7px;
  font-weight: 300;
  text-align: center;
}

/* identity */
.identity {
  padding: 100px 0;
}
.corporate_wrap,
.brand_wrap {
  display: flex;
  padding-bottom: 50px;
  padding-top: 25px;
  border-top: 1px solid #000;
}
.brand_wrap {
  padding-bottom: 0;
}
.corporate_title,
.brand_title {
  flex: 1;
}
.corporate_title h5,
.brand_title h5 {
  font-size: 26px;
  color: #333;
  font-weight: 500;

  letter-spacing: -0.1px;
}
.corporate_contents,
.brand_contents {
  flex: 4;
}
.corporate_contents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 20px;
}
.corporatelist,
.brandlist {
  display: flex;
  align-items: center;
  justify-content: center;
}
.corporatelist img {
  width: 180px;
}
.brand_contents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 20px;
}

.brandlist img {
  width: 210px;
}