#fullNav{ position: fixed; transform:translateY(-50%); top: 50%; right: 40px; z-index: 10000;}
#fullNav figure{ display:flex; }
#fullNav .svg{ cursor:pointer; }
#fullNav .up{ margin: 30px 0;}

#fullNav.black .svg path{ stroke:#000; }

main section{ position: relative; height: 100vh; overflow: hidden;}

main .visual{ position: relative; }
main .visual .slideBox{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
main .visual .slideBox .swiper-slide{ display:flex; align-items: flex-end; padding-bottom: 180px;}
main .visual .slideBox .swiper-slide .bg{ position: absolute; transform: translate(-50%,-50%) scale(1.2); top: 50%; left: 50%; z-index: -1; transition:all 1.7s; }
main .visual .slideBox .swiper-slide .txtBox{ color:#fff; font-weight: 300; filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); opacity: 0; transition:all 2s; }
main .visual .slideBox .swiper-slide .txtBox .title{ letter-spacing: -1.04px; margin: 40px 0 20px; }
main .visual .slideBox .swiper-slide .txtBox .txt{ letter-spacing: -0.46px; margin-bottom: 60px; }
main .visual .slideBox .swiper-slide-active .bg{ transform: translate(-50%,-50%) scale(1); }
main .visual .slideBox .swiper-slide-active .txtBox{ filter: blur(0); -webkit-filter: blur(0); -moz-filter: blur(0); opacity: 1; }
main .visual .slideDots span{ border-radius:0; width: 40px; height: 3px; background: rgba(255,255,255,0.2); opacity: 1; margin: 0; }
main .visual .slideDots span.swiper-pagination-bullet{ margin: 0;}
main .visual .slideDots span.swiper-pagination-bullet-active{ margin: 0; background: #fff;}
main .visual .slideDots span:not(:last-child){ margin-right: 10px;}
main .visual .btmBox{ position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; background: var(--mainC);}
main .visual .btmBox .ps100{ display:flex; align-items:center; height: 100px; }
main .visual .btmBox .ps100 > div { display:flex; align-items:center; width: 100%; }
main .visual .btmBox p{ color:#fff; letter-spacing: -0.42px; font-weight: 500; flex-shrink: 0; }
main .visual .btmBox select{ width: 100%; height: 60px; border-radius: 100px; border: 2px solid rgba(255, 255, 255, 0.10); color:rgba(255,255,255,0.7);  padding: 0 40px; margin: 0 20px; 
background: url(/img/common/selectArrow.png) no-repeat rgba(255, 255, 255, 0.10); background-position: right 40px top 50%; outline:none; }
main .visual .btmBox select option{ color:#333; }
main .visual .btmBox button{ width: 187px; height: 55px; background: #fff; border-radius:var(--bRound); color:var(--mainC); font-weight: 500; letter-spacing: -0.38px; flex-shrink: 0;}

main .business .bakBox{ position: relative; width: 100%; height: 100%; }
main .business .bakBox .imgBox{ position: relative; width: calc(100% - 600px); height: 100%; opacity: 1; overflow: hidden; display:flex; align-items: flex-end; padding: 0 40px 60px 100px;}
main .business .bakBox .imgBox .bg{ position: absolute; transform:translate(-50%,-50%) scale(1.2); top: 50%; left: 50%; transition:all 2.5s; }
main .business .bakBox .imgBox.aos-animate .bg{ transform:translate(-50%,-50%) scale(1); }
main .business .bakBox .imgBox .innerBox{ position: relative; z-index: 5; display:flex; justify-content:space-between; align-items: flex-end; width: 100%; }
main .business .bakBox .imgBox .innerBox .txtBox .title{ color:#fff; font-weight: 500; letter-spacing: -1.36px; margin-bottom: 30px; }
main .business .bakBox .imgBox .innerBox .txtBox .txt{ color:#fff; letter-spacing: -0.48px; }
main .business .bakBox .imgBox .innerBox .scrollDown{ color:#fff; font-weight: bold; display:flex; align-items:center; }
main .business .bakBox .imgBox .innerBox .scrollDown p{ margin-right: 10px;}
main .business .bakBox .imgBox .innerBox .scrollDown p span{ opacity: 0; }
main .business .bakBox .imgBox .innerBox .scrollDown p.active span{ animation: fadeIn 0.5s both; }
main .business .bakBox .imgBox .innerBox .scrollDown figure{ display:flex; flex-direction:column; align-items:center; }
main .business .bakBox .imgBox .innerBox .scrollDown figure img{ opacity: 0.3; animation: fadeInOut 2.5s both infinite;}
main .business .bakBox .imgBox .innerBox .scrollDown figure img.arrow2{ margin-top: 2px; animation-delay: 0.4s;}
main .business .ctnBox{ position: absolute; top: 0; left: 0; overflow-y: scroll; scrollbar-width: none; width: 100%; height: 100%; }
main .business .ctnBox .scrollBox{ position: relative; width: 600px; margin: 0 0 0 auto; scrollbar-width: none; padding: 150px 100px 100px 40px;}
main .business .ctnBox .scrollBox .itemBox:not(:last-child){ margin-bottom: 100px;}
main .business .ctnBox .scrollBox .itemBox figure{ position: relative; width: 100%; height: 500px; border-radius:40px; overflow: hidden;}
main .business .ctnBox .scrollBox .itemBox figure:after{ content:''; display:block; width: calc(100% - 8px); height: calc(100% - 8px); border:4px solid var(--mainC); border-radius:40px; position: absolute; top: 0; left: 0; opacity: 0; transition:all 0.7s; }
main .business .ctnBox .scrollBox .itemBox figure img{ position: absolute; transform:translate(-50%,-50%) scale(1); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; 
transition:all 0.7s; }
main .business .ctnBox .scrollBox .itemBox:hover figure:after{ opacity: 1; }
main .business .ctnBox .scrollBox .itemBox:hover figure img{ transform:translate(-50%,-50%) scale(1.1); }
main .business .ctnBox .scrollBox .itemBox .title{ margin: 40px 0 20px; color:#111; letter-spacing: -0.48px; }
main .business .ctnBox .scrollBox .itemBox .txt{ letter-spacing: -0.38px; font-weight: 200; color:#333; }

main .technology{ padding-left: 100px;}
main .technology .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
main .technology .titleBox{ opacity: 1; }
main .technology .titleBox .title{ margin-bottom: 20px;}
main .technology .titleBox span{ font-weight: 300; color: rgba(255, 255, 255, 0.2); background: linear-gradient(90deg, #ffffff, #ffffff ) no-repeat; -webkit-background-clip: text;  background-clip: text; background-size: 0%; transition: all 0.3s; }
main .technology .titleBox .title p{ position: relative; display:inline; }
main .technology .titleBox .title p span{ font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.2); transition: all 0s 1.5s;}
main .technology .titleBox .title p span.front{ position: absolute; top: -1px; left: 0; color:rgba(255,255,255,0); background: linear-gradient(to left, var(--mainC), var(--mainC)) no-repeat; -webkit-background-clip: text;  background-clip: text; background-size: 0%; z-index: 5; transition: all 1.4s 0.3s; }
main .technology .titleBox.aos-animate .title p span.back{ opacity: 0; }
main .technology .titleBox.aos-animate .title p span.front{ background-size:100%; }
main .technology .titleBox .txt span{ transition: all 1s 1.7s;}
main .technology .titleBox.aos-animate span{ background-size: 100%; }
main .technology .slideBox{ margin: 120px 0;}
main .technology .slideBox .swiper-slide{ width: 270px; height: 270px; margin-right: 20px; transition:all 0.5s; border-radius:30px; background: rgba(0, 0, 0, 0.10);}
main .technology .slideBox .swiper-slide:before,
main .technology .slideBox .swiper-slide:after{ width:calc(100% - 4px); height: calc(100% - 4px); aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 2px; border-radius: 30px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5; transition:all 0.5s; pointer-events:none; }
main .technology .slideBox .swiper-slide:before{ background: linear-gradient(to left, rgba(237, 108, 0, 0) 0%, rgba(237, 108, 0, 1) 50%, rgba(237, 108, 0, 0) 100%); opacity: 0;}
main .technology .slideBox .swiper-slide:after{ background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); opacity: 1;}
main .technology .slideBox .swiper-slide a{ position: relative; display:block; width: 100%; height: 100%; padding: 30px; overflow: hidden; pointer-events:none; }
main .technology .slideBox .swiper-slide .numBox{ display:flex; justify-content:space-between; align-items:center; }
main .technology .slideBox .swiper-slide .numBox .svg g{ transition:all 0.5s; }
main .technology .slideBox .swiper-slide .numBox .num{ border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.20); display:flex; justify-content:center; align-items:center; color:rgba(255,255,255,0.2); width: 40px; height: 40px; letter-spacing: -0.34px; font-weight: bold; transition:all 0.5s; }
main .technology .slideBox .swiper-slide .txtBox{ position: absolute; top: calc(100% - 90px); left: 0; padding: 30px; transition:all 0.5s; }
main .technology .slideBox .swiper-slide .txtBox .title{ color:rgba(255,255,255,0.2); font-weight: 500; letter-spacing: -0.42px; transition:all 0.5s; }
main .technology .slideBox .swiper-slide .txtBox .txt{ margin-top: 20px; letter-spacing: -0.36px; font-weight: 300; color:rgba(255,255,255,0.5); opacity: 0; transition:all 0.7s; }
main .technology .slideBox .swiper-slide-active,
main .technology .slideBox .swiper-slide:hover{ box-shadow: 0px 0px 30px 0px rgba(237, 108, 0, 0.10); }
main .technology .slideBox .swiper-slide-active:before,
main .technology .slideBox .swiper-slide:hover:before{ opacity: 1;}
main .technology .slideBox .swiper-slide-active:after,
main .technology .slideBox .swiper-slide:hover:after{ opacity: 0;}
main .technology .slideBox .swiper-slide-active .numBox .num,
main .technology .slideBox .swiper-slide:hover .numBox .num{ border: 2px solid var(--mainC); color:var(--mainC); }
main .technology .slideBox .swiper-slide-active .numBox svg g,
main .technology .slideBox .swiper-slide:hover .numBox svg g{ opacity: 1;}
main .technology .slideBox .swiper-slide-active .numBox svg path,
main .technology .slideBox .swiper-slide:hover .numBox svg path{ stroke: var(--mainC); }
main .technology .slideBox .swiper-slide-active .txtBox,
main .technology .slideBox .swiper-slide:hover .txtBox{ top: 100%; transform: translateY(-100%); }
main .technology .slideBox .swiper-slide-active .txtBox .title,
main .technology .slideBox .swiper-slide:hover .txtBox .title{ color:#fff; }
main .technology .slideBox .swiper-slide-active .txtBox .txt,
main .technology .slideBox .swiper-slide:hover .txtBox .txt{ opacity: 1; }
main .technology .slideBox .swiper-slide-active{ transform:translateY(-30px); }

main .core .cover{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-align: center; font-weight: 300; color:#ccc; letter-spacing: -1.6px; opacity: 1; transition:all 0.7s 3s;}
main .core .cover .inner{ display:flex; flex-direction:column; justify-content: center; width: 100%; height: 100%; background: #fff; opacity: 1; transition:all 0.7s; }
main .core .cover .inner .title{ margin-bottom: 20px; }
main .core .cover .inner .title p{ position: relative; display:inline; }
main .core .cover .inner .title p span{ font-weight: 600; white-space: nowrap; color: rgba(0, 0, 0, 0.2); transition: all 0s 1s;}
main .core .cover .inner .title p span.front{ position: absolute; top: -1px; left: 0; color:rgba(255,255,255,0); background: linear-gradient(to left, var(--mainC), var(--mainC)) no-repeat; -webkit-background-clip: text;  background-clip: text; background-size: 0%; z-index: 5; transition: all 1s; }
main .core .cover:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%;	height: 100%; background: var(--mainC); -webkit-mask: radial-gradient(50px, #0000 98%, #000); mask: radial-gradient(50px, #0000 98%, #000); transform:scale(0.5); transition: transform 6s 1.3s ease , opacity 0.5s 1.3s ease; opacity: 0;}
main .core .cover.aos-animate:after{ transform:scale(200); opacity: 1; }
main .core .cover.aos-animate .inner .title p span.back{ opacity: 0; }
main .core .cover.aos-animate .inner .title p span.front{ background-size:100%; }
main .core .cover.active{ opacity: 0; pointer-events:none; }
main .core .cover.active .inner{ opacity: 0;}
main .core .bg{ position: absolute; top: 0; left: 0; z-index: -1;}
main .core .ctnBox{ display:flex; align-items: center; height: 100%; }
main .core .ctnBox .itemBox{ position: relative; width: calc(100% / 3); height: 100%; text-align: center; }
main .core .ctnBox .itemBox:not(:last-child){ border-right:1px solid rgba(255, 255, 255, 0.10); }
main .core .ctnBox .itemBox:before{ content:''; display:block; width: 100%; height: 100%; position: absolute; left: 0; bottom: -100%; transition:all 0.7s; background: linear-gradient(180deg, rgba(237, 108, 0, 0.00) 0%, #ED6C00 100%); }
main .core .ctnBox .itemBox div{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 80px; }
main .core .ctnBox .itemBox .topTxt{ transition:all 0.7s;}
main .core .ctnBox .itemBox .topTxt .title{ font-weight: 500; letter-spacing: -0.84px; color:#fff; margin: 40px 0; }
main .core .ctnBox .itemBox .topTxt .txt{ letter-spacing: -0.44px; color:rgba(255,255,255,0.5); transition:all 0.5s; }
main .core .ctnBox .itemBox .btmTxt{ transition:all 0.7s; opacity: 0; }
main .core .ctnBox .itemBox .btmTxt .txt{ color:rgba(255,255,255,0.5); letter-spacing: -0.44px; margin-bottom: 40px;}
main .core .ctnBox .itemBox .btmTxt #viewBtn{ color:#fff; }
main .core .ctnBox .itemBox .btmTxt #viewBtn:before{ border: 2px solid #FFF;}
main .core .ctnBox .itemBox .btmTxt #viewBtn:after{ background: #fff; }
main .core .ctnBox .itemBox .btmTxt #viewBtn:hover span{ color:var(--mainC); }
main .core .ctnBox .itemBox:hover:before{ bottom: 0;}
main .core .ctnBox .itemBox:hover .topTxt{ bottom: 215px;}
main .core .ctnBox .itemBox:hover .topTxt .txt{ color:#fff; }
main .core .ctnBox .itemBox:hover .btmTxt{ opacity: 1; }

main .platform .ani{ opacity: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%;}
main .platform .ps100{ position: relative; padding-bottom: 60px;}
main .platform h3.title{ position: absolute; bottom: 0; left: 0; color:#333; letter-spacing: -1.36px; font-weight: 300; z-index: 20;}
main .platform .txtWrap{ position:relative; position: absolute; top: 0; left: 0; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; width: 100%; height: 100%; transition:opacity 0.7s 3s, transform 1.7s 3s; padding-bottom: 50px; opacity: 1; z-index: 10;}
main .platform .txtWrap > div{ position: relative; width: 56%; color:#ccc; margin: 0 0 0 auto;}
main .platform .txtWrap > div .txtBox{ letter-spacing: -1.08px; margin-bottom: 60px;}
main .platform .txtWrap > div .txtBox p:not(:last-child){ margin-bottom: 60px;}
main .platform .txtWrap > div .txtBox p.txt{ letter-spacing: -0.56px;}
main .platform .txtWrap > div .txtBox p span{ display:block; margin-top: 60px; }
main .platform .txtWrap > div .txtBox p{ display:inline; }
main .platform .txtWrap > div .front{ position: absolute; top: 0; left: 0; z-index: 5; color:transparent; }
main .platform .txtWrap > div .front p{ position: relative;  background: linear-gradient(to bottom, transparent, #111 0) left center no-repeat; -webkit-background-clip: text;  background-clip: text; background-size: 0; display:inline; transition: all 2s 0.5s linear;}
main .platform .ctnBox .slideWrap{ transform:translateY(50%); opacity: 0; transition:opacity 0.7s 3.5s, transform 1.7s 3.5s; }
main .platform .ctnBox .slideWrap .slideBox{ overflow: hidden;}
main .platform .ctnBox .slideWrap .slideBox .swiper-slide{ width: 500px; margin-right: 50px; }
main .platform .ctnBox .slideWrap .slideBox .swiper-slide .fitBox{ width: 100%; height: 285px; border-radius: 20px; }
main .platform .ctnBox .slideWrap .slideBox .swiper-slide .txtBox{ margin: 40px 0;}
main .platform .ctnBox .slideWrap .slideBox .swiper-slide .txtBox .sTitle{ color:var(--mainC); }
main .platform .ctnBox .slideWrap .slideBox .swiper-slide .txtBox .title{ color:#222; letter-spacing: -0.36px; line-height: 150%; margin: 20px 0;  text-overflow: ellipsis; overflow: hidden; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;}
main .platform .ctnBox .slideWrap .slideBox .swiper-slide .txtBox .day{ color:#ccc; font-weight: 600; letter-spacing: -0.34px; }
main .platform .ctnBox .slideWrap #slideBar{ width: 100%; background: #F8F8F8; margin: 0 0 160px;}
main .platform .ctnBox .viewTxt{ text-align: right; transform:translateY(50%); opacity: 0; transition: all 0.7s 4s;}
main .platform .ctnBox .viewTxt a{ position: relative; }
main .platform .ctnBox .viewTxt a span{ color:#ddd; font-weight: 500; letter-spacing: -0.84px; }
main .platform .ctnBox .viewTxt a span.back{ opacity: 1; }
main .platform .ctnBox .viewTxt a span.front{ position: absolute; top: 0; left: 0; z-index: 5; color:transparent; background: linear-gradient(to left, var(--mainC), var(--mainC)) no-repeat;  -webkit-background-clip: text;  background-clip: text; background-size: 0; transition: all 0.3s linear;}
main .platform .ctnBox .viewTxt a:hover span.back{ opacity: 0; transition:all 0.5s 1s;}
main .platform .ctnBox .viewTxt a:hover span.front{ background-size: 100%;}
main .platform .ani.aos-animate .txtWrap{ transform:translateY(-100%); opacity: 0; pointer-events:none; }
main .platform .ani.aos-animate .txtWrap > div .front p{ background-size: 100% auto; }
main .platform .ani.aos-animate .ctnBox .slideWrap,
main .platform .ani.aos-animate .ctnBox .viewTxt{ transform:translateY(0); opacity: 1;}

main .partners .fp-tableCell{ display:flex; flex-direction:column; justify-content:flex-end; }
main .partners .bg{ position: absolute; top: 0; left: 0; z-index: -1;}
main .partners .titleBox{ display:flex; justify-content:space-between; align-items: flex-end; }
main .partners .titleBox .title{ color:#111; font-weight: 300; letter-spacing: -1.36px; }
main .partners .titleBox .title span{ font-weight: 600; }
main .partners .titleBox #viewBtn{ color:#ccc; }
main .partners .titleBox #viewBtn:before{ border:2px solid #E5E5E5; }
main .partners .titleBox #viewBtn:hover{ color:#fff; }
main .partners .logoWrap{ margin: 80px 0 110px;}
main .partners .logoWrap > div{ display:flex; align-items: center; }
main .partners .logoWrap > div.logoList2{ margin-top: 20px; }
main .partners .logoWrap .logoList1 .logoBox.origin { animation: 30s linear 0s infinite normal forwards running rollingleft; }
main .partners .logoWrap .logoList1 .logoBox.clone { animation: 30s linear 0s infinite normal forwards running rollingleft2; }
main .partners .logoWrap .logoList2 .logoBox.origin { animation: 30s linear 0s infinite normal forwards running rollingRight; }
main .partners .logoWrap .logoList2 .logoBox.clone { animation: 30s linear 0s infinite normal forwards running rollingRight2; }
main .partners .logoWrap .logoBox{ display:flex; align-items: center; }
main .partners .logoWrap .logoBox figure{	width: 315px; height: 120px; border-radius:20px; background: #fff; display:flex; justify-content:center; align-items:center; margin-right: 20px; }
main .partners .txtBox{ background: #222; min-height: 230px; display:flex; gap:0 125px; }
main .partners .txtBox .itemBox{ width: calc((100% - 250px) / 3); padding-top: 40px;}
main .partners .txtBox .itemBox .txt{ color:#fff; display:flex; align-items:center; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 20px;}
main .partners .txtBox .itemBox .txt:before{ content:''; display:block; width: 3px; height: 58px; background: var(--mainC); margin-right: 27px; }
main .partners .txtBox .itemBox .count{ color:#fff; letter-spacing: -1.08px; font-weight: 500; display:flex; justify-content:space-between;  align-items: flex-end;}
main .partners .txtBox .itemBox .count span{ color:rgba(255,255,255,0.5); }

@keyframes rollingleft {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}

@keyframes rollingleft2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}

@keyframes rollingRight {
	0% { transform: translateX(0); }
	50% { transform: translateX(100%); }
	50.01% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
}

@keyframes rollingRight2 {
	0% { transform: translateX(-200%); }
	100% { transform: translateX(0); }
}