@charset "utf-8";

#col_main>section{
  max-width:1180px;
  margin:0 auto 86px;
  padding:0 24px;
  box-sizing:border-box;
}
#c2{clear:both;margin:0;padding:0}

#c3{
  clear:both;
  position:relative;
  margin:0 0 42px;
  padding:62px 38px 56px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(237,247,251,.96) 0%,rgba(255,255,255,.98) 58%,rgba(246,251,253,.96) 100%),
    repeating-linear-gradient(135deg,rgba(31,111,169,.08) 0 2px,transparent 2px 14px);
  border:1px solid #d8e9f2;
  box-sizing:border-box;
}
#c3:before{
  content:"WORKS";
  position:absolute;
  right:34px;
  bottom:-10px;
  color:rgba(11,49,143,.07);
  font-size:96px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  pointer-events:none;
}
#c3:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:#d6001c;
}
#c3 article{position:relative;z-index:1;text-align:left}
#c3 h1{
  margin:0;
  color:#073d70;
  font-size:38px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:0;
  text-align:left;
}
#c3 h1:after{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin:22px 0 0;
  background:#d6001c;
}
#c3 div{text-align:left}

#c4,#c6,#c8,#c10,#c12{
  clear:both;
  position:relative;
  margin:54px 0 0;
  padding:26px 30px 22px;
  background:#073d70;
  border:1px solid #073d70;
  box-shadow:0 14px 30px rgba(7,61,112,.12);
  box-sizing:border-box;
}
#c4{margin-top:0}
#c4 h2,#c6 h2,#c8 h2,#c10 h2,#c12 h2{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.45;
  font-weight:800;
  letter-spacing:0;
  text-align:left;
}
#c4 h2:before,#c6 h2:before,#c8 h2:before,#c10 h2:before,#c12 h2:before{
  content:"";
  flex:0 0 auto;
  width:42px;
  height:3px;
  background:#d6001c;
}
#c4 h2:after,#c6 h2:after,#c8 h2:after,#c10 h2:after,#c12 h2:after{
  content:"PHOTO GALLERY";
  margin-left:auto;
  color:rgba(255,255,255,.66);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
}

#c5,#c7,#c9,#c11,#c13{
  clear:both;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:0 0 8px;
  padding:24px;
  background:#fff;
  border:1px solid #dbe8ef;
  border-top:0;
  box-shadow:0 18px 38px rgba(7,61,112,.09);
  box-sizing:border-box;
}
#c5>div.box,#c7>div.box,#c9>div.box,#c11>div.box,#c13>div.box{
  width:auto!important;
  max-width:none!important;
  overflow:hidden;
  background:#f7fbfd;
  border:1px solid #dbe8ef;
  box-shadow:none;
  box-sizing:border-box;
}
#c5 a,#c7 a,#c9 a,#c11 a,#c13 a{
  display:block;
  position:relative;
  overflow:hidden;
  background:#073d70;
  aspect-ratio:4 / 3;
}
#c5 a:before,#c7 a:before,#c9 a:before,#c11 a:before,#c13 a:before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:1;
  border:1px solid rgba(255,255,255,.55);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
#c5 a:after,#c7 a:after,#c9 a:after,#c11 a:after,#c13 a:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,61,112,0) 42%,rgba(7,61,112,.5) 100%);
  opacity:.65;
  pointer-events:none;
}
#c5 img,#c7 img,#c9 img,#c11 img,#c13 img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  object-fit:cover;
  transition:transform .34s ease,opacity .34s ease;
}
#c5 a:hover:before,#c7 a:hover:before,#c9 a:hover:before,#c11 a:hover:before,#c13 a:hover:before{opacity:1}
#c5 a:hover img,#c7 a:hover img,#c9 a:hover img,#c11 a:hover img,#c13 a:hover img{
  transform:scale(1.045);
  opacity:.94;
}

@media screen and (min-width:641px) and (max-width:834px){
  #col_main>section{padding:0 20px}
  #c3{margin-bottom:34px;padding:50px 28px 46px}
  #c3 h1{font-size:32px}
  #c4,#c6,#c8,#c10,#c12{margin-top:42px;padding:23px 24px 20px}
  #c5,#c7,#c9,#c11,#c13{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px}
}
@media screen and (max-width:640px){
  #col_main>section{margin-bottom:58px;padding:0 16px}
  #c3{margin-bottom:28px;padding:38px 22px 36px}
  #c3:before{right:12px;bottom:-2px;font-size:56px}
  #c3 h1{font-size:28px}
  #c3 h1:after{width:58px;height:3px;margin-top:18px}
  #c4,#c6,#c8,#c10,#c12{margin-top:34px;padding:20px 18px 18px}
  #c4{margin-top:0}
  #c4 h2,#c6 h2,#c8 h2,#c10 h2,#c12 h2{font-size:21px}
  #c4 h2:before,#c6 h2:before,#c8 h2:before,#c10 h2:before,#c12 h2:before{width:30px}
  #c4 h2:after,#c6 h2:after,#c8 h2:after,#c10 h2:after,#c12 h2:after{display:none}
  #c5,#c7,#c9,#c11,#c13{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;margin-bottom:4px}
  #c5 a,#c7 a,#c9 a,#c11 a,#c13 a{aspect-ratio:1 / 1}
}