@charset "utf-8";


.langview_btn1 {display:block; width:fit-content; border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:1em; color:#fff; font-weight:500; font-family:var(--font-poppins); padding:12px 20px; position:relative; overflow:hidden; transition:border 0.35s}
.langview_btn1:before {content:''; display:block; width:100%; height:100%; background-image:linear-gradient(180deg, #5165FF 0%, #0096DF 100%); position:absolute; left:0; top:0; transform:scaleX(0); transform-origin:left; transition:transform 0.35s}
.langview_btn1 span {position:relative; z-index:10;}
.langview_btn1.case2 {border-color:#c9cdd9; color:#404355}
.langview_btn1:hover {border-color:transparent; color:#fff;}
.langview_btn1:hover:before {transform:scaleX(1)}

@media screen and (max-width:1024px){
    .langview_btn1 {border-radius:5px; padding:10px 16px;}
}

@media screen and (max-width:767px){
    .langview_btn1 {border-radius:5px; padding:7px 12px;}
}


/*body.intro-lock {overflow:hidden;}*/

.intro_wrap {display:flex; align-items:center; justify-content:center; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:700;}
.intro_wrap .bg {width:50%; height:100%; background:#fff; position:absolute; top:0;}
.intro_wrap .bg.left {left:0;}
.intro_wrap .bg.right {right:0;}
.intro_wrap .txt_box {text-align:center; position:relative; z-index:10;}
.intro_wrap .txt_box .tit {width:250px; margin:0 auto 20px;}
.intro_wrap .txt_box .tit img {width:100%;}
.intro_wrap .txt_box .txt {font-size:1.25em; line-height:1.4em; opacity:0; transform:translateY(30px);}

@media screen and (max-width:1024px){
    .intro_wrap .txt_box .tit {width:180px; margin-bottom:15px;}
    .intro_wrap .txt_box .txt {font-size:1.125em;}
}


/* header */
#langview_header {display:flex; justify-content:space-between; align-items:center; width:100%; height:106px; padding:0 40px; position:fixed; left:0; top:0; z-index:500; transition:all 0.3s; transition-property:height, background;}

#langview_header .h_util {display:flex; align-items:center; gap:0 16px; position:relative; z-index:10;}
#langview_header .h_lang {border:1px solid #fff; border-radius:40px; position:relative; padding:5px;}
#langview_header .h_lang .circle {width:calc(100% - 10px); height:calc(100% - 10px); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
#langview_header .h_lang .circle i {width:32px; height:32px; background:#fff; border-radius:50%; position:absolute; top:0;}
#langview_header .h_lang ul {display:flex; position:relative; z-index:5;}
#langview_header .h_lang ul li a {display:flex; justify-content:center; align-items:center; width:32px; height:32px; font-size:0.875em; color:#fff; font-weight:500; font-family:var(--font-poppins); transition:color 0.4s;}
#langview_header .h_lang ul li.on a {color:#00031a;}
#langview_header .h_lang ul:hover li a {color:#fff;}
#langview_header .h_lang ul li a:hover {color:#00031a;}

#langview_logo {width:150px; height:40px; background:url(../images/logo_w.svg) no-repeat center center; background-size:contain; position:relative; z-index:10;}
#langview_logo a {display:block; width:100%; height:100%;}

#langview_gnb {width:100%; position:absolute; left:0; top:0;}
#langview_gnb > ul {display:flex; justify-content:center;}
#langview_gnb > ul > li {position:relative;}
#langview_gnb > ul > li > a {display:block; font-size:1.125em; color:#fff; line-height:106px; font-weight:500; font-family:var(--font-poppins); padding:0 28px; transition:line-height 0.3s;}
#langview_gnb > ul > li > ul {min-width:220px; background:#fff; border-radius:5px; border-top-left-radius:0; padding:20px 0; box-shadow:7px 5px 15px 0 rgba(72,73,121,0.15); position:absolute; left:0; top:80%; transform:translateY(13px); opacity:0; visibility:hidden; transition:all 0.5s ease-in-out; transition-property:transform, opacity, visibility;}
#langview_gnb > ul > li > ul > li {padding-left:20px;}
#langview_gnb > ul > li > ul > li > a {display:block; font-size:0.875em; color:#404355; font-weight:500; font-family:var(--font-poppins); padding:11px 20px; position:relative; transition:all 0.3s ease-in-out; transition-property:color, padding;}
#langview_gnb > ul > li > ul > li > a:before {content:''; display:block; width:2px; height:100%; background:#c9cdd9; position:absolute; left:0; top:0; transition:all 0.3s ease-in-out;}
#langview_gnb > ul > li:hover > ul {transform:translateY(0); opacity:1; visibility:visible;}
#langview_gnb > ul > li > ul > li > a:hover {color:#00031a; padding-left:30px;}
#langview_gnb > ul > li > ul > li > a:hover:before {background:#0096df}

#all_gnb {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background:#000000d1; backdrop-filter:blur(20px); position:fixed; left:0; top:0; z-index:50; transform:translateX(100%); opacity:0; visibility:hidden; will-change:transform, opacity;}
#all_gnb > ul {display:flex; justify-content:space-between; align-items:start; gap:0 40px; width:100%; padding:0 200px;}
#all_gnb > ul > li > a {font-size:2.5em; color:#fff; font-weight:600; font-family:var(--font-poppins)}
#all_gnb > ul > li > ul {margin-top:15px;}
#all_gnb > ul > li > ul > li {margin-bottom:10px;}
#all_gnb > ul > li > ul > li:last-child {margin-bottom:0;}
#all_gnb > ul > li > ul > li > a {display:inline-block; border-bottom:1px solid transparent; font-size:1.125em; color:#ffffffad; line-height:1.6em; transition:all 0.3s}
#all_gnb > ul > li > ul > li > a:hover {color:#fff;}

#menuOpen {display:flex; justify-content:center; align-items:center; flex-direction:column; gap:4px 0; width:42px; height:42px; border:1px solid #fff; border-radius:50%; position:relative;}
#menuOpen span {display:block; width:18px; height:2px; background:#fff;}

#menuClose {display:block; font-size:1.875em; color:#fff; position:absolute; right:5%; top:37px;}


#langview_header.on #all_gnb {transform:translateX(0); opacity:1; visibility: visible; transition:transform 0.5s ease, opacity 0.35s ease;;}


#langview_header.scroll_on {background:#0096df;}

@media screen and (min-width:1025px){
    #all_gnb > ul > li > ul {display:block !important;}
    #all_gnb > ul > li > ul > li > a:hover {border-color:#fff;}

    #langview_header.scroll_on {height:90px;}
    #langview_header.scroll_on #langview_gnb > ul > li > a {line-height:90px;}
}

@media screen and (max-width:1499px){
    #all_gnb > ul {padding:0 6%;}
}

@media screen and (max-width:1220px){
    #langview_header {padding:0 6%;}

    #langview_gnb > ul > li > a {padding:0 20px;}

    #all_gnb > ul > li > a {font-size:2em;}
}

@media screen and (max-width:1024px){
    #langview_header {height:55px;}

    #langview_logo {width:120px; height:32px;}
    
    #langview_header .h_util {gap:0 10px;}
    #langview_header .h_lang {padding:3px;}
    #langview_header .h_lang .circle {width:calc(100% - 6px); height:calc(100% - 6px)}
    #langview_header .h_lang .circle i {width:28px; height:28px;}
    #langview_header .h_lang ul li a {width:28px; height:28px;}

    #langview_gnb {display:none;}

    #all_gnb {display:block; padding-top:60px;}
    #all_gnb > ul {display:block;}
    #all_gnb > ul > li {border-bottom:1px solid rgba(255,255,255,0.2); padding:7px 0;}
    #all_gnb > ul > li > a {display:block; font-size:1.125em; font-weight:500; padding:8px 0;}
    #all_gnb > ul > li > ul {display:none; margin-top:0;}
    #all_gnb > ul > li > ul > li {margin-bottom:0;}
    #all_gnb > ul > li > ul > li > a {font-size:1em; padding:6px 0;}

    #menuOpen {width:36px; height:36px;}
    #menuOpen span {width:15px; height:1px;}

    #menuClose {font-size:1.5em; right:6%; top:16px;}
}

@media screen and (max-width:767px){
    #langview_header .h_util {gap:0 4px;}
    #langview_header .h_lang .circle i {width:25px; height:25px;}
    #langview_header .h_lang ul li a {width:25px; height:25px;}
    
    #menuOpen {width:33px; height:33px;}
}


/* footer */
#langview_footer {width:100%; background:#00031a; padding:120px 0 96px; margin-top:-65px; position:relative; overflow:hidden;}
#langview_footer:before {content:''; display:block; width:1200px; height:300px; position:absolute; left:50%; top:0; margin-left:-360px; background:rgba(0, 150, 223, 0.2); filter:blur(100px)}
#langview_footer > div {position:relative; z-index:10; transform:translateY(-100%)}
#langview_footer .f_logo {border-bottom:1px solid rgba(255,255,255,0.2); margin-bottom:24px; padding-bottom:24px;}
#langview_footer .f_logo img {display:block; height:40px;}
#langview_footer .f_info li {display:inline-block; font-size:1em; color:#fff; line-height:1.5em; font-weight:500; margin:0 16px 4px 0;}
#langview_footer .f_info li strong {color:#c9cdd9; font-weight:400; margin-right:8px;}
#langview_footer .copy {font-size:1em; color:#fff; font-weight:600; margin-top:20px;}
#langview_footer .f_member {display:flex; gap:4px; position:absolute; right:0; bottom:0;}
#langview_footer .f_member a {display:block; border:1px solid #c9cdd9; border-radius:40px; font-size:0.875em; color:#c9cdd9; line-height:1.4em; padding:4px 10px; transition:all 0.4s; transition-property:background, border;}
#langview_footer .f_member a:hover {border-color:#0096df; background:#0096df;}
#langview_footer .go_top {display:block; width:48px; height:48px; background:rgba(0,3,26,0.2); border:1px solid rgba(255,255,255,0.2); border-radius:10px; font-size:1em; color:#fff; position:fixed; right:40px; bottom:40px; z-index:150; opacity:0; visibility:hidden; transform:translateY(30px); transition:all 0.6s; transition-property:opacity, visibility, transform;}
#langview_footer .go_top.on {opacity:1; visibility:visible; transform:translateY(0);}

@media screen and (max-width:1024px){
    #langview_footer {padding:100px 0 6%;}
    #langview_footer .f_logo {margin-bottom:15px; padding-bottom:15px;}
    #langview_footer .f_logo img {height:32px;}
    #langview_footer .f_info br {display:none;}
    #langview_footer .f_member {position:relative; margin-top:12px;}
    #langview_footer .f_member a {padding:3px 10px;}
    #langview_footer .go_top {width:40px; height:40px; border-radius:5px; right:6%;}
}

@media screen and (max-width:767px){
    #langview_footer .f_logo img {height:28px;}
    #langview_footer .f_info li {margin:0 10px 3px 0;}
    #langview_footer .copy {margin-top:10px;}
    #langview_footer .f_member a {padding:4px 8px;}
    #langview_footer .go_top {width:32px; height:32px; bottom:30px;}
}


/* main */
#mVisu {width:100%; height:100vh; height:100svh; position:relative; overflow:hidden;}
#mVisu .scroll_box {width:104px; position:absolute; right:50%; bottom:160px; margin-right:-720px; z-index:50;}
#mVisu .scroll_box p img {display:block; width:100%; animation:scrollImg 9s infinite linear}
#mVisu .scroll_box .icon {display:block; width:26px; height:45px; border:2px solid #fff; border-radius:50px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#mVisu .scroll_box .icon:before {content:''; display:block; width:6px; height:6px; background:#fff; border-radius:50%; position:absolute; left:50%; top:10px; margin-left:-3px; animation:scrollIcon 1.4s infinite ease-in-out;}
.mVisu_slide {width:100%; height:100%;}
.mVisu_slide .swiper-slide {display:flex; justify-content:center; align-items:end;}
.mVisu_slide .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; z-index:0; transform:scale(1.1);}
.mVisu_slide .img_box:before {content:''; display:block; width:100%; height:100%; background:rgba(0,3,26,0.5);}
.mVisu_slide .txt_box {padding-bottom:160px; position:relative; z-index:10;}
.mVisu_slide .txt_box .tit {font-size:6.25em; color:#fff; line-height:1.25em; font-weight:500; font-family:var(--font-poppins)}
.mVisu_slide .txt_box .txt {font-size:1.875em; color:#fff; line-height:1.33em; font-weight:600; margin-top:20px;}
.mVisu_slide .txt_box p {overflow:hidden;}
.mVisu_slide .txt_box p span {display:block; transform:translateY(100%)}
.mVisu_slide .btn_box {display:flex; align-items:center; gap:0 16px; position:absolute; left:50%; bottom:490px; margin-top:30px; transform:translateX(-50%); z-index:50;}
.mVisu_slide .swiper-button-prev, .mVisu_slide .swiper-button-next {width:auto; height:auto; font-size:1em; color:#fff; position:relative; left:0; top:0; right:0; margin-top:0;}
.mVisu_slide .swiper-button-prev:after, .mVisu_slide .swiper-button-next:after {font-size:1em; font-weight:400; font-family:'Font Awesome 6 Pro'}
.mVisu_slide .swiper-button-prev:after {content:'\f104'}
.mVisu_slide .swiper-button-next:after {content:'\f105'}
.mVisu_slide .swiper-pagination-fraction {display:flex; align-items:center; gap:0 8px; width:auto; font-size:1em; color:#fff; font-weight:600; position:relative; bottom:0; margin-right:8px;}
.mVisu_slide .bar {width:48px; height:2px; background:rgba(255,255,255,0.2); position:relative;}
.mVisu_slide .bar div {width:40%; height:100%; background:#fff; transition:width 6s ease-out}
.mVisu_slide .bar div.no_transition {transition:none;}

.mVisu_slide .swiper-slide-active .img_box {transform:scale(1); transition:transform 5000ms ease-in-out}
.mVisu_slide .swiper-slide-active .tit p span {transition:transform 1s ease-in-out}
.mVisu_slide .swiper-slide-active .txt span {transition:transform 1s ease-in-out 0.8s}
.mVisu_slide .swiper-slide-active p span {transform:translateY(0)}

@keyframes scrollImg {
    0% {transform:rotate(0)}
    100% {transform:rotate(360deg)}
}

@keyframes scrollIcon {
    0% {transform:translateY(0); opacity:1;}
    70% {transform:translateY(16px); opacity:0;}
    100% {transform:translateY(16px); opacity:0;}
}

@media screen and (max-width:1460px){
    #mVisu .scroll_box {right:40px; margin-right:0;}
}

@media screen and (max-width:1220px){
    #mVisu .scroll_box {right:6%;}
    .mVisu_slide .txt_box .tit {font-size:5.5em;}
}

@media screen and (max-width:1024px){
    #mVisu .scroll_box {display:none;}
    .mVisu_slide .txt_box {padding-bottom:100px;}
    .mVisu_slide .txt_box .tit {font-size:4em;}
    .mVisu_slide .txt_box .txt {font-size:1.5em; margin-top:10px;}
    .mVisu_slide .btn_box {bottom:320px;}
}

@media screen and (max-width:767px){
    .mVisu_slide .txt_box {padding-bottom:60px;}
    .mVisu_slide .txt_box .tit {font-size:2.6em;}
    .mVisu_slide .txt_box .txt {font-size:1.125em;}
    .mVisu_slide .btn_box {gap:0 10px; bottom:200px;}
    .mVisu_slide .swiper-button-prev, .mVisu_slide .swiper-button-next {font-size:1.125em;}
    .mVisu_slide .swiper-pagination-fraction {gap:0 6px;}
    .mVisu_slide .bar {width:40px;}
}


.main_title h2 {font-size:1.125em; color:#0096df; line-height:1.55em; font-weight:600; font-family:var(--font-poppins); margin-bottom:24px;}
.main_title .tit {font-size:2.5em; line-height:1.25em; font-weight:700;}

@media screen and (max-width:1024px){
    .main_title h2 {font-size:1em; margin-bottom:15px;}
    .main_title .tit {font-size:2em;}
}

@media screen and (max-width:767px){
    .main_title h2 {margin-bottom:10px;}
    .main_title .tit {font-size:1.8em;}
}


#mAbout {width:100%; height:200vh; position:relative;}
#mAbout > div {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; height:100svh; position:sticky; left:0; top:0; text-align:center;}
#mAbout > div p {font-size:3.125em; line-height:1.2em; font-weight:600; overflow:hidden;}
#mAbout > div p.t1 .char {display:inline-block; opacity:0; transform:translateY(100%);}
#mAbout > div p.t2 {background-image:linear-gradient(to right, #5165ff, #0096df); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-top:8px; opacity:0; transform:translateY(100%);}

@media screen and (max-width:1220px){
    #mAbout > div p {font-size:2.6em;}
}

@media screen and (max-width:1024px){
    #mAbout > div p {font-size:4vw;}
    #mAbout > div p.t2 {margin-top:4px;}
}

@media screen and (max-width:767px){
    #mAbout > div p {font-size:7.5vw; line-height:1.4em;}
    #mAbout > div p.t2 {margin-top:0;}
}


#mSolutions {width:100%; height:250vh; position:relative;}
#mSolutions > div {display:flex; width:100%; height:100vh; height:100svh; position:sticky; left:0; top:0; overflow:hidden;}
#mSolutions > div > div {width:50%; height:100%;}
#mSolutions > div .tit_box {display:flex; justify-content:end; position:relative;}
#mSolutions > div .tit_box .main_title {width:720px; padding-top:160px; position:relative; z-index:15;}
#mSolutions > div .tit_box .img_box {width:100%; height:100%; position:absolute; left:0; top:0;}
#mSolutions > div .tit_box .img_box:before {content:''; display:block; width:100%; height:100%; background:rgba(0,3,26,0.2); position:absolute; left:0; top:0; z-index:10;}
#mSolutions > div .tit_box .img_box > div {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; opacity:0; visibility:hidden; transition:all 0.6s; transition-property:opacity, visibility;}
#mSolutions > div .tit_box .img_box > div.on {opacity:1; visibility:visible;}
#mSolutions > div .txt_box {background:#f8f8fa; padding-left:80px; counter-reset:counter; position:relative;}
#mSolutions > div .txt_box .bar {width:1px; height:calc(100% - 320px); background:#c9cdd9; position:absolute; left:80px; top:50%; transform:translateY(-50%)}
#mSolutions > div .txt_box .bar span {display:block; width:3px; height:33.33%; background:#0096df; position:absolute; left:0; top:0; transition:top 0.85s cubic-bezier(0.22,1,0.36,1);}
#mSolutions > div .txt_box > div {display:flex; justify-content:space-between; flex-direction:column; width:640px; height:100%; padding:160px 0 160px 120px; transition:transform 0.85s cubic-bezier(0.22,1,0.36,1); will-change:transform;}
#mSolutions > div .txt_box > div:before {content:counter(counter, decimal-leading-zero); counter-increment:counter; font-size:3.125em; line-height:1.1em; font-weight:600;}
#mSolutions > div .txt_box > div dl dt {font-size:3.75em; line-height:1.16em; font-weight:500; font-family:var(--font-poppins)}
#mSolutions > div .txt_box > div dl dt a {display:inline-block; font-size:1em;}
#mSolutions > div .txt_box > div dl dt a:after {content:'\e09f'; display:inline-block; font-size:0.4em; line-height:1.3em; font-weight:400; font-family:'Font Awesome 6 Pro'; margin-left:20px; vertical-align:middle;}
#mSolutions > div .txt_box > div dl dd.t1 {font-size:1.5em; color:#0096df; line-height:1.45em; font-weight:600; margin-top:16px;}
#mSolutions > div .txt_box > div dl dd.t2 {font-size:1.25em; color:#404355; line-height:1.5em; margin-top:16px;}
#mSolutions > div .txt_box > div dl dt a:hover:after {animation:mSolutionsArrow 0.6s ease-in-out;}

@keyframes mSolutionsArrow {
    0% {transform:translate(0, 0); opacity:1;}
    45% {transform:translate(1em, -1em); opacity:0;}
    46% {transform:translate(-1em, 1em); opacity:0;}
    100% {transform:translate(0, 0); opacity:1;}
}

@media screen and (max-width:1460px){
    #mSolutions > div .tit_box .main_title {width:calc(100% - 40px)}
    #mSolutions > div .txt_box {padding-left:50px;}
    #mSolutions > div .txt_box .bar {left:50px;}
    #mSolutions > div .txt_box > div {width:calc(100% - 40px); padding-left:80px;}
    #mSolutions > div .txt_box > div dl dt {font-size:2.8em;}
}

@media screen and (max-width:1220px){
    #mSolutions > div .tit_box .main_title {width:calc(100% - 6vw)}
    #mSolutions > div .txt_box {padding-left:50px;}
    #mSolutions > div .txt_box > div {width:calc(100% - 6vw); padding-left:50px;}
    #mSolutions > div .txt_box > div dl dt {font-size:2.2em;}
    #mSolutions > div .txt_box > div dl dt a:after {font-size:0.5em; margin-left:10px;}
}

@media screen and (max-width:1024px){
    #mSolutions > div .tit_box .main_title {padding-top:100px;}
    #mSolutions > div .txt_box {padding-left:30px;}
    #mSolutions > div .txt_box .bar {height:calc(100% - 200px); left:30px;}
    #mSolutions > div .txt_box > div {padding:100px 0 100px 35px;}
    #mSolutions > div .txt_box > div:before {font-size:2.5em;}
    #mSolutions > div .txt_box > div dl dt {font-size:2em;}
    #mSolutions > div .txt_box > div dl dd.t1 {font-size:1.2em; margin-top:10px;}
    #mSolutions > div .txt_box > div dl dd.t2 {font-size:1.125em; margin-top:10px;}
}

@media screen and (max-width:767px){
    #mSolutions > div {display:block;}
    #mSolutions > div > div {width:100%; padding-top:55px;}
    #mSolutions > div .tit_box {justify-content:center; height:calc(100% - 300px);}
    #mSolutions > div .tit_box .main_title {width:88%; padding-top:50px;}
    #mSolutions > div .txt_box {height:300px; overflow:hidden; padding:0 6%;}
    #mSolutions > div .txt_box .bar {height:calc(100% - 100px); left:6%;}
    #mSolutions > div .txt_box > div {padding:50px 0 50px 30px;}
    #mSolutions > div .txt_box > div:before {font-size:2.2em;}
    #mSolutions > div .txt_box > div dl dt {font-size:1.7em;}
    #mSolutions > div .txt_box > div dl dd.t1 {font-size:1.125em; margin-top:7px;}
    #mSolutions > div .txt_box > div dl dd.t2 {font-size:1em;}
}


#mTechnology {padding:160px 0;}
#mTechnology .main_title {display:flex; align-items:start; margin-bottom:48px;}
#mTechnology .main_title h2 {width:calc(100% - 857px);}
#mTechnology .main_title .tit {width:857px;}
#mTechnology .box {display:flex; align-items:end; flex-direction:column; width:100%;}
#mTechnology .box > div {display:flex; justify-content:space-between; align-items:start; width:857px; border-bottom:1px solid #c9cdd9; padding:32px 70px 24px 0; position:relative; transition:padding-bottom 0.4s}
#mTechnology .box > div:before {content:'\f107'; font-size:1.125em; color:#858898; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:24px; top:40px;}
#mTechnology .box > div dl {width:calc(100% - 313px); position:relative;}
#mTechnology .box > div dl dt {font-size:1.5em; color:#00031a; line-height:1.45em; font-weight:600;}
#mTechnology .box > div dl dd {width:100%; font-size:1.25em; color:#404355; line-height:1.5em; margin-top:16px; max-height:0; opacity:0; transform:translateY(10px); transition:max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease; position:absolute; left:0; top:100%;}
#mTechnology .box > div .img_box {width:213px; height:0; transition:height 0.4s; position:relative}
#mTechnology .box > div .img_box > div {width:100%; height:213px; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; transform:scale(0.94); transition:opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); position:absolute; left:0; top:0;}
#mTechnology .box > div.on {border-bottom-color:#00031a; padding-bottom:55px;}
#mTechnology .box > div.on:before {color:#00031a; transform:rotate(180deg)}
#mTechnology .box > div.on dl dd {max-height:100%; opacity:1; transform:translateY(0);}
#mTechnology .box > div.on .img_box {height:213px;}
#mTechnology .box > div.on .img_box > div {opacity:1; transform:scale(1)}

@media screen and (max-width:1220px){
    #mTechnology .main_title h2 {width:150px;}
    #mTechnology .main_title .tit {width:calc(100% - 150px)}
    #mTechnology .box > div {width:calc(100% - 150px)}
    #mTechnology .box > div dl {width:calc(100% - 263px)}
}

@media screen and (max-width:1024px){
    #mTechnology {padding:16% 0;}
    #mTechnology .main_title {margin-bottom:5%;}
    #mTechnology .main_title h2 {width:130px;}
    #mTechnology .main_title .tit {width:calc(100% - 130px)}
    #mTechnology .box > div {width:calc(100% - 130px); padding:25px 50px 20px 0;}
    #mTechnology .box > div:before {font-size:1em; right:10px; top:30px;}
    #mTechnology .box > div dl {width:calc(100% - 220px)}
    #mTechnology .box > div dl dt {font-size:1.3em;}
    #mTechnology .box > div dl dd {font-size:1.125em; margin-top:10px;}
    #mTechnology .box > div .img_box {width:170px;}
    #mTechnology .box > div .img_box > div {height:170px;}
    #mTechnology .box > div.on {padding-bottom:30px;}
    #mTechnology .box > div.on .img_box {height:170px;}
}

@media screen and (max-width:767px){
    #mTechnology .main_title {display:block; margin-bottom:8%;}
    #mTechnology .main_title h2 {width:100%;}
    #mTechnology .main_title .tit {width:100%;}
    #mTechnology .box > div {flex-direction:row-reverse; width:100%; padding:5% 0 !important;}
    #mTechnology .box > div:first-child {padding-top:0 !important;}
    #mTechnology .box > div:last-child {padding-bottom:0 !important; border-bottom:0;}
    #mTechnology .box > div:before {display:none;}
    #mTechnology .box > div dl {width:calc(100% - 80px); padding-left:15px;}
    #mTechnology .box > div dl dt {font-size:1.2em;}
    #mTechnology .box > div dl dd {font-size:1em; position:relative; max-height:100%; opacity:1; transform:translateY(0); margin-top:1%;}
    #mTechnology .box > div .img_box {width:90px; height:90px;}
    #mTechnology .box > div .img_box > div {height:100%; opacity:1; transform:scale(1)}
    #mTechnology .box > div.on {border-bottom-color:#c9cdd9}
    #mTechnology .box > div.on .img_box {height:90px;}
}


#mPerformance {width:100%; background:url(../images/mPerformanceBG.jpg) no-repeat center center; background-size:cover; position:relative; padding:200px 0;}
#mPerformance .main_title {position:relative}
#mPerformance .main_title .langview_btn1 {position:absolute; right:0; bottom:0;}
#mPerformance .box {display:flex; flex-wrap:wrap; gap:24px; margin-top:55px;}
#mPerformance .box > div {width:calc(25% - 18px); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.5); border-radius:20px; backdrop-filter:blur(80px); padding:55px 20px; text-align:center;}
#mPerformance .box > div .tit {display:flex; justify-content:center; align-items:start; gap:0 2px; color:#fff;}
#mPerformance .box > div .tit .num {font-size:6.25em; font-weight:600; line-height:1.1em;}
#mPerformance .box > div .tit .t1 {font-size:1.875em; font-weight:500; padding-top:16px;}
#mPerformance .box > div .tit .t2 {font-size:1.5em; font-weight:700; padding-top:16px;}
#mPerformance .box > div dl {margin-top:24px;}
#mPerformance .box > div dl dt {font-size:1.5em; color:#fff; line-height:1.45em; font-weight:600;}
#mPerformance .box > div dl dd {font-size:1.125em; color:rgba(255,255,255,0.7); line-height:1.55em; margin-top:8px;}
#mPerformance .box > div {opacity:0; transform:translateY(60px);}

@media screen and (max-width:1220px){
    #mPerformance .box > div .tit .num {font-size:5.2em;}
}

@media screen and (max-width:1024px){
    #mPerformance {padding:16% 0;}
    #mPerformance .box {gap:15px; margin-top:5.5%;}
    #mPerformance .box > div {width:calc(50% - 7.5px); border-radius:10px; padding:30px 15px;}
    #mPerformance .box > div .tit .num {font-size:4em;}
    #mPerformance .box > div .tit .t1 {font-size:1.5em; padding-top:10px;}
    #mPerformance .box > div .tit .t2 {font-size:1.3em; padding-top:10px;}
    #mPerformance .box > div dl {margin-top:15px;}
    #mPerformance .box > div dl dt {font-size:1.3em;}
    #mPerformance .box > div dl dd {font-size:1em; margin-top:4px;}
}

@media screen and (max-width:767px){
    #mPerformance .main_title .langview_btn1 {display:none;}
    #mPerformance .box {gap:10px;}
    #mPerformance .box > div {width:100%; padding:7% 10px;}
    #mPerformance .box > div .tit .num {font-size:3em;}
    #mPerformance .box > div .tit .t1 {font-size:1.3em; padding-top:8px;}
    #mPerformance .box > div .tit .t2 {font-size:1.2em; padding-top:8px;}
    #mPerformance .box > div dl {margin-top:10px;}
    #mPerformance .box > div dl dt {font-size:1.2em;}
}


#mClients {padding:160px 0; overflow:hidden;}
#mClients .box {margin-top:120px;}
#mClients .box > div {display:flex; flex-wrap:nowrap; margin-bottom:40px;}
#mClients .box > div:last-child {margin-bottom:0;}
#mClients .box > div > div {display:flex; flex-wrap:nowrap; flex:0 0 auto; align-items:center; animation:mClientsFlow 40s linear infinite;}
#mClients .box > div:nth-child(even) > div {animation-name:mClientsFlowReverse;}
#mClients .box > div > div p {display:flex; align-items:center; flex:0 0 auto; margin:0 40px;}
#mClients .box > div > div p img {display:block; width:auto; height:55px;}

@keyframes mClientsFlow {
    0% {transform:translateX(0);}
    100% {transform:translateX(-100%);}
}

@keyframes mClientsFlowReverse {
    0% {transform:translateX(-100%);}
    100% {transform:translateX(0);}
}

@media screen and (max-width:1024px){
    #mClients {padding:16% 0;}
    #mClients .box {margin-top:7%;}
    #mClients .box > div {margin-bottom:5%;}
    #mClients .box > div > div p {margin:0 30px;}
    #mClients .box > div > div p img {height:45px;}
}

@media screen and (max-width:767px){
    #mClients .box > div > div p {margin:0 20px;}
    #mClients .box > div > div p img {height:35px;}
}

#mTowards {width:100%; height:200vh; position:relative;}
#mTowards > div {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; height:100svh; position:sticky; left:0; top:0; overflow:hidden;}
#mTowards .main_title {position:relative; z-index:10;}
#mTowards .main_title h2 {opacity:0; transform:translateY(24px);}
#mTowards .main_title .tit span {display:inline-block; opacity:0; transform:translateY(24px);}
#mTowards .img_box {width:100%; height:100%; background:url(../images/mTowards_img1.png) no-repeat center center; background-size:cover; position:absolute; left:0; top:0; clip-path:inset(70% 10% 0% 10%);}
#mTowards .img_box .shadow {width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 150, 223, 0) 50%, rgba(0, 150, 223, 0.3) 100%); position:absolute; left:0; top:0; opacity:0;}
#mTowards .img_box .shadow:before {content:''; display:block; width:100%; height:100%; background:rgba(0, 3, 26, 0.5); position:absolute; left:0; top:0; z-index:1;}
#mTowards .img_box .shadow:after {content:''; display:block; width:100%; height:100%; background:url(../images/mTowards_img2.png) no-repeat center bottom; background-size:cover; position:absolute; left:0; top:0; z-index:2;}

@media screen and (max-width:768px){
    #mTowards {height:auto;}
    #mTowards > div {height:auto; position:relative;}
    #mTowards .main_title {padding:30% 0;}
    #mTowards .img_box {background-attachment:scroll;}
}


#mCases {padding:160px 0; overflow:hidden;}
#mCases .main_title {position:relative;}
#mCases .main_title .langview_btn1 {position:absolute; right:0; bottom:0;}
.mCases_slide {margin-top:55px;}
.mCases_slide .img_box {width:100%; height:317px; border-radius:20px; position:relative; overflow:hidden;}
.mCases_slide .img_box .img {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:transform 0.35s ease-in-out}
.mCases_slide .img_box p {display:inline-block; background:#0096df; border-radius:7px; font-size:1em; color:#fff; font-weight:600; padding:6px 12px; position:absolute; left:16px; top:16px; z-index:5;}
.mCases_slide .subject {font-size:1.5em; line-height:1.45em; font-weight:600; margin-top:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mCases_slide .cont {font-size:1.25em; color:#404355; line-height:1.5em; margin-top:8px; max-height:3em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mCases_slide .date {font-size:1em; color:#858898; line-height:1.5em; font-weight:600; margin-top:16px;}
.mCases_slide .swiper-slide:hover .img_box .img {transform:scale(1.1)}

@media screen and (max-width:1460px){
    .mCases_slide .img_box {height:20vw;}
}

@media screen and (max-width:1024px){
    #mCases {padding:16% 0;}
    .mCases_slide {margin-top:5%;}
    .mCases_slide .img_box {border-radius:10px;}
    .mCases_slide .img_box p {border-radius:4px; font-size:0.9375em; padding:5px 10px; left:10px; top:10px;}
    .mCases_slide .subject {font-size:1.3em; margin-top:15px;}
    .mCases_slide .cont {font-size:1.125em; margin-top:4px;}
    .mCases_slide .date {margin-top:10px;}
}

@media screen and (max-width:767px){
    #mCases .main_title .langview_btn1 {display:none;}
    .mCases_slide .img_box {height:55vw;}
    .mCases_slide .subject {font-size:1.2em;}
    .mCases_slide .cont {margin-top:2px;}
    .mCases_slide .date {margin-top:10px;}
}


#mCommunity {width:100%; background:#fff; border-radius:0 0 40px 40px; padding-bottom:200px; overflow:hidden; position:relative; z-index:5;}
#mCommunity > div {display:flex; justify-content:space-between; align-items:end;}
#mCommunity .contact {width:920px; background:url(../images/mContact_img1.jpg) no-repeat center center; background-size:cover; border-radius:20px; padding:80px;}
#mCommunity .contact .t1 {font-size:1.25em; color:#fff; line-height:1.5em; margin:16px 0 160px;}
#mCommunity .quick {width:400px; padding-bottom:40px;}
#mCommunity .quick a {display:block; width:100%; border-bottom:1px solid #c9cdd9; font-size:1.5em; line-height:1.45em; font-weight:600; position:relative; padding:15px 0; margin-bottom:17px;}
#mCommunity .quick a:last-child {margin-bottom:0;}
#mCommunity .quick a:after {content:'\e09f'; font-size:0.75em; color:#858898; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:23px; top:50%; transform:translateY(-50%)}
#mCommunity .quick a:hover:after {animation:mCommunityArrow 0.6s ease-in-out;}

@keyframes mCommunityArrow {
    0% {transform:translate(0, -50%); opacity:1;}
    45% {transform:translate(1em, calc(-50% - 1em)); opacity:0;}
    46% {transform:translate(-1em, calc(-50% + 1em)); opacity:0;}
    100% {transform:translate(0, -50%); opacity:1;}
}

@media screen and (max-width:1460px){
    #mCommunity .contact {width:calc(100% - 370px)}
    #mCommunity .quick {width:320px;}
}

@media screen and (max-width:1220px){
    #mCommunity .contact {padding:50px;}
    #mCommunity .contact .t1 {margin-bottom:100px;}
}

@media screen and (max-width:1024px){
    #mCommunity {border-radius:0 0 30px 30px; padding-bottom:18%;}
    #mCommunity .contact {width:calc(100% - 240px); border-radius:10px; padding:35px;}
    #mCommunity .contact .t1 {font-size:1.125em; margin:10px 0 80px;}
    #mCommunity .quick {width:200px; padding-bottom:20px;}
    #mCommunity .quick a {font-size:1.3em; padding:12px 0; margin-bottom:10px;}
    #mCommunity .quick a:after {right:5px;}
}

@media screen and (max-width:767px){
    #mCommunity > div {display:block;}
    #mCommunity .contact {width:100%; padding:6%;}
    #mCommunity .contact .t1 {font-size:1em; margin:5px 0 15%;}
    #mCommunity .quick {display:flex; justify-content:space-between; width:100%; padding-bottom:0; margin-top:5%;}
    #mCommunity .quick a {width:calc(33.33% - 6.66px); font-size:1.125em; padding:8px 0; margin-bottom:0;}
    #mCommunity .quick a:after {right:0;}
}