@charset "utf-8";




body#index {
 height: 100%;
 background-color: #fff;
 max-height: 100svh;
}

#index .contentsWrapper {
 width: 100%;
 height: 100%;
 max-height: 100vh;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

#index .contentsWrapper .a-wrap {
 display: block;
 width: 50%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 transition: 0.3s;
 overflow: hidden;
}

#index .contentsWrapper .a-wrap:first-child {
 background-color: #00C4E4;

}

#index .contentsWrapper .a-wrap:last-child {
 background-color: #767B63;
}

#index .contentsWrapper .a-wrap>img {
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -1;
 object-fit: cover;
 object-position: center center;
 scale: 1;
}

#index .contentsWrapper .a-wrap:has(a:hover) {
 background-color: transparent;
 transition: 1s;
}

#index .contentsWrapper .a-wrap:has(a:hover)>img {
 animation: zoomin 30s ease both;

}

@keyframes zoomin {
 0% {
  scale: 1;
 }

 100% {
  scale: 1.5;
 }
}

#index .contentsWrapper a img {
 height: calc(628 / 768 * 100%);
 max-height: 628px;
 transition: 0.1s;
}

#index .contentsWrapper a:hover img {
 opacity: 1;
}


@media (max-width:680px) {
 #index .contentsWrapper {
  height: 100svh;
 }

 #index .contentsWrapper .a-wrap {
  width: 100%;
  height: 50%;
 }

 #index .contentsWrapper a img {
  max-height: 35vh;

 }
}