/* common */
.ps100{ width: 100%; padding: 0 100px; }

main section{ height: 100%; overflow: hidden; }

main .visual{ position: relative; width: 100%; overflow: hidden; display:flex; align-items: flex-end; padding-bottom: 80px; }
main .visual video{ position: relative; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
main .visual:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }
main .visual .txt-box{ position: relative; z-index: 2; color:#fff; }
main .visual .txt-box *{ transition:all 1.2s; }
main .visual .txt-box .title{ font-weight: 500; letter-spacing: -1.24px; line-height: 1.5; opacity: 0; transform:translateX(-150px); }
main .visual .txt-box .txt{ font-weight: 500; letter-spacing: -1.24px; line-height: 1.5; opacity: 0; transform:translateX(150px); transition-delay: 0.4s; }
main .visual .txt-box .txt2{ transform:translateX(-150px); transition-delay: 0.6s; }
main .visual .txt-box.aos-animate *{ opacity: 1; transform:translateX(0) }

:root {
	--tabBtnW : 370px;
	--tabBtnH : 70px;
	--pH : 100vh; 
}

main .products{ position: relative; z-index: -1;} 
main .products .scroll-content{ position: relative; overflow-y: scroll; height: 100%; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
main .products .scroll-wrap{ position: relative; }
main .products .scroll-wrap .tab-wrap{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; clip-path: inset(0 100% 0 0); opacity: 1; transition:all 1s; }
main .products .scroll-wrap .tab-wrap.aos-animate{ clip-path: inset(0 0% 0 0); }
main .products .scroll-wrap .tab-wrap .tab-list{ position: relative; position: absolute; transform:translate(-50%, 100%); bottom: 30px; left: 50%; z-index: 5; opacity: 0;  transition:all 0.7s 1.2s; }
main .products .scroll-wrap .tab-wrap.aos-animate .tab-list{ transform:translate(-50%, 0); opacity: 1; }
main .products .scroll-wrap .tab-wrap .tab-list .move{ display:block; width: var(--tabBtnW) ; height: var(--tabBtnH); position: absolute; top: 0; left: 0; border-radius: 10px;
border: 2px solid #FFF; transition:all 0.7s; pointer-events:none; }
main .products .scroll-wrap .tab-wrap .tab-list .move.active{ left: calc(100% - var(--tabBtnW)); }
main .products .scroll-wrap .tab-wrap .tab-list ul{ display:flex; background: #222; border-radius: 10px; }
main .products .scroll-wrap .tab-wrap .tab-list ul li button{ width: var(--tabBtnW); height: var(--tabBtnH); display:flex; justify-content:space-between; align-items:center; padding: 0 40px;  color:#ccc; transition:all 0.5s; }
main .products .scroll-wrap .tab-wrap .tab-list ul li button span{ opacity: 0.3; transition:all 0.2s; }
main .products .scroll-wrap .tab-wrap .tab-list ul li.on button{ color:#fff; }
main .products .scroll-wrap .tab-wrap .tab-list ul li.on button span{ opacity: 1; }
main .products .scroll-wrap .tab-wrap .tab-box{ position: sticky; top: 0; left: 0; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content{ position: relative; height: var(--pH); overflow: hidden; z-index: 2; background: #222; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content > div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:#fff; transition:all 0.8s; }

main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide{ padding-top: 130px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide .img-box{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide .img-box .fit-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide .img-box .fit-box.bg02{ position: relative; z-index: 5; clip-path: inset(0 0 0 0); transition:all 0.7s 0.2s; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide .img-box .fit-box img{ transform:translate(-50%,-50%) scale(1.1); transition: all 3s; }
main .products .scroll-wrap .tab-wrap.aos-animate .tab-box .tab-content  .swiper-slide .img-box .fit-box img{ transform:translate(-50%,-50%) scale(1); }

main .products .scroll-wrap .tab-wrap .tab-box .tab-content .swiper-slide-active .img-box .fit-box.bg02{ clip-path: inset(0 100% 0 0 ); }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .ryo.swiper-slide-active .img-box .fit-box.bg02{ clip-path: inset(0 0 0 100%); }

main .products .scroll-wrap .tab-wrap .tab-box .tab-content .stxt{ font-weight: 500; letter-spacing: -0.42px; margin-bottom: 20px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .title{ letter-spacing: -1.56px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .txt{ font-weight: 500; letter-spacing: -0.72px; margin: 20px 0;}
main .products .scroll-wrap .tab-wrap .tab-box .tab-content ul:not(:last-of-type){ margin-bottom: 10px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content ul li:not(:last-child){ margin-bottom: 10px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .ryo .title{ margin-bottom: 80px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .ryo .txt2{ line-height: 1.5; letter-spacing: -0.46px; }
main .products .scroll-wrap .tab-wrap .tab-box .tab-content .ryo .txt2:not(:last-child){ margin-bottom: 30px; }

main .products .item-wrap{ position: relative; z-index: 2; padding-top: var(--pH); pointer-events: none; }
main .products .item-content{ position: relative; background: transparent; pointer-events:none; padding: 240px 0 120px; opacity: 0; transition: opacity 0.5s , background 1s 0.3s; }
main .products .item-content .circle-box{ position:absolute;	 top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; }
main .products .item-content .circle-box:before{ content:''; display:block; position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 800px; height: 800px; border-radius:50%; background: #f8f8f8; transition:all 2s; z-index: 1; pointer-events: none; }
main .products .item-content .scroll-box{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
main .products .item-content .scroll-box .inner-box{ position:sticky; top: 0; left: 0; width: 100%; height: 100vh; display:flex; justify-content:center; align-items:center; }
main .products .item-content .scroll-box .inner-box .img span{ position: relative; display:block; width: 26px; height: 40px; border-radius:50px; border:2px solid #000; margin-bottom: 10px; display: flex; justify-content: center;}
main .products .item-content .scroll-box .inner-box .img span:before{ content:''; display:block; width: 2px; height: 10px; background: #000; transform:translateY(8px); animation:scroll infinite forwards 1.3s; border-radius:20px; }
main .products .item-content .scroll-box .inner-box .img figure{ display: flex; flex-direction: column; align-items: center;}
main .products .item-content .scroll-box .inner-box .img figure img{ display:block; margin-bottom: 2px; animation:fadeIn infinite forwards 2s; opacity: 0; }
main .products .item-content .scroll-box .inner-box .img figure img.type2{ animation-delay: 0.2s; }
main .products .item-content .flex-box{ position: relative; z-index: 2; flex-wrap:wrap; gap:120px; } 
main .products .item-content .flex-box .item-box{ width: calc((100% - 120px) / 2); opacity: 0; transition:all 1s 0.3s; }
main .products .item-content .flex-box .item-box .img-box{ border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.50); background: linear-gradient(135deg, #EAEAEA 0%, rgba(255, 255, 255, 0.00) 100%); box-shadow: 30px 30px 45px 0px rgba(160, 160, 160, 0.10); padding: 80px 20px; text-align: center; display:flex; justify-content:center; align-items:center; }
main .products .item-content .flex-box .item-box .img-box figure:first-child{ margin-right: 80px; }
main .products .item-content .flex-box .item-box p{ text-align: center; margin-top: 40px; color:#111; letter-spacing: -0.64px; }
main .products .item-content .flex-box .item-box p span{ display:block; color:var(--mainC); font-weight: 500; letter-spacing: -0.38px; margin-bottom: 10px;}
main .products .item-content .more{ position: relative; z-index: 5; text-align: center; margin-top: 120px; }
main .products .item-content .more a{ display:inline-flex; align-items:center; font-weight: 600; color:#ccc; transition:all 0.5s;}
main .products .item-content .more a span{ margin-left: 20px; }
main .products .item-content .more a:hover{ color:var(--mainC); } 
main .products .item-content .more a:hover svg .circle01{ animation: circleFade 1s infinite forwards; }
main .products .item-content .more a:hover svg .circle02{ animation: circleFade 1s 0.3s infinite forwards; }
main .products .item-content .more a:hover svg .circle03{ animation: circleFade 1s 0.6s infinite forwards; }

@keyframes fadeIn{
	0%{ opacity: 0; }
	50%{ opacity: 1; }
	100%{ opacity: 0; }
}

@keyframes circleFade{
	0%{ fill: rgb(204, 204, 204); }
	50%{ fill:var(--mainC); }
	100%{ fill: rgb(204, 204, 204); }
}

@keyframes scroll{
	0%{ transform:translateY(8px); opacity: 1; }
	100%{ transform:translateY(20px); opacity: 0; }
}

main .products .item-content.active{ opacity: 1; background: #f8f8f8; pointer-events:auto; }
main .products .item-content.active .circle-box:before{ transform:scale(20); }
main .products .item-content.active .flex-box .item-box{ opacity: 1; }

main .oem{ position: relative; z-index: 5; }
main .oem .content-wrap{ position: relative; width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; clip-path: inset(0 100% 0 0); opacity: 1; transition:all 1s; }
main .oem .content-wrap.aos-animate{ clip-path: inset(0 0% 0 0); }
main .oem .fit-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
main .oem .content{ position: relative; z-index: 1; color:#fff; text-align: center;}
main .oem .content .stxt{ font-weight: 500; letter-spacing: -0.42px; }
main .oem .content .title{ letter-spacing: -1.56px; margin: 20px 0;}
main .oem .content .txt{ font-weight: 300; line-height: 1.5; letter-spacing: -0.46px; margin-bottom: 120px;}
main .oem .content ul{ display:flex; gap:40px;  text-align: left;}
main .oem .content ul li{ width: calc((100% - 120px) / 4);} 
main .oem .content ul li{ height: 85px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(7.5px);
display:flex; align-items:center; padding: 0 40px;  color:#fff; }
main .oem .content ul li span{ margin-right: 15px; }
main .oem .content ul li span circle{ fill:#fff; }

main .footer{ height: auto; }