#section01{ overflow: hidden; position: relative; width: 100%; height: 100vh; background-color: #444; }
#section01 .full-slogan{ top: calc(50% - 50px);}
#section01 .full-slogan h3{ padding-bottom: 15px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01 { width: 100%; height: 57.73vw; margin-top: 50px; }
}


#section02{ padding: 100px 0 150px; overflow: hidden; text-align: center;}
#section02 .tit{ padding-bottom: 60px; border-bottom: 1px solid #ccc; position: relative;}
#section02 .tit:after{ content: ''; position: absolute; width: 40px; height: 7px; background-color: #28b8d8; display: block; bottom: -3px; left: 0; right: 0; margin: 0 auto;}
#section02 .tit h3{ padding-bottom: 15px;}
#section02 p.info{ padding: 60px 0 40px;}
#section02 .content{ line-height: 26px; padding-bottom: 100px;} 
#section02 .deco01{ width: 100%; height: 500px; position: relative;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
    #section02 .deco01{ width: 100%; height: 34.72vw; position: relative;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 55px 0 60px;}
    #section02 .tit{ padding-bottom: 30px; border-bottom: 1px solid #ccc; position: relative;}
    #section02 .tit:after{ width: 50px; height: 3px; bottom: -1px; }
    #section02 .tit h3{ padding-bottom: 5px;}
    #section02 p.info{ padding: 30px 0 15px;}
    #section02 .content{ line-height: 20px; padding-bottom: 35px;} 
    #section02 .deco01{ height: 40.00vw; }
}



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

}



#menu{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(34,34,34,.7); z-index: 10000; overflow-x: scroll; padding: 80px 0; opacity: 0; pointer-events: none; transition: .3s;}
#menu::-webkit-scrollbar{ display: none;}
#menu.show{ opacity: 1; pointer-events: inherit;}
#menu .close{ position: fixed; top: 30px; right: 30px; font-size: 40px; color: #fff;}
#menu img{ width: 90%; position: relative;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #menu{ display: flex; align-items: center; justify-content: center;}
    #menu img{ width: 95%; position: relative;}

}