#section01{ width: 100%; padding: 170px 0 80px; text-align: center; overflow: hidden; position: relative;}
#section01 > .img-wrap{ position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0;}
#section01 > .img-wrap .img.active{ opacity: 1;}
#section01 > .img-wrap .img{ opacity: 0; transition: .3s;}
#section01 .tit{ padding-bottom: 60px;}
#section01 .tit h3{ padding-bottom: 20px;}
#section01 .tit h4{ padding-bottom: 50px;}
#section01 .btn-wrap{ width: 720px; height: 600px; position: relative; left: 0; right: 0; margin: 0 auto;}
#section01 .btn-wrap a{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; width: 170px; height: 170px; z-index: 10; }
#section01 .btn-wrap a:after{ content: ''; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid rgba(255,255,255,.2); background-color: rgba(34,34,34,.3); transition: .3s; transform: rotate(45deg); transform-origin: center; top: 0; left: 0; z-index: -1;}
#section01 .btn-wrap a.btn01{ left: 155px; top: 35px;}
#section01 .btn-wrap a.btn02{ right: 155px; top: 35px;}
#section01 .btn-wrap a.btn03{ left: 35px; top: 155px;}
#section01 .btn-wrap a.btn04{ right: 35px; top: 155px;}
#section01 .btn-wrap a.btn05{ left: 155px; bottom: 155px;}
#section01 .btn-wrap a.btn06{ right: 155px; bottom: 155px;}
#section01 .btn-wrap a.btn07{ left: 0; right: 0; bottom: 35px; margin: 0 auto;}
#section01 .btn-wrap a .img-wrap{ width: 68px; height: 40px; display: block; position: relative; margin-bottom: 15px;}
#section01 .btn-wrap a .img-wrap img{ position: absolute; width: 100%; height: 100%; object-fit: contain; top: 0; left: 0; right: 0; margin: 0 auto; transition: .3s; }
#section01 .btn-wrap a .img-wrap img.hover{ opacity: 0;}
#section01 .btn-wrap a h3{ padding-bottom: 5px; transition: .3s;}
#section01 .btn-wrap a p{ transition: .3s;}
#section01 .btn-wrap a > img{ opacity: 0; height: 0; transition: opacity 1s; }
/* hover */
#section01 .btn-wrap a:hover:after{ border: 1px solid rgba(255,255,255,.2); background-color: rgba(255,255,255,.9);}
#section01 .btn-wrap a:hover .img-wrap img.normal{ opacity: 0;}
#section01 .btn-wrap a:hover .img-wrap img.hover{ opacity: 1;}
#section01 .btn-wrap a:hover h3{ color: #222;}
#section01 .btn-wrap a:hover p{ padding-bottom: 15px; color: #888;}
#section01 .btn-wrap a:hover > img{ opacity: 1; height: 15px;  object-fit: cover;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ padding: 75px 0 70px; margin-top: 50px;}
  #section01 .tit{ padding-bottom: 30px;}
  #section01 .tit h3{ padding-bottom: 10px;}
  #section01 .tit h4{ padding-bottom: 25px;}
  #section01 .btn-wrap{ width: 92.00vw; height: 76.80vw; }
  #section01 .btn-wrap a{ width: 21.73vw; height: 21.73vw; z-index: 10; }
  #section01 .btn-wrap a.btn01{ left: 19.87vw; top: 4.53vw;}
  #section01 .btn-wrap a.btn02{ right: 19.87vw; top: 4.53vw;}
  #section01 .btn-wrap a.btn03{ left: 4.53vw; top: 19.87vw;}
  #section01 .btn-wrap a.btn04{ right: 4.53vw; top: 19.87vw;}
  #section01 .btn-wrap a.btn05{ left: 19.87vw; bottom: 19.87vw;}
  #section01 .btn-wrap a.btn06{ right: 19.87vw; bottom: 19.87vw;}
  #section01 .btn-wrap a.btn07{ left: 0; right: 0; bottom: 4.53vw; margin: 0 auto;}
  #section01 .btn-wrap a .img-wrap{ width: 8.67vw; height: 4.27vw; display: block; position: relative; margin-bottom: 5px;}
  #section01 .btn-wrap a h3{ padding-bottom: 0; transition: .3s; line-height: 12px;}
  /* hover */
  #section01 .btn-wrap a:hover h3{ color: #222; padding-bottom: 10px;}
  #section01 .btn-wrap a:hover > img{ height: 8px;}

}