/* common */
header.bg{ background: rgba(0,0,0,0.6);}

.full-nav{ position: fixed; bottom: 40px; left: 100px; z-index: 5; display:flex; align-items:center; opacity: 1; transition: all 1s; } 
.full-nav p{ margin-right: 15px; }
.full-nav a{ display:flex; align-items:center; color:#fff; font-family: var(--lex); font-weight: 500; letter-spacing: -0.3px;}
.full-nav #fp-nav{ right: auto; position: relative; top: auto; margin-top:0 !important; }
.full-nav #fp-nav ul{ display:flex; align-items:center; }
.full-nav #fp-nav ul li{ display:flex; align-items:center;}
/*.full-nav #fp-nav ul li:not(:last-child){ margin-right: 15px; }*/
.full-nav #fp-nav ul li a span{ width: 5px; height: 5px; background: rgba(255,255,255,0.5); border-radius:50%; margin-right: 15px;}
.full-nav #fp-nav ul li a div{ display:flex; align-items:center; order:0; color: #FFF; display:none; }
.full-nav #fp-nav ul li a div:after{ content:''; display:block; width: 20px; height: 1px; background: #fff; margin: 0 15px;}
.full-nav #fp-nav ul li:first-child a span,
.full-nav #fp-nav ul li:nth-child(5) a div:after,
.full-nav #fp-nav ul li:last-child{ display:none; }
.full-nav #fp-nav ul li a.active div{ display:flex; }
 
.full-nav.blue p a svg path{ stroke:var(--mainC); }
.full-nav.blue #fp-nav ul li a span{ background: #ccc; }
.full-nav.blue #fp-nav ul li a.active span{ background: var(--mainC); }
.full-nav.blue #fp-nav ul li a div{ color:var(--mainC); }
.full-nav.blue #fp-nav ul li a div:after{ background: var(--mainC); }
.full-nav.up{ opacity: 0; transform:translateY(120%); transition: transform 1s; }

/* main */
main .visual{ position: relative; width: 100%; height: 100vh; overflow: hidden; } 
main .visual .slide-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
main .visual .slide-box .swiper-slide{ position: relative;}
main .visual .slide-box .swiper-slide:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); }
main .visual .slide-box .swiper-slide video{ position: relative; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; z-index: -1;}
main .visual .inner-box{ width: 100%; height: 100%; padding: 200px 100px 160px; display:flex; flex-direction:column; justify-content:flex-end; overflow: hidden; position: relative; z-index: 1; pointer-events:none; z-index: 5;}
main .visual .inner-box *{ pointer-events:auto; }
main .visual .inner-box .txt-wrap{ position: relative; }
main .visual .inner-box .txt-box{ position: absolute; top: 0; left: 0; padding-top: 50px; opacity: 0; }
main .visual .inner-box .txt-box > *{ overflow: hidden;}
main .visual .inner-box .txt-box .title{ color:#fff; font-family: var(--lex); font-weight: 600; letter-spacing: -1.76px; margin-bottom: 40px;}
main .visual .inner-box .txt-box .txt{ color:#fff; font-weight: 500; letter-spacing: -0.48px; }
main .visual .inner-box .txt-box p span{ display:block; transform:translateY(110%); transition:all 1s; }
main .visual .inner-box .txt-box .txt span{ transition:all 0.7s 0.6s; }
main .visual .inner-box .slide-dots{ position: relative; top: auto; left: auto; bottom: auto; z-index: 1;  display: flex; align-items: center;}
main .visual .inner-box .slide-dots span{ display:block; margin: 0 10px 0 0 !important; background: #fff; opacity: 1; width: 8px; height: 8px; border-radius:50px; transition:all 0.7s; }
main .visual .inner-box .slide-dots span.swiper-pagination-bullet-active{ width: 100px;}
main .visual .inner-box .txt-box.active{ position: relative; opacity: 1; }
main .visual .inner-box .txt-box.active p span{ transform:translateY(0%); }
main .visual .scroll-move{ position: absolute; right: 100px; bottom: 100px;z-index: 5; }
main .visual .scroll-move figure{ transform-origin:center; animation:rotateC 5s linear infinite; }

@keyframes rotateC {
	0%{ transform:rotate(0) }
	100%{ transform:rotate(360deg)}
}

main .product{ position: relative; z-index: -1;} 
main .product .scroll-content{ position: relative; overflow-y: scroll; height: 100%; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
main .product .scroll-wrap{ position: relative; }
main .product .txt-wrap{ position: relative; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
main .product .txt-wrap .title{ position: sticky; top: 0; left: 0; height: 100vh; width: 100%; display:flex; justify-content:center; align-items:center; font-size:180px; font-weight: bold; font-family: var(--lex); }
main .product .txt-wrap .title span{ display:block; color:var(--mainC); transition:all 1.2s 0.8s; }
main .product .txt-wrap .title span:not(:last-child){ margin-right: 100px;}
main .product .ctn-wrap{ position: relative; z-index: 2; padding:150px 100px 330px; opacity: 0; pointer-events:none; }
main .product .ctn-wrap *{ transition:all 1s 1.5s; }
main .product .ctn-wrap .title-box{ position: relative; display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 150px; }
main .product .ctn-wrap .title-box .title{ color:#333; font-weight: 500; line-height: 1.45; letter-spacing: -1.08px; }
main .product .ctn-wrap .title-box .txt{ color:#333; text-align: right; font-weight: 300; line-height: 1.6; letter-spacing: -0.42px; }
main .product .ctn-wrap .title-box .scroll-move{ position: absolute; bottom: -80px; right: 0; }
main .product .ctn-wrap .title-box .scroll-move span:after{ background:linear-gradient(to top, rgba(204,204,204,0.3), rgba(204,204,204,1)); background-size: 400% 400%; }
main .product .ctn-wrap .title-box .scroll-move span:before{ animation:scrollDot2 2s infinite;}
main .product .ctn-wrap .ctn-box{ display:flex; gap: 150px 120px; flex-wrap:wrap; }
main .product .ctn-wrap .ctn-box .item-box{ width: calc((100% - 120px) / 2);}
main .product .ctn-wrap .ctn-box .item-box:nth-child(2n) a{ display:block; transform:translateY(180px);}
main .product .ctn-wrap .ctn-box .item-box figure{ width: 100%; height: 540px; transition:all 0.5s; margin-bottom: 40px;  }
main .product .ctn-wrap .ctn-box .item-box figure img{ transform:translate(-50%,-50%) scale(1); transition:all 0.7s;  }
main .product .ctn-wrap .ctn-box .item-box .txt-box{ display:flex; justify-content:space-between; align-items:center; padding: 0 20px; }
main .product .ctn-wrap .ctn-box .item-box .txt-box > div{ width: calc(100% - 60px); padding-right: 30px; transform: translateX(-20px); transition: all 0.5s; }
main .product .ctn-wrap .ctn-box .item-box .txt-box .title{ color:#111; font-weight: 600; letter-spacing: -0.84px; margin-bottom: 20px;}
main .product .ctn-wrap .ctn-box .item-box .txt-box .txt{ color:#555; font-weight: 300; letter-spacing: -0.42px; }
main .product .ctn-wrap .ctn-box .item-box .txt-box .viewbtn{ transform: translateX(20px); transition: all 0.5s; }
main .product .ctn-wrap .ctn-box .item-box a:hover figure{ border-radius: 80px; }
main .product .ctn-wrap .ctn-box .item-box a:hover figure img{ transform:translate(-50%,-50%) scale(1.05);  }
main .product .ctn-wrap .ctn-box .item-box a:hover .txt-box > div,
main .product .ctn-wrap .ctn-box .item-box a:hover .viewbtn{ transform: translateX(0); }
main .product .scroll-content.aos-animate{ overflow-y: scroll; }
main .product .scroll-content.aos-animate .txt-wrap .title span{ color:#f8f8f8; }
main .product .scroll-content.aos-animate .txt-wrap .title span:not(:last-child){ margin-right: 0;}
main .product .scroll-content.aos-animate .ctn-wrap{ opacity: 1; pointer-events:auto; }

main .sustain{ position: relative; overflow: hidden; }
main .sustain .bg{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 1; pointer-events:none; }
main .sustain .bg .lower{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--mainC); transition:all 0.7s; opacity: 1; z-index: -1;}
main .sustain .bg .upper{ display:block; width: 100%; height: 100%; background-color: var(--mainC);  opacity: 1; transition:all 1.4s 0.2s, opacity 1s 0.6s; mask-image: radial-gradient(circle closest-side, transparent 5%, black 5.2%); -webkit-mask-image: radial-gradient(circle closest-side, transparent 5%, black 5.2%); }
main .sustain .bg.aos-animate .lower{ opacity: 0;}
main .sustain .bg.aos-animate .upper{ transform:scale(60); opacity: 0; }
main .sustain .ctn-box{ position: relative; width: 100%; height: 100%; padding: 150px 100px 75px; display:flex; }
main .sustain .ctn-box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 1;}
main .sustain .ctn-box .bg img{  transform:translate(-50%,-50%) scale(1.05); transition:all 4s; }
main .sustain .ctn-box .bg.aos-animate img{  transform:translate(-50%,-50%) scale(1);}
main .sustain .ctn-box .link-box{ width: 54.6%; display:flex; flex-wrap:wrap; gap: 20px; height: max-content; opacity: 1; flex-shrink:0; transition:all 1.5s 0.3s}
main .sustain .ctn-box .link-box .item-box{ position: relative; width: calc((100% - 40px) / 3); height: 300px; text-align: center; border-radius: 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(7.5px); overflow: hidden; opacity: 0; transition:all 1.5s 0.3s; }
main .sustain .ctn-box .link-box.aos-animate .item-box{ opacity: 1;}
main .sustain .ctn-box .link-box .item-box:after{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 40px;
background: linear-gradient(135deg, #003B83 0%, #000D1D 100%); backdrop-filter: blur(7.5px); opacity: 0; transition:all 0.7s; z-index: -1;}
main .sustain .ctn-box .link-box .item-box a{ display:flex; flex-direction:column; justify-content:center; align-items:center; width: 100%; height: 100%; }
main .sustain .ctn-box .link-box .item-box figure{ opacity: 0.5; transition:all 0.5s; }
main .sustain .ctn-box .link-box .item-box .txt{ color: rgba(255,255,255,0.5); font-weight: 600; letter-spacing: -0.46px; margin-top: 40px; transition:all 0.5s;  }
main .sustain .ctn-box .link-box .item-box .viewbtn{ position: absolute; top: 40px; right: 40px; background: rgba(255, 255, 255, 0.10); transition:all 0.5s;}
main .sustain .ctn-box .link-box .item-box .viewbtn img{ opacity: 0.2;}
main .sustain .ctn-box .link-box .item-box:hover:after,
main .sustain .ctn-box .link-box .item-box:hover figure,
main .sustain .ctn-box .link-box .item-box:hover .viewbtn img{ opacity: 1; }
main .sustain .ctn-box .link-box .item-box:hover .txt{ color:#fff; }
main .sustain .ctn-box .link-box .item-box:hover .viewbtn{ background: var(--mainC); }
main .sustain .ctn-box .txt-box{ position: absolute; bottom: 75px; right: 100px; text-align: right; }
main .sustain .ctn-box .txt-box .title{ color:#fff; font-family: var(--lex); letter-spacing: -1.96px; margin-bottom: 40px; transition:all 1.5s 0.5s; }
main .sustain .ctn-box .txt-box .txt{ color:rgba(255,255,255,0.8); font-weight: 200; line-height: 1.7; letter-spacing: -0.42px; white-space:nowrap; transition:all 1.5s 0.7s; }

main .news{ background: #F8F8F8; padding: 5.2% 100px 0; overflow: hidden;}
main .news .title-box{ display:flex; align-items:flex-end; justify-content: space-between; width: 100%; margin-bottom: 60px; }
main .news .title-box .txt-box .title{ color:#111; font-family: var(--lex); line-height: 1.3; letter-spacing: -1.96px; margin-bottom: 20px; }
main .news .title-box .txt-box .txt{ color:#333; font-weight: 300; letter-spacing: -0.42px; }
main .news .title-box .page-box,
main .news .title-box .page-box button{ display:flex; align-items:center;  }
main .news .title-box .page-box button{ gap:0 15px; color:#111; letter-spacing: -0.38px; font-family: var(--lex); transition:all 0.3s; }
main .news .title-box .page-box button.swiper-button-disabled{ opacity: 0.2;}
main .news .title-box .page-box span{ display:block; width: 1px; height: 15px; background: #000; margin: 0 20px; }
main .news .slide-box .swiper-slide{ width: calc((100% - 120px) / 4); margin-right: 40px;}
main .news .slide-box .swiper-slide figure{ position: relative; width: 100%; height: 400px; transition:all 0.5s; }
main .news .slide-box .swiper-slide figure > img{ transform:translate(-50%,-50%) scale(1); transition:all 0.7s; }
main .news .slide-box .swiper-slide figure button{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; display:flex; justify-content:center; align-items:center; 
width: 200px; height: 200px; border-radius:50%; background: var(--mainC); opacity: 0; transition:all 0.7s; }
main .news .slide-box .swiper-slide figure button img{ position: relative; transform:none; top: auto; left: auto; min-width:auto; min-height:auto;}
main .news .slide-box .swiper-slide .title{ text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 30px 0 10px;
color:#111; font-weight: 500; letter-spacing: -0.44px; }
main .news .slide-box .swiper-slide .date{ color:var(--mainC); font-family: var(--lex); font-weight: 500; letter-spacing: -0.34px; }
main .news .slide-box .swiper-slide:hover figure{ border-radius:100px; }
main .news .slide-box .swiper-slide:hover figure button{ opacity: 1; width: 60px; height: 60px; }
main .news .slide-box .swiper-slide:hover figure > img{ transform:translate(-50%,-50%) scale(1.05); }

main .contact{ position: relative; overflow: hidden;}
main .contact .back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--mainC); transition:all 1s 0.6s; opacity: 1;}
main .contact .ctn-box{ display:flex; width: 100%; height: 100%; }
main .contact .ctn-box .item-box{ position: relative; width: 50%; padding: 120px 100px; display:flex; align-items:flex-end; transition:all 1s; }
main .contact .ctn-box .item-box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
main .contact .ctn-box .item-box .bg img{ transform:translate(-50%,-50%) scale(1.1); transition:all 0.7s 0.2s; }
main .contact .ctn-box .item-box .txt-box{ position: relative; z-index: 2; transition:all 0.7s; }
main .contact .ctn-box .item-box .stxt{ color:#fff; font-weight: bold; letter-spacing: -0.42px; }
main .contact .ctn-box .item-box .title{ color:#fff; font-family: var(--lex); letter-spacing: -1.68px; margin: 10px 0 20px;}
main .contact .ctn-box .item-box .txt{ color:rgba(255,255,255,0.7); font-weight: 600; letter-spacing: -0.46px; margin-bottom: 30px; }
main .contact .ctn-box .item-box .viewbtn{ background: transparent; border:1px solid #fff; opacity: 0.3; transition:all 0.3s; }
main .contact .ctn-box .item01{ clip-path: inset(100% 0 0 0); }
main .contact .ctn-box .item02{ clip-path: inset(0 0 100% 0); }
main .contact .ctn-box .item-box .viewbtn:hover{ border:1px solid var(--mainC); background: var(--mainC); opacity: 1;}
main .contact .back.aos-animate{ opacity: 0; }
main .contact .ctn-box.aos-animate .bg img{ transform:translate(-50%,-50%) scale(1);  }
main .contact .ctn-box.aos-animate .item01,
main .contact .ctn-box.aos-animate .item02{ clip-path: inset(0 0 0 0); }
main .contact .ctn-box .item-box:hover{ clip-path: inset(20px 20px 20px round 20px); }
main .contact .ctn-box .item-box:hover .bg img{ transform:translate(-50%,-50%) scale(1.05);}
main .contact .ctn-box .item-box:hover .txt-box{ padding-left: 20px;}