@charset "utf-8";

.main { background:#f8f8f8; }
@media screen and (max-width:1024px){
	.main { }
}

.main1 { overflow:hidden; }
#visual { position:relative; width:100vw; height:100%; }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; align-items:flex-end; opacity:0; transition:all 0.3s;}
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
#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 { 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 .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:50%; left:50%; max-width:1600px; width:100%; transform:translate(-50%, -50%); z-index:15; text-align:center }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { opacity:0; font-size:64px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.05em; display:inline-block; position:relative; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span strong { position:relative; font-weight:600; display:inline-block; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span span { font-weight:600; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; margin-top:30px; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-size:23px; font-weight:300; color:#fff; line-height:1.6; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span:nth-child(2) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 1.2s 1.0s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:bgs5 2.0s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mov { animation:bgs5 2.0s 0.3s; animation-fill-mode:both; }
#visual .swiper-btn { display:none }
#visual .control_box { display:none; position:absolute; bottom:80px; left:50%; transform:translateX(-50%); max-width:1600px; width:100%; z-index:119; text-align:center; }
#visual .control_box .box { position:relative; width:100%; }
#visual .control_box .box .swiper-pagination { display:flex; gap:0 10px; position:relative; }
#visual .control_box .box .swiper-pagination > span { width:150px; display:block}
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

#visual .scrolldown { position:absolute; left:0; width:100%; bottom:20px; z-index:3; display:flex; align-items:center; justify-content:center; text-align:center }
#visual .scrolldown .txt { font-family:var(--mainFont); color:#fff; font-size:15px; font-weight:500; line-height:1.3; }
#visual .scrolldown .circle { margin:10px auto 0; position:relative; width:30px; height:30px; display:block; border:1px solid #fff; border-radius:50px; }
#visual .scrolldown .circle:before { content:""; display:block; width:9px; height:12px; position:absolute; top:5px; left:50%; transform:translateX(-50%); animation:scrollDown 2s infinite; background:url(/img/main/scrolldown.svg) center center no-repeat; background-size:9px auto }
@media screen and (max-width:1560px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:52px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:30px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:21px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:44px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:25px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:19px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:36px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:17px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 br { display:none }
	#visual .scrolldown .txt { font-size:14px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:24px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:18px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:16px; }
}

/* animation */
#visual .scrolldown { opacity:0; }
#visual .scrolldown { animation:ani_5 1.0s 0.5s; animation-fill-mode:both; }

.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .mov { animation:none; opacity:1 }
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { color:#111; animation:ani_color 2.0s 2.2s; animation-fill-mode:both; }
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span strong span { opacity:0; animation:ani_5 0.5s 1.0s; animation-fill-mode:both; }
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span strong:before { content:""; display:block; position:absolute; left:0; top:0; z-index:1; width:0; height:100%; background:var(--mainColor); } 
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span strong:before { animation:ani_w 0.5s 0.5s forwards, ani_w100r 0.5s 1.4s forwards; }
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage,
.intro #visual .swiper-container .swiper-slide.swiper-slide-active .mov { clip-path:polygon(7% 80%, 93% 80%, 93% 100%, 7% 100%); animation:ani_wbox 2.0s 2.0s; animation-fill-mode:both; }
.intro #visual .scrolldown { opacity:0; animation:ani_4 1.0s 2.5s; animation-fill-mode:both; }
.intro .quickMenu { opacity:0; }
.intro .quickMenu { animation:ani_3 1.0s 3.0s; animation-fill-mode:both; }
@keyframes ani_wbox {
	0% { clip-path: polygon(7% 80%, 93% 80%, 93% 100%, 7% 100%); }
	100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes ani_color {
	0% { color:#111 }
	100% { color:#fff }
}
@keyframes scrollDown {
    0% { top:5px; }
    50% { top:calc(100% - 16px); }
    100% { top:5px; }
}

/* business */
.business-box { position:relative; padding-bottom:0; }
.business-box:before { content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:linear-gradient(180deg, #0e1317 0%, #091833 100%); }
.business-box .title-box { overflow:hidden; position:absolute; top:0; left:0; z-index:5; width:100%; pointer-events:none; mix-blend-mode:difference; }
.business-box .title-box h3 { position:relative; top:0; left:0; display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100vh; color:#fff; z-index:6; }
.business-box .title-box h3 span { font-family:var(--mainFont); font-size:178px; font-weight:500; line-height:1.3; letter-spacing:-3.56px; }
.business-box .title-box h3 span:not(:last-child) { margin-right:100px; }
.business-box.active:before { animation:bi_bg 5s 0.1s; animation-fill-mode:both; }
.business-box.active .title-box h3 span:not(:last-child) { animation:bi_m 2s 0.3s; animation-fill-mode:both; }
.business-box .listbox { position:relative; mix-blend-mode:revert; }
.business-box .listbox > div { opacity:0; }
.business-box .listbox.on > div { opacity:1; animation:bi_list 1.2s 1.8s; animation-fill-mode:both; }
.business-box .listbox ul:after {content:""; display:block; visibility:hidden; clear:both; height:0; }
.business-box .listbox ul li { float:left; }
.business-box .listbox ul li:nth-child(2n) { float:right; }
.business-box .listbox ul li:not(:last-child) { margin-bottom:200px; }
.business-box .listbox ul li:nth-child(2) { margin-top:200px; }
.business-box .listbox ul li .imgbox { position:relative; overflow:hidden }
.business-box .listbox ul li .imgbox:after { content:""; display:block; transition:all 0.3s; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:0; background:linear-gradient(180deg, rgba(0, 75, 208, 0.50) 0%, #000 100%); }
.business-box .listbox ul li:hover .imgbox:after { height:100%; }
.business-box .listbox ul li .imgbox img { position:relative; transform:scale(1.00); transition:all 0.5s; }
.business-box .listbox ul li:hover .imgbox img { transform:scale(1.15); }
.business-box .listbox ul li .imgbox .txt { transition:all 0.3s; opacity:0; position:absolute; bottom:0; left:0; width:100%; padding:40px; z-index:2 }
.business-box .listbox ul li .imgbox .txt p { color:rgba(255,255,255,0.6); font-size:18px; font-weight:500; line-height:1.6; }
.business-box .listbox ul li .imgbox .txt p:not(:last-child) { margin-bottom:35px; }
.business-box .listbox ul li:hover .imgbox .txt { opacity:1; transition:all 0.5s 0.2s; }
.business-box .listbox ul li .info { margin-top:30px; display:flex; align-items:center; justify-content:space-between; }
.business-box .listbox ul li .info h4 { color:#111; font-size:32px; font-weight:500; line-height:1.3; letter-spacing:-0.04em; }
.business-box .listbox ul li .info .more { font-family:var(--mainFont); transition:all 0.5s 0.2s; color:#ccc; font-size:18px; font-weight:500; line-height:1.3; display:flex; align-items:center; }
.business-box .listbox ul li .info .more span { position:relative; transition:all 0.5s 0.2s; margin-left:15px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:30px; border-radius:30px; border:1px solid #ccc; overflow:hidden; }
.business-box .listbox ul li .info .more span:before { content:""; display:block; transition:all 0.5s 0.2s; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/main/icon_more.svg) center center no-repeat; filter:grayscale(100%) brightness(100%); opacity:0.3; }
.business-box .listbox ul li .info .more span:after { content:""; display:block; transition:all 0.5s 0.2s; position:absolute; top:0; left:-30px; width:100%; height:100%; background:url(/img/main/icon_more.svg) center center no-repeat }
.business-box .listbox ul li .stxt { display:none }
.business-box .listbox ul li:hover .info .more { color:var(--mainColor); }
.business-box .listbox ul li:hover .info .more span { border:1px solid var(--mainColor); }
.business-box .listbox ul li:hover .info .more span:before { left:30px; }
.business-box .listbox ul li:hover .info .more span:after { left:0; }
.business-box .pin-spacer { pointer-events:none; mix-blend-mode:difference; }
@media screen and (max-width:1560px){
	.business-box .title-box h3 span { font-size:150px; }
	.business-box .title-box h3 span:not(:last-child) { margin-right:80px; }
	.business-box .listbox ul li { width:42.5% }
	.business-box .listbox ul li:nth-child(2n) { width:30% }
	.business-box .listbox ul li .imgbox img { width:100%; }
	.business-box .listbox ul li .imgbox .txt { padding:30px; }
	.business-box .listbox ul li .imgbox .txt p { font-size:17px; }
	.business-box .listbox ul li .imgbox .txt p:not(:last-child) { margin-bottom:30px; }
	.business-box .listbox ul li .info { margin-top:25px; }
	.business-box .listbox ul li .info h4 { font-size:28px; }
	.business-box .listbox ul li .info .more { font-size:17px; }
}
@media screen and (max-width:1280px){
	.business-box .title-box h3 span { font-size:110px; }
	.business-box .title-box h3 span:not(:last-child) { margin-right:60px; }
	.business-box .listbox ul li { width:44% }
	.business-box .listbox ul li:nth-child(2n) { width:31% }
}
@media screen and (max-width:1024px){
	.business-box .title-box { position:relative !important; height:auto !important; padding:180px 0; } 
	.business-box .title-box h3 { height:auto !important; } 
	.business-box .title-box h3 span { font-size:90px; }
	.business-box .title-box h3 span:not(:last-child) { margin-right:50px; }
	.business-box .listbox { padding-top:0 !important; }
	.business-box .listbox.on > div { animation:bi_list 1.2s 1.5s; animation-fill-mode:both; }
	.business-box .listbox ul li .imgbox { position:relative; }
	.business-box .listbox ul li .imgbox:before { content:""; display:block; padding-bottom:80%; }
	.business-box .listbox ul li:nth-child(2n) .imgbox:before { padding-bottom:150%; }
	.business-box .listbox ul li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
	.business-box .listbox ul li .imgbox:after { height:100%; display:none }
	.business-box .listbox ul li:hover .imgbox img { transform:scale(1); }
	.business-box .listbox ul li .imgbox .txt { padding:20px; opacity:1; display:none }
	.business-box .listbox ul li .imgbox .txt p { font-size:16px; }
	.business-box .listbox ul li .imgbox .txt p:not(:last-child) { margin-bottom:15px; }
	.business-box .listbox ul li .info { margin-top:20px; }
	.business-box .listbox ul li .info h4 { font-size:22px; }
	.business-box .listbox ul li .info .more { font-size:16px; }
	.business-box .listbox ul li .stxt { display:block; margin-top:20px; }
	.business-box .listbox ul li .stxt p { color:#333; font-size:16px; font-weight:500; line-height:1.6; }
	.business-box .listbox ul li .stxt p:not(:last-child) { margin-bottom:15px; }
}
@media screen and (max-width:860px){
	.business-box .title-box { padding:100px 0; } 
	.business-box .listbox ul { max-width:640px; margin:0 auto }
	.business-box .listbox ul li,
	.business-box .listbox ul li:nth-child(2n) { width:100% }
	.business-box .listbox ul li .imgbox:before,
	.business-box .listbox ul li:nth-child(2n) .imgbox:before { padding-bottom:60%; }
	.business-box .listbox ul li .imgbox .txt { padding:30px; }
	.business-box .listbox ul li:not(:last-child) { margin-bottom:100px; }
	.business-box .listbox ul li:nth-child(2) { margin-top:0; }
}
@media screen and (max-width:640px){
	.business-box .title-box { padding:80px 0; } 
	.business-box .title-box h3 span { font-size:64px; }
	.business-box .title-box h3 span:not(:last-child) { margin-right:30px; }
	.business-box .listbox ul li:not(:last-child) { margin-bottom:40px; }
	.business-box .listbox ul li .stxt { margin-top:15px; }
	.business-box .listbox ul li .stxt p:not(:last-child) { margin-bottom:10px; }
}
@keyframes bi_bg {
    0% { opacity:1 }
    30% { opacity:0 }
    100% { opacity:0 }
}
@keyframes bi_m {
    0% { margin-right:100px; }
    100% { margin-right:0; }
}
@keyframes bi_list {
    0% { transform:translate(0, 20%); opacity:0; }
    100% { transform:translate(0, -8.5%);  opacity:1; }
}
@media screen and (max-width:1560px){
	@keyframes bi_m {
		0% { margin-right:80px; }
		100% { margin-right:0; }
	}
}
@media screen and (max-width:1280px){
	@keyframes bi_m {
		0% { margin-right:60px; }
		100% { margin-right:0; }
	}
}
@media screen and (max-width:1024px){
	@keyframes bi_m {
		0% { margin-right:50px; }
		100% { margin-right:0; }
	}
	@keyframes bi_list {
		0% { transform:translate(0, 6%); opacity:0; }
		100% { transform:translate(0, 0);  opacity:1; }
	}
}
@media screen and (max-width:640px){
	@keyframes bi_m {
		0% { margin-right:30px; }
		100% { margin-right:0; }
	}
	@keyframes bi_list {
		0% { transform:translate(0, 6%); opacity:0; }
		100% { transform:translate(0, 0);  opacity:1; }
	}
}

/* product */
.product-box { position:relative; width:100%; padding:180px 0; background:url(/img/main/product_bg.jpg) no-repeat center / cover; overflow:hidden }
.product-box .txtbox { position:relative; }
.product-box .tit { position:absolute; left:0; top:190px; transform:rotate(-90deg); transform-origin:top left; opacity:0.3; }
.product-box .tit h3 { display:inline-block; padding-left:95px; font-family:var(--mainFont); color:#fff; font-size:21px; font-weight:500; line-height:1.3 }
.product-box .tit h3 span { font-weight:500; }
.product-box .tit h3:before { content:""; display:block; width:80px; height:2px; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#fff; }
.product-box .txtbox { }
.product-box .txtbox .txt { padding-left:178px; color:#fff; font-size:42px; font-weight:600; line-height:1.5; letter-spacing:-0.06em }
.product-box .listbox { position:relative; }
.product-box .swiper-container { margin-top:120px; }
.product-box .swiper-container .swiper-slide { position:relative; width:340px; height:415px; text-align:center; overflow:hidden }
.product-box .swiper-container .swiper-slide a { display:block; padding:80px 10px 0; }
.product-box .swiper-container .swiper-slide a:before { content:""; display:block; transition:all 0.3s; opacity:0; position:absolute; top:50px; left:0; width:100%; height:100%; background:linear-gradient(180deg, #004BD0 0%, rgba(0, 38, 106, 0.00) 100%); }
.product-box .swiper-container .swiper-slide figure { position:relative; z-index:3; min-height:96px; }
.product-box .swiper-container .swiper-slide figure.m1 { margin-top:-25px; padding-bottom:25px; }
.product-box .swiper-container .swiper-slide dt { margin-top:40px; font-family:var(--mainFont); color:#fff; font-size:24px; font-weight:700; line-height:1.5; }
.product-box .swiper-container .swiper-slide dd { margin-top:30px; color:#fff; font-size:18px; font-weight:500; line-height:1.6; }
.product-box .swiper-container .swiper-slide a:hover:before { top:0; opacity:1; }
.product-box .swiper-container .swiper-slide .more { transition:all 0.3s; opacity:0; position:absolute; bottom:50px; right:30px; width:30px; height:30px; border-radius:30px; border-radius:30px; background:#fff; overflow:hidden; }
.product-box .swiper-container .swiper-slide .more:before { content:""; display:block; transition:all 0.5s 0.2s; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/main/icon_more.svg) center center no-repeat; filter:grayscale(100%) brightness(100%); opacity:0.3; }
.product-box .swiper-container .swiper-slide .more:after { content:""; display:block; transition:all 0.5s 0.2s; position:absolute; top:0; left:-30px; width:100%; height:100%; background:url(/img/main/icon_more.svg) center center no-repeat }
.product-box .swiper-container .swiper-slide a:hover .more { opacity:1; }
.product-box .swiper-container .swiper-slide a:hover .more:before { left:30px; }
.product-box .swiper-container .swiper-slide a:hover .more:after { left:0; }
.product-box .control_box { position:absolute; bottom:0; right:0; z-index:5; display:flex; align-items:center; justify-content:center; gap:0 41px; }
.product-box .control_box:before { content:""; display:block; width:1px; height:15px; position:absolute; top:50%; left:50%; transform:translate(calc(-50% - 0.5px), -50%); background:#ccc; }
.product-box .swiper-btn { width:22px; height:22px; text-indent:-9999em; overflow:hidden; display:block; cursor:pointer; }
.product-box .swiper-button-prev-p,
.product-box .swiper-button-next-p { background:url(/img/main/btn_pn_p.svg) center center no-repeat; }
.product-box .swiper-button-next-p { transform:rotateY(180deg); }
.product-box .swiper-pagination-p { display:none }
@media screen and (max-width:1640px){
	.product-box { padding:140px 0; }
	.product-box .tit { top:175px; }
	.product-box .tit h3 { font-size:17px; }
	.product-box .txtbox .txt { font-size:36px; }
	.product-box .control_box { right:20px; }
	.product-box .listbox { padding:0 20px; }
	.product-box .swiper-container .swiper-slide { width:320px; height:400px; }
	.product-box .swiper-container .swiper-slide a { padding:70px 10px 0; }
	.product-box .swiper-container .swiper-slide dt { margin-top:20px; font-size:22px; }
	.product-box .swiper-container .swiper-slide dd { margin-top:25px; font-size:17px; }
}
@media screen and (max-width:1280px){
	.product-box { padding:100px 0; }
	.product-box .tit { top:160px; }
	.product-box .tit h3 { padding-left:90px; font-size:16px; }
	.product-box .tit h3:before { width:70px; height:2px; }
	.product-box .txtbox .txt { padding-left:120px; font-size:28px; }
	.product-box .swiper-container .swiper-slide { width:340px; height:380px; }
	.product-box .swiper-container .swiper-slide a { padding:60px 10px 0; }
	.product-box .swiper-container .swiper-slide dt { margin-top:10px; font-size:20px; }
	.product-box .swiper-container .swiper-slide dd { margin-top:20px; font-size:16px; }
}
@media screen and (max-width:1024px){
	.product-box { margin-top:60px; padding:80px 0; }
	.product-box .tit h3:before { height:1px; }
	.product-box .txtbox .txt { padding-left:90px; font-size:22px; }
	.product-box .swiper-container .swiper-slide { width:auto; }
	.product-box .swiper-container .swiper-slide figure.m1 { margin-top:-20px; padding-bottom:20px; }
	.product-box .swiper-btn { background-size:18px auto }
	.product-box .swiper-pagination-p { display:flex; justify-content:center; margin-top:10px; }
	.product-box .swiper-pagination-bullet { background:rgba(255,255,255,0.8); opacity:1 }
	.product-box .swiper-pagination-bullet-active { background:var(--mainColor); }
}
@media screen and (max-width:640px){
	.product-box { margin-top:60px; padding:60px 0; }
	.product-box .tit { top:146px; }
	.product-box .tit h3 { padding-left:80px; font-size:15px; }
	.product-box .txtbox .txt { padding-left:30px; font-size:17px; }
	.product-box .control_box { bottom:-75px; }
	.product-box .swiper-container .swiper-slide { height:360px; }
	.product-box .swiper-container .swiper-slide a { padding:50px 10px 0; }
	.product-box .swiper-container .swiper-slide dt { margin-top:10px; }
	.product-box .swiper-container .swiper-slide a:before { top:0; opacity:1; }
	.product-box .swiper-container .swiper-slide a .more { opacity:1; }
	.product-box .swiper-container .swiper-slide a .more:before { left:30px; }
	.product-box .swiper-container .swiper-slide a .more:after { left:0; }
}
@media screen and (max-width:500px){
	.product-box .txtbox .txt br { display:none }
}


/* animation  */
.product-box .txtbox .txt,
.product-box .tit h3 span,
.product-box .listbox { opacity:0; }
.product-box.subOn .tit h3 span { animation:ani_5 0.8s 1.0s; animation-fill-mode:both; }
.product-box.subOn .txtbox .txt { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
.product-box.subOn .listbox { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
.product-box .tit h3:before { width:0; transition:all 0.8s 0.3s; }
.product-box.subOn .tit h3:before { width:80px; }
@media screen and (max-width:1280px){
	.product-box.subOn .tit h3:before { width:70px; }
}

/* client */
.client-box { margin-top:180px; }
.client-box .txtbox { position:relative; }
.client-box .tit { position:absolute; right:0; top:254px; transform:rotate(90deg); transform-origin:top right;}
.client-box .tit h3 { display:inline-block; padding-right:95px; font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:500; line-height:1.3 }
.client-box .tit h3 span { font-weight:500; }
.client-box .tit h3:before { content:""; display:block; width:80px; height:2px; position:absolute; top:50%; right:0; transform:translateY(-50%); background:var(--mainColor); }
.client-box .txtbox { display:flex; justify-content:flex-end; text-align:right; }
.client-box .txtbox .txt { padding-right:178px; color:#111; font-size:42px; font-weight:600; line-height:1.5; letter-spacing:-0.06em }
.client-box .map { margin-top:260px; text-align:center }
.client-box .map .pc { display:block; }
.client-box .map .m { display:none; }
.client-box .map svg { max-width:100%; height:auto; margin:0 auto }
.client-box .map .pin { animation:pin_over 1.8s linear infinite; }
.client-box .map .regionTxt { font-family:var(--mainFont); color:#333; fill:#333; font-size:19px; font-weight:700; line-height:1.3; }
.client-box .map .regionTxt-k { color:#858585; fill:#858585; font-size:16px; font-weight:700; line-height:1.3; }
.client-box .map .m-regionTxt { font-family:var(--mainFont); color:#333; fill:#333; font-size:26px; font-weight:700; line-height:1.3; }
.client-box .map .m-regionTxt-k { color:#858585; fill:#858585; font-size:15px; font-weight:700; line-height:1.3; }
/* .client-box .map .circle { r:70; } */
.client-box .map .circle { transform-box:content-box; transform-origin:center; animation:p_circle 1.2s linear infinite; }
@media screen and (max-width:1640px){
	.client-box { margin-top:140px; }
	.client-box .tit h3 { font-size:17px; }
	.client-box .txtbox .txt { font-size:36px; }
	.client-box .map { margin-top:200px; }
}
@media screen and (max-width:1280px){
	.client-box { margin-top:100px; }
	.client-box .tit { top:232px; }
	.client-box .tit h3 { padding-right:90px; font-size:16px; }
	.client-box .tit h3:before { width:70px; height:2px; }
	.client-box .txtbox .txt { padding-right:120px; font-size:28px; }
	.client-box .map { margin-top:160px; }
	.client-box .map .regionTxt { font-size:21px; }
	.client-box .map .regionTxt-k { font-size:18px; }
}
@media screen and (max-width:1024px){
	.client-box { margin-top:80px; }
	.client-box .tit h3:before { height:1px; }
	.client-box .txtbox .txt { padding-right:90px; font-size:22px; }
	.client-box .map { margin-top:100px; }
}
@media screen and (max-width:760px){
	.client-box .map .pc { display:none; }
	.client-box .map .m { display:block; }
}
@media screen and (max-width:640px){
	.client-box { margin-top:60px; }
	.client-box .tit { top:208px; }
	.client-box .tit h3 { padding-right:80px; font-size:15px; }
	.client-box .txtbox .txt { padding-right:30px; font-size:17px; }
	.client-box .map { margin-top:60px; }
}
@media screen and (max-width:500px){
	.client-box .txtbox .txt br { display:none }
}
@keyframes pin_over {
	0% { transform:translate(0.5px, 0); }
	50% { transform:translate(0.5px, -6px);  }
	100% { transform:translate(0.5px, 0);  }
}
@keyframes p_circle {
	0% { transform:scale(0.1); opacity:0.6; }
	100% { transform:scale(1); opacity:0; }
}

/* animation  */
.client-box .txtbox .txt,
.client-box .tit h3 span,
.client-box .map { opacity:0; }
.client-box.subOn .tit h3 span { animation:ani_1 0.8 0.2s; animation-fill-mode:both; }
.client-box.subOn .txtbox .txt { animation:ani_1 0.8s 0.6s; animation-fill-mode:both; }
.client-box.subOn .map { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
.client-box .tit h3:before { width:0; transition:all 0.8s 0.3s; }
.client-box.subOn .tit h3:before { width:80px; }
@media screen and (max-width:1280px){
	.client-box.subOn .tit h3:before { width:70px; }
}

/* news */
.news-box { position:relative; padding:180px 0 0; overflow:hidden } 
.news-box .title-box h3 { overflow:hidden }
.news-box .title-box h3 span { display:block; font-family:var(--mainFont); color:#111; font-size:84px; font-weight:700; line-height:1.3 }
.news-box .listCont .nav { position:relative; display:flex; justify-content:flex-end; margin:-40px auto 0; max-width:1600px; }
/* 24.09. 24
.news-box .listCont .nav { pointer-events: none; }
/* 24.09. 24 */
.news-box .listCont .nav > li { position:relative; }
.news-box .listCont .nav > li:not(:last-child):before { content:""; display:block; width:5px; height:5px; background-color:#ccc; position:absolute; right:0; top:50%; transform:translateY(-50%); border-radius:5px; }
.news-box .listCont .nav > li:not(:last-child) { margin-right:31px; padding-right:31px; }
.news-box .listCont .nav > li a { font-family:var(--mainFont); color:#ccc; font-size:21px; font-weight:700; line-height:1.3; transition:all 0.3s; }
.news-box .listCont .nav > li.active a { color:var(--mainColor); }
.news-box .listCont .listbox .list { position:relative; display:block; width:100%; }
.news-box .listCont .slider { position:relative; margin:75px auto 0; height:100%; max-width:1920px; padding-bottom:20px; }
.news-box .listCont .listbox .list .inner { transition:all 0.8s; height:100%; padding-bottom:120px; overflow:hidden; width:100% }
.news-box .listCont .listbox .list.on .inner { }
.news-box .listCont .listbox .swiper-slide { position:relative; padding-top:45px; width:425px; height:calc(365px + 45px); transition:all 0.4s; }
.news-box .listCont .listbox .swiper-slide .txtbox { padding:40px 60px; height:365px; background:#fff; transition:all 0.4s; border:2px solid #fff; }
.news-box .listCont .listbox .swiper-slide .txtbox dt { font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:700; line-height:1.3 }
.news-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:20px; color:#111; font-size:28px; font-weight:600; line-height:1.5; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.news-box .listCont .listbox .swiper-slide .txtbox .txt { margin-top:40px; color:#333; font-size:17px; font-weight:300; line-height:1.5; transition:all 0.3s; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.news-box .listCont .listbox .swiper-slide .over { opacity:0; transition:all 0.4s; position:absolute; left:0; bottom:0; width:100%; display:flex; justify-content:space-between; }
.news-box .listCont .listbox .swiper-slide .over .date { font-family:var(--mainFont); color:#ccc; font-size:19px; font-weight:500; line-height:1.3 } 
.news-box .listCont .listbox .swiper-slide .over .more span { padding-right:21px; display:inline-block; font-family:var(--mainFont); color:#ccc; font-size:19px; font-weight:700; line-height:1.3; background:url(/img/main/icon_arr.svg) right center no-repeat; }
.news-box .listCont .listbox .swiper-slide:hover { padding-top:0; }
.news-box .listCont .listbox .swiper-slide:hover .txtbox { border:2px solid #004bd0; }
.news-box .listCont .listbox .swiper-slide:hover .over { opacity:1; }
.news-box .listCont .listbox .swiper-slide-next a { left:0; }
.news-box .listCont .listbox .swiper-slide-prev a { right:0; }
.news-box .listCont .listbox .list .btn-box { position:absolute; bottom:0; left:50%; z-index:5; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; width:98px; height:40px; border:2px solid #e5e5e5; background:#fff; border-radius:40px; }
.news-box .listCont .listbox .list .btn { width:26px; height:26px; text-indent:-9999em; overflow:hidden; display:block; cursor:pointer; }
.news-box .listCont .listbox .list .btn_prev,
.news-box .listCont .listbox .list .btn_next { background:url(/img/main/btn_pn.svg) center center no-repeat; }
.news-box .listCont .listbox .list .btn_next { transform:rotateY(180deg); }
.news-box .listCont .listbox .list .btn_stop { background:url(/img/main/btn_stop.svg) center center no-repeat; }
.news-box .listCont .listbox .list .btn_play { background:url(/img/main/btn_play.svg) center center no-repeat; }
.news-box .listCont .listbox .list .swiper-pagination-n { overflow:hidden; position:absolute; top:unset; bottom:20px; left:calc(50% + 10px); transform:translateX(-50%); width:100%; max-width:1600px; z-index:3; height:2px; background:#e5e5e5; }
.news-box .listCont .listbox .list .swiper-pagination-n .swiper-pagination-progressbar-fill { background:var(--mainColor); }
@media screen and (max-width:1640px){
	.news-box { padding:140px 0 0; } 
	.news-box .title-box h3 span { font-size:74px; }
	.news-box .listCont .nav { padding-right:20px; }
	.news-box .listCont .slider { margin:60px auto 0; padding:20px; }
	.news-box .listCont .listbox .list .inner { padding-bottom:100px; }
	.news-box .listCont .listbox .swiper-slide { padding-top:40px; width:400px; height:calc(365px + 40px); }
	.news-box .listCont .listbox .swiper-slide .txtbox { padding:30px 40px; }
	.news-box .listCont .listbox .swiper-slide .txtbox dt { font-size:17px; }
	.news-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:20px; font-size:24px; }
	.news-box .listCont .listbox .swiper-slide .txtbox .txt { margin-top:35px; font-size:17px; }
	.news-box .listCont .listbox .swiper-slide .over .date { font-size:17px; } 
	.news-box .listCont .listbox .swiper-slide .over .more span { padding-right:20px; font-size:17px; }
	.news-box .listCont .listbox .list .swiper-pagination-n { left:20px; transform:translateX(0); width:calc(100% - 40px); max-width:100%; }
}
@media screen and (max-width:1280px){
	.news-box { padding:100px 0 0; } 
	.news-box .title-box h3 span { font-size:60px; }
	.news-box .listCont .nav > li:not(:last-child):before { width:4px; height:4px; }
	.news-box .listCont .nav > li:not(:last-child) { margin-right:25px; padding-right:25px; }
	.news-box .listCont .nav > li a { font-size:19px; }
	.news-box .listCont .slider { margin:40px auto 0; }
	.news-box .listCont .listbox .list .inner { padding-bottom:80px; }
	.news-box .listCont .listbox .swiper-slide { padding-top:30px; width:400px; height:calc(300px + 30px); }
	.news-box .listCont .listbox .swiper-slide .txtbox { padding:20px 20px; height:300px; }
}
@media screen and (max-width:1024px){
	.news-box { padding:80px 0 0; } 
	.news-box .title-box h3 span { font-size:50px; }
	.news-box .listCont .nav > li:not(:last-child):before { width:3px; height:3px; }
	.news-box .listCont .nav > li:not(:last-child) { margin-right:20px; padding-right:20px; }
	.news-box .listCont .nav > li a { font-size:19px; }
	.news-box .listCont .slider { margin:30px auto 0; }
	.news-box .listCont .listbox .list .inner { padding-bottom:60px; }
	.news-box .listCont .listbox .swiper-slide { padding-top:0; width:auto; height:calc(300px + 30px); }
	.news-box .listCont .listbox .swiper-slide .txtbox { padding:20px 20px; height:300px; }
	.news-box .listCont .listbox .swiper-slide .txtbox dt { font-size:17px; }
	.news-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:20px; font-size:20px; }
	.news-box .listCont .listbox .swiper-slide .txtbox .txt { margin-top:30px; font-size:16px; }
	.news-box .listCont .listbox .swiper-slide .over { opacity:1; }
	.news-box .listCont .listbox .swiper-slide .over .date { font-size:16px; } 
	.news-box .listCont .listbox .swiper-slide .over .more span { padding-right:16px; font-size:16px; }
}
@media screen and (max-width:760px){
	.news-box .title-box { text-align:center; }
	.news-box .listCont .nav { margin:20px auto 0; justify-content:center;}
}
@media screen and (max-width:640px){
	.news-box { padding:60px 0 0; } 
	.news-box .title-box h3 span { font-size:40px; }
	.news-box .listCont .nav > li:not(:last-child):before { width:3px; height:3px; }
	.news-box .listCont .nav > li:not(:last-child) { margin-right:20px; padding-right:20px; }
	.news-box .listCont .nav > li a { font-size:19px; }
	.news-box .listCont .slider { margin:20px auto 0; }
	.news-box .listCont .listbox .list .inner { padding-bottom:40px; }
	.news-box .listCont .listbox .swiper-slide { padding-top:0; height:calc(240px + 30px); }
	.news-box .listCont .listbox .swiper-slide .txtbox { padding:20px 20px; height:240px; }
	.news-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:15px; }
	.news-box .listCont .listbox .swiper-slide .txtbox .txt { margin-top:20px; }
	.news-box .listCont .listbox .swiper-slide .over { opacity:1; }
}

/* animation  */
.news-box .title-box h3 { overflow:hidden }
.news-box .title-box h3 span { opacity:0; display:block; }
.news-box.subOn .title-box h3 span { animation:ani_2 0.8s 0.2s; animation-fill-mode:both; }
.news-box .listCont .nav,
.news-box .listCont .listbox { opacity:0; }
.news-box.subOn .listCont .nav { animation:ani_1 0.8s 0.2s; animation-fill-mode:both; }
.news-box.subOn .listCont .listbox { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }


/* banner */
.banner-box { padding:180px 0 200px; overflow:hidden; max-width:1920px; margin:0 auto }
.banner-box .list { display:flex; align-items:center; }
.banner-box .list ul { white-space:nowrap; display:flex; align-items:center;  }
.banner-box .list li { display:inline-block; margin-right:60px; }
.banner-box.subOn .list ul { animation:marquee 20s 0.5s infinite linear; }
@media screen and (max-width:1024px){
	.banner-box { padding:140px 0 150px; }
}
@media screen and (max-width:640px){
	.banner-box { padding:80px 0 100px; }
}

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }			
}