@charset "utf-8";
.pcbr{display:block;}
.ptbr{display:block;}
.tbbr{display:none;}
.mbbr{display:none;}
.dn{display:none;}
.pc_view{display: block;}
.pt_view{display: block;}
.t_view{display: none !important;}
.tm_view{display: none !important;}
.m_view{display: none !important;}
#wrap{overflow:hidden;}
#contents.pn3{padding-top: 220px;}


#header.nav-up{transform:translateY(-150%);}
#header.nav-down{transform:translateY(0%);}
/* page common */
.subTitle{
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	position:relative;
	width:100%;height:595px;
	text-align:center;
}
#contents.pn1 .subTitle{padding:100px 0;height:auto;min-height:820px;}
.subTitle .bg{
	position:absolute;left:50%;top:50%;
	width:100%;height:100%;
	transform:translate(-50%, -50%);
}
.subTitle.pn1 .bg{background:url(/en/images/page/subvisual_about.jpg) no-repeat center;background-size:cover;}
.subTitle.pn2 .bg{background:url(/en/images/page/subvisual_solution.jpg) no-repeat center;background-size:cover;}

.subTitle .txts{position:relative;z-index:10;}
.subTitle .txts h2{font-family:"Wix Madefor Display";font-size:60px;color:#fff;font-weight:700;}
.subTitle .txts p{font-size:20px;color:#fff;font-weight:400;line-height: 1.5em;margin-top: 35px;}

.subTitle .video{
margin:0 auto;border-radius:16px;
aspect-ratio: 675 / 398;
overflow:hidden;
margin-top: 30px;position: relative;width:675px;height:398px;
}
.subTitle .video iframe{
width:100%;height:100%;object-fit:cover;
}
.subTitle .video .poster{
position: absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
width:100%;height:100%;
}
.subTitle .video .poster img{width:110%;height:110%;object-fit:cover;}
.subTitle .video .poster.off,
.subTitle .video .play.off{opacity:0;visibility:hidden;}
.subTitle .video .play{
outline:none;border:none;
position: absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
width:80px;height:80px;border-radius:50%;
background: #1c64f2;
z-index:50;transition:all 0.6s;
overflow:hidden;box-sizing:border-box;
display: flex;align-items:center;justify-content:center;
}
.subTitle .video .play img{transform:translateX(2px);}
.subTitle .video:hover .play{background: #f9790c;}



.pageInfo{
	display:flex;justify-content:flex-end;align-items:center;
	padding:26px 4%;
	margin-bottom:160px;
}
#contents.pn3 .pageInfo{padding:26px 0%;max-width:1500px;width:94%;align-items:end;justify-content:space-between;
margin:0 auto 55px;
}
#contents.pn3 .page_title{
font-size:52px;color:#000;font-weight: bold;
}
.pageInfo .pageTabs{
	box-sizing:border-box;
	width:calc(100% - 350px);
}
.pageInfo .pageTabs ul{display:flex;}
.pageInfo .pageTabs ul li{margin-right:5px;}
.pageInfo .pageTabs ul li a{
	display:flex;align-items:center;justify-content:center;
	height:54px;
	padding:0 30px;
	font-size:17px;color:#000;
	border-radius:27px;
}
.pageInfo .pageTabs ul li.on a{background:#000;color:#fff;font-weight:500;}
.pageInfo .pageLocation{width:350px;}
.pageInfo .pageLocation ul{display:flex;justify-content:flex-end;}
.pageInfo .pageLocation ul li{
	position:relative;
	margin-left:15px;padding-left:16px;
	font-size:15px;color:#000;
}
.pageInfo .pageLocation ul li:before{
	display:block;content:"";
	width:1px;height:10px;
	background:#b2b2b2;
	position:absolute;left:0;top:7px;
}
.pageInfo .pageLocation ul li:first-child{padding:0;margin:0;}
.pageInfo .pageLocation ul li:first-child:before{display:none;}
.pageInfo .pageLocation ul li a{
	display:block;
	position:relative;
	padding-right:18px;
}
.innerwrap{max-width:1400px;width:94%;margin:0 auto;}
.pageTitle1{font-size:62px;color:#000;font-weight:700;}



/* m21 */
.solutions{}
.solutions .section1{
	position:relative;
	padding:0px 0 150px;

}
.solutions .section1 h4{
	font-size:50px;color:#000;font-weight:700;text-align:center;
}
.solutions .section1 p{margin:30px auto 70px;font-size:26px;color:#444;text-align:center;
	line-height: 1.4em;
}
.solutions .section1 .img{
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.solutions .section1 .img .tip{margin-top:20px;font-size:18px;color:#444;}

.solutions .section2{
padding:160px 0;background: #f5f5f5;
}
.solutions .section2 h4{
font-size:52px;color:#111111;font-weight: bold;text-align: center;
}
.solutions .section2 .list{
	display: flex;gap:1.35vw;margin-top: 70px;
}
.solutions .section2 .list>li{
	background: #fff;height: 213px;border-radius:30px;
	width:calc((100% - 1.35vw * 2) / 3);
	padding:40px 1.56vw;
	display: flex;align-items:start;gap:1.3vw;
}
.solutions .section2 .list>li .ico{width:60px;}
.solutions .section2 .list>li .txts{
width:calc(100% - 1.3vw - 60px);
}
.solutions .section2 .list>li .txts .t1{
color:#222222;font-size:24px;font-weight: bold;
}
.solutions .section2 .list>li .txts .t2{
margin-top: 20px;
color:#444444;font-size:20px;font-weight: 400;
}
.solutions .section3{padding:150px 0;}
.solutions .section3 h4{
	position:relative;z-index:10;
	font-size:50px;color:#000;font-weight:700;text-align:center;
}
.solutions .section3 p{
	
	margin:20px 0 90px;
	font-size:26px;color:#000;font-weight:400;text-align:center;
}
.solutions .section3 p strong{font-weight: 400;color:#f9790c;}
.solutions .section3 .conwrap{position:relative;}
.solutions .section3 .conwrap h5{
	position:absolute;left:50%;top:50%;z-index:10;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	width:360px;height:360px;
	padding:20px;
	background:rgba(255,255,255,0.2);
	border-radius:50%;
}
.solutions .section3 .conwrap h5>div{
	box-sizing:border-box;
	width:100%;height:100%;
	padding:20px;
	background:#fff;
	border-radius:50%;
}
.solutions .section3 .conwrap h5>div>div{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;
	border:2px dashed #ddd;
	border-radius:50%;
	text-align:center;
}
.solutions .section3 .conwrap h5>div>div>div{width: 100%;}
.solutions .section3 .conwrap h5>div>div .icon{}
.solutions .section3 .conwrap h5>div>div .tit{margin-top:10px;padding:0 5%;font-size:28px;color:#000;font-weight:700;}
.solutions .section3 .conwrap ul{display:flex;flex-wrap:wrap;justify-content:space-between;}
.solutions .section3 .conwrap ul li{
	overflow:hidden;
	display:flex;align-items:center;justify-content:flex-start;;
	position:relative;
	width:48.5%;height:300px;
	margin-bottom:3%;
	border-radius:30px;
	
	padding:2.6vw;
}
.solutions .section3 .conwrap ul li:nth-child(even){justify-content:flex-end;text-align: right;}
.solutions .section3 .conwrap ul li .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.solutions .section3 .conwrap ul li:nth-child(1) .bg{background:url(/en/images/page/solution_sec3_img1.jpg) no-repeat;background-size:cover;}
.solutions .section3 .conwrap ul li:nth-child(2) .bg{background:url(/en/images/page/solution_sec3_img2.jpg) no-repeat;background-size:cover;}
.solutions .section3 .conwrap ul li:nth-child(3) .bg{background:url(/en/images/page/solution_sec3_img3.jpg) no-repeat;background-size:cover;}
.solutions .section3 .conwrap ul li:nth-child(4) .bg{background:url(/en/images/page/solution_sec3_img4.jpg) no-repeat;background-size:cover;}
.solutions .section3 .conwrap ul li dl{position:relative;z-index:10;}
.solutions .section3 .conwrap ul li dl dt{font-size:28px;color:#fff;font-weight:700;}
.solutions .section3 .conwrap ul li dl dd{margin-top:20px;font-size:18px;color:#fff;line-height:1.7em;}

/*about*/
.about .section1{
padding:230px 0 160px;
}
.about .section1 .txtarea{
	display: flex;
}
.about .section1 .txtarea .img{width:438px;}
.about .section1 .txtarea .txt{
width:calc(100% - 438px);
}
.about .section1 .txtarea .txt h4{
margin-bottom: 45px;color:#111111;font-size:52px;font-weight: bold;	
}
.about .section1 .txtarea .txt p{
font-size:20px;color:#444444;font-weight: 400;line-height: 1.6em;
}
.about .section1 .boxwrap{
margin-top: 40px;
display: flex;align-items:center;justify-content:center;
padding:40px;
border-radius:30px;
background: linear-gradient(to right, #ebf5ff, #f6f6f6,#fff8f1);
}
.about .section1 .boxwrap>b{font-size:26px;color:#000;font-weight: bold;}
.about .section2{
padding:0px 0 160px;
}
.about .section2 h4{
font-size:38px;color:#111111;font-weight: bold;text-align: center;
}
.about .section2 .hr{
display: block;margin:40px auto 100px;width: 96px;height: 2px;background: #f9790c;
}
.about .timeline-container {

		margin: 0 auto;
		position: relative;
	}
	
.about	.timeline-item {
		display: flex;
		position: relative;
	}
	
.about	.timeline-year {
		width: 118px;
		flex-shrink: 0;
		font-size:24px;color:#f9790c;font-weight: bold;
padding:40px;
padding-left: 0;
padding-right: 20px;
	}
	
.about	.timeline-content {
		flex: 1;
		position: relative;
		padding:40px;
		padding-left: 30px;
		border-bottom: 1px solid #e2e2e2;
	}
	
.about	.timeline-content::before {
		content: '';
		position: absolute;
		display: block;
		box-sizing:border-box;
		left:-1px;
		transform:translate(-50%, 50%);
		top:45px;
		width: 8px;
		height: 8px;
		background-color: #f9790c;
		border-radius: 50%;
		z-index:30;
	}
	
.about	.timeline-content::after {
		content: '';
		position: absolute;
		left: -2px;
		top: 20px;
		bottom: -40px;
		width: 2px;
		background-color: #e9ecef;
	}
	

.about	.timeline-title {
		font-size: 24px;
		font-weight: bold;
		color: #222222;
		margin-bottom: 18px;
	}
	
.about	.timeline-description {
		font-size: 20px;
		color: #444444;
		font-weight: 400;
		line-height: 1.6em;
	}
	
.about .section3{padding:100px 0 200px;}
.about .section3 h4{
font-size:50px;color:#111111;font-weight: bold;text-align: center;margin-bottom: 65px;
}
.about .section3 .vnm{
display: flex;gap:2.08vw;flex-wrap:wrap;
}
.about .section3 .vnm>li{
border-radius:30px;border:4px solid #f55b21;
width:calc((100% - 2.08vw) / 2);overflow:hidden;
padding:40px 2.08vw;min-height:340px;
}
.about .section3 .vnm>li:last-child{
border:4px solid #1d63ef;
}
.about .section3 .vnm>li b{
color:#111111;font-size:28px;font-weight: bold;display: block;margin:25px 0;
}
.about .section3 .vnm>li p{
color:#444444;font-size:18px;font-weight: 400;line-height: 1.6em;
}
.about .section3 .vnm>li .str{font-weight: bold;margin-top: 25px;}
.about .section3 .boxwrap{
margin-top: 40px;
background: #f6f6f6;padding:45px 2.08vw;display: flex;align-items:center;justify-content:center;border-radius:30px;
}
.about .section3 .boxwrap span{
font-size:20px;color:#111111;font-weight: 400;
}



.contact{padding-bottom: 160px;}
.contact .innerwrap{max-width:1500px;}
.contact .address{
	position: relative;
	padding-left: calc(60px + 1.04vw);
}
.contact .address:before{
position: absolute;content:'';
width:60px;height:60px;
top:-15px;left:0;
background: url(/en/images/page/contact_address_icon.png)no-repeat center / cover;
}
.contact .address dt{font-size:24px;color:#222;font-weight: bold;}
.contact .address dd{margin-top: 24px;color:#444444;font-size:18px;font-weight: 400;}
.contact .map{
overflow:hidden;width: 100%;border-radius:30px;height:502px;margin-top: 60px;
}
.contact .map iframe{
width:100%;height:100%;
}



/*motion*/
 .del1{animation-delay:0.1s;}
.del2{animation-delay:0.2s;}
.del3{animation-delay:0.3s;}
.del4{animation-delay:0.4s;}
.del5{animation-delay:0.5s;}
.del6{animation-delay:0.6s;}
.del7{animation-delay:0.7s;}

.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}

  
  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-80px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(80px, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}
.subTitle .bg{transform:translate(-50%, -50%) scale(1.2);}
.subTitle .bg:before{
position: absolute;content:'';
width:50%;height: 100%;
top:0;left:0%;
background: rgba(0,0,0,0.5);
}
.subTitle .bg:after{
position: absolute;content:'';
width:50%;height: 100%;
top:0;right:0;
background: rgba(0,0,0,0.5);
}
.subTitle.in-view .bg{transform:translate(-50%, -50%) scale(1);transition:all 1s ease-in-out;}
.subTitle.in-view .bg:before,
.subTitle.in-view .bg:after{width:0%;transition:width 1s ease-in-out 0.1s;}
.subTitle .txts h2,
.subTitle .txts p{opacity:0;}
.subTitle.in-view .txts h2{animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-out;}
.subTitle.in-view .txts p{animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-out;
animation-delay:0.2s;}
.pageInfo{opacity:0;}
.pageInfo.in-view{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.pageTitle1{opacity:0;}
.pageTitle1.in-view{
animation-name: fadeLeft;animation-duration: 0.7s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}