/* section */
section{padding: 6vw 0;}
section >*{z-index:5}
section  .title_box .page_title {position: relative;font-size: 30px;font-weight: 500;letter-spacing: 0.26rem;margin-bottom: 20px;}
section .title_box .subtitle{position: relative;font-family: "Tenor Sans",sans-serif;font-size: 3rem;font-weight: 500;line-height: 1.05;letter-spacing: 0.10rem;text-transform: uppercase;padding-bottom: 13px;line-height: 1.3;}
section .title_box .subtitle:before{position:absolute;height: 14px;width: 14px;background-color: var(--primary);display:block;top: -13px;left: -23px;content:"";z-index:-1;}
section .title_box .noteBox{line-height: 190%;letter-spacing: 0.5px;font-weight: 500;font-size: 20px;color: #181818;position: relative;margin-top: 35px;word-spacing: 100vw;}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width: 90px;padding: 8px 80px 8px 10px;display:inline-block;text-align: center;background: var(--info);}
.more_btn font{font-size: 15px;position:relative;writing-mode:inherit;color:#fff;font-weight: 400;letter-spacing: 1px;text-align: center;font-family: 'Tenor Sans', sans-serif;}
.more_btn span::before{content:"";position:absolute;top:calc(50% - 5px);right: 23px;width:10px;height:10px;border-top: 1px solid #ffffff;border-right: 1px solid #ffffff;transform:rotate(45deg);opacity: .5;}
.more_btn span::after{content:"";position:absolute;top:calc(50% - 5px);right: 15px;width:10px;height:10px;border-top: 1px solid #fff;border-right: 1px solid  #fff;transform:rotate(45deg)}
.more_btn a:before{content:"";height: 100%;width: 56%;display:block;position:absolute;bottom:0;right: -100px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background: #6b47bf;-webkit-transform: translateX(-50%) skewX(-40deg);transform: translateX(-50%) skewX(-40deg);border-left: 4px solid #fff;}



/* about_area */
#wrap{position:relative;}
#about_area{padding: 6vw 0px 8vw 0px;position: relative;overflow: hidden;background: #f8f8fa;}
#about_area .workframe{width:100%}
#about_area .workframe .aboutBottomArea .wrap{width: min(1300px,88%);margin: -140px auto 0;padding-left:50px;padding-right:50px}
#about_area .workframe .aboutBottomArea .wrap::before{content:"";width:140px;height:220px;display:block;background-image:url(/images/39/img-dots.png);position:absolute;top:20%;right:0;pointer-events:none}
#about_area .workframe .areaTitle{width:min(1420px,85%);margin:0 auto}
#about_area::before{content:"";position:absolute;background-image: url("/images/39/about_bgi_top_01.jpg");background-repeat: no-repeat;background-position: top;background-size:auto;top: 0;left:0;right:0;width:100%;height:100%;poTenor Sans-events:none}
#about_area::after{content:"";width:100%;height:100%;position:absolute;bottom:0;right:0;background-image:url(/images/39/img-ab-bg.png);background-size:cover;background-position:top;background-repeat:no-repeat;display:block}
#about_area .pageh1,#about_area .areaTitle article .textTitle{font-size: 22px;font-weight:500;letter-spacing:1px;line-height:190%}
#about_area .areaTitle article .textTitle{margin-bottom:50px;}
#about_area .areaTitle article{font-size:16px;line-height:210%;position:relative;padding:0 0 20px 0;margin:0 0 20px 0}
#about_area .areaTitle article .texttitleBox p,#about_area .title_box p{font-weight:400;position:relative;line-height:1.9;letter-spacing:0.03rem;font-size: 1rem;margin-top: 20px;}
#about_area .areaTitle article .texttitleBox{gap:30px;display:grid;grid-template-columns:repeat(2,1fr)}
#about_area .serviceBox{margin-top:60px}
#about_area .serviceBox .title{margin-bottom:30px;font-size:24px;font-weight:500;letter-spacing:1px;line-height:190%}
#about_area .serviceBox .specList{display:flex;gap:15px;flex-direction:column}
#about_area .serviceBox .specList .title{margin-bottom:10px;font-size: 18px;font-weight:500;text-align:left;letter-spacing:1px;line-height:190%;width: 100px;}
#about_area .serviceBox .specList .content{font-size: 1rem;text-align: right;}
#about_area .serviceBox .specList .specItem{border-bottom: 1px solid #dcdcdc;-webkit-box-pack: justify;justify-content: space-between;padding: 2px 0;align-items: center;display: grid;grid-template-columns: 120px 1fr;}
#about_area .aboutArea .about_icon{display:grid;position:relative;grid-template-columns:repeat(2,1fr);gap:20px 0px;padding-bottom:40px;width:min(500px,100%)}
#about_area .aboutArea .about_icon >div{display:flex;flex-direction:column;align-items:center}
#about_area .aboutArea .about_icon >div img{aspect-ratio:1 / 1;object-fit:contain;width:70px}
#about_area .aboutArea .about_icon >div p{text-align:center;line-height:130%;font-size:16px;color:var(--primary);font-weight:600;padding:0;margin:20px 0 10px}
#about_area .aboutArea{position:relative;display: grid;gap:  20px;align-items: start;}
#about_area .areaTxt{position:relative}
@keyframes circle {
  0% { transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0) }
  100% { transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg) }
}
#about_area .areaTitle{position:relative}
#about_area .areaTitle .decoTitle{font-size:127px;color: #f0f1f5;font-family:"Tenor Sans",sans-serif;text-transform:uppercase;position:absolute;bottom: -32%;right: 0;z-index:-1;2}
#about_area .areaTitle .title_box{display:grid;grid-template-columns:49% 43%;justify-items:stretch;justify-content:space-between}
#about_area .title_box .subtitle{width: min(530px,80%);}
#about_area .more_btn{margin-top:50px}
#about_area .aboutArea .right{position:relative}
#about_area .aboutArea .goalsItem{display:grid;grid-template-columns:repeat(7,1fr);width:min(400px,80%);margin:50px 0 0 auto}
#about_area .aboutArea .goalsItem .imgBox img{aspect-ratio:1 /1}
#about_area .img_item{z-index:10;position:relative;margin-top:100px}


.aboutBottomArea{position:relative;padding-top:20px}
.aboutBottomArea::before{content:"";position:absolute;background-image:url("/images/39/about_bgi_top_01-1.jpg");background-repeat:repeat;background-position:center;background-size:auto;top:140px;left:0;right:0;width:100%;height:100%;poTenor Sans-events:none}
.aboutBottomArea .imgBox{margin-top:-310px;margin-left:-60px}
.aboutBottomArea .imgBox .img_cover{width: 960px;aspect-ratio:6.5 /3;object-position: right;}
.aboutBottomArea .resourcesBox{width:48%;padding-right:60px;min-height:1110px;position:relative;top:0px}
.aboutBottomArea .logoDeco{width: 12vw;margin: 0 auto 20px;position:relative;top:0}
.aboutBottomArea .logoDeco img{display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.aboutBottomArea .wrap{position:relative;z-index:3}
.aboutBottomArea .wrapPic{max-width:1555px;width:100%;z-index:2;position:absolute;top:360px;left:0;right:0;bottom:0;margin:auto auto 40px}
.aboutBottomArea .wrapPic::before{content:"";display:block;width:calc(100% - -280px);height: 480px;background-color:rgb(255 255 255);position:absolute;top: 290px;right:-320px;z-index:-1;border-radius:30px 0px 0px 30px}
.aboutBottomArea .wrapPic::after{content:"";position:absolute;background-image:url("/images/39/img-line.png");background-repeat:no-repeat;background-position:0 0;background-size:auto;bottom:-100px;left:-300px;width:793px;height:320px;poTenor Sans-events:none;opacity:0.9;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.9),transparent);z-index:-1}
.aboutBottomArea .wrapPic .Img{position:absolute}
.aboutBottomArea .wrapPic .Img1{width:675px;bottom:26%;right:0}
.aboutBottomArea .wrapPic .Img1::before{position:absolute;height:95%;width:100%;display:block;top:10%;right:-4%;content:"";z-index:-1;border:4px solid var(--primary)}
.aboutBottomArea .wrapPic .Img2{width:500px;bottom:0;right:0;left:0;margin:0 auto}
.aboutBottomArea .wrapPic .Img3{width:230px;bottom:170px;left:100px}
.aboutBottomArea .wrapPic .Img img{width:100%;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.aboutBottomArea .wrapPic .decoTitle{font-size:130px;color: #f0f1f5;font-family:"Tenor Sans",sans-serif;text-transform:uppercase;position:absolute;bottom: 26%;left:26%;z-index:2}
#about_area .solutionsItem{width:100%}
#about_area .solutionsItem .imgBox{position:relative}
#about_area .solutionsItem .imgBox .video_box{position:relative;padding-bottom:51.25%;padding-top:30px;height:0;overflow:hidden}
#about_area .solutionsItem .imgBox .video_box iframe,#about_area .solutionsItem .imgBox .video_box object,#about_area .solutionsItem .imgBox .video_box embed{position:absolute;top:0;left:0;width:100%;height:100%}
#about_area .solutionsItem .imgBox:before{position:absolute;height:95%;width:100%;border:4px solid var(--secondary);display:block;top:10%;right:-4%;content:"";z-index:-1}
#about_area .solutionsItem .loaded{position:absolute;right:24%;bottom:80px;line-height:0;border-radius:200px;border:6px solid #fff;-webkit-box-shadow:1px 1px 21px 0px rgba(0,0,0,0.03);box-shadow:1px 1px 21px 0px rgba(0,0,0,0.03);z-index:40}
#about_area .solutionsItem .imgBox .Img{overflow:hidden;border-radius:50%;position:relative;z-index:1;height:100%;width:100%}
#about_area .solutionsItem .imgBox .Img img{aspect-ratio:1 /1}
#about_area .Txtitem{margin-top:80px;z-index:20;width:min(650px,90%)}
#about_area .Txtitem .textEditor{letter-spacing:1px}
#about_area .Txtitem .topBox{justify-content:space-between;gap:30px 40px;display:grid;grid-template-columns:repeat(2,1fr)}
#about_area .Txtitem .topBox .statisticsItem{position:relative}
#about_area .Txtitem .topBox .statisticsItem:not(:last-child,:nth-child(02)):after{content:"";pointer-events:none;position:absolute;width:1px;height:75%;background-color:#e0e3f2;bottom:0;right:-20px}
#about_area .Txtitem .topBox .numberBox{display:flex;gap:10px;align-items:baseline;justify-content:flex-start;}
#about_area .Txtitem .topBox .num{color:var(--primary);font-weight: 900;letter-spacing:-.56px;line-height:150%;font-size: 50px;}
#about_area .Txtitem .topBox .unit{letter-spacing:0;font-weight: 500;}
#about_area .Txtitem .topBox .title{border-bottom: 1px solid #e0e3f2;margin-bottom: 15px;padding-bottom: 10px;color: #252525;font-size: 18px;font-weight: 500;line-height: 1.5;letter-spacing: 0.03rem;text-align: left;}
.odometer.odometer-auto-theme,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-default,.odometer.odometer-theme-default .odometer-digit{font-family:"Helvetica Neue",sans-serif;line-height:1.1em;font-size:70px}
.odometer.odometer-auto-theme *,.odometer.odometer-theme-default,.counter-wrapper,.odometer.odometer-inside span,#about_area #fakeNumber .statisticsItem .numberBox .number span{font-family:"Helvetica Neue",sans-serif;line-height:0.8;font-size:3.4rem;line-height:0.8;letter-spacing:3px;background:var(--primary);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:800}
.counter-wrapper{display:flex;align-items:baseline}
#about_area .deck01{position:absolute;top:5%;right:-12%;transform:translate(-50%,-50%);z-index:-3}
#about_area .deck02{position:absolute;bottom:-10%;right:-12%;transform:translate(-50%,-50%);z-index:10}
#about_area .deck01 img{animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s}


/* performanceArea */
#performanceArea{border-top:1px solid #dcdcdc;padding:110px 0;background-color:#fff;position:relative;background-image:url(/images/39/img-performanceArea-bg.jpg);background-repeat:no-repeat;background-position:50% 20%}
#performanceArea .workframe{display:grid;grid-template-columns: 36% 63%;gap:20px;justify-content:space-between;align-items:center}
#performanceArea .performanceBox li{margin:10px 20px}
#performanceArea .performanceBox li img{filter:grayscale(100%) brightness(0.9025);opacity:.4;transition:0.5s}
#performanceArea .performanceBox li:hover{transform:scale(1.05)}
#performanceArea .performanceBox li:hover  img{filter:grayscale(0) brightness(1);opacity:1}
#performanceArea .deck02{position:absolute;right: -370px;bottom: -250px;animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s}
#performanceArea .track{position: absolute;top: -150px;left: 0;width: 100vw;max-width:100%;overflow:hidden;z-index:1;white-space:nowrap}
#performanceArea .track p { font-weight: 100; font-size: 120px; margin: 0; text-transform: uppercase; letter-spacing: 2px; line-height: 1; will-change: transform; animation: marquee 60s linear infinite; font-family: 'Tenor Sans',sans-serif; color: transparent; -webkit-text-stroke: 1px rgb(233 233 235); text-transform: uppercase; text-rendering: geometricPrecision }
@keyframes marquee {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}


@media screen and (max-width:1660px){
	section .title_box .subtitle { font-size: 2.8rem; padding-bottom: 8px; }
	section .title_box .page_title { font-size: 26px; }
	#about_area .aboutArea .about_icon { grid-template-columns: repeat(2,1fr) }
	#about_area .deck02 { left: 0% }
	#about_area .solutionsList .imgBox { height: 520px; width: 520px }
	#about_area .workframe { margin: 0 auto }
	.aboutBottomArea .imgBox .img_cover { width: 50%; }
	.aboutBottomArea .wrapPic::before { height: 480px; top: 140px; }
}
@media screen and (max-width: 1440px){
    #about_area .solutionsList .imgBox{height: 430px;width: 430px;}
	.aboutBottomArea .wrapPic::before{height: 480px;top: 90px;}
}
@media screen and (max-width: 1380px){
	#about_area .aboutArea .right { display: flex; align-items: center; gap: 140px }
	#about_area .solutionsList .imgBox { height: 430px; width: 430px }
	#about_area .solutionsItem .imgBox { height: 100%; width: 100%; }
	#about_area .solutionsItem .loaded { bottom: -20px }
	#about_area .img_item .Txtitem { right: 2%; padding: 40px 120px; bottom: 0; position: relative; margin: 50px auto; }
	#about_area .aboutArea { gap: 50px; display: flex; flex-direction: column; align-items: center }
	#about_area .img_item { width: 100%; margin-right: 0; margin-top: 10px }
	#about_area .areaTitle { padding: 0px 30px; }
	#about_area .more_btn { position: relative; bottom: 0 }
	#about_area .aboutArea .about_icon { grid-template-columns: repeat(4,1fr); width: 100% }
	#about_area .aboutArea .goalsItem { margin: 50px  auto 0; width: min(520px,100%) }
	#about_area .deck01,#about_area .deck02 { display: none }
	section .title_box .subtitle { font-size: 2.4rem; }
	#performanceArea .track p { font-size: 90px }
	#about_area .areaTitle article .texttitleBox { grid-template-columns: 1fr; gap: 0px; }
	#about_area .areaTitle article .textTitle { margin-bottom: 10px; }
	#about_area .workframe .aboutBottomArea .wrap { margin: -70px auto 0; }
	.aboutBottomArea .wrapPic .decoTitle { font-size: 90px; bottom: 29%; }
	.aboutBottomArea .wrapPic .Img1 { width: 610px; bottom: 36%; right: -30px; }
	.aboutBottomArea .wrapPic .Img2 { width: 390px; }
	.aboutBottomArea .wrapPic::before { height: 480px; top: 140px; }
}
@media screen and (min-width:1281px){
	.more_btn.white a:hover font{color:#ffffff}
}

@media screen and (max-width:1280px){
	section .title_box { margin-bottom: 0px }
	section .title_box .page_title,#about_area .areaTitle .title_box .page_title { margin-bottom: 0; }
	#about_area .areaTxt:after,#about_area .solutionsList .imgBox::before,#about_area::after,#performanceArea::before,#performanceArea .deck02 { display: none }
	#about_area .workframe { width: 90%; }
	#about_area .aboutArea .img_item { width: calc(100% - 60px ); }
	#about_area .aboutArea .right { display: flex; align-items: center; gap: 20px 80px; }
	#about_area .solutionsItem .imgBox {   }
	#about_area .solutionsItem .loaded { bottom: 20px }
	#about_area .about_logo { margin: 50px auto; width: 200px }
	#about_area .Txtitem,#about_area .title_box .subtitle { width: 100%; }
	#about_area .Txtitem .topBox .title { font-size: 16px; }
	#performanceArea .track { width: 100vw; margin-top: 0; top: -60px; }
	#imglist .img_nav { position: relative }
	#about_area .areaTitle::after { top: 30px; left: 30px }
	.aboutBottomArea .wrapPic::before { height: 470px; top: 70px; right: -250px; }
	.aboutBottomArea .wrapPic .Img1 { width: 570px; bottom: 42%; right: -90px; }
}

@media (max-width:1180px) {
	#about_area .workframe .aboutBottomArea .wrap { margin: 0 auto; padding-left: 0; padding-right: 0; }
	.aboutBottomArea .serviceBox { width: 100%; min-height: auto; padding: 50px 0 0 }
	.aboutBottomArea .resourcesBox { min-height: 780px; }
	.aboutBottomArea .wrapPic .Img { width: 46vw; bottom: auto; top: 0; }
	.aboutBottomArea .wrapPic .Img2,.aboutBottomArea .wrapPic .Img3,.aboutBottomArea .wrapPic .decoTitle,.aboutBottomArea .wrapPic::before,#about_area .workframe .aboutBottomArea .wrap::before,#about_area .areaTitle .decoTitle { display: none }
}

@media screen and (max-width:1024px){
	section .title_box .page_title,#about_area .areaTitle .title_box .page_title{font-size: 1.3rem;}
	section .title_box .noteBox{font-size:18px;margin-top:20px}
}
@media (max-width: 960px){
	.aboutBottomArea .resourcesBox { width: 100%; min-height: auto; }
	.aboutBottomArea .wrapPic { position: relative; margin: 0; top: unset; bottom: unset; padding: 60px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
	section .title_box .page_title,section .title_box .subtitle { text-align: center; }
	.aboutBottomArea .imgBox { margin-top: 0; margin-left: 0; margin-bottom: 50px; }
	.aboutBottomArea .imgBox .img_cover { width: 100%; }
	.aboutBottomArea .logoDeco { width: 15vw; }
	#about_area .areaTitle .title_box { grid-template-columns: 1fr; gap: 40px; }
	#about_area .more_btn { text-align: center; margin-top: 40px; }
	#about_area .aboutArea .areaTxt { position: relative; width: 100% }
	#about_area .aboutArea .img_item { padding: 0; width: calc(100% - 0px) }
	#about_area .areaTitle .title_box p { width: 100%; margin-top: 20px; }
	#about_area .solutionsItem .loaded,#about_area .img_item .Txtitem { display: none }
	#about_area .solutionsList .imgBox { padding: 0; height: 360px; width: 360px }
	#about_area .aboutArea .about_icon { grid-template-columns: repeat(2,1fr); }
	#performanceArea .track p { font-size: 50px; }
	.aboutBottomArea .wrapPic .Img1 { width: 80%; position: relative; right: 0; }
	#performanceArea { padding: 60px 0; }
	#performanceArea .workframe { display: flex; flex-direction: column; align-items: center; gap: 40px; }
	#performanceArea .performanceBox li { margin: 10px 30px; }
	#performanceArea .performanceBox { width: 100%; }
	section .title_box .subtitle:before { display: none; }
	#about_area .Txtitem { margin-top: 50px; }
}

@media screen and (max-width:768px){
	section .title_box .subtitle{font-size: 2rem;}
	#about_area .aboutArea .right{display:flex;flex-direction:column}
	#about_area{padding: 4vw 0 15vw 0;}
	#about_area .areaTitle::after{top:15px;left:15px}
	#about_area .areaTitle{padding: 0 20px;}
	#about_area .pageh1,#about_area .areaTitle article .textTitle{font-size:20px}
	#about_area .serviceBox { margin-top: 40px; }
}
@media screen and (max-width:640px){
	.bottombtn .productbtn img{width: 16px;}
    .aboutBottomArea{padding-top: 20px;padding-bottom:60px}
	.aboutBottomArea .wrapPic .decoTitle{font-size:80px}
}
@media (max-width:414px){
    .aboutBottomArea .wrapPic .decoTitle{font-size:18vw}
}