/* intro */
#intro-box{ position: relative; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; display:flex; justify-content:center; align-items:center; }
#intro-box .bg{ position: absolute; transform:translateX(-50%); top: 0; left: 50%;z-index: -1; clip-path: inset(0 0 0 round 0 0 0); transition:all 1s; }
#intro-box .logo{ position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; -webkit-mask: url(/img/common/introLogo.png) no-repeat; mask-position: 50% 50%; width: 100%; height: 100%; transition:all 0.5s 0.2s; }
#intro-box .logo img{ width: 100%; height: 100%;transform:translateY(30%); transition:all 2s 0.2s; }
#intro-box.off .bg{ width: 130%; top: -100%; clip-path: inset(0 0 0 round 0 0 50% 50%);}
#intro-box.off .logo{ opacity: 0; }

main.intro #intro-box .logo img{ transform: scale(8) translateY(0%); }
main.intro .visual .slide-box .swiper-slide video{ clip-path: inset(46% 40% 0%); animation:videoClip 2.5s 1.6s ease-in-out both }
main.intro .visual .slide-box .swiper-slide .title{ margin-top: 0; animation:titleUp 0.9s 1.6s ease-in-out both }

@keyframes videoClip{
	0%{ clip-path: inset(46% 40% 0%); }
	30%{ clip-path: inset(23% 40%); }
	60%{ clip-path: inset(23% 40%); }
	100%{ clip-path: inset(0); }
}

@keyframes titleUp{
	0%{ margin-top: 2%; }
	100%{ margin-top: -8%; }
}

/* common */
main{ background: #000; }
main section{ position: relative; height: 100vh; overflow: hidden;}

main .visual .slide-box{ position: relative; width: 100%; height: 100%; }
main .visual .slide-box .swiper-slide{ position: relative; width: 100%; height: 100vh; display:flex; justify-content:center; align-items:center; text-align: center; overflow: hidden;}
main .visual .slide-box .swiper-slide video{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; z-index: -1; }
main .visual .slide-box .swiper-slide .title{ margin-top: -8%; color:#fff; font-family: var(--lora); font-weight: 500; letter-spacing: -1.56px; }
main .visual .slide-nav{ position: absolute; z-index: 5; bottom: 40px; right: 100px; display:flex; align-items:center; }
main .visual .slide-nav .slide-dots{ display:flex; align-items:center; margin-right: 20px;}
main .visual .slide-nav .slide-dots span{ position: relative; display:block; width: 30px; height: 30px;  }
main .visual .slide-nav .slide-dots span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 10px; height: 10px; background: #fff; 
border-radius:50%; opacity: 0.3; transition:all 0.3s; }
main .visual .slide-nav .slide-dots span.on{ background: url(/img/main/visualCircle.png) no-repeat 50% 50%; animation:rotate 3s infinite linear }
main .visual .slide-nav .slide-dots span.on:after{ opacity: 1; }
main .visual .slide-nav .slide-num span{ width: auto; height: auto; border-radius:0; background: transparent; font-family: var(--lora); font-weight: 600; color:#fff; letter-spacing: -0.56px;
opacity: 0.5; margin: 0; transition:all 0.3s; }
main .visual .slide-nav .slide-num span:not(:last-child){ margin-right: 20px;}
main .visual .slide-nav .slide-num span.swiper-pagination-bullet-active{ opacity: 1; }
main .visual .scroll{ position: absolute; transform:translateX(-50%); left: 50%; bottom: 40px; z-index: 5; animation:scroll 1.3s linear infinite; }

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

@keyframes scroll{
	0%{ bottom: 40px;}
	50%{ bottom: 50px; }
	100%{ bottom: 40px; }
}

main .about{ padding: 150px 100px 80px; }
main .about .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 1; }
main .about .bg img{ transform:translate(-50%,-50%) scale(1.05); transition:all 3s; }
main .about .bg.aos-animate img{ transform:translate(-50%,-50%) scale(1); }
main .about .ctn-box{ position: relative; z-index: 5; display:flex; flex-direction:column; justify-content:space-between; height: 100%; }
main .about .ctn-box > *{ display:flex; }
main .about .ctn-box .title-box{}
main .about .ctn-box .title-box .title{ color:#fff; font-family: var(--lora); letter-spacing: -2.4px; margin-right: 85px; font-weight: 300;}
main .about .ctn-box .title-box .txt{ margin-top: 150px; color:#fff; line-height: 1.7; letter-spacing: -0.38px; font-weight: 200; }
main .about .ctn-box .num-box{ align-items:center; opacity: 1; }
main .about .ctn-box .num-box .item-box{ width: calc((100% - 300px) / 4); }
main .about .ctn-box .num-box .item-box:not(:last-child){ margin-right: 100px; }
main .about .ctn-box .num-box .item-box:nth-child(2n){ transform:translateY(-60px); }
main .about .ctn-box .num-box .item-box *{ transition:all 1s; }
main .about .ctn-box .num-box .item-box .stxt{ color:#fff; letter-spacing: -0.38px; opacity: 0; }
main .about .ctn-box .num-box .item-box .bar{ position: relative; display:block; width: 100%; height: 2px; margin: 20px 0; background: #222;}
main .about .ctn-box .num-box .item-box .bar:after{ content:''; position: relative; top: 0; left: 0; display:block; width: 0; height: 2px; background: #fff; transition:all 1.5s; }
main .about .ctn-box .num-box .item-box .btxt{ color:#fff; font-weight: 600; letter-spacing: -0.46px; margin-top: 20px; transform:translateY(30px); opacity: 0; }
main .about .ctn-box .num-box .item-box .btxt em{ font-family: var(--nm); letter-spacing: -1.52px; display:inline-block; margin-right: 20px; margin-bottom: 20px; opacity: 0; 
transition:all 0.3s 0.8s; }
main .about .ctn-box .num-box.aos-animate .item-box .stxt{ opacity: 1; }
main .about .ctn-box .num-box.aos-animate .item-box .bar:after{ width: calc(100% - 55px); } 
main .about .ctn-box .num-box.aos-animate .item-box .btxt{ transform:translateY(0); opacity: 1;}
main .about .ctn-box .num-box.aos-animate .item-box .btxt em{ opacity: 1;}
main .about .ctn-box .num-box.aos-animate .item-box .btxt em:not(.split){ font-variant-numeric: normal; unicode-bidi: plaintext; direction: ltr; }
main .about .ctn-box .num-box.aos-animate .item-box .btxt em i{ font-style: normal; display: inline; font-variant-numeric: normal; }

main .menu{ padding: 20px;  }
main .menu .bg-box{ position: relative; display:flex; width: auto; height: 100%; opacity: 1; transform:none !important; }
main .menu .bg-box .item-box{ position: relative; width: calc(100% / 5); height: 100%; clip-path:inset(0 0 100%); transition:all 0.8s; }
main .menu .bg-box .item-box:not(:last-child){ margin-right: 5px; }
main .menu .bg-box .item-box .bg{ position: absolute; top: 0; left: 0; width:100%; height: 100%; background: url(/img/main/menuBg.png) no-repeat; background-attachment: fixed !important;  background-position: center top !important; background-size: 100%; clip-path:inset(0 0 0); transition:all 0.5s ,background-size 0.7s; }
main .menu .bg-box .item-box a{ position: relative; z-index: 2; display:flex; flex-direction:column; justify-content:center; align-items:center; width: 100%; height: 100%; text-align: center;  font-family: var(--lora); font-weight: 500; }
main .menu .bg-box .item-box .title{ color:#fff; letter-spacing: -0.72px; }
main .menu .bg-box .item-box .view{ display:flex; align-items:center; letter-spacing: -0.42px; color:#fff; opacity: 0; margin-top: 35px; transition:all 0.5s; }
main .menu .bg-box .item-box .view svg{ margin-left: 0; transition:all 0.5s; }
main .menu .bg-box.aos-animate .item-box{ clip-path:inset(0 0 0);  }
main .menu .bg-box .item-box:hover .bg{ clip-path:inset(0 0 100%); background-size: 105%;  }
main .menu .bg-box .item-box:hover .view{ opacity: 1; margin-top: 20px; }
main .menu .bg-box .item-box:hover .view svg{ margin-left: 20px;}

main section.footer{ height: auto !important;}