/*------------------------------

main

-------------------------------*/
.main-container { width: 100%; position: relative; }
.main-container .pc-size { display: block; }
.main-container .sp-size { display: none; }
.main-container .main-inner { width: 100%; padding-bottom: calc(600 / 1280 * 100%); background-color: #000; }
.main-container .main-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main-container .main-video video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.main-container .main-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; background-color: #000; }
.main-container .main-loading ul { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; gap: 0 1rem; }
.main-container .main-loading ul li { width: 6px; height: 6px; border-radius: 50%; background-color: #fff; opacity: 0.2; animation: loadingMotion 0.6s linear 0s infinite; }
@keyframes loadingMotion { 0% { opacity: 0.2; }
  10% { opacity: 1; }
  80% { opacity: 0.2; }
  100% { opacity: 0.2; } }
.main-container .main-loading ul li:nth-child(1) { animation-delay: 0s; }
.main-container .main-loading ul li:nth-child(2) { animation-delay: 0.2s; }
.main-container .main-loading ul li:nth-child(3) { animation-delay: 0.4s; }
.main-container .main-loading.fadeOut { pointer-events: none; animation: loadingFadeOutMotion 0.5s linear 0.5s forwards; }
@keyframes loadingFadeOutMotion { 0% { opacity: 1; }
  100% { opacity: 0; } }
.main-container .main-visual { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: 1s linear 0s opacity; }
.main-container .main-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.main-container .main-visual.fadeIn { opacity: 1; pointer-events: auto; }
.main-container .main-btn-cls { position: absolute; top: 10px; left: auto; right: 8px; width: 80px; padding: 0.5rem 0; font-size: 1.4rem; background-color: #fff; color: #000; text-align: center; pointer-events: none; opacity: 0; transition: 1s linear 0s opacity; cursor: pointer; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
.main-container .main-btn-cls.active { pointer-events: auto; opacity: 1; }
.main-container.sp-mode .pc-size { display: none; }
.main-container.sp-mode .sp-size { display: block; }
.main-container.sp-mode .main-inner { padding-bottom: calc(540 / 375 * 100%); }