/* common */

.main{ background: #000; }
.main .visual{ position: relative; width: 100%; min-height: 350px; /* height: 100vh; */ padding-bottom: 48.242%; overflow: hidden;}
.main .visual video{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; width: 101%;}

.main .about{ position: relative; width: 100%; height: 100vh; overflow: hidden; opacity: 1; display:flex; align-items:center; }
.main .about figure{ width: 100%; height: 100%; }
.main .about .bg01{ position: absolute; top: 0; left: 0; z-index: 1;}
.main .about .bg02{ position: absolute; transform:translateY(-50%) scale(2); top: 50%; right: 25%; z-index: 5; opacity: 0; transition:all 1.5s 0.3s; }
.main .about .txt-box{ position: relative; z-index: 5; padding-left: 16%; }
.main .about .txt-box .title{ color: #111; font-weight: 800; line-height: 1.45; letter-spacing: -1.2px; margin-bottom: 80px; }
.main .about.aos-animate .bg02{ transform:translateY(-50%) scale(1); right: 0; opacity: 1; }

.main .our{ position: relative; padding: 60px 20px; z-index: 2;}
.main .our .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.main .our .ctn-box{ position: relative; display:grid;  grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(7 , 1fr); width: 100%; height: 820px; margin: 0 auto; border: 1px solid rgba(20, 10, 217, 0.10);}
.main .our .ctn-box:before{ content:''; display:block; width: 1px; height: 100%; background: rgba(20, 10, 217, 0.10); position: absolute; transform:translateX(-50%); left: 50%; top: 0; }
.main .our .ctn-box .item-box{ border-bottom: 1px solid rgba(20, 10, 217, 0.10); grid-row: auto / span 2; }
.main .our .ctn-box .item-box > *{ height: 50%; transition:all 0.7s; }
.main .our .ctn-box .item-box .dots-wrap{ opacity: 0; transition:all 0.5s; }
.main .our .ctn-box .item-box a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; color:#0E3CFF; font-weight: bold; letter-spacing: -0.42px; transition:all 0.7s; }
.main .our .ctn-box .item-box a:after{ content:''; display:block; width: 20px; height: 21px; background: url(/img/main/ourArrow.png) no-repeat 50% 50%; background-size:cover;
margin-left: -20px; opacity: 0; transition:all 0.5s 0.1s , opacity 0.5s;}
.main .our .ctn-box .item-box:not(.type2) dt{ position: relative; width: 100%; display:flex; justify-content:center; align-items:center; padding: 0 20px; }
.main .our .ctn-box .item-box dt{ color:#0E3CFF; font-weight: bold; letter-spacing: -0.64px; }
.main .our .ctn-box .item-box dt > img{ margin-right: 20px;}
.main .our .ctn-box .item-box dd{ border-top: 1px solid rgba(20, 10, 217, 0.10); display:flex; justify-content:center; width: 100%;}
.main .our .ctn-box .item-box dd > div{ position: relative; width: 100%; display:flex; justify-content:center; align-items:center; text-align: center; transition:all 0.5s; width: 100%; }
.main .our .ctn-box .item-box dd > div:nth-child(2){ width: 130%; }
.main .our .ctn-box .item-box dd > div:not(:last-child){ border-right:1px solid rgba(20, 10, 217, 0.10); }
.main .our .ctn-box .type2{ grid-row: auto / span 3; }
.main .our .ctn-box .type2 dt{ position: relative; height: 100%; }
.main .our .ctn-box .item01 dt{ padding: 60px; color: #0E3CFF; font-family: var(--man); font-weight: 800; letter-spacing: -1.24px;}
.main .our .ctn-box .item05 dt a{ display:flex; justify-content:center; align-items:center; height: 100%;  }
.main .our .ctn-box .item05 dt a:after{ width: 28px; height: 30px; margin-left: -28px; }
.main .our .ctn-box .item-box:not(.type2):hover dt{ height: 30%;  transform: scale(0.7);}
.main .our .ctn-box .item-box:not(.type2):hover dt img{  transform: scale(0.7);}
.main .our .ctn-box .item-box:hover dd{ height: 70%;}
.main .our .ctn-box .item-box:hover dd > div:nth-child(2){ width: 100%; }
.main .our .ctn-box .item-box dd > div:hover{ background: rgba(20, 10, 217, 0.05); flex-grow: 2; width: 155% !important; }
.main .our .ctn-box .item05 dt:hover a:after,
.main .our .ctn-box .item-box dd > div:hover a:after{ opacity: 1; margin-left: 20px; transition:all 0.5s, opacity 0.5s 0.1s; }
.main .our .ctn-box .item-box dd > div:hover .dots-wrap,
.main .our .ctn-box .item05 dt:hover .dots-wrap{ opacity: 1; }
.main .our .ctn-box .item05 dt:hover{ background: rgba(20, 10, 217, 0.05); }

.main .service{ padding-top: 150px; overflow: hidden;}
.main .service .title-box{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 80px; width: 100%; }
.main .service .title-box .title{ color:#fff; font-weight: 500; letter-spacing: -1.08px; } 
.main .service .slide-box{ min-height:566px; margin-bottom: 100px; overflow: hidden; padding: 5px; margin-right: -35px;}
.main .service .slide-box .swiper-slide{ width: calc((100% - 70px) / 3); margin-right: 35px; transition: all 0.7s;}
.main .service .slide-box .swiper-slide .img-box{ position: relative; padding: 45px; border: 1px solid rgba(255, 255, 255, 0.20); margin-bottom: 30px; }
.main .service .slide-box .swiper-slide .img-box .dots-wrap{ position: absolute; top: 0; left: 0; z-index: 1;}
.main .service .slide-box .swiper-slide .img-box .bg{ position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: 2;}
.main .service .slide-box .swiper-slide .img-box .img{ position: relative; width: 320px; height: 320px; margin: 0 auto; z-index: 3;}
.main .service .slide-box .swiper-slide .img-box .img img{ object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main .service .slide-box .swiper-slide .img-box .img .off{ }
.main .service .slide-box .swiper-slide .img-box .img .on{ opacity: 0; transition:all 0.5s 0s; }
.main .service .slide-box .swiper-slide .img-box .img .cover{ width: 100%; height: 100%; display:flex; flex-wrap:wrap; pointer-events:none;  overflow: hidden;}
.main .service .slide-box .swiper-slide .img-box .img .cover div{mix-blend-mode: exclusion; pointer-events: auto; background: #D9D9D9; display:none; }
.main .service .slide-box .swiper-slide .title{ text-align: center; color:#fff; font-weight: 500; letter-spacing: -0.52px; }
.main .service .slide-box .swiper-slide.swiper-slide-next{ margin-top: 80px;}
/* .main .service .video-box{ position: relative; width: 100%; height: 1080px; overflow: hidden; } 
.main .service .video-box video{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); min-width: 100%; min-height: 100%; object-fit:cover; height: 100%;} */
.main .service .video-box{ height: auto !important; }
.main .service .video-box video{ width: 100%; height: auto; }
.main .service .slide-box .swiper-slide:hover .img-box .img .off{ opacity: 0; transition-delay:0.4s; }
.main .service .slide-box .swiper-slide:hover .img-box .img .on{ opacity: 1; transition-delay:0.4s;}
 
.main .page-link{	 padding: 150px 0;}
.main .page-link h3.title{ text-align: center; font-weight: 600; color:#fff; margin-bottom: 80px; letter-spacing: 10px; filter:blur(5px); -webkit-filter:blur(5px); opacity: 0; transition:all 1s; } 
.main .page-link h3.title.aos-animate{ letter-spacing: -1.28px;  filter:blur(0px); -webkit-filter:blur(0px); opacity: 1;}
.main .page-link .ctn-box{ position: relative; display:flex; gap:60px; justify-content:space-between; }
.main .page-link .ctn-box .bg{ position: absolute; transform:translateY(-50%); top: 50%; right: 30px; pointer-events:none; z-index: 5;}
.main .page-link .ctn-box .item-box{ position: relative; width: calc((100% - 180px) / 4); height: 360px; border:1px solid rgba(255,255,255,0.2); overflow: hidden;} 
.main .page-link .ctn-box .item-box:nth-of-type(2n){ margin-top: 120px;}
.main .page-link .ctn-box .item-box .fit-box{ position: absolute;  top: 0; left: 0; }
.main .page-link .ctn-box .item-box a{ display:flex; padding: 30px 20px; width: 100%; height: 100%; }
.main .page-link .ctn-box .item-box .txt-box{ position: relative; z-index: 2; text-align: right ;} 
.main .page-link .ctn-box .item-box .txt-box .title{ font-family: var(--cor); font-style: italic; color:#fff; letter-spacing: -0.96px; font-weight: bold; }
.main .page-link .ctn-box .item-box .txt-box .stit{ color:#fff; font-weight: 500; letter-spacing: -0.6px; }
.main .page-link .ctn-box .item-box:not(.item04) a{ justify-content:flex-end; }
.main .page-link .ctn-box .item-box:nth-of-type(2n-1) .txt-box .title{ writing-mode: vertical-rl; margin: 0 0 0 auto;}
.main .page-link .ctn-box .item-box.item01 .txt-box .stit{ margin-top: 40px;}
.main .page-link .ctn-box .item-box.item02 a,
.main .page-link .ctn-box .item-box.item03 a{ align-items:flex-end; }
.main .page-link .ctn-box .item-box.item02 a{ padding-bottom: 100px;}
.main .page-link .ctn-box .item-box.item02 .txt-box .title{ margin-bottom: 10px; }
.main .page-link .ctn-box .item-box.item03 a{ padding-bottom: 60px;}
.main .page-link .ctn-box .item-box.item03 .txt-box .title{ margin-bottom: 20px; margin-right: -10px;}
.main .page-link .ctn-box .item-box.item04 .txt-box{ text-align: left; margin: 0 auto;}
.main .page-link .ctn-box .item-box:hover .fit-box img{ transform:translate(-50%,-50%) scale(1.1); }

.main .project{ padding: 150px 0; background: #ECF5FF; overflow: hidden;}
.main .project .title-box{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 80px; }
.main .project .title-box .title{ color:var(--mainC); font-weight: 500; letter-spacing: -1.08px; }
.main .project .move-box #viewbtn{ color:var(--mainC); font-family: var(--man); font-weight: 500;} 
.main .project .move-box #viewbtn svg path{ stroke:var(--mainC); }
.main .project .move-box .slide-arrow button path{ stroke:var(--mainC); }
.main .project .move-box .slide-arrow span{ background: var(--mainC); opacity: 0.2;}
.main .project .slide-box{ margin-bottom: 150px; }
.main .project .slide-box .swiper-slide{ max-width:935px; width: 100%; min-height: 410px; margin-right: 50px; padding: 30px; transition:all 0.7s; }
.main .project .slide-box .swiper-slide a{ display:flex; height: 100%; padding: 40px 30px; border: 1px solid rgba(20, 10, 217, 0.10);}
.main .project .slide-box .swiper-slide .img-box{ position: relative; border: 1px solid rgba(20, 10, 217, 0.10); margin-right: 40px; padding: 45px; flex-shrink:0;  }
.main .project .slide-box .swiper-slide .img-box .dots-wrap{ position: absolute; top: 0; left: 0; z-index: 1;}
.main .project .slide-box .swiper-slide .img-box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.main .project .slide-box .swiper-slide .img-box .img{ width: 180px; height: 180px; margin: 0 auto; z-index: 3; transition:all 0.7s; }
.main .project .slide-box .swiper-slide .txt-box{ padding: 20px 0; display:flex; flex-direction:column; justify-content:space-between; }
.main .project .slide-box .swiper-slide .txt-box .txt{ color:var(--mainC); font-weight: 300; line-height: 1.7; letter-spacing: -0.34px;}
.main .project .slide-box .swiper-slide .txt-box .title{ color:var(--mainC); font-weight: 500; letter-spacing: -0.42px; }
.main .project .slide-box .swiper-slide-active{ padding: 0; }
.main .project .slide-box .swiper-slide-active .img-box .img{ width: 240px; height: 240px; }

.main .project .logo-list{  display: flex; }
.main .project .logo-list .logo-box{ display:flex; align-items:center; animation: rollingleft 30s linear infinite;}
.main .project .logo-list .logo-box.clone{ animation: rollingleft2 30s linear infinite; }
.main .project .logo-list .logo-box figure{ width:max-content; margin-right: 60px;}
.main .project .logo-list.list02{ margin-top: 40px; }
.main .project .logo-list.list02 .logo-box{ animation: rollingright 50s linear infinite;}
.main .project .logo-list.list02 .logo-box.clone{ animation: rollingright2 50s linear infinite;}

/* animation */
@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); }
}

.main .news{ padding: 150px 0; background: #001227; overflow: hidden;}
.main .news .title-box{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 80px; }
.main .news .title-box .title{ color:#fff; font-weight: 500; letter-spacing: -1.08px;} 
.main .news .slide-box{ overflow: hidden; padding: 5px; margin-top: -5px; margin-left: -5px; }
.main .news .slide-box .swiper-slide{ position: relative; width: calc((100% - 100px) / 3); margin-right: 50px; border: 1px solid rgba(255, 255, 255, 0.20); transition: all 0.5s; }
.main .news .slide-box .swiper-slide .dots-wrap{ opacity: 0; transition: all 0.5s; }
.main .news .slide-box .swiper-slide a{ display:flex; flex-direction: column; padding: 10px; min-height:460px;  }
.main .news .slide-box .swiper-slide figure{ width: 100%; height: 250px; border: 1px solid rgba(255,255,255,0.2); margin-bottom: 20px;}
.main .news .slide-box .swiper-slide .txt-box{ padding: 10px; display: flex ; flex-direction: column;  justify-content: space-between; align-items: flex-start; flex-grow: 1;}
.main .news .slide-box .swiper-slide .txt-box .title{ color:#fff; font-weight: 500; line-height:1.5; letter-spacing: -0.44px; text-overflow: ellipsis;  overflow: hidden; display:-webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.main .news .slide-box .swiper-slide .txt-box .date{ font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.5); margin-top: -20px; }
.main .news .slide-box .swiper-slide .txt-box .txt{ position: relative; display:inline-block; color: rgba(255, 255, 255, 0.80); font-family: var(--man); letter-spacing: -0.36px; }
.main .news .slide-box .swiper-slide .txt-box .txt:after{ content:''; display:block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff;  transform-origin: 100% 50%; transform: scaleX(0); transition: transform .6s;}
.main .news .slide-box .swiper-slide:hover{ background: rgba(255, 255, 255, 0.05); }
.main .news .slide-box .swiper-slide:hover .txt-box .txt:after{ transform-origin: 0% 50%;  transform: scaleX(1);}
.main .news .slide-box .swiper-slide:hover .dots-wrap{ opacity: 1; }
.main .news .slide-box .swiper-slide:hover figure img{ transform:translate(-50%,-50%) scale(1.1); }

.main .inquiry{ background: url(/img/main/inquiryBg.png) no-repeat 50% 50% / cover;}
.main .inquiry .w1300{ padding: 150px 0 170px; text-align: center; }
.main .inquiry .w1300 .title{ color:#fff; font-weight: 500; margin-bottom: 40px; letter-spacing: 10px; filter:blur(5px); -webkit-filter:blur(5px); opacity: 0; transition:all 1s; }
.main .inquiry .w1300.aos-animate .title{ letter-spacing: -2px; filter:blur(0px); -webkit-filter:blur(0px); opacity: 1; }
.main .inquiry .w1300 .link a{ position: relative; display:inline-flex; align-items:center; color: #20A5FD; font-family: var(--man); font-weight: 500; letter-spacing: -0.92px; }
.main .inquiry .w1300 .link a span{ margin-right: 30px;}
.main .inquiry .w1300 .link a:after{ content:''; display:block; width: 100%; height: 2px; background: #20A5FD; position: absolute; bottom: -20px; left: 0; }

.main .inquiry .w1300 .link a span{ display:block; position: relative; width: 25px; height: 26px; overflow: hidden;}
.main .inquiry .w1300 .link a span > *{ position: absolute; top:0; left: 0; transition:all 0.4s 0.1s, opacity 0.4s; }
.main .inquiry .w1300 .link a span .on{ opacity: 1; }
.main .inquiry .w1300 .link a span .off{ transform: translate(-25px, 25px); opacity: 0; }
.main .inquiry .w1300 .link a:hover span .on{ transform: translate(25px, -25px); opacity: 0; }
.main .inquiry .w1300 .link a:hover span .off{ transform: translate(0, 0); opacity: 1; }