@charset "utf-8";



#visual { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container { position:relative; width:100%; height:100vh; overflow:hidden; background:rgba(0,0,0,0.7); }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; opacity:0 !important; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide .mvisualImage { opacity:1; transform:scale(1.05); position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide .txtbox { position:absolute; top:35%; left:0; width:100%; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { color:#fff; font-size:var(--font80); font-weight:700; line-height:1.3; letter-spacing:-0.05em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:24px; color:#fff; font-size:var(--font24); font-weight:300; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt span { opacity:0; font-weight:700; display:block; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 span { font-weight:300; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox { animation:ani_5 0.1s 0.1s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:mvisual 4s 0.01s; animation-fill-mode:both; }
#visual .btn_pn { display:none }

#visual .control_box { position:absolute; left:0; top:22%; width:100%; z-index:10; }
#visual .control_box .c-box { display:flex; align-items:center; gap:8px; }
#visual .control_box .numbox { display:flex; align-items:center; gap:11px; }
#visual .control_box .numbox .txt { min-width:25px; margin-top:2px; }
#visual .control_box .numbox .txt > span { color:rgba(255, 255, 255, 0.50); font-size:var(--font18); font-weight:500; line-height:1.3; transition:all 0.4s; }
#visual .control_box .numbox .txt > .stxt-1,
#visual .control_box .numbox .txt > .activeslide { color:rgba(255, 255, 255, 1); }
#visual .control_box .numbox .bar { width:3px; height:3px; background:rgba(255, 255, 255, 0.50); border-radius:3px; text-indent:-9999em; overflow:hidden; display:block; }
#visual .control_box .swiper-btn { position:relative; margin:0; padding:0; left:unset; right:unset; top:unset; outline:none; transform:translate(0); display:flex; align-items:center; justify-content:center; width:20px; height:20px; background:url(/img/svg/swiper-btn.svg) center center no-repeat }
#visual .control_box .swiper-btn.swiper-button-next { transform:rotate(180deg); }
#visual .swiper-pagination { position:relative; display:none; }
#visual .swiper-pagination span { display:none }
#visual .swiper-pagination .swiper-pagination-bullet { opacity:0; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(255, 255, 255, 0.2); border-radius:5px; margin:0; overflow:hidden; }
#visual .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }

#visual .topBtn { position:absolute; left:0; bottom:20%; width:100%; z-index:10; }
#visual .topBtn > div { display:flex; gap:20px; }
#visual .topBtn .box { position:relative; }
#visual .topBtn .box a { padding:40px; width:360px; display:block; background:rgba(0, 0, 0, 0.66); backdrop-filter:blur(15px); border-radius:var(--borderR20); overflow:hidden; }
#visual .topBtn .box a:before { content:''; display:block; position:absolute; top:0; left:0; width:0; height:100%; transition:all 0.3s; background:var(--mainColor); }
#visual .topBtn .box a:hover:before { width:100%; }
#visual .topBtn .box a:after { content:''; display:block; position:absolute; top:20px; right:20px; width:0; height:0; border-top:16px solid #fff; border-left:16px solid transparent; }
#visual .topBtn .box strong { display:block; color:#fff; font-size:var(--font28); font-weight:700; line-height:1.3; position:relative; z-index:2; }
#visual .topBtn .box span { display:block; margin-top:16px; color:#fff; font-size:var(--font18); font-weight:300; line-height:1.3; position:relative; z-index:2; }


#visual .scrollDown { position:absolute; top:50%; right:50px; transform:translateY(-50%); z-index:11; display:flex; align-items:center; gap:10px; }
#visual .scrollDown .txt { display:flex; }
#visual .scrollDown .txt > span { opacity:0; transition:all 0.8s; min-width:5px; display:block; transform:translateY(-15px); color:#fff; font-size:var(--font16); font-weight:600; line-height:1.3; }
#visual .scrollDown .line { position:relative; display:flex; gap:0; flex-direction:column; }
#visual .scrollDown .line span { width:12px; height:7px; display:flex; background:url(/img/svg/scrolldown_arr.svg) center center no-repeat; opacity:0.2; }
#visual .scrollDown .line span:nth-child(1) { animation:scrollDown1 1.5s 0.3s infinite; }
#visual .scrollDown .line span:nth-child(2) { animation:scrollDown2 1.5s 0.3s infinite; }
#visual .scrollDown .line span:nth-child(3) { animation:scrollDown3 1.5s 0.3s infinite; }

@media screen and (max-height:800px){
	#visual .topBtn .box a { padding:35px 40px; }
}
@media screen and (max-height:700px){
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:12px; }
	#visual .topBtn { bottom:18%; }
	#visual .topBtn .box a { padding:30px 40px; }
}
@media screen and (max-height:600px){
	#visual .topBtn { bottom:14%; }
}
@media screen and (max-height:500px){
	#visual .topBtn { bottom:8%; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { top:38%; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:12px; }
	#visual .control_box .numbox .txt { margin-top:4px; }
	#visual .control_box .swiper-btn { background-size:16px auto; }
	#visual .topBtn { bottom:18%; }
}
@media screen and (max-width:860px){
	#visual .swiper-container .swiper-slide .mvisualImage { background-position:65% center;  }
	#visual .topBtn > div { gap:10px; }
	#visual .topBtn .box { width:calc((100% - 10px) / 2); }
	#visual .topBtn .box a { padding:20px; width:100%; }
	#visual .topBtn .box span { margin-top:8px; }
}
@media screen and (max-width:640px){
	#visual .control_box { top:calc(60% - 50px); }
	#visual .swiper-container .swiper-slide .txtbox { top:60%; }
	#visual .topBtn { bottom:50px; }
	#visual .topBtn > div { gap:5px; }
	#visual .topBtn .box { width:calc((100% - 5px) / 2); }
	#visual .topBtn .box a { padding:20px 15px; }
	#visual .topBtn .box a:after { right:10px; border-width:10px 0 0 10px; }
}

.swiper-button-next, 
.swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@keyframes scrollDown1 {
    0% { opacity:0.2; }
    30% { opacity:1; }
    50% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown2 {
    0% { opacity:0.2; }
    20% { opacity:0.2; }
    50% { opacity:1; }
    70% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown3 {
    0% { opacity:0.2; }
    40% { opacity:0.2; }
    70% { opacity:1; }
    90% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes visual_txt_off {
	0% { opacity:1; }
	100% { opacity:0; }
}

@keyframes mvisual{
	0%{ transform:scale(1.00); }
	90%{ transform:scale(1.05); }
	100%{ transform:scale(1.05); }
}


.title-box { position:relative; padding:14px 0 0 40px; }
.title-box:before { content:''; display:block; position:absolute; top:0; left:14px; width:14px; height:14px; border-radius:14px; background:var(--mainColor); }
.title-box h3 { color:var(--mainColor); font-size:var(--font60); font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.title-box h3 span { font-weight:700; }
.title-box .txt { margin-top:20px; color:#111; font-size:var(--font28); font-weight:400; line-height:1.4; letter-spacing:-0.04em; }
.title-box.wht h3,
.title-box.wht .txt { color:#fff }
.title-box.wht:before { background:#fff }
@media screen and (max-width:1440px){
	.title-box { padding:12px 0 0 36px; }
	.title-box:before { width:12px; height:12px; }
}
@media screen and (max-width:1024px){
	.title-box { padding:10px 0 0 26px; }
	.title-box:before { width:9px; height:9px; }
	.title-box .txt { margin-top:10px; }
}
@media screen and (max-width:640px){
	.title-box { padding:6px 0 0 18px; }
	.title-box:before { width:6px; height:6px; }
	.title-box .txt { margin-top:5px; }
}

/* animation */ 
.title-box:before { opacity:0; left:35px; transition:all 0.8s 0.8s; }
.title-box.subOn:before { opacity:1; left:0; }
.title-box h3 { overflow:hidden; }
.title-box h3 span { opacity:0; display:block }
.title-box.subOn h3 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.title-box .txt { overflow:hidden; }
.title-box .txt span { opacity:0; display:block }
.title-box.subOn .txt span { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }




.products .listbox { display:flex; gap:40px; }
.products .listbox .box { width:calc((100% - 120px) / 4); text-align:center; }
.products .listbox .box a { padding:40px 40px 52px; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:var(--borderR20); background:#f7f7f7; transition:all 0.8s; }
.products .listbox .box dl { margin-top:20px; width:100%; }
.products .listbox .box dt h4 { color:#111; font-size:var(--font24); font-weight:500; line-height:1.3; transition:all 0.8s; }
.products .listbox .box dd { margin-top:16px; padding-top:20px; border-top:1px solid #ddd; color:#333; font-size:var(--font18); font-weight:300; line-height:1.6; transition:all 0.8s; }
.products .listbox .box .item { transition:all 0.8s; height:100%; }
.products .listbox .box .item .imgbox img { max-width:100%; }
.products .listbox .box:hover .item { transform:rotateY(180deg); }
.products .listbox .box:hover a { transform:rotateY(180deg); background:var(--mainColor); }
.products .listbox .box:hover a dt h4 { color:#fff; }
.products .listbox .box:hover a dd { border-color:rgba(255, 255, 255, 0.25); color:#fff; }
@media screen and (max-width:1440px){
	.products .listbox { gap:30px; }
	.products .listbox .box { width:calc((100% - 90px) / 4); }
	.products .listbox .box a { padding:30px 30px 45px; }
}
@media screen and (max-width:1280px){
	.products .listbox { gap:25px; }
	.products .listbox .box { width:calc((100% - 75px) / 4); }
	.products .listbox .box a { padding:25px 25px 40px; }
	.products .listbox .box dd { margin-top:11px; padding-top:15px; }
}
@media screen and (max-width:1024px){
	.products .listbox { gap:10px; }
	.products .listbox .box { width:calc((100% - 30px) / 4); }
	.products .listbox .box a { padding:20px 20px 30px; }
	.products .listbox .box dl { margin-top:10px; }
	.products .listbox .box dd { margin-top:8px; padding-top:12px; }
	.products .listbox .box dd br { display:none; }
}
@media screen and (max-width:960px){
	.products .listbox { gap:10px; flex-wrap:wrap; }
	.products .listbox .box { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.products .listbox { gap:5px; }
	.products .listbox .box { width:calc((100% - 5px) / 2); }
	.products .listbox .box a { padding:15px 15px 20px; }
	.products .listbox .box dl { margin-top:8px; }
	.products .listbox .box dd { margin-top:6px; padding-top:9px; }
}

/* animation */
.products .listbox .box { opacity:0; }
.products .listbox.subOn .box { animation:ani_4 0.8s 0.5s; animation-fill-mode:both;}



.application { position:relative; padding-top:140px; }
.application:before { content: ""; display:block; position:absolute; left:0; top:0; width:100%; height:calc(100% - (282px / 2)); background:url(/img/main/application_bg.jpg) center top no-repeat; background-size:cover; }
.application .listbox { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:20px; }
.application .listbox .circle { position:relative; width:282px; }
.application .listbox .circle::before { content: ""; display:block; padding-bottom:100%; }
.application .listbox .circle a { position:absolute; left:0; top:0; transition:all 0.5s; width:100%; height:100%; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:100%; overflow:hidden; }
.application .listbox .circle a:after { content: ""; display:block; transition:all 0.5s; position:absolute; left:0; top:0; width:100%; height:100%; background:url(/img/main/application_s_bg.png) no-repeat center / cover; }
.application .listbox .circle a:before { content: ""; display:block; position:absolute; left:1px; top:1px; width:calc(100% - 2px); height:calc(100% - 2px); background-color:var(--mainColor); border-radius:100%; }
.application .listbox .circle a .icon { position:relative; z-index:3; }
.application .listbox .circle a h4 { position:relative; z-index:3; margin-top:16px; color:#fff; font-size:var(--font24); font-weight:400; line-height:1.4; }
.application .listbox .circle a:hover { transform:translateY(-20px); }
.application .listbox .circle a:hover:after { opacity:0; }
@media screen and (max-width:1440px){
	.application { padding-top:120px; }
	.application:before { height:calc(100% - (260px / 2)); }
	.application .listbox .circle { width:260px; }
}
@media screen and (max-width:1280px){
	.application { padding-top:100px; }
	.application:before { height:calc(100% - (220px / 2)); }
	.application .listbox { gap:20px; }
	.application .listbox .circle { width:220px; }
	.application .listbox .circle a .icon img { height:65px; }
}
@media screen and (max-width:1024px){
	.application { padding-top:70px; }
	.application:before { height:calc(100% - ((100% - 60px) / 4)); }
	.application .listbox { gap:10px; }
	.application .listbox .circle { width:calc((100% - 30px) / 4); }
	.application .listbox .circle a .icon img { height:55px; }
	.application .listbox .circle a h4 { margin-top:8px; }
}
@media screen and (max-width:640px){
	.application { padding-top:35px; }
	.application .listbox { gap:5px; }
	.application .listbox .circle { width:calc((100% - 15px) / 4); }
	.application .listbox .circle a .icon img { height:45px; }
}
@media screen and (max-width:480px){
	.application .listbox .circle a .icon img { height:32px; }
	.application .listbox .circle a h4 { margin-top:4px; font-size:var(--font20); }
}
	

/* animation */
.application .listbox .box { opacity:0; }
.application .listbox.subOn .box { animation:bgs3 0.8s 0.5s; animation-fill-mode:both;}


.technology .listbox { display:flex; gap:40px; } 
.technology .listbox .box { transition:flex 0.4s ease; flex:1; position:relative; height:510px; overflow:hidden; border-radius:var(--borderR40); }
.technology .listbox .box::before { content: ""; display:block; transition:all 0.6s; filter:grayscale(100%) brightness(0.9); position:absolute; left:0; top:0; width:100%; height:100%; background-position:left center; background-repeat:no-repeat; background-size:cover; }
.technology .listbox .box:nth-child(1)::before { background-image:url(/img/main/technology_bg1.jpg); }
.technology .listbox .box:nth-child(2)::before { background-image:url(/img/main/technology_bg2.jpg); background-position:right center; }
.technology .listbox .box a { position:relative; display:block; width:100%; height:100%; padding:0 5px; }
.technology .listbox .box .item { position:relative; display:block; width:100%; height:100%; padding:0 5px; display:flex; align-items:center; justify-content:center; text-align:center; }
.technology .listbox .box dt { transition:all 0.6s; color:#fff; font-size:var(--font40); font-weight:700; line-height:1.3; letter-spacing:-0.045em; }
.technology .listbox .box dd { transition:all 0.6s; margin-top:24px; color:#fff; font-size:var(--font20); font-weight:300; line-height:1.6;  }
.technology .listbox.active.hover .box.active dt { font-size:var(--font48); }
.technology .listbox.active.hover .box span { display:block; }
.technology .listbox.active.hover .box dd { display:none; }
.technology .listbox.active.hover .box.active span { display:none; }
.technology .listbox.active.hover .box.active dd { display:block; }
.technology .listbox.active.hover .box { flex:0.39; }
.technology .listbox.active.hover .box.active { flex:0.61; }
.technology .listbox.active.hover .box.active::before { filter:none; transform:scale(1.03); }
@media screen and (max-width:1440px){
	.technology .listbox { gap:30px; } 
	.technology .listbox .box { height:460px; }
}
@media screen and (max-width:1280px){
	.technology .listbox { gap:20px; } 
	.technology .listbox .box { height:400px; }
}
@media screen and (max-width:1024px){
	.technology .listbox { gap:10px; } 
	.technology .listbox .box { height:320px; }
	.technology .listbox .box dd { margin-top:12px; }
	.technology .listbox.active.hover .box,
	.technology .listbox.active.hover .box.active { flex:1; }
	.technology .listbox.active.hover .box.active span { display:none; }
	.technology .listbox.active.hover .box.active dd { display:block; }
}
@media screen and (max-width:640px){
	.technology .listbox { gap:5px; } 
	.technology .listbox .box { height:260px; }
	.technology .listbox .box dd { margin-top:6px; }
}

/* animation */
.technology .listbox .box { opacity:0; }
.technology .listbox.subOn .box { animation:bgs3 0.8s 0.5s; animation-fill-mode:both; }



.clients { padding:140px 0 160px; background:#f7f7f7; }
.clients .map-box .imgbox svg { max-width:100%; height:auto; }
.clients .map-box .imgbox text.txt1,
.clients .map-box .imgbox tspan { fill:#333; font-size:var(--font18); font-weight:300; line-height:1.3; }
.clients .map-box .list { padding:0 20px; display:none; }
.clients .map-box .list ul { display:flex; gap:10px 20px; flex-wrap:wrap; }
.clients .map-box .list li { position:relative; padding-left:15px; width:calc((100% - 40px) / 3); color:#333; font-size:var(--font20); font-weight:300; line-height:1.3; }
.clients .map-box .list li:before { content: ""; display:block; position:absolute; left:0; top:10px; width:3px; height:3px; background:#333; border-radius:3px; }
@media screen and (max-width:1440px){
	.clients { padding:120px 0 140px; }
	.clients .map-box .imgbox text.txt1 { font-size:var(--font22); }
}
@media screen and (max-width:1280px){
	.clients { padding:100px 0 120px; }
}
@media screen and (max-width:1024px){
	.clients { padding:70px 0 80px; }
	.clients .map-box .imgbox text,
	.clients .map-box .imgbox .pin rect,
	.clients .map-box .imgbox .circle { display:none; }
	.clients .map-box .list { display:block; }
}
@media screen and (max-width:640px){
	.clients { padding:35px 0 40px; }
	.clients .map-box .list li { padding-left:11px; }
	.clients .map-box .list li:before { top:8px; width:2px; height:2px; }
}
@media screen and (max-width:480px){
	.clients .map-box .list li { width:calc((100% - 20px) / 2); }
}

/* animation */
.clients .map-box .imgbox .pin { opacity:0; }
.clients .map-box.subOn .imgbox .pin { animation:ani_5 1.0s 0.5s; animation-fill-mode:both; }


.clients .rolling-box { position:relative; overflow:hidden; display:flex; gap:10px; margin-top:60px; }
.clients .rolling-box .box { display:flex; gap:10px; }
.clients .rolling-box .box dt { position:relative; padding-left:21px; color:#111; font-size:var(--font24); font-weight:500; line-height:1.3; }
.clients .rolling-box .box dt:before { content: ""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:31px; background:var(--mainColor); }
.clients .rolling-box .box dd { margin-top:20px; }
.clients .rolling-box .box ul { display:flex; gap:10px; }
.clients .rolling-box .box li { width:220px; height:110px; padding:10px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:var(--borderR10); }
.clients .rolling-box .box li img { max-width:100%; height:auto; }
@media screen and (max-width:1024px){
	.clients .rolling-box { gap:5px; }
	.clients .rolling-box .box { gap:5px; }
	.clients .rolling-box .box dt { padding-left:16px; }
	.clients .rolling-box .box dt:before { height:20px; }
	.clients .rolling-box .box dd { margin-top:10px; }
	.clients .rolling-box .box ul { gap:5px; }
	.clients .rolling-box .box li { width:180px; height:90px; }
}
@media screen and (max-width:640px){
	.clients .rolling-box { margin-top:40px; }
	.clients .rolling-box .box dt { padding-left:14px; }
	.clients .rolling-box .box dt:before { height:15px; }
	.clients .rolling-box .box dd { margin-top:5px; }
	.clients .rolling-box .box li { width:150px; height:70px; }
}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translateX(calc(-100% - 10px)); }			
}


/* animation */
.clients.subOn .rolling-box .box { animation:marquee 40s 1.5s infinite linear; }