@import url("fullpage.min.css");

html,
body{ scroll-behavior: smooth;}
body.top{ height: 100vh; overflow: hidden;}
.body-bg{ width: 100%; height: 100%; position: fixed; z-index: -1; background-color: var(--color_black);}
.body-bg video{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: .3;}
.scrollable-slide{ display: flex; justify-content: center; align-items: flex-start; overflow: hidden;}
.scrollable-content{ height: auto; box-sizing: border-box; width: 100%; background-color: var(--color_white);}
.slider{ display: flex; justify-content: center; align-items: center;}
.fp-overflow{ justify-content: flex-start; height: 100%; width: 100%; scrollbar-width: none; -ms-overflow-style: none;}
.fp-overflow::-webkit-scrollbar{ display: none; /* Chrome, Safari */}


/* mv start */
.mv-area{ width: 100%; height: 100vh; position: relative; z-index: 1;}
.mv-area .text{ width: 100%; padding: 136px 40px 0 0; box-sizing: border-box; position: relative; z-index: 2; display: flex; flex-flow: column; justify-items: end;align-items: end;}
.mv-area .text p{ font-size: clamp(20px, 6vw, 81px); line-height: 1.2; display: inline-block; font-weight: bold; font-family: var(--font_Lato); letter-spacing: 16px; color: var(--color_blue_03); mix-blend-mode: multiply; transition: .5s ease-in-out;}
.mv-area .text span{ opacity: 0;}
.mv-area .text h2{ font-size: clamp(12px, 2vw, 29px); line-height: 1.2; font-weight: 500; letter-spacing: 3px; opacity: 0; margin-bottom: 30px; transition: .5s ease-in-out;}
.mv-area .text h2 strong{ font-weight: 500;}
.mv-area #video-bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: auto; overflow: hidden;}
.mv-area #video-area{ height: calc(100% - 40px); width: calc(100% - 40px); border-radius: 25px; bottom: 20px; position: absolute; z-index: 1; right: 0; left: 0; overflow: hidden; margin: auto; transition: .7s ease-in-out; display: flex; justify-content: center; align-items: center;}
.mv-area #video-area img{ max-width: 110px; transition: transform 1s ease-in-out; mix-blend-mode: difference; z-index: 2;}
.mv-area #video { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.77777778vh; height: 56.25vw; min-height: 100%; min-width: 100%;  opacity: 1;}
.mv-area.active #video-bg[data-loading="true"] #video-area{ width: 100%; border-radius: 0; bottom: 0;}
.mv-area.active .text p{ letter-spacing: 4px;}
.mv-area.active .text h2{ letter-spacing: 1px; transition: .5s ease-in-out;}
/*.mv-area.active #video-area{ height: 100%; width: 100%; border-radius: 0; bottom: 0;}*/
/* mv end */

/* top loader start */
body.top[data-loading="true"]{ height: auto; overflow: auto; overflow-x: hidden;}
.loader[data-loading="true"] header a.logo{ opacity: 1;}
.loader[data-loading="true"] header .navbar{ left: 0;}
.mv-area #video-bg[data-loading="true"] #video-area{ height: calc(100% - 30% - 20px); width: calc(100% - 160px); bottom: 20px;}
.mv-area #video-bg[data-loading="true"] #video-area img{ opacity: 0;}
.mv-area #video-bg[data-loading="true"] #video-area img[data-loading="true"]{ display: none;}
.mv-area .text[data-loading="true"] span{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block;}
.mv-area .text[data-loading="true"] span:nth-child(1){ animation-delay: 0.1s;}
.mv-area .text[data-loading="true"] span:nth-child(2){ animation-delay: 0.2s;}
.mv-area .text[data-loading="true"] span:nth-child(3){ animation-delay: 0.3s;}
.mv-area .text[data-loading="true"] span:nth-child(4){ animation-delay: 0.4s;}
.mv-area .text[data-loading="true"] span:nth-child(5){ animation-delay: 0.5s;}
.mv-area .text[data-loading="true"] span:nth-child(6){ animation-delay: 0.6s;}
.mv-area .text[data-loading="true"] span:nth-child(7){ animation-delay: 0.7s;}
.mv-area .text[data-loading="true"] span:nth-child(8){ animation-delay: 0.8s;}
.mv-area .text[data-loading="true"] span:nth-child(9){ animation-delay: 0.9s;}
.mv-area .text[data-loading="true"] span:nth-child(10){ animation-delay: 1.0s;}
.mv-area .text[data-loading="true"] span:nth-child(11){ animation-delay: 1.1s;}
.mv-area .text[data-loading="true"] span:nth-child(12){ animation-delay: 1.2s;}
.mv-area .text[data-loading="true"] span:nth-child(13){ animation-delay: 1.3s;}
.mv-area .text[data-loading="true"] span:nth-child(14){ animation-delay: 1.4s;}
.mv-area .text[data-loading="true"] span:nth-child(15){ animation-delay: 1.5s;}
.mv-area .text[data-loading="true"] span:nth-child(16){ animation-delay: 1.6s;}
.mv-area .text[data-loading="true"] span:nth-child(17){ animation-delay: 1.7s;}
.mv-area .text[data-loading="true"] span:nth-child(18){ animation-delay: 1.8s;}
.mv-area .text[data-loading="true"] span:nth-child(19){ animation-delay: 1.9s;}
.mv-area .text[data-loading="true"] span:nth-child(20){ animation-delay: 2.0s;}
.mv-area .text[data-loading="true"] span:nth-child(21){ animation-delay: 2.1s;}
.mv-area .text[data-loading="true"] span:nth-child(22){ animation-delay: 2.2s;}
.mv-area .text[data-loading="true"] span:nth-child(23){ animation-delay: 2.3s;}
.mv-area .text[data-loading="true"] span:nth-child(24){ animation-delay: 2.4s;}
.mv-area .text[data-loading="true"] span:nth-child(25){ animation-delay: 2.5s;}
.mv-area .text[data-loading="true"] span:nth-child(26){ animation-delay: 2.6s;}
.mv-area .text[data-loading="true"] span:nth-child(27){ animation-delay: 2.7s;}
.mv-area .text[data-loading="true"] span:nth-child(28){ animation-delay: 2.8s;}
.mv-area .text[data-loading="true"] span:nth-child(29){ animation-delay: 2.9s;}
.mv-area .text[data-loading="true"] span:nth-child(30){ animation-delay: 3.0s;}
.mv-area .text[data-loading="true"] span:nth-child(31){ animation-delay: 3.1s;}
.mv-area .text[data-loading="true"] span:nth-child(32){ animation-delay: 3.2s;}
.mv-area .text[data-loading="true"] span:nth-child(33){ animation-delay: 3.3s;}
.mv-area .text[data-loading="true"] span:nth-child(34){ animation-delay: 3.4s;}
.mv-area .text[data-loading="true"] span:nth-child(35){ animation-delay: 3.5s;}
.mv-area .text[data-loading="true"] h2{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block;}
/*.mv-area.active #video-bg[data-loading="true"] #video-area{ height: calc(100% - 25%); width: 100%; bottom: 0;}*/
/* top loader end */

/* top text start */
.text-area{ width: 100%; padding: 120px 20px 160px; box-sizing: border-box; position: relative; z-index: 1; transition: .5s ease-in-out; mix-blend-mode: difference; overflow: hidden;}
.text-area h2{ font-size: clamp(40px, 3vw, 80px); text-align: center; color: var(--color_white); font-weight: bold; transform: rotate(0deg) scale(0.7); opacity: 1; mix-blend-mode: difference; position: relative; z-index: 1; transition: 1s ease-in-out; animation-delay: 0.5s;}
.text-area h2 span{ font-family: var(--font_Rock); font-size: clamp(40px, 5vw, 80px); margin: 0 10px;}
.text-area .bg{ width: 100%; height: 100%; background-color: var(--color_white); position: absolute; top: 0; left: 0; margin: auto; transition: .5s ease-in-out;}
/*.text-area.active{ padding: 0px 20px;}:*/
.text-area h2.active{ opacity: 1; transform: rotate(-7deg) scale(1.2);}
/*.text-area.active .bg{ height: 75%;}*/
/* top text end */

/* top works start */
.works01 .fp-overflow,
.works02 .fp-overflow{ display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; z-index: 2;}
.works01 .title-wrap{ width: 100%; height: 60vh; margin: 0 auto; border-radius: 25px 25px 0 25px; background-color: var(--color_white); position: relative; padding: 20px 80px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.works01 .title-wrap .htitle{ display: inline-block; width: auto;}
.works01 .title-wrap .htitle p.en{ font-size: clamp(40px, 5vw, 120px); text-align: left; color: var(--color_blue_03); animation-duration: 0.01s; animation-name: textflicker; animation-iteration-count: infinite; animation-direction: alternate; text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;}
@keyframes textflicker {
		 from { text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;}
		 to { text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;}
	   }
.works01 .title-wrap .bottom{ position: absolute; width: 100%; max-width: 60%; height: 120px; bottom: -120px; right: 0; border-radius: 0 0 25px 0; background-color: var(--color_white);}
.works01 .title-wrap .bottom::after{ content: ""; position: absolute; top: -10px; left: -115px; margin: auto; width: 116px; aspect-ratio: 125 / 150; background-image: url("/assets/images/works-item01.svg"); background-size: 100%; background-repeat: no-repeat;}
.works01 ul{ width: 100%; list-style: none; margin-top: 150px; display: flex; justify-content: flex-start; align-items: flex-start; gap: 0 8px;}
.works01 ul li{ padding: 4px 16px; border-radius: 5px; box-sizing: border-box; background-color: var(--color_white); display: inline-block;}
.fp-viewing-1 .works01 ul li{ -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
.fp-viewing-1 .works01 ul li:nth-of-type(1){ animation-delay: 1.0s;}
.fp-viewing-1 .works01 ul li:nth-of-type(2){ animation-delay: 1.5s;}
.fp-viewing-1 .works01 ul li:nth-of-type(3){ animation-delay: 2.0s;}
.fp-viewing-1 .works01 ul li:nth-of-type(4){ animation-delay: 2.5s;}
.fp-viewing-1 .works01 ul li:nth-of-type(5){ animation-delay: 3.0s;}

.works02::before{ content: ""; width: 100%; height: 100%; position: absolute; backdrop-filter: blur(3px); z-index: 1;}
.works02 .text-wrap{ width: 80%; height: 100%; max-height: 610px; margin: auto 0; border-radius: 25px; position: relative; padding: 20px 50px; box-sizing: border-box;}
.works02 .text-wrap h3{ font-size: clamp(20px, 3vw, 50px); color: var(--color_white); line-height: 1.9; text-align: left; font-weight: bold; mix-blend-mode: difference;}
.works02 .line{ width: 1px; height: 20%; background-color: var(--color_white); margin-top: 10px; margin-left: 15px;}
.works02 .more-btn-box{ text-align: left; margin-top: 10px;}

.works-area{ width: 100%; padding: 20px 20px 0; box-sizing: border-box; position: relative; z-index: 0; transition: .5s ease-in-out .1s;}
.works-area .htitle .circle{ position: absolute; z-index: 1; background-color: var(--color_white); border-radius: 200px; width: 260px; aspect-ratio: 1 / 1; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.works-area .swiper01{ position: relative; z-index: 0; border-radius: 20px; overflow: hidden;}
.works-area .swiper01 .swiper-wrapper{ transition-timing-function: linear;}
.works-area .swiper-slide{ border-radius: 20px; overflow: hidden;}
.works-area .swiper-pagination{ font-size: clamp(20px, 3vw, 30px); font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); text-align: center; position: relative; z-index: 2; margin-top: 20px;}
/* top works end */

/* news start */
.news-area{ margin: 20px auto 0;}
/* news end */

/* top blog start */
.blog-area{ margin: 120px auto 0; width: calc(100% - 40px); overflow: hidden; box-sizing: border-box; background-color: var(--color_gray); border-radius: 25px; position: relative;}
.blog-area .bg{ width: 100%; padding: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 0; border-radius: 24px; overflow: hidden;}
.blog-area .bg .video-blog{ width: 100%; height: 100%; opacity: 0.2;}

.blog-area .htitle{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 290px; height: 100%; padding: 0 0 0 0; background-color: var(--color_white); position: absolute; top: 0; left: 6%; bottom: 0; margin: auto; z-index: 2;}
.blog-area .htitle .topleft{ position: absolute; top: 0; left: -24px; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item03.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-area .htitle .topright{ position: absolute; top: 0; right: -24px; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item04.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-area .htitle .bottomleft{ position: absolute; bottom: 0; left: -24px; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item02.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-area .htitle .bottomright{ position: absolute; bottom: 0; right: -24px; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item01.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-area .htitle .pager-area{ margin-top: 0;}
.blog-area .htitle .pager-area .preview{ width: 40px; aspect-ratio: 1 / 1; border-radius: 100px; background-color: var(--color_white);}
.blog-area .htitle .pager-area .next{ width: 40px; aspect-ratio: 1 / 1; border-radius: 100px; background-color: var(--color_white);}
.blog-area .htitle .pager-area .swiper-pagination-blog{ width: 130px; display: block; text-align: center; margin: 0;}
.blog-area .wrap{ position: relative; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: stretch; padding: 50px 20px; box-sizing: border-box; overflow: hidden;}
.blog-area .wrap .inner.swiper02{ width: 100%; display: flex; justify-content: flex-end; align-items: flex-start; border-radius: 24px; overflow: hidden;}
.blog-area .wrap .blog-box{ width: 100%;}
.blog-area .wrap .blog-box .blog-img{ width: 100%; aspect-ratio: 16 / 9; position: relative; border-radius: 24px; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: var(--color_black); filter: grayscale(85%);}
.blog-area .wrap .blog-box a:hover .blog-img{ filter: grayscale(40%);}
.blog-area .wrap .blog-box .blog-img img{ width: 100%; height: 100%; object-fit: cover; position: relative; opacity: .4;}
.blog-area .wrap .blog-box .text-box{ width: 100%; padding: 20px 10px 10px; box-sizing: border-box; position: relative; z-index: 1; display: flex; justify-content: center; align-items: end;}
.blog-area .wrap .blog-box .text-box .text--inner{ width: 100%;}
.blog-area .wrap .blog-box .text-box .text--inner .cate{ font-size: 12px; font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); display: inline-block; position: absolute; top: -40px; left: 15px; background-color: var(--color_black); border-radius: 5px; padding: 3px 15px; box-sizing: border-box; color: var(--color_white);}
.blog-area .wrap .blog-box .text-box .text--inner .title{ font-size: 14px; letter-spacing: 1.3px; color: var(--color_black); display: block; width: 100%;padding-top: 10px;}
.blog-area .wrap .blog-box .text-box .text--inner .date{ font-size: 12px; display: inline-block; padding: 2px 6px; box-sizing: border-box; background-color: var(--color_white); border-radius: 4px;}
.blog-area > .more-btn-box{ display: none;}
/* top blog end */

footer{ padding: 90px 20px 160px;}
.footer-btn{ opacity: 0; display: block;}
.loader[data-loading="true"] .footer-btn{ opacity: 1; transition: .2s ease-in-out .1s;}