/* 레이아웃 */
* {box-sizing: border-box;}
html, body {height: 100%; background-color: #000; color: #fff;}
#root {position: relative; display: flex; align-items: center; width: 100%; height: 100%; min-height: 100vh;}

/* 로딩 */
.loading {display: none; align-items: center; justify-content: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background: #000; opacity: 0;}
.loading.active {display: flex; transition: opacity 0.5s;}
.before-load .container {visibility: hidden;}
.before-load .loading {opacity: 1;}
@keyframes loading-spin {
	100% { transform: rotate(360deg); }
}
@keyframes loading-circle-ani {
	0% { stroke-dashoffset: 157; }
	75% { stroke-dashoffset: -147; }
	100% { stroke-dashoffset: -157; }
}
.loading-circle {width: 54px; height: 54px; animation: loading-spin 3s infinite;}
.loading-circle circle {stroke: #fff; stroke-width: 4; stroke-dasharray: 157, 157; stroke-dashoffset: 0; fill: transparent; animation: loading-circle-ani 1s infinite;}

/* 카탈로그 */
.catalog-slide {position: relative; flex-shrink: 0; width: 100%; max-width: 1920px; max-height: 100vh; aspect-ratio: 1920 / 1080 auto; border: 1px solid #5c5c5c; margin-inline: auto;}
.catalog-slide .slide-wrapper {width: 100%; height: 100%;}
.catalog-slide .slide-wrapper .slide {position: relative; width: 100%; height: 100%;}
.catalog-slide .slide-wrapper .slide .content {position: relative; z-index: 5; width: 100%; height: 100%;}
.catalog-slide .slide-wrapper .slide .content .content-img {width: 100%; height: 100%;}

.slide[data-page="0"] .logo {position: absolute; top: 6%; right: 3.1%; width: 11.1%;}
.slide[data-page="0"] .department {position: absolute; bottom: 6%; right: 3.1%; width: 12.3%;}
.slide[data-page="0"] .video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.slide[data-page="0"] .video-top {position: absolute; top: 0; left: 0; width: 59.8%; height: 57.7%;}
.slide[data-page="0"] .video-bot {position: absolute; bottom: 0; right: 0; width: 26%; height: 61.4%;}
.slide[data-page="1"] .title {position: absolute; top: 29.8%; left: 8.9%; width: 35.3%}
.slide[data-page="1"] .content_list {position: absolute; top: 32.7%; right: 24.5%; width: 17.6%;}
.slide[data-page="1"] .video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.slide[data-page="2"] .content {padding: 0;}
.slide[data-page="3"] .video {position: absolute; top: 0; right: 0; width: 58.5%; height: 46%; z-index: 5;}
.slide[data-page="4"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="5"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="6"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="7"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="8"] .content {padding: 0;}
.slide[data-page="8"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="8"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="8"] .video video:nth-child(2) {position: absolute; top: 51.5%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="8"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="8"] .video iframe:nth-child(2) {position: absolute; top: 51.5%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="9"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="9"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="9"] .video video:nth-child(2) {position: absolute; top: 35.2%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="9"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="9"] .video iframe:nth-child(2) {position: absolute; top: 35.2%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="10"] .metaview-iframe {position: absolute; top: 34%; left: 7.2%; width: 42%; height: 57.2%; z-index: 5;}
.slide[data-page="10"] .iframe-wrapper {width: 100%; height: 73.3%;}
.slide[data-page="10"] .iframe-wrapper > iframe {border: 0px solid #fff;}
.slide[data-page="10"] .button-list {display: flex; flex-wrap: wrap; gap: 2%; width: 82.2%; margin-top: 3.6%;}
.slide[data-page="10"] .button-list > button {display: inline-block; width: calc((100% / 3) - 1.4%); margin-top: 1.7%;}
.slide[data-page="10"] .button-list > button > img:nth-child(1) {display: none;}
.slide[data-page="10"] .button-list > button > img:nth-child(2) {display: block;}
.slide[data-page="10"] .button-list > button.active > img:nth-child(1) {display: block;}
.slide[data-page="10"] .button-list > button.active > img:nth-child(2) {display: none;}
.slide[data-page="11"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="11"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="11"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="11"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="12"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; width: 38.5%; z-index: 10;}
.slide[data-page="12"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}
.slide[data-page="13"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="13"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="13"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="13"] .video video:nth-child(2) {position: absolute; top: 58.5%; left: 0%; width: 32.5%; height: auto;}
.slide[data-page="13"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="13"] .video iframe:nth-child(2) {position: absolute; top: 58.2%; left: 0%; width: 33.5%; height: 34.4%;}
.slide[data-page="14"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="14"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="14"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="14"] .video video:nth-child(2) {position: absolute; top: 51.5%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="14"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="14"] .video iframe:nth-child(2) {position: absolute; top: 51.5%; left: 7.4%; width: 35%; height: 35%;}
.slide[data-page="15"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="15"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="15"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 47.4%; height: 50.5%;}
.slide[data-page="15"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 47.4%; height: 50.5%;}
.slide[data-page="16"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="16"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="16"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="16"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="17"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="17"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="17"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="17"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="18"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="18"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="18"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="18"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="19"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="19"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="19"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="19"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.5%;}
.slide[data-page="20"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="20"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="20"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="20"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="21"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="21"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="21"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="21"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="22"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 4.5%; z-index: 10;}
.slide[data-page="22"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="22"] .video video:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="22"] .video video:nth-child(2) {position: absolute; top: 58.5%; left: 7.2%; width: 32%; height: 32%;}
.slide[data-page="22"] .video iframe:nth-child(1) {position: absolute; top: 0; left: 43%; width: 50.5%; height: 50.6%;}
.slide[data-page="22"] .video iframe:nth-child(2) {position: absolute; top: 58.5%; left: 7.2%; width: 32%; height: 32%;}
.slide[data-page="23"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 5.7%; z-index: 10;}
.slide[data-page="23"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="23"] .video video:nth-child(1) {position: absolute; top: 0.6%; left: 43%; width: 50.5%; height: 49.9%;}
.slide[data-page="23"] .video iframe:nth-child(1) {position: absolute; top: 0.6%; left: 43%; width: 50.5%; height: 49.9%;}
.slide[data-page="24"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 5.7%; z-index: 10;}
.slide[data-page="24"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 5;}
.slide[data-page="24"] .video video:nth-child(1) {position: absolute; top: 0.6%; left: 43%; width: 50.5%; height: 49.9%;}
.slide[data-page="24"] .video iframe:nth-child(1) {position: absolute; top: 0.6%; left: 43%; width: 50.5%; height: 49.9%;}
.slide[data-page="25"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 5.7%; z-index: 10;}
.slide[data-page="26"] .content-tit {position: absolute; top: 13%; left: 7.3%; display: flex; height: 5.7%; z-index: 10;}
.slide[data-page="26"] .video {position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 4;}

/* 카탈로그 번호 */
.slide::before {content: ""; position: absolute; bottom: 0; left: 2.3%; width: 1.2%; height: 4.1%; z-index: 10;}
.slide::after {content: ""; position: absolute; bottom: 0; right: 2.3%; width: 1.2%; height: 4.1%; z-index: 10;}

.slide[data-page="1"]::before {/* background: url("../img/p01.svg") */ no-repeat center / contain;}
.slide[data-page="1"]::after {background: url("../img/p01.svg") no-repeat center / contain;}
.slide[data-page="2"]::before {/* background: url("../img/p03.svg") */ no-repeat center / contain;}
.slide[data-page="2"]::after {background: url("../img/p02.svg") no-repeat center / contain;}
.slide[data-page="3"]::before {/* background: url("../img/p05.svg") */ no-repeat center / contain;}
.slide[data-page="3"]::after {background: url("../img/p03.svg") no-repeat center / contain;}
.slide[data-page="4"]::before {/* background: url("../img/p07.svg") */ no-repeat center / contain;}
.slide[data-page="4"]::after {background: url("../img/p04.svg") no-repeat center / contain;}
.slide[data-page="5"]::before {/* background: url("../img/p09.svg") */ no-repeat center / contain;}
.slide[data-page="5"]::after {background: url("../img/p05.svg") no-repeat center / contain;}
.slide[data-page="6"]::before {/* background: url("../img/p11.svg") */ no-repeat center / contain;}
.slide[data-page="6"]::after {background: url("../img/p06.svg") no-repeat center / contain;}
.slide[data-page="7"]::before {/* background: url("../img/p13.svg") */ no-repeat center / contain;}
.slide[data-page="7"]::after {background: url("../img/p07.svg") no-repeat center / contain;}
.slide[data-page="8"]::before {/* background: url("../img/p15.svg")  */no-repeat center / contain;}
.slide[data-page="8"]::after {background: url("../img/p08.svg") no-repeat center / contain;}
.slide[data-page="9"]::before {/* background: url("../img/p17.svg") */ no-repeat center / contain;}
.slide[data-page="9"]::after {background: url("../img/p09.svg") no-repeat center / contain;}
.slide[data-page="10"]::before {/* background: url("../img/p19.svg") */ no-repeat center / contain;}
.slide[data-page="10"]::after {background: url("../img/p10.svg") no-repeat center / contain;}
.slide[data-page="11"]::before {/* background: url("../img/p21.svg") */ no-repeat center / contain;}
.slide[data-page="11"]::after {background: url("../img/p11.svg") no-repeat center / contain;}
.slide[data-page="12"]::before {/* background: url("../img/p23.svg") */ no-repeat center / contain;}
.slide[data-page="12"]::after {background: url("../img/p12.svg") no-repeat center / contain;}
.slide[data-page="13"]::before {/* background: url("../img/p25.svg") */ no-repeat center / contain;}
.slide[data-page="13"]::after {background: url("../img/p13.svg") no-repeat center / contain;}
.slide[data-page="14"]::before {/* background: url("../img/p27.svg") */ no-repeat center / contain;}
.slide[data-page="14"]::after {background: url("../img/p14.svg") no-repeat center / contain;}
.slide[data-page="15"]::before {/* background: url("../img/p29.svg") */ no-repeat center / contain;}
.slide[data-page="15"]::after {background: url("../img/p15.svg") no-repeat center / contain;}
.slide[data-page="16"]::before {/* background: url("../img/p31.svg") */ no-repeat center / contain;}
.slide[data-page="16"]::after {background: url("../img/p16.svg") no-repeat center / contain;}
.slide[data-page="17"]::/* before {background: url("../img/p33.svg") */ no-repeat center / contain;}
.slide[data-page="17"]::after {background: url("../img/p17.svg") no-repeat center / contain;}
.slide[data-page="18"]::before {/* background: url("../img/p35.svg") */ no-repeat center / contain;}
.slide[data-page="18"]::after {background: url("../img/p18.svg") no-repeat center / contain;}
.slide[data-page="19"]::before {/* background: url("../img/p37.svg") */ no-repeat center / contain;}
.slide[data-page="19"]::after {background: url("../img/p19.svg") no-repeat center / contain;}
.slide[data-page="20"]::before {/* background: url("../img/p39.svg") */ no-repeat center / contain;}
.slide[data-page="20"]::after {background: url("../img/p20.svg") no-repeat center / contain;}
.slide[data-page="21"]::before {/* background: url("../img/p41.svg") */ no-repeat center / contain;}
.slide[data-page="21"]::after {background: url("../img/p21.svg") no-repeat center / contain;}
.slide[data-page="22"]::before {/* background: url("../img/p43.svg") */ no-repeat center / contain;}
.slide[data-page="22"]::after {background: url("../img/p22.svg") no-repeat center / contain;}
.slide[data-page="23"]::before {/* background: url("../img/p45.svg") */ no-repeat center / contain;}
.slide[data-page="23"]::after {background: url("../img/p23.svg") no-repeat center / contain;}
.slide[data-page="24"]::before {/* background: url("../img/p47.svg") */ no-repeat center / contain;}
.slide[data-page="24"]::after {background: url("../img/p24.svg") no-repeat center / contain;}
.slide[data-page="25"]::before {/* background: url("../img/p49.svg") */ no-repeat center / contain;}
.slide[data-page="25"]::after {background: url("../img/p25.svg") no-repeat center / contain;}
.slide[data-page="26"]::before {/* background: url("../img/p51.svg") */ no-repeat center / contain;}
.slide[data-page="26"]::after {background: url("../img/p26.svg") no-repeat center / contain;}

/* 카탈로그 페이지 이동 */
.catalog-slide-page_info {position: absolute; top: 1.5%; right: 1.5%; display: flex; justify-content: flex-end; align-items: center; gap: 1%; font-size: 2vh; color: #fff; z-index: 10;}
.catalog-slide-page_info #current_page {width: 10%; background-color: transparent; border-width: 0 0 1px 0; border-color: #fff; text-align: center; font-size: inherit; color: inherit;}
.catalog-slide-page_info .amount_page {border-bottom: 1px solid transparent; font-size: inherit; color: inherit;}

/* 라이브러리 */
.slick-list {height: 100%;}
.slick-track {height: 100%;}
.slick-prev, 
.slick-next {z-index: 10; width: 3.9%; height: 100%; max-height: 75px;}
.slick-prev {left: 2%;}
.slick-next {right: 2%;}
.slick-prev:before, 
.slick-next:before {content: ""; width: 100%; height: 100%; opacity: 1; transition: opacity 0.15s;}
.slick-prev:before {background: url("../img/prev.png") center center no-repeat; background-size: contain; display: block;}
.slick-next:before {background: url("../img/next.png") center center no-repeat; background-size: contain; display: block; width: 100%;}
.slick-prev.slick-disabled:before, 
.slick-next.slick-disabled:before {opacity: 0;}
/* .catalog-slide#page-0 .slick-next {top: 32%;} */

    .containerA {
      position: relative;
      width: 100%; /* 이미지 A와 이미지 B의 너비 */
      height: 100%; /* 이미지 A와 이미지 B의 높이 */
      overflow: hidden; /* 이미지가 넘치는 부분은 숨김 */
    }

    .imageA {
      position: absolute;
      width: 432%; /* 이미지 A를 두 번 겹쳐서 사용 */
      height: 100%;
      animation: slideAnimationA 50s linear infinite; /* n초 동안 왼쪽으로 흐르는 애니메이션, infinite로 반복 */
	  max-width:none;
    }

    .imageB {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1; /* 이미지 B를 이미지 A 위에 겹치도록 함 */
	  max-width:none;
    }

    @keyframes slideAnimationA {
      0% {
        left: 0; /* 시작 위치는 왼쪽 끝 */
      }
      100% {
        left: -370%; /* 왼쪽으로 이동하여 완전히 사라짐 */
      }
    }