/* main */
.main_section {position: relative; width: 100%;}

/* main section1 */
.ms1 {position: relative; width: 100%; background: var(--connecteve-com-black);}
.ms1 [data-aos=fade-down] { transform: translate3d(0, -1.25rem, 0);}
.ms1 .banner {position: relative; width: 100%; }
.ms1 .banner .step {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; background: var(--connecteve-com-black);}
.ms1 .banner .step.step1 {position: relative; transition-delay: 0.8s; transition-duration: 0.5s;}
.ms1 .banner .step.step2 {transition-delay: 1.3s; transition-duration: 1s;}
.ms1 .banner .step.step3 {transition-delay: 3.1s; transition-duration: 2s;}
.ms1 .banner .step.step4 {transition-delay: 5.1s; transition-duration: 0.5s;}
.ms1 .banner .step.step5 {transition-delay: 5.6s; transition-duration: 0.5s;}
.ms1 .banner .step_img {width: 100%; height: 100%; object-fit: cover; }
.ms1 .txtbox { position: absolute;  left: 50%;  top: 46.5%;  transform: translate(-50%, -50%);  z-index: 10;  width: 90%;  max-width: 1420px;}
.ms1 .txtbox .sub {  transition-delay: 6.1s;  font: var(--24_title1_b);  font-weight: 700;   letter-spacing: -0.02em;  color: var(--neutral-white); margin-bottom: 0.625rem;}
.ms1 .txtbox .tit { transition-delay: 6.1s; font: var(--56_display1_b);  font-weight: 700;   letter-spacing: -0.03em;  color: var(--white); margin-bottom: 0.25rem;}
.ms1 .txtbox .desc{transition-delay: 6.1s; font: var(--56_display1_b);  font-weight: 700;   letter-spacing: -0.03em;  color: var(--white);}

/* main section2 */
.ms2 {margin-bottom: 11.25rem;}
.ms0 [data-aos=fade-up] { transform: translate3d(0, 1.25rem, 0);}
.ms2 .bg{position:absolute; left: 0; top: 0;width: 100%; height: 100%; }
.ms2 .bg > img { width: 100%; height: 100%; object-fit: cover;}
.ms2 .bg .mob_ver {display: none;}
.ms2 .txtbox{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 9.188rem 0;}
.ms2 .txtbox .tit{font: var(--40_display2_b); letter-spacing: -0.03em; color: var(--white); margin-bottom: 1.125rem;}
.ms2 .txtbox .desc { font: var(--20_body_r); letter-spacing: -0.01em;  color: var(--neutral-lightgray);  max-width: 49.875rem;  margin-bottom: 1.875rem;}
.ms2 .txtbox .sub {  font: var(--24_title1_b);  letter-spacing: -0.02em;  color: var(--neutral-lightgray);}

/* main section3 */
.ms3 {margin-bottom: 7.5rem;}
.ms3 > .inner {padding-bottom: 7.5rem;  border-bottom: 1px solid var(--neutral-pale);}
.ms3 .titbox{border-bottom: 1px solid var(--neutral-pale); padding-bottom: 5rem; margin-bottom: 7.5rem; }
.ms3 .titbox .title{font: var(--56_display1_b); letter-spacing: -0.03em; color: var(--neutral-white);}
.ms3 .contbox { display: flex; flex-direction: column; align-items: flex-end;  gap: 5rem; max-width: 1420px;  margin: 0 auto;  }
.ms3 .contbox > .contitem { width: 100%; display: flex; justify-content: space-between;}
.ms3 .contbox > .contitem .item_cont { width: 78%; max-width: 68.75rem; display: flex; align-items: flex-start; justify-content: space-between;}
.ms3 .contbox > .contitem .item_cont .title{font:var(--40_display2_b); letter-spacing: -0.03em; color: var(--primary-primary); width: 32%; max-width: 21.875rem;}
.ms3 .contbox > .contitem .item_cont .txtbox{width: 61%;  max-width: 41.875rem; display: flex; flex-direction: column; gap: 1.875rem;}
.ms3 .contbox > .contitem .item_cont .txtbox .tit{font:var(--40_display2_m); letter-spacing: -0.03em; color: var(--neutral-white);}
.ms3 .contbox > .contitem .item_cont .txtbox .desc{font: var(--20_heading2_r); letter-spacing: -0.012em; color: var(--neutral-pale);}
.ms3 .contbox > .contitem .item_icon { width: 11%; max-width: 9.375rem; display: flex;  align-items: center;  justify-content: center;}
.ms3 .contbox > .contline{width: 70%; height: 1px; background: var(--neutral-pale); }

/* main section4 */
.ms4 {margin-bottom: 18.75rem; overflow: hidden;}
.ms4 > .inner { padding-bottom: 7.5rem; border-bottom: 1px solid var(--neutral-pale);}
.ms4 .ms4_swiper { width: calc(100% + var(--margin-left) * 2); padding: 0.125rem var(--margin-left); margin: 0 calc(var(--margin-left) * -1);}
.ms4 .ms4_swiper .cardbox {width: 22.875rem;}
.ms4 .ms4_swiper .cardbox.active { width: 25.25rem;}
.ms4 .ms4_swiper .card { position: relative;  border: 1.15px solid var(--grayscale-50);  border-radius: 0.75rem;  padding: 2.875rem 2.125rem;  background: linear-gradient(137deg, #1c1c1c 0%, #050505 100%);display: flex; flex-direction: column;  gap: 1.25rem;}
.ms4 .ms4_swiper .card::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); pointer-events: none;}
.ms4 .ms4_swiper .card .item_titbox{border-bottom: 1px solid var(--neutral-middlegray);
padding-bottom: 1.875rem; min-height: 5.75rem; }
.ms4 .ms4_swiper .card .item_titbox .tit{font: var(--24_title1_m);letter-spacing: -0.02em; color: var(--neutral-white);}
.ms4 .ms4_swiper .card .item_titbox .desc{font: var(--20_heading2_r); letter-spacing: -0.01em; color: var(--neutral-white);}
.ms4 .ms4_swiper .card .item_contbox { display: flex; flex-direction: column;  gap: 1.25rem;}
.ms4 .ms4_swiper .card .item_contitem { display: flex; flex-direction: column;  gap: 0.125rem;}
.ms4 .ms4_swiper .card .item_contitem .tit { font: var(--20_heading2_m);  letter-spacing: -0.01em;  color: var(--grayscale-100); text-transform: capitalize;}
.ms4 .ms4_swiper .card .item_contitem .tit.ver2 {letter-spacing: -0.04em;}
.ms4 .ms4_swiper .card .item_contitem .descbox { display: flex;  flex-direction: column;  font: var(--18_headline1_r); line-height: 1.3;  letter-spacing: -0.01em; color: var(--neutral-middlegray);}
.ms4 .ms4_swiper .card .item_contitem .descbox .bold {font: var(--20_heading2_m);line-height: 1.3;}
.ms4 .ms4_swiper .card .item_contitem .descbox .bold2 {font: var(--20_heading2_m);line-height: 1.3;}
.ms4 .ms4_swiper .card .item_contitem.item_contitem1 .descbox {min-height: 2.6em;}
.ms4 .ms4_swiper .card .item_contitem.item_contitem2 .descbox {min-height: 3.9em;}
.ms4 .ms4_swiper .card .item_contitem.item_contitem3 .descbox {min-height: 1.3em;}
.ms4 .ms4_swiper .card .item_contitem.item_contitem4 .descbox {min-height: 1.3em;}
.ms4 .ms4_swiper .card .item_contitem.item_contitem5 .descbox {min-height: 2.6em;}
.ms4 .ms4_swiper .card .item_contitem .descbox .desc{padding-left: 1.25rem;}
.ms4 .ms4_swiper .card.active { background: rgba(255, 122, 0, 0.07);  border-color: var(--orange-900); gap: 1.875rem;}
.ms4 .ms4_swiper .card.active::after {display: none;}
.ms4 .ms4_swiper .card.active .item_titbox .tit{color: var(--primary-primary);}
.ms4 .ms4_swiper .card.active .item_contbox {gap: 1.875rem;}
.ms4 .ms4_swiper .card.active .item_contitem .tit{font-weight: 700;}
.ms4 .ms4_swiper .card.active .item_contitem .descbox .desc{font-weight: 700; color: var(--primary-primary); display: flex; align-items: flex-start; gap: 0.424rem; padding-left: 0;}
.ms4 .ms4_swiper .card.active .item_contitem .descbox .desc .check{background: url(../img/ic_check.png) no-repeat center/contain; width: 1.125rem; aspect-ratio: 1/1; margin-top: 0.2em;}
.ms4 .ms4_swiper .card.active .item_contitem .descbox .desc .txt {flex: 1;}
.ms4 .ms4_swiper .card.active .item_contitem .descbox .desc2 { padding-left: 1.554rem;   font: var(--18_headline1_r); line-height: 1.3; letter-spacing: 0.01em;  color: var(--primary-primary);}
.ms4 .ms4_swiper .scrollbar {  position: relative;  left: auto;  bottom: auto;  top: auto;  width: 100%;  height: 2px;  border-radius: 6.25rem;  background: var(--neutral-darkgray); margin-top: 1.875rem; display: none;}
.ms4 .ms4_swiper .scrollbar .swiper-scrollbar-drag { background: var(--neutral-white);   border-radius: 6.25rem;}
.ms4 .howwrap { position: absolute; left: 0; bottom: 7.5rem;}
.ms4 .howbox { position: relative}
.ms4 .howbox .tit{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--white); margin-bottom: 0.625rem;}  
.ms4 .howbox .sub{font: var(--20_heading2_r); letter-spacing: -0.01em; color: var(--orange-900); margin-bottom: 0.375rem;} 
.ms4 .howbox .stepbox{display: flex; flex-direction: column;} 
.ms4 .howbox .stepbox .steptxt {  font: var(--20_body_r);  letter-spacing: -0.01em;   color: var(--grayscale-50);}
.ms4 .howbox .stepbox .steptxt .bold{font-weight: 700;} 
.ms4 .howbox .stepbox .steptxt .txt.tablet_ver {display: none;}


/* about section1*/
.as1 {margin-top: 13.75rem; padding: 3.75rem 0;}
.as1 .common_contbox .txtbox .s_desc{letter-spacing: -0.05em;text-align: justify;}

.as1 .common_contbox .imgbox .img { position: absolute;  top: -17.5rem;  right: 0;  width: 100vw; max-width: unset; height: 100vh; min-height: 35.125rem; object-fit: cover; opacity: 1; transition-property : all}
.as1 .common_contbox .imgbox .img.aos-animate { top: 0; width: 100%; height: 35.125rem;}

/* about section2*/
.as2 .bg{width: 100%; height: 100%; display: flex;}
.as2 .bg > img {width: 100%; height: 100%; object-fit: cover;}

/* about section3*/
.as3 .common_titbox > .right .desc {letter-spacing: -0.05em;}
.as3 .as3_swiper { width: calc(100% + var(--margin-left) * 2); padding: 0.125rem var(--margin-left);  margin: 0 calc(var(--margin-left) * -1);}
.as3 .as3_swiper .cardbox { width: calc((100% - 40px * 2) / 3); min-width: 30rem;}
.as3 .as3_swiper .card { position: relative; background: #100a07; border-radius: 0.625rem; box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.34); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1/1.4230769; padding: 3.125rem;}
.as3 .as3_swiper .card .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.as3 .as3_swiper .card .bg > img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; transition: all 0.5s ease-in;}
.as3 .as3_swiper .card .bg.bg1 > img {transition: all 0.5s ease-in;}
.as3 .as3_swiper .card .bg.bg1 > img:nth-child(2) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg1 > img:nth-child(3) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg1 > img:nth-child(4) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg1 > img:nth-child(5) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg1 > img:nth-child(6) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg1.step2 > img:nth-child(2) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg1.step3 > img:nth-child(3) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg1.step4 > img:nth-child(4) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg1.step5 > img:nth-child(5) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg1.step6 > img:nth-child(6) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg2 > img {transition: all 1s ease-in;}
.as3 .as3_swiper .card .bg.bg2 > img:nth-child(2) {opacity: 0;}
.as3 .as3_swiper .card .bg.bg2.step2 > img:nth-child(2) {opacity: 1;}
.as3 .as3_swiper .card .bg.bg3::after { content: ""; position: absolute;   left: 45.96%; top: 44.46%; border-radius: 100%;  border: 1px solid rgba(254, 202, 123, 0.2);  filter: blur(0.125rem); width: 11.92%;  aspect-ratio: 1 / 0.161290;  z-index: 10; }
.as3 .as3_swiper .card .bg.bg3.step2::after {transform: scale(9.77); aspect-ratio: 1/0.420792; border-color: transparent;  transition: all 1s linear }
.as3 .as3_swiper .card .top {position: relative;}
.as3 .as3_swiper .card .top .tit{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--white);}
.as3 .as3_swiper .card .bottom{position: relative; display: flex; flex-direction: column;gap: 0.625rem;}
.as3 .as3_swiper .card .bottom .tit{font: var(--40_display2_r);letter-spacing: -0.03em;color: var(--white);}
.as3 .as3_swiper .card .bottom .tit .bold{font-weight: 700;}
.as3 .as3_swiper .card .bottom .desc{font: var(--20_heading2_r);letter-spacing: -0.01em;color: var(--white);}

/* about section4*/
.as4 .visualbox { position: relative; width: 100%; aspect-ratio: 1 / 0.4270833; background: #0f0f0f;}
.as4 .visualbox .line_box { position: absolute;  left: 0;  top: 0;   width: 100%;  height: 100%; z-index: 10;}
.as4 .visualbox .line_box .line {background: var(--grayscale-500);  position: absolute; }
.as4 .visualbox .line_box .line.horizen { width: 0%; height: 1px; left: 0;}
.as4 .visualbox .line_box .line.horizen1 { top: 25.12%;}
.as4 .visualbox .line_box .line.horizen2 { top: 37.93%;}
.as4 .visualbox .line_box .line.horizen3 { top: 56.22%;}
.as4 .visualbox .line_box .line.horizen4 { top: 66.46%;}
.as4 .visualbox .line_box .line.vertical{width: 1px; height: 0%; top: 0;}
.as4 .visualbox .line_box .line.vertical1 {left: 27.4%;}
.as4 .visualbox .line_box .line.vertical2 {left: 72.34%;}
.as4 .visualbox .logo_box { position: absolute; left: 26.09%; top: 21.83%;   width: 47.92%;}
.as4 .visualbox .logo_box::after {content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #0f0f0f; }
.as4 .visualbox .logo_box .logo { position: relative; width: 100%; display: flex;}
.as4 .visualbox .logo_box .logo2 { position: absolute;  left: 50%;top: 50%;  transform: translate(-50%, -50%);  opacity: 0;}
.as4 .visualbox.step1 .logo_box::after,
.as4 .visualbox.step1 .line_box .line, 
.as4 .visualbox.step1 .logo_box .logo { transition: all 1s linear;}
.as4 .visualbox.step1 .line_box .line.horizen {width: 100%;}
.as4 .visualbox.step1 .line_box .line.vertical {height: 100%;}
.as4 .visualbox.step2 .logo_box::after {width: 0%;}
.as4 .visualbox.step3 .line_box .line {opacity: 0;}
.as4 .visualbox.step3 .logo_box .logo {opacity: 0;}
.as4 .visualbox.step3 .logo_box .logo2 {opacity: 1;}
.as4 .visualbox.step4 .logo_box .logo2 {opacity: 0;}

/* about section5*/
.as5 .contbox { display: flex; gap: 6.25rem;}
.as5 .contbox .left, 
.as5 .contbox .right { width: 50%;}
.as5 .contbox .left {display: flex; flex-wrap: wrap; gap: 5.625rem;}
.as5 .contbox .left .item{width: calc((100% - 5.625rem)/2); aspect-ratio: 1/1; display: flex;}
.as5 .contbox .left .item .img{width: 100%;}
.as5 .contbox .right .item{border: 1px solid var(--grayscale-600); width: 100%; aspect-ratio: 1/1; display: flex;align-items: center; justify-content: center;}
.as5 .contbox .right .item .video { width: 95%; max-width: 45.313rem;}

/* about section6*/
.as6 .visualbox{position: relative; background: var(--white); width: 100%; aspect-ratio: 1/0.375; overflow: hidden;}
.as6 .visualbox::before, .as6 .visualbox::after {content: "";  position: absolute;  left: 0;  width: 100%;  height: 30.3%;  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #fff 89.43%);  z-index: 10;}
.as6 .visualbox::before { top: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #fff 89.43%);}
.as6 .visualbox::after { bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 89.43%);}
.as6 .visualbox .logobox{position: absolute; left: 0%; top: 0%; width: 100%; height: 100%;}
.as6 .visualbox .logobox .logo1{width: 21.02%; display: flex; position: absolute; left: 33.8%; top: 37.78%;}
.as6 .visualbox .logobox .logo2 { width: 54.43%; display: flex; flex-direction: column;  position: absolute;  left: 54.47%;  top: 41.94%;}
.as6 .visualbox .logobox .logo2 .item {height: 38.2%;display: flex;} 
.as6 .visualbox .logobox .logo2 .item { height: 14.32vw; display: flex;  margin-top: -2.34vw;}
.as6 .visualbox .logobox .logo2 .item.sy {height: 10.42vw;}
.as6 .visualbox .logobox .logo2 .item.sy:nth-child(1) {margin-top: 0; margin-bottom: 9.64vw;}
.as6 .visualbox .logobox .logo2 .item.sy:last-child { margin-top: 1.61vw;}
.as6 .visualbox .logobox .logo2 .item > img { max-width: unset;  height: 100%;}

.as6 .visualbox.step1 .logobox .logo2 { transition: all 3s ease-in-out 0.8s; top: -622.9%;}
.as6 .visualbox.step2 .logobox .logo2 { top: -634.7%; transition: all 0.8s ease-in;}
.as6 .visualbox.step2 .logobox .logo2 .item.sy:nth-child(1) {margin-bottom: 0; transition: all 0.8s ease-in;}
.as6 .visualbox.step2  .logobox .logo2 .item.sy:last-child {margin-top: 15.72vw; transition: all 0.8s ease-in;}
.as6 .visualbox.step5 .logobox {opacity: 0; transition: all 0.3s ease-out 0.8s;}
.as6 .visualbox.step6 .logobox {opacity: 1; transition: all 0.3s ease-out 0.8s;}

/* about section7*/
.as7 .common_titbox{margin-bottom: 6.625rem;}
.as7 .common_titbox > .right .desc {letter-spacing: -0.05em;}
.as7 .colorbox{display: flex;gap: 3.125rem;}
.as7 .colorbox .item{display: flex;flex-direction: column;justify-content: space-between;border-radius: 0.625rem;}
.as7 .colorbox .item .top{display: flex; flex-direction: column;}
.as7 .colorbox .item .top .sub{font: var(--24_title1_r);letter-spacing: -0.02em;color: var(--white);}
.as7 .colorbox .item .top .tit{font: var(--40_display2_b);letter-spacing: -0.03em;color: var(--white);}
.as7 .colorbox .item .bottom .desc{font: var(--20_body_r);letter-spacing: -0.01em;color: var(--white);}
.as7 .colorbox .item .bottom .desc .bold{font-weight: 700;}
.as7 .colorbox .left {width: 50%; align-self: stretch;}
.as7 .colorbox .left .item{width: 100%; height: 100%; background: var(--primary-primary); padding: 3.125rem;}
.as7 .colorbox .right{width: 50%; display: flex;flex-direction: column;gap: 3.125rem;}
.as7 .colorbox .right .item{gap: 3.125rem; padding: 1.875rem 3.125rem;}
.as7 .colorbox .right .item:nth-child(1){background: #0f0f0f;}
.as7 .colorbox .right .item:nth-child(2){background: #554638;}

/* about section8*/
.as8 {margin-bottom: 18.75rem;}
.as8 .contbox{display: flex;flex-wrap: wrap;}
.as8 .contbox .item{ position: relative; width: calc(100%/3); aspect-ratio: 1/1; display: flex;}
.as8 .contbox .item > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}



/* new Platform */
.ns_box1{margin-bottom: 6.25rem;}
.ns_box1 .contbox{display: flex;align-items: center; justify-content: space-between;}
.ns_box1 .contbox.reverse {flex-direction: row-reverse;}
.ns_box1 .contbox .txtbox{width: 43%; max-width: 43.75rem;}
.ns_box1 .contbox .txtbox .tit{font: var(--40_display2_b);letter-spacing: -0.03em;color: var(--white); margin-bottom: 3.125rem; min-height: 3.9em; display: flex; align-items: center;}
.ns_box1 .contbox .txtbox .sub{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--neutral-white); margin-bottom: 1.875rem;}
.ns_box1 .contbox .txtbox .desc{font: var(--20_body_r);letter-spacing: -0.06em;text-align: justify;color: var(--neutral-lightgray);}
.ns_box1 .contbox .imgbox { width: 50%; max-width: 50rem;  display: flex; align-items: center;  justify-content: center; }

/* new Platform section1*/
.ns1_1 .contbox .imgbox { max-width: 50.75rem;margin-right: 0.375rem; }


/* new Platform section2*/
.ns1_2 > .inner {border-top: 1px solid var(--neutral-pale); padding-top: 7.5rem;}
.ns1_2 .titbox {display: flex; flex-direction: column;gap: 1.25rem; margin-bottom: 5rem;text-align: center;}
.ns1_2 .titbox .tit{font: var(--40_display2_b);letter-spacing: -0.03em;
color: var(--white);}
.ns1_2 .titbox .desc{font: var(--24_title1_m); letter-spacing: -0.02em;
color: var(--primary-primary);}
.ns1_2 .contbox {position: relative; display: flex; flex-direction: column; gap: 1.875rem; max-width: 1200px; margin: 0 auto;}
.ns1_2 .contbox > .item{width: 100%;border: 1px solid var(--grayscale-400); border-radius: 10rem; padding-left: 18.75rem; height: 18.75rem; display: flex; align-items: center; justify-content: center;}
.ns1_2 .contbox > .item .circle{width: 18.75rem; aspect-ratio: 1/1; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--primary-primary); border-radius: 100%;}  
.ns1_2 .contbox > .item .circle .txt{font: var(--28_title1_b);letter-spacing: -0.02em;text-align: center;color: var(--neutral-white);display: flex;    flex-direction: column;}
.ns1_2 .contbox > .item .circle .txt .small {font: var(--18_headline1_m);}
.ns1_2 .contbox > .item .txtbox{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.063rem; padding-right: 1.875rem;}
.ns1_2 .contbox > .item .txtbox .line1{background: url(../img/ns1_2_line1.png) no-repeat center/100% 100%; width: 23%; max-width: 12.5rem; height: 0.125rem;}
.ns1_2 .contbox > .item .txtbox .line2{background: url(../img/ns1_2_line2.png) no-repeat center/100% 100%; width: 27%; max-width: 14.375rem; height: 0.125rem;}
.ns1_2 .contbox > .item .txtbox .tit{ flex: 1; max-width: 25.25rem; font: var(--20_body_r);letter-spacing: -0.01em;text-align: center;color: var(--neutral-white);}
.ns1_2 .contbox > .item .txtbox .tit .color{font-weight: 700;color: var(--primary-primary);}

/* new Platform section3*/
.ns1_3 {margin-bottom: 18.75rem;}
.ns1_3 .contbox{border-top: 1px solid var(--neutral-pale); padding-top: 7.5rem; display: flex; align-items: center; justify-content: space-between;}
.ns1_3 .contbox .txtbox { width: 37%;  max-width: 32.5rem;  display: flex;  flex-direction: column; gap: 1.25rem;}
.ns1_3 .contbox .txtbox .tit{font: var(--40_display2_b);letter-spacing: -0.03em;color: var(--white);}
.ns1_3 .contbox .txtbox .desc{font: var(--24_title1_m);line-height: 1.33;
letter-spacing: -0.05em;text-align: justify;color: var(--primary-primary); min-height: 5.32em;}
.ns1_3 .contbox .imgbox { display: flex; width: 55%; max-width: 56.25rem;}

/* new Platform-3D section1 */
.ns2_1{margin-bottom: 5rem;}
.ns2_1 .contbox .txtbox .desc {letter-spacing: -0.04em;}

/* new Platform-3D section2 */
.ns2_2 .contbox{display: flex; gap: 2.688rem; padding-bottom: 7.5rem; border-bottom: 1px solid var(--neutral-pale);}
.ns2_2 .contbox > .item{position: relative; width: calc((100% - 2.688rem*3)/4);  border: 1px solid var(--neutral-darkgray); border-radius: 1.875rem; display: flex; flex-direction: column;padding: 10.75rem 1.563rem 2.125rem;  transition: all 0.3s linear; cursor: pointer; opacity: 1;}
.ns2_2 .contbox > .item .side{position: absolute; right: 1.75rem; top: 1.75rem;  font: var(--13_label1_r);letter-spacing: 0.02em;  color: var(--neutral-darkgray); writing-mode: sideways-rl;  transition: all 0.3s linear; opacity: 0;}
.ns2_2 .contbox > .item .icon{position: relative; width: 4.375rem; aspect-ratio: 1/1; display: flex; margin-bottom: 1.25rem;}
.ns2_2 .contbox > .item .icon .img{transition: all 0.3s linear;}
.ns2_2 .contbox > .item .icon .img:nth-child(2){opacity: 0; position: absolute; left: 0; top: 0;}
.ns2_2 .contbox > .item .tit{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--neutral-darkgray); min-height: 2.66em; margin-bottom: 1rem; transition: all 0.3s linear;}
.ns2_2 .contbox > .item .desc{font: var(--20_body_r); letter-spacing: -0.02em;text-align: justify;color: var(--neutral-darkgray); transition: all 0.3s linear;}
.ns2_2 .contbox > .item:hover {background: var(--grayscale-800); border-color: var(--grayscale-800);}
.ns2_2 .contbox > .item:hover .side {opacity: 1;}
.ns2_2 .contbox > .item:hover .icon .img:nth-child(1){opacity: 0;}
.ns2_2 .contbox > .item:hover .icon .img:nth-child(2){opacity: 1;}
.ns2_2 .contbox > .item:hover .tit {color: var(--neutral-white);}
.ns2_2 .contbox > .item:hover .desc {color: var(--neutral-lightgray);}

/* new Platform-3D section3 */
.ns2_3 .contbox {padding-bottom: 7.5rem; border-bottom: 1px solid var(--neutral-pale);}
.ns2_3 .contbox .imgbox {width: 51%;  max-width: 51.375rem; }
.ns2_3 .contbox .txtbox .desc {letter-spacing: -0.01em;}

/* new Platform-3D section4 */
.ns2_4 .common_titbox2{margin-bottom: 0;}
.ns2_4 .pinbox {width: 100%; padding-top: 11.25rem; margin-top: -6.25rem;}
.ns2_4 .slidebox { width: 100%; display: flex;  align-items: center; justify-content: space-between;}
.ns2_4 .slidebox .ns2_4_picbox {  width: 36%; max-width: 34.25rem;  border: 3px solid #525252;  border-radius: 2rem; background: #131313;}
.ns2_4 .slidebox .ns2_4_pic {  width: 100%;  margin: 0;}
.ns2_4 .slidebox .ns2_4_pic .item{padding: 1.258rem 1.284rem 1.255rem 1.281rem; display: flex;}
.ns2_4 .slidebox .ns2_4_pic .item > img {width: 100%;}
.ns2_4 .slidebox .ns2_4_picbox .prev_btn, .ns2_4 .slidebox .ns2_4_picbox .next_btn { display: none; background: no-repeat center / contain;  width: 3rem; height: auto;  aspect-ratio: 1 / 1;}
.ns2_4 .slidebox .ns2_4_picbox .prev_btn{background-image: url(../img/swiper_prev_mobile.png);left: 0;}
.ns2_4 .slidebox .ns2_4_picbox .next_btn{background-image: url(../img/swiper_next_mobile.png);right: 0;}
.ns2_4 .slidebox .pagination{display: none;}
.ns2_4 .slidebox .ns2_4_step { position: relative;  width: 60%;   max-width: 59.813rem;  margin: 0; padding: 0.938rem;}
.ns2_4 .slidebox .ns2_4_step .item { position: relative;  height: 9.375rem;  padding-left: 2.375rem; }
.ns2_4 .slidebox .ns2_4_step .item.item5 {height: auto;}
.ns2_4 .slidebox .ns2_4_step .item::before { content: "";  position: absolute;  left: 0; top: 0; width: 1px; height: 100%; background: #434343;}
.ns2_4 .slidebox .ns2_4_step .item .dot { position: absolute;  top: 0.688rem; left: -0.25rem; width: 0.563rem; aspect-ratio: 1 / 1; background: var(--neutral-darkgray); border-radius: 100%; transition: all 0.3s linear;}
.ns2_4 .slidebox .ns2_4_step .item .line {  background: linear-gradient(to bottom, #434343, #FF7A00, #434343); position: absolute; left: 0;  top: calc(-9.375rem + 0.563rem);  width: 1px;  height: 18.75rem;  opacity: 0;  transition: all 0.3s linear;}
.ns2_4 .slidebox .ns2_4_step .item.item1::before { top: 0.688rem;    height: calc(100% - 0.688rem);}
.ns2_4 .slidebox .ns2_4_step .item.item5::before { top: auto; bottom: calc(100% - 0.844rem); height: 0.875rem;}
.ns2_4 .slidebox .ns2_4_step .item.item1 .line {  background: linear-gradient(to top, #434343, #FF7A00); top: 0.688rem; height: 9.375rem;}
.ns2_4 .slidebox .ns2_4_step .item.item5 .line {  background: linear-gradient(to bottom, #434343, #FF7A00); top: auto;  bottom: calc(100% - 0.844rem);  height: 9.375rem;}
.ns2_4 .slidebox .ns2_4_step .item .tit{font: vaR(--24_title1_b);letter-spacing: -0.02em;color: var(--neutral-darkgray); transition: all 0.3s linear;}
.ns2_4 .slidebox .ns2_4_step .item .desc{font: var(--20_heading2_r);letter-spacing: -0.01em;color: var(--neutral-darkgray); transition: all 0.3s linear;}
.ns2_4 .slidebox .ns2_4_step .pointer { content: ""; position: absolute;  left: 0;   width: 1.938rem; aspect-ratio: 1 / 1;  background: url(../img/ns2_4_pointer.png) no-repeat center / contain; border-radius: 100%;  z-index: 10;  transition: all 0.3s linear;}

.ns2_4 .slidebox .ns2_4_step .swiper-slide-thumb-active.item .dot {background: var(--primary-primary);}
.ns2_4 .slidebox .ns2_4_step .swiper-slide-thumb-active.item .line {opacity: 1;}
.ns2_4 .slidebox .ns2_4_step .swiper-slide-thumb-active.item .tit {color: var(--primary-primary);}
.ns2_4 .slidebox .ns2_4_step .swiper-slide-thumb-active.item .desc {color: var(--neutral-white);}
.ns2_4 .slidebox .ns2_4_step.step1 .pointer { top: 0.938rem;}
.ns2_4 .slidebox .ns2_4_step.step2 .pointer { top: calc(0.688rem + 9.375rem + 0.281rem);}
.ns2_4 .slidebox .ns2_4_step.step3 .pointer { top: calc(0.688rem + 9.375rem*2 + 0.281rem);}
.ns2_4 .slidebox .ns2_4_step.step4 .pointer { top: calc(0.688rem + 9.375rem*3 + 0.281rem);}
.ns2_4 .slidebox .ns2_4_step.step5 .pointer { top: calc(0.688rem + 9.375rem*4 + 0.281rem);}

/* new Platform-3D section5 */
.ns2_5{display: flex; margin-bottom: 18.75rem;}

/* new Platform-Plantar section1 */
.ns3_1 .contbox { align-items: flex-start;  border-bottom: 1px solid var(--neutral-pale); padding: 5rem 0 10rem;}
.ns3_1 .contbox .imgbox { width: 49%; max-width: 49.688rem;  padding-top: 4.125rem;}
.ns3_1 .contbox .txtbox .desc {letter-spacing: -0.05em;}

/* new Platform-Plantar section2 */
.ns3_2 .contbox { align-items: flex-end; padding: 5rem 0 7.75rem;}
.ns3_2 .contbox .txtbox .desc {min-height: 11rem;}
.ns3_2 .contbox .imgbox {padding-bottom: 5.5rem;}
.ns3_2 .contbox .imgbox > img {max-width: 30.5rem;}

/* new Platform-Plantar section3 */
.ns3_3 {display: flex;}

/* new Platform-Plantar section4 */
.ns3_4 {margin-bottom: 18.75rem;}
.ns3_4 .contbox { display: flex; flex-wrap: wrap; gap: 3.75rem;}
.ns3_4 .contbox .box{position: relative; padding: 3.125rem; height: 31.25rem;}
.ns3_4 .contbox .box1 { background: #212428; flex: 1; max-width: 65.75rem;}
.ns3_4 .contbox .box2 {background: #1f2c3a; width: calc((100% - 3.75rem) * 0.33417); max-width: 33rem;}
.ns3_4 .contbox .box3 {background: #3b2a1a; width: calc((100% - 3.75rem)/2);}
.ns3_4 .contbox .box4 {background: #1f1f1f; width: calc((100% - 3.75rem)/2);}
.ns3_4 .contbox .box .txtbox{display: flex; flex-direction: column; gap: 0.625rem;}
.ns3_4 .contbox .box1 .txtbox{max-width: 35.688rem;}
.ns3_4 .contbox .box2 .txtbox{max-width: 26.75rem;}
.ns3_4 .contbox .box3 .txtbox{max-width: 34.875rem;}
.ns3_4 .contbox .box4 .txtbox{max-width: 31.125rem;}
.ns3_4 .contbox .box .txtbox .tit{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--white);}
.ns3_4 .contbox .box .txtbox .desc{font: var(--20_heading2_r);letter-spacing: -0.01em;color: var(--neutral-lightgray);}
.ns3_4 .contbox .box .imgbox{display: flex;align-items: center;justify-content: center; position: absolute; right: 0;bottom: 0; width: 18.75rem; aspect-ratio: 1/1;}



/* tech section1 */
.ts1 {margin-top: 17.5rem;}
.ts1 .common_contbox{padding: 3.75rem 0 11.25rem; border-bottom: 1px solid var(--neutral-pale);}
.ts1 .common_contbox .imgbox {z-index: 10;}
.ts1 .common_contbox .imgbox .img {  height: 35.125rem; object-fit: cover;}
.ts1 .common_contbox .txtbox .s_desc {letter-spacing: 0.01em; text-align: unset;}

/* tech section2 */
.ts2 {margin-top: 0; margin-bottom: 0;}
.ts2 > .inner { border-bottom: 0;}

/* tech section3 */
.ts3 {margin-bottom: 0;}
.ts3 .visualbox { position: relative; width: 100%; aspect-ratio: 1/0.40625; background: var(--connecteve-com-black); overflow: hidden;}
.ts3 .visualbox .bgbox { position: absolute; left: 0;  top: 0;  width: 100%;  height: 100%;display: flex; gap: 2.08%; overflow: hidden; opacity: 0; transition: all 1s ease-out 0.8s; }
.ts3 .visualbox .bgbox .imgwrap { position: relative; width: 100%;  height: 100%;  }
.ts3 .visualbox .bgbox .imgline {background: url(../img/ts3_bgline.png) no-repeat center / contain;width: 12.5%;min-width: 12.5%; height: 334.873%; }
.ts3 .visualbox .bgbox .imgline:nth-child(1) {background-image: url(../img/ts3_bgline1.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(2) {background-image: url(../img/ts3_bgline22.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(3) {background-image: url(../img/ts3_bgline3.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(4) {background-image: url(../img/ts3_bgline4.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(5) {background-image: url(../img/ts3_bgline5.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(6) {background-image: url(../img/ts3_bgline6.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(7) {background-image: url(../img/ts3_bgline7.png);}
.ts3 .visualbox .bgbox .imgline:nth-child(odd) {animation: moveUp 7s linear infinite;}
.ts3 .visualbox .bgbox .imgline:nth-child(even) { align-self: flex-end; animation: moveDown 7s linear infinite;}
@keyframes moveUp { 0% { transform: translateY(0%);} 100% { transform: translateY(-49.62%);}}
@keyframes moveDown { 0% { transform: translateY(0%); } 100% { transform: translateY(49.62%);}}
.ts3 .visualbox .bgbox .shadow { backdrop-filter: blur(0.125rem);background: rgba(0, 0, 0, 0.7); position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; transform: translate(-50%,-50%);}
.ts3 .visualbox .txtbox { position: absolute;  left: 4.9%; top: 44.87%; display: flex;  align-items: center; gap: 3.24%;  width: 61.042%; }
.ts3 .visualbox .txtbox .txt {position: relative; display: flex; transition: all 1s ease-out;}
.ts3 .visualbox .txtbox .txt.txt1 { width: 21.675%;}
.ts3 .visualbox .txtbox .txt.txt2 { width: 14.165%; transform: translateX(-210%);}
.ts3 .visualbox .txtbox .txt.txt3 { width: 11.775%; transform: translateX(-444%);} 
.ts3 .visualbox .txtbox .txt.txt4 { width: 17.495%; transform: translateX(-412%);}
.ts3 .visualbox .txtbox .txt::before,
.ts3 .visualbox .txtbox .txt::after { content: ""; position: absolute;  right: 0;  top: 0;  width: 100%; height: 100%;  background: var(--connecteve-com-black);  transition: all 1s ease-out 0.8s;} 
.ts3 .visualbox .txtbox .txt.txt1::before,
.ts3 .visualbox .txtbox .txt.txt1::after {width: 87.25%;}
.ts3 .visualbox .txtbox .txt.txt2::before,
.ts3 .visualbox .txtbox .txt.txt2::after {width: 82.5%;}
.ts3 .visualbox .txtbox .txt.txt3::before,
.ts3 .visualbox .txtbox .txt.txt3::after {width: 74.5%;}
.ts3 .visualbox .txtbox .txt.txt4::before,
.ts3 .visualbox .txtbox .txt.txt4::after {width: 84%;}
.ts3 .visualbox .txtbox .plus { width: 5.12%;  opacity: 0;  transform: rotate(45deg);   transition: all 1s ease-out 0.8s;}
.ts3 .visualbox .combibox { position: absolute;  left: 70.78125%;  top: 41.54%;  width: 23.386%;  height: 21.63%; display: flex; flex-direction: column;  align-items: center;  justify-content: space-between; opacity: 0;}
.ts3 .visualbox .combibox .top { width: 100%; height: 66.39%; display: flex;  align-items: center;  gap: 3.787%;}
.ts3 .visualbox .combibox .top .counter { flex: 1; height: 100%; display: flex;  align-items: flex-end; overflow: hidden;} 
.ts3 .visualbox .combibox .top .counter .num { width: 19.035%;  padding-right: 2.5%;   padding-bottom: 5%;  align-self: flex-end; transform: translateY(calc(100% - 4.75vw));}
.ts3 .visualbox .combibox .top .counter .comma {  width: 5.544%; margin-left: -4%;   margin-right: 4%;} 
.ts3 .visualbox .combibox .top .plus { width: 17.82%; opacity: 0;  transition: all 1s ease-out 0.8s;}
.ts3 .visualbox .combibox .bottom { width: 65.35%; display: flex;  opacity: 0;  transition: all 1s ease-out 0.8s;}
.ts3 .visualbox.step1 .txtbox .txt.txt2, 
.ts3 .visualbox.step1 .txtbox .txt.txt3,
.ts3 .visualbox.step1 .txtbox .txt.txt4{ transform: translateX(0);}
.ts3 .visualbox.step2 .txtbox .txt::before {opacity: 0;}
.ts3 .visualbox.step2 .txtbox .txt::after {width: 0% !important;}
.ts3 .visualbox.step3 .txtbox .plus { opacity: 1; transform: rotate(0);}
.ts3 .visualbox.step4 .combibox {opacity: 1;}
.ts3 .visualbox.step5 .combibox .top .counter .num { transform: translateY(0);  transition: all 2s ease-out 0.2s;}
.ts3 .visualbox.step6 .combibox .top .plus,
.ts3 .visualbox.step6 .combibox .bottom {opacity: 1;}
.ts3 .visualbox.step7 .bgbox {opacity: 1;}
.ts3 .visualbox.step7 .txtbox { left: -62%; opacity: 0;transition: all 1s ease-out 0.8s;}
.ts3 .visualbox.step7 .combibox { left: 50%; transform: translateX(-50%);transition: all 1s ease-out 0.8s;}
.ts3 .visualbox.step8 .combibox {transform: translateX(-50%) scale(1.39825);}

/* tech section4 */
.ts4 .pinbox{width: 100%; padding: 7.5rem 0; display: flex; flex-direction: column;}
.ts4 .bgbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.ts4 .bgbox .bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; transition: all 0.5s linear;}
.ts4 .bgbox .bg1 {background: var(--connecteve-com-white);}
.ts4 .bgbox .bg2 {background: #bdbdbd;}
.ts4 .bgbox .bg3 {background: #8a8a8a;}
.ts4 .bgbox .bg4 {background: #454545;}
.ts4 .bgbox .bg5 {background: #181818;}
.ts4 .titbox { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10rem;}
.ts4 .titbox .tit { font: var(--40_display2_b);letter-spacing: -0.03em; transition: all 0.5s linear; }
.ts4 .titbox .tit .txt { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: all 0.5s linear; }
.ts4 .titbox .desc { position: relative; width: 48%; max-width: 48rem;  font: var(--20_body_r); letter-spacing: -0.02em; text-align: justify;height: 5.6em; transition: all 0.5s linear; }
.ts4 .titbox .desc .txt { position: absolute; left: 0;  top: 0;  width: 100%;   text-overflow: ellipsis; overflow: hidden;  /*display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 4; */ opacity: 0; transition: all 0.5s linear; }
.ts4 .contbox { display: flex; align-items: flex-start; justify-content: space-between;}
.ts4 .contbox .txtbox { width: 38%; max-width: 38rem; display: flex;  flex-direction: column;}
.ts4 .contbox .txtbox .tit { position: relative; font: var(--24_title1_b);  letter-spacing: -0.02em; height: 1.334em; overflow: hidden; margin-bottom: 0.25rem;}
.ts4 .contbox .txtbox .tit .txt { position: absolute; top: 100%;  left: 0;  width: 100%;  height: 100%; transition: all 0.5s linear;}
.ts4 .contbox .txtbox .sub { position: relative; font: var(--20_heading2_m);  letter-spacing: -0.01em;  height: 2.8em;  overflow: hidden; margin-bottom: 1rem;}
.ts4 .contbox .txtbox .sub .txt{position: absolute; top: 100%;  left: 0;  width: 100%;  height: 100%; text-overflow: ellipsis;  overflow: hidden;  display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2; transition: all 0.5s linear;}
.ts4 .contbox .txtbox .desc {  position: relative;  font: var(--20_body_r);  letter-spacing: -0.04em;  text-align: justify; height: 4.2em;  overflow: hidden;}
.ts4 .contbox .txtbox .desc .txt{position: absolute; top: 100%;  left: 0;  width: 100%;  height: 100%; text-overflow: ellipsis;  overflow: hidden;  display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  transition: all 0.5s linear;}
.ts4 .contbox .colorbox { width: 55%; max-width: 47.5rem; display: flex;  flex-wrap: wrap; gap: 2.625rem 1.25rem;}
.ts4 .contbox .colorbox > .item { position: relative; width: calc((100% - 1.25rem * 2) / 3);  aspect-ratio: 1 / 0.36666; overflow: hidden;}
.ts4 .contbox .colorbox > .item .imgbox { position: absolute;  left: 0;  top: 100%;  width: 100%;  height: 100%;  cursor: pointer;  transition: all 0.5s linear;}
.ts4 .contbox .colorbox > .item .imgbox .img{width: 100%; height: 100%; object-fit: cover;}
.ts4 .contbox .colorbox > .item .imgbox .hoverbox { position: absolute;  left: 0;   top: 0;  width: 100%; height: 100%;  font: var(--16_body1_normal_m);  letter-spacing: 0.01em;  text-align: center;  color: var(--neutral-white);  background: rgba(0, 0, 0, 0.5);    display: flex; justify-content: center;  align-items: center;  opacity: 0;  transition: all 0.5s linear;}
.ts4 .contbox .colorbox > .item .imgbox:hover .hoverbox{ opacity: 1;}
.ts4 .contbox .colorbox > .item .imgbox .hoverbox .bold{font-weight: 700;}
.ts4 .contbox .colorbox > .item .imgbox .hoverbox .lh1 { line-height: 1.3;  margin-bottom: -0.25em; display: block;}

.ts4.step1 .bgbox .bg1 {height: 100%; }
.ts4.step2 .bgbox .bg2 {height: 100%; }
.ts4.step3 .bgbox .bg3 {height: 100%; }
.ts4.step4 .bgbox .bg4 {height: 100%; }
.ts4.step5 .bgbox .bg5 {height: 100%; }

.ts4.step1 .titbox .txt {color: var(--neutral-black);}
.ts4.step3 .titbox .txt {color: var(--neutral-white);}

.ts4.step1 .titbox .txt:nth-child(1) { opacity: 1;}
.ts4.step1 .titbox .txt:nth-child(-n) { opacity: 0;}
.ts4.step2 .titbox .txt:nth-child(2) { opacity: 1;}
.ts4.step2 .titbox .txt:nth-child(-n+1) { opacity: 0;}
.ts4.step3 .titbox .txt:nth-child(3) { opacity: 1;}
.ts4.step3 .titbox .txt:nth-child(-n+2) { opacity: 0;}
.ts4.step4 .titbox .txt:nth-child(4) { opacity: 1;}
.ts4.step4 .titbox .txt:nth-child(-n+3) { opacity: 0;}
.ts4.step5 .titbox .txt:nth-child(5) { opacity: 1;}
.ts4.step5 .titbox .txt:nth-child(-n+4) { opacity: 0;}

.ts4.step1 .contbox .txtbox .tit {color: var(--neutral-black);}
.ts4.step1 .contbox .txtbox .sub {color: var(--neutral-black);}
.ts4.step1 .contbox .txtbox .desc {color: var(--neutral-darkgray);}
.ts4.step3 .contbox .txtbox .tit {color: var(--neutral-white);}
.ts4.step3 .contbox .txtbox .sub {color: var(--neutral-white);}
.ts4.step3 .contbox .txtbox .desc {color: var(--neutral-lightgray);}

.ts4.step1 .contbox .txtbox .txt:nth-child(1) { top: 0;}
.ts4.step1 .contbox .txtbox .txt:nth-child(-n) { top: -100%;}
.ts4.step2 .contbox .txtbox .txt:nth-child(2) { top: 0;}
.ts4.step2 .contbox .txtbox .txt:nth-child(-n+1) { top: -100%;}
.ts4.step3 .contbox .txtbox .txt:nth-child(3) { top: 0;}
.ts4.step3 .contbox .txtbox .txt:nth-child(-n+2) { top: -100%;}
.ts4.step4 .contbox .txtbox .txt:nth-child(4) { top: 0;}
.ts4.step4 .contbox .txtbox .txt:nth-child(-n+3) { top: -100%;}
.ts4.step5 .contbox .txtbox .txt:nth-child(5) { top: 0;}
.ts4.step5 .contbox .txtbox .txt:nth-child(-n+4) { top: -100%;}

.ts4.step1 .contbox .colorbox > .item .imgbox:nth-child(1) { top: 0;}
.ts4.step1 .contbox .colorbox > .item .imgbox:nth-child(-n) { top: -100%;}
.ts4.step2 .contbox .colorbox > .item .imgbox:nth-child(2) { top: 0;}
.ts4.step2 .contbox .colorbox > .item .imgbox:nth-child(-n+1) { top: -100%;}
.ts4.step3 .contbox .colorbox > .item .imgbox:nth-child(3) { top: 0;}
.ts4.step3 .contbox .colorbox > .item .imgbox:nth-child(-n+2) { top: -100%;}
.ts4.step4 .contbox .colorbox > .item .imgbox:nth-child(4) { top: 0;}
.ts4.step4 .contbox .colorbox > .item .imgbox:nth-child(-n+3) { top: -100%;}
.ts4.step5 .contbox .colorbox > .item .imgbox:nth-child(5) { top: 0;}
.ts4.step5 .contbox .colorbox > .item .imgbox:nth-child(-n+4) { top: -100%;}

.ts4.step4 .titbox { margin-bottom: 6.75rem;}
.ts4.step4 .contbox .colorbox { gap: 2.5rem;}
.ts4.step4 .contbox .colorbox > .item {  width: calc((100% - 2.5rem * 3) / 4);  aspect-ratio: 1 / 1;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(4) .hoverbox { font: var(--18_headline1_m); line-height: 1.2; letter-spacing: 0.01em;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(4) .hoverbox .bold {letter-spacing: -0.03em; margin-top: 0.4em; margin-bottom: 0.08em; display: inline-block;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(4) .hoverbox .bold:nth-child(1) {   margin-top: 0;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(5) .hoverbox { font: var(--18_headline1_m); line-height: 1.2; letter-spacing: 0.01em;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(5) .hoverbox .bold {letter-spacing: -0.03em;  margin-top: 0.4em; margin-bottom: 0.08em; display: inline-block;}
.ts4 .contbox .colorbox > .item .imgbox:nth-child(5) .hoverbox .bold:nth-child(1) {   margin-top: 0;}

/* tech section5 */
.ts5 .common_titbox > .right .desc{text-align: justify;color: var(--neutral-lightgray);}
.ts5 .contwrap {  display: flex; flex-direction: column;  gap: 2.5rem;  border-bottom: 1px solid var(--neutral-pale); padding-bottom: 7.5rem;}
.ts5 .contwrap .sel_cont{display: flex; align-items: center; justify-content: space-between;}
.ts5 .contwrap .sel_cont .left{max-width: 44.25rem;}
.ts5 .contwrap .sel_cont .left .title{font: var(--20_heading2_b);letter-spacing: -0.01em;color: var(--neutral-white); margin-bottom: 2.5rem;}
.ts5 .contwrap .sel_cont .left .ts5_thumbox {width: 100%;}
.ts5 .contwrap .sel_cont .left .ts5_thumbox .selbox{display: flex; flex-wrap: wrap; gap: 2.25rem; transform: none !important;}
.ts5 .contwrap .sel_cont .left .ts5_thumbox .selbox .box{background: #181818; width: calc((100% - 2.25rem*3)/4); transition: all 0.5s linear; cursor: pointer; display: flex;}
.ts5 .contwrap .sel_cont .left .ts5_thumbox .selbox .box > img{width: 100%; height: 100%; object-fit: cover;}
.ts5 .contwrap .sel_cont .left .ts5_thumbox .box.swiper-slide-thumb-active {background: var(--connecteve-com-white);}
.ts5 .contwrap .sel_cont .right{width: 50%; max-width: 48.625rem;}
.ts5 .contwrap .sel_cont .right .ts5_picbox{width: 100%; max-width: 40.125rem; display: flex; align-items: center; justify-content: center;}
.ts5 .contwrap .sel_cont .right .ts5_picbox .big_img{width: 100%; height: 100%; object-fit: cover;}
.ts5 .contwrap .sel_cont .right .ts5_picbox .pagination{display: none;}

/* tech section6 */
.ts6 .common_titbox{margin-bottom: 7.75rem;}
.ts6 .common_titbox > .right .desc{text-align: justify;letter-spacing: -0.02em;color: var(--neutral-lightgray);}
.ts6 .contbox { position: relative; display: flex; align-items: center;  justify-content: center;}
.ts6 .contbox .imgbox { position: relative;  width: 39%;  max-width: 39.375rem;  display: flex; flex-direction: column;}
.ts6 .contbox .imgbox .img { position: absolute; left: 50%; transform: translateX(-50%);  transition: all 1.5s linear 0.5s;}
.ts6 .contbox .imgbox .img0 { position: relative; left: auto; transform: none; opacity: 0;}
.ts6 .contbox .imgbox .img1 { top: 2%; left: 49.5%; width: 94.2%;}
.ts6 .contbox .imgbox .img2 { top: 28%; left: 48%; width: 91.151%;}
.ts6 .contbox .imgbox .img3 { top: 45%;}
.ts6 .contbox .txtbox {  position: absolute; left: 75.5%; width: 20.5rem;  font: var(--20_heading2_m); letter-spacing: -0.01em; color: var(--connecteve-com-white); z-index: 10; max-width: 28%;}
.ts6 .contbox .linebox { position: absolute; right: calc(100% + 2.813rem); opacity: 0; overflow: hidden; transition: all 1.5s linear 0.5s;}
.ts6 .contbox .linebox .dot::after{content: ""; width: 0.5rem; aspect-ratio: 1 / 1; border-radius: 100%; background: var(--neutral-white);}
.ts6 .contbox .linebox1 { width: 54%; max-width: 21rem; top: 0; right: -9%;}
.ts6 .contbox .linebox2 { width: 17%; max-width: 6.688rem; top: 38.5%; right: -9.4%;}
.ts6 .contbox .linebox3 { width: 20%; max-width: 7.624rem; top: 31.6%; left: -20%;}
.ts6 .contbox .txtbox1 { top: -6.88%;}
.ts6 .contbox .txtbox1 .linebox { top: 1.75rem; width: 18vw; max-width: 21rem;}
.ts6 .contbox .txtbox1 .linebox .line {width: 21rem;}
.ts6 .contbox .txtbox2 { bottom: 36.6%;}
.ts6 .contbox .txtbox2 .linebox { bottom: 1.75rem; width: 6vw; max-width: 6.688rem;}
.ts6 .contbox .txtbox2 .linebox .line {width: 18.625rem;}
.ts6 .contbox .txtbox3 {  text-align: right;  top: 25.53%; left: auto;  right: 79.5% ; width: 18.625rem; max-width: 24%;}
.ts6 .contbox .txtbox3 .linebox { top: 1.625rem; left: calc(100% + 2.813rem);  right: auto; width: 7vw; max-width: 7.624rem;}
.ts6 .contbox .txtbox3 .linebox .line {width: 7.624rem;}
.ts6 .contbox .imgbox .img1 { animation: img1Move 4s linear infinite;}
.ts6 .contbox .imgbox .img3 { animation: img3Move 4s linear infinite;}
.ts6 .contbox .linebox { animation: lineboxFadeIn 4s linear infinite;}
@keyframes img1Move {  0%,12.5% {top: 2%;}  50%,62.5% {top: 7%;}  100% {top: 2%;}}
@keyframes img3Move {  0%,12.5% {top: 45%;}  50%,62.5% {top: 41%;}  100% {top: 45%;}}
@keyframes lineboxFadeIn {  0%,12.5% {opacity: 0;}  50%,62.5% {opacity: 1;}  100% {opacity: 0;}}
.ts6 .contbox .mob_item {display: none;}


/* tech section7 */
.ts7 {background: var(--grayscale-50); padding-top: 7.5rem;}
.ts7 .ts7_swiper {width: 100%; padding: 10rem 0 7.5rem;}
.ts7 .ts7_swiper .itembox { align-items: center; min-height: 35rem;}
.ts7 .ts7_swiper .item { width: 26.25rem; height: 26.875rem; margin-right: -1.67%;  border-radius: 1.875rem; padding: 2.5rem; display: flex; flex-direction: column;     justify-content: space-between;  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08); background: var(--neutral-white);  transition: all 0.5s linear; z-index: 1;}
.ts7 .ts7_swiper .item .titbox { display: flex;  flex-direction: column; gap: 0.625rem; transition: all 0.5s linear;}
.ts7 .ts7_swiper .item .titbox .tit { font: var(--24_title1_b);  letter-spacing: -0.02em;   color: var(--neutral-lightgray);  transition: all 0.5s linear;}
.ts7 .ts7_swiper .item .titbox .desc {  font: var(--20_body_r);  letter-spacing: -0.05em;   text-align: justify;  color: var(--neutral-lightgray);  transition: all 0.5s linear;}
.ts7 .ts7_swiper .item .titbox .desc.ver2 {letter-spacing: -0.06em;}
.ts7 .ts7_swiper .item .titbox .desc.ver3 {letter-spacing: -0.02em;}
.ts7 .ts7_swiper .item .titbox .desc.ver4 {letter-spacing: -0.04em;}
.ts7 .ts7_swiper .item .iconbox { display: flex; align-items: center;  justify-content: center;  margin-left: auto; width: 8.75rem; transition: all 0.5s linear; opacity: 0;}
.ts7 .ts7_swiper .swiper-slide.swiper-slide-prev.item, .ts7 .ts7_swiper .swiper-slide.swiper-slide-next.item {  height: 30.875rem; z-index: 2;}
.ts7 .ts7_swiper .swiper-slide-active.item { width:27.5rem; height: 35rem;  background: var(--neutral-black); z-index: 3;}
.ts7 .ts7_swiper .swiper-slide-active.item .titbox .tit{color: var(--neutral-white);}
.ts7 .ts7_swiper .swiper-slide-active.item .titbox .desc{color: var(--neutral-white);}
.ts7 .ts7_swiper .swiper-slide-active.item .iconbox{opacity: 1;}

/* tech section8 */
.ts8 .contbox{display: flex; gap: 4.25rem; padding-bottom: 7.5rem; border-bottom:1px solid var(--neutral-pale);}
.ts8 .contbox .item{width: calc((100% - 4.25rem)/2); display: flex; flex-direction: column; gap: 2.5rem;}
.ts8 .contbox .item .imgbox{display: flex;}
.ts8 .contbox .item .desc{font: var(--20_body_r);letter-spacing: 0.01em;text-align: justify;color: var(--neutral-white);}

/* tech section9 */
.ts9 {margin-bottom: 5rem;}
.ts9 .common_titbox > .right .desc {color: var(--neutral-lightgray);}
.ts9 .banner {position: relative; background: url(../img/ts9_banner_pc.png) no-repeat center/cover; padding: 3.75rem 5rem; display: flex; flex-direction: column; gap: 0.625rem; opacity: 1;}
.ts9 .banner::after{content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: var(--grayscale-900); transition: all 1s ease 0.5s;}
.ts9 .banner.aos-animate::after{width: 0%;}
.ts9 .banner .item{display: flex; align-items: flex-start;gap: 1.25rem;}
.ts9 .banner .item .tit{font: var(--20_heading2_r);letter-spacing: -0.01em;color: var(--neutral-white); width: 16.875rem;}
.ts9 .banner .item .desc{flex: 1; font: var(--24_title1_m);letter-spacing: -0.02em;color: var(--neutral-white);}
.ts9 .banner .item .desc.descbox{color: var(--primary-primary); display: flex; flex-direction: column;}

/* tech section10 */
.ts10 {margin-bottom: 18.75rem; opacity: 1;}
.ts10 .bg { background: url(../img/ts10_bg.png) no-repeat center / cover;  width: 100%; aspect-ratio: 1 / 0.590625;  opacity: 0;}
.ts10 .contbox { position: absolute;  left: 49.8%; top: 9%;  transform: translate(-50%, 0%);  width: 90%; max-width: 1606px; height: 78%;}
.ts10 .contbox .box {  position: absolute; padding-left: 1.25rem;}
.ts10 .contbox .box .txtbox { max-width: 23.688rem; display: flex; flex-direction: column;  gap: 0.75rem; opacity: 0;}
.ts10 .contbox .box .txtbox .tit{font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--neutral-white);}
.ts10 .contbox .box .txtbox .descbox{display: flex; flex-direction: column; gap: 0.125rem;}
.ts10 .contbox .box .txtbox .descbox .desc{font: var(--20_heading2_r);letter-spacing: -0.01em;color: var(--neutral-white);}
.ts10 .contbox .box .txtbox .desc2{ font: var(--18_headline1_r);color: var(--neutral-lightgray); }
.ts10 .contbox .box .line1 { width: 0%;  height: 1px; background: var(--connecteve-com-white); position: absolute; }
.ts10 .contbox .box .line2 {position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--connecteve-com-white); opacity: 0;}
.ts10 .contbox .box.box1 {  left: 0; top: 0; width: 36%; max-width: 35.75rem;  height: 57%;  max-height: 31.125rem;}
.ts10 .contbox .box.box1 .txtbox{max-width: 29.375rem;}
.ts10 .contbox .box.box1 .line1 { right: 0; bottom: 0;}
.ts10 .contbox .box.box2 {  top: 0;  left: 37.86%;  width: 24%;  max-width: 23.188rem;  height: 45%;  max-height: 24.688rem;}
.ts10 .contbox .box.box2 .txtbox{max-width: 21.938rem;}
.ts10 .contbox .box.box2 .line1 { width: 1px; height: 0%; left: 0; bottom: 0;}
.ts10 .contbox .box.box3 { top: 0;  right: 0;  width: 25%;  max-width: 40.625rem;  height: 41%;  max-height: 22.438rem;}
.ts10 .contbox .box.box3 .line1 { max-width: 15.688rem; left: -62.5%; bottom: 0;}
.ts10 .contbox .box.box4 {  bottom: 0;  left: 0;  width: 33%;  max-width: 33rem;  height: 38%;  max-height: 20.75rem; display: flex; align-items: flex-end;}
.ts10 .contbox .box.box4 .line1{ top: 0; right: 0;}
.ts10 .contbox .box.box5 { bottom: 0;  left: 37.86%; width: 25%;  max-width: 24.938rem;  height: 39%; max-height: 21.25rem; display: flex; align-items: flex-end;}
.ts10 .contbox .box.box5 .line1 { width: 1px;height: 0%; left: 0; top: 0;}
.ts10 .contbox .box.box6 {  bottom: 0; right: 0;  width: 25%;  max-width: 24.938rem;  height: 46%; max-height: 25.375rem; display: flex; align-items: flex-end;}
.ts10 .contbox .box.box6 .line1 { max-width: 10.5rem; top: 0%; left: -42.5%;}

@media screen and (min-width: 1081px) {
	.ts10 .contbox .box.box1 .txtbox,
	.ts10 .contbox .box.box2 .txtbox,
	.ts10 .contbox .box.box3 .txtbox {transform: translate3d(0, -3.125rem, 0);}
	.ts10 .contbox .box.box4 .txtbox,
	.ts10 .contbox .box.box5 .txtbox,
	.ts10 .contbox .box.box6 .txtbox {transform: translate3d(0, 3.125rem, 0);}
	.ts10.aos-animate .bg {opacity: 1; transition: all 0.5s linear;}
	.ts10.aos-animate .contbox .box .line1 { transition: all 1s linear 0.5s;}
	.ts10.aos-animate .contbox .box.box1 .line1 { width: 100%;}
	.ts10.aos-animate .contbox .box.box2 .line1 { height: 100%;}
	.ts10.aos-animate .contbox .box.box3 .line1 { width: 63%;}
	.ts10.aos-animate .contbox .box.box4 .line1 { width: 100%;}
	.ts10.aos-animate .contbox .box.box5 .line1 { height: 100%;}
	.ts10.aos-animate .contbox .box.box6 .line1 { width: 43%;}
	.ts10.aos-animate .contbox .box .line2  {opacity: 1; transition-delay: 1.5s;}
	.ts10.aos-animate .contbox .box.box1 .txtbox,
	.ts10.aos-animate .contbox .box.box2 .txtbox,
	.ts10.aos-animate .contbox .box.box3 .txtbox,
	.ts10.aos-animate .contbox .box.box4 .txtbox,
	.ts10.aos-animate .contbox .box.box5 .txtbox,
	.ts10.aos-animate .contbox .box.box6 .txtbox {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 1.5s;}
}


/* use cases section1 */
.us1 {margin-top: 7.5rem;}
.us1 > .inner {padding-bottom: 7.5rem; border-bottom: 1px solid #f5f5f5;}
.us1 .common_titbox2{max-width: 100%;}
.us1 .common_titbox2 .desc{min-height: 4.75rem;}
.us1 .contbox {display: flex; align-items: center; justify-content: center;gap: 5rem; margin-bottom: 5rem;}
.us1 .contbox .circle{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.563rem;border: 1px solid #ff7a00; border-radius: 100%; width: 25rem; aspect-ratio: 1/1; padding: 0.625rem;}
.us1 .contbox .circle .tit{font: var(--24_title1_b);letter-spacing: -0.02em;text-align: center;color: #ff7a00;}
.us1 .contbox .circle .desc{font: var(--20_heading2_r);letter-spacing: -0.01em;text-align: center;color: #d9d9d9;}
.us1 .contbox .arrow{display: flex; align-items: center; justify-content: center; width: 13rem;}
.us1 .bottom_txt{font: var(--24_title1_m);letter-spacing: -0.05em;text-align: center;
color: #ff7a00;}

/* use cases section2 */
.us2 {margin-bottom: 18.75rem;}
.us2 > .inner {z-index: 5;}
.us2 .common_titbox2{max-width: 100%;}
.us2 > .tabs {z-index: 0;}
.us2 .tab_navbox { margin-bottom: 0}
.us2 .us2_tab_cont { width: 100%;}
.us2 .us2_bg { position: sticky;  top: 0;  width: 100%; padding-top: 73.6074%;  background: no-repeat center / cover;}
.us2 .us2_bg.fixed {position: fixed;}
.us2 .us2_bg.bg1 {background-image: url(../img/us2_cont_bg1.jpg);}
.us2 .us2_bg.bg2 {background-image: url(../img/us2_cont_bg2.jpg);}
.us2 .us2_bg.bg3 {background-image: url(../img/us2_cont_bg3.jpg);}
.us2 .us2_bg.bg4 {background-image: url(../img/us2_cont_bg4.jpg);}
.us2 .us2_contbox { position: relative; display: flex; align-items: flex-start;  justify-content: space-between;  width: 90%; max-width: 1640px; margin: 0 auto;     margin-top: -73.6074vw; padding: 7rem 0;}
.us2 .us2_contbox > .titbox { position: sticky;  top: 16.5rem; width: 37%;  max-width: 37.5rem;  margin-bottom: 0;}
.us2 .us2_contbox > .titbox .desc{letter-spacing: -0.06em;text-align: justify;color: var(--neutral-lightgray);}
.us2 .us2_contbox > .contbox { width: 55%; max-width: 55.875rem; padding-top: 3.75rem; display: flex; flex-direction: column; gap: 7.5rem;}
.us2 .us2_boxarea {display: flex; flex-direction: column; gap: 3.75rem; padding-bottom: 7.5rem; border-bottom: 1px solid #f5f5f5;}
.us2 .us2_boxwrap:last-child .us2_boxarea {padding-bottom: 0; border-bottom: 0;}
.us2 .us2_box_tit {font: var(--24_title1_b);letter-spacing: -0.02em;color: var(--neutral-white);}
.us2 .us2_box1 {position: relative; display: flex; flex-direction: column;}
.us2 .us2_box1 .sub{font: var(--20_heading2_b);letter-spacing: -0.01em;
color: var(--neutral-lightgray);}
.us2 .us2_box1 .tit{ margin-bottom: 0.625rem;}
.us2 .us2_box1 .desc{font: var(--20_body_r);letter-spacing: -0.01em; color: var(--neutral-lightgray);}
.us2 .us2_box1 .desc .bold {font-weight: 700;}
.us2 .us2_box2 {position: relative; display: flex; flex-direction: column; gap: 0.625rem;}
.us2 .us2_box2 .descbox{display: flex; flex-direction: column; gap: 0.25rem; font: var(--20_heading2_b);letter-spacing: -0.01em;color: var(--primary-primary); min-height: 4.2em;}
.us2 .us2_box2 .descbox .desc{position: relative; padding-left: 2.125rem;}
.us2 .us2_box2 .descbox .desc::before{content: ""; background: url(../img/ic_check2.png) no-repeat center/contain; width: 1.5rem; aspect-ratio: 1/1; position: absolute; left: 0; top: 0.125rem;}
.us2 .us2_box3 { display: flex; flex-direction: column;  gap: 0.625rem;}
.us2 .us2_box3 .desc{font: var(--20_body_r);letter-spacing: 0.01em;text-align: justify;color: var(--neutral-white); min-height: 8.4em;}
.us2 .us2_box4 { display: flex; flex-direction: column;  gap: 0.625rem;}
.us2 .us2_box4 .boxlayout{display: flex; align-items: center; gap: 1.25rem;}
.us2 .us2_box4 .boxlayout .imgbox{ max-width: 20rem; display: flex; align-items: center; gap: 1.25rem;}
.us2 .us2_box4 .boxlayout .imgbox .img{width: calc((100% - 1.25rem)/2);}
.us2 .us2_box4 .boxlayout .imgbox.ver2 {max-width: 30.625rem;}
.us2 .us2_box4 .boxlayout .imgbox.ver2 .img {width: calc((100% - 1.25rem*2)/3);}
.us2 .us2_box4 .boxlayout .txtbox{flex: 1; display: flex; flex-direction: column;font: var(--20_body_r);letter-spacing: -0.01em;color: var(--neutral-lightgray);}
.us2 .us2_box4 .boxlayout .txtbox .txt .bold{font-weight: 700;}
.us2 .us2_box4.ver2 .boxlayout .txtbox {gap: 1.25rem;}
.us2 .us2_box4.ver2 .boxlayout .txtbox .txtitem{display: flex; flex-direction: column;}
.us2 .us2_box4.ver2 .boxlayout .txtbox .txtitem .tit{font-weight: 700;}
.us2 .us2_box4.ver2 .boxlayout .txtbox .txtitem .desc .bold {font-weight: 700;}



/* order guide section1 */
.os1 {margin-top: 7.5rem;}
.os1 > .inner{padding-bottom: 7.5rem; border-bottom: 1px solid #f5f5f5;;}
.os1 .title{font: var(--40_display2_b); letter-spacing: -0.03em; color: var(--white); margin-bottom: 8.5rem; transform: translate3d(-3.125rem, 0, 0); opacity: 0;transition: all 0.5s linear}
.os1 .step_box { position: relative; display: flex; margin-bottom: 2.5rem;  width: 100%;  height: 1.25rem;}
.os1 .step_box .line { content: "";  position: absolute; left: 0;  bottom: 0.75rem;  background: url(../img/os1_line.png) no-repeat center / contain;  width: 100%;  height: 1px;  width: 0;}
.os1 .step_box .step { display: flex; flex-direction: column; align-items: center;  gap: 1.25rem;  position: absolute; left: 0; transform: translateX(-50%); bottom: 0; opacity: 0; transition: all 0.5s linear}
.os1 .step_box .step .tit {font: var(--28_title1_m); letter-spacing: -0.02em;  text-align: center;  color: var(--white);transform: translate3d(0, -3.125rem, 0); opacity: 0;}
.os1 .step_box .step .dot { position: relative; width: 1.5rem; aspect-ratio: 1 / 1;  background: var(--primary-primary);  border-radius: 100%;}
.os1 .step_box .step .dot::after {  content: ""; width: 1rem;  aspect-ratio: 1 / 1;  display: block;  background: var(--white);  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); border-radius: 50%;}
.os1 .step_box .arrow { position: absolute;  right: 100%; top: 35%;  transform: translateY(-50%);  width: 1.25rem;  opacity: 0; transition: all 0.5s linear}
.os1 .card_box { position: relative; padding: 0 3.75rem; display: flex; gap: 3.313rem; margin-bottom: 2.5rem; margin-top: 4.313rem;}
.os1 .card_box .item { position: relative; width: calc((100% - 3.313rem * 3) / 4); overflow: hidden;}
.os1 .card_box .item::before { content: ""; position: absolute; left: 50%;  top: 50%;  transform: translate(-50%, -50%); width: calc(100% - 2px); height: calc(100% - 2px);  background: url(../img/.os1_card_line.png) no-repeat center / 100% 100%;}
.os1 .card_box .item .shadow { content: ""; position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 100%; background: var(--neutral-black); transition: all 0.5s linear}
.os1 .card_box .item .txtbox { padding: 2.5rem 0.625rem 3.75rem; display: flex; flex-direction: column;  align-items: center; opacity: 0; transition: all 0.5s linear}
.os1 .card_box .item .txtbox .tit { width: 100%; font: var(--24_title1_b);  letter-spacing: -0.02em;  text-align: center;  background: linear-gradient(270deg, #ff7a00 0%, #fff 50%, #ff7a00 100%); background-clip: text;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; min-height: 1.667em;}
.os1 .card_box .item .txtbox .icon { max-width: 10.625rem; margin: -0.625rem 0;}
.os1 .card_box .item .txtbox .arrow { width: 3%;  max-width: 0.438rem;}
.os1 .card_box .item .txtbox .desc {  font: var(--18_headline1_m);  text-align: center;   color: #c4c4c4;  margin-top: 0.625rem;  min-height: 4rem;}
.os1 .card_box .item:nth-child(1) .txtbox .desc { max-width: 14.563rem;}
.os1 .card_box .item:nth-child(3) .txtbox .desc { max-width: 11.563rem;}
.os1 .card_box .item:nth-child(4) .txtbox .desc { max-width: 10.75rem;}
.os1 .card_box .item .imgbox {display: none;}
.os1 .bottm_box { display: flex; align-items: flex-start; gap: 1.875rem; transform: translate3d(-3.125rem, 0, 0); opacity: 0;transition: all 0.5s linear}
.os1 .bottm_box .tit {font: var(--28_title1_b);letter-spacing: -0.02em;color: #fff; width: 25.125rem;}
.os1 .bottm_box .desc {font: var(--24_title1_m);letter-spacing: -0.02em;color: #ff7a00; min-height: 3.1668em;}
.os1.aos-animate .title {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear}
.os1.aos-animate .step_box .arrow {right: 0; opacity: 1; transition: all 0.5s linear 0.5s;}
.os1.aos-animate .step_box .line { width: 100%; transition-delay: 1s;}
.os1.aos-animate .step_box .step {opacity: 1; transition: all 0.5s linear 1s;}
.os1.aos-animate .step_box .step1 { left: 14%;}
.os1.aos-animate .step_box .step2 { left: 38%;}
.os1.aos-animate .step_box .step3 { left: 62%;}
.os1.aos-animate .step_box .step4 { left: 86%;}
.os1.aos-animate .step_box .step1 .tit {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 1.5s}
.os1.aos-animate .card_box .item:nth-child(1) .txtbox {opacity: 1; transition: all 0.5s linear 2s}
.os1.aos-animate .card_box .item:nth-child(1) .shadow {height: 0%; transition: all 0.5s linear 2s}
.os1.aos-animate .step_box .step2 .tit {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 2.5s}
.os1.aos-animate .card_box .item:nth-child(2) .txtbox {opacity: 1; transition: all 0.5s linear 3s}
.os1.aos-animate .card_box .item:nth-child(2) .shadow {height: 0%; transition: all 0.5s linear 3s}
.os1.aos-animate .step_box .step3 .tit {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 3.5s}
.os1.aos-animate .card_box .item:nth-child(3) .txtbox {opacity: 1; transition: all 0.5s linear 4s}
.os1.aos-animate .card_box .item:nth-child(3) .shadow {height: 0%; transition: all 0.5s linear 4s}
.os1.aos-animate .step_box .step4 .tit {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 4.5s}
.os1.aos-animate .card_box .item:nth-child(4) .txtbox {opacity: 1; transition: all 0.5s linear 5s}
.os1.aos-animate .card_box .item:nth-child(4) .shadow {height: 0%; transition: all 0.5s linear 5s}
.os1.aos-animate .bottm_box {transform: translate3d(0, 0, 0); opacity: 1; transition: all 0.5s linear 5.5s}

/* order guide section2 */
.os2 {margin-bottom: 18.75rem;}
.os2 .titbox{display: flex; flex-direction: column; gap: 0.625rem;}
.os2 .titbox .tit{font: var(--40_display2_b);letter-spacing: -0.03em;color: #fff;}
.os2 .titbox .descbox{display: flex; flex-direction: column;}
.os2 .titbox .descbox .desc {  position: relative; font: var(--28_title1_m);  letter-spacing: -0.02em;  color: #ff7a00;}
.os2 .titbox .descbox .desc::before { content: "I"; display: inline-block;   margin-right: 0.5em;}
.os2 .titbox .descbox .desc .bold {font-weight: 700;}



/* clinic section1 */
.cs1 {margin-top: 7.5rem; margin-bottom: 18.75rem;}
.cs1 .imgwrap {display: flex; flex-direction: column; gap: 9.375rem;}
.cs1 .imgwrap .imgbox{max-width: 1024px; display: flex; margin: 0 auto;}


/* error section1 */
.es1 { margin-top: 20rem; display: flex; flex-direction: column;}
.es1 .txtbox { display: flex; flex-direction: column;align-items: center; text-align: center;}
.es1 .txtbox .sub {  font: var(--40_display2_r); letter-spacing: -0.03em; color: #fff; margin-bottom: 0.625rem;}
.es1 .txtbox .tit {  font: var(--56_display1_b);  letter-spacing: -0.03em; color: #fff;  margin-bottom: 3.125rem;}
.es1 .txtbox .desc { font: var(--20_heading2_r); letter-spacing: -0.01em;  color: #c4c4c4; margin-bottom: 3.75rem;}
.es1 .txtbox .link {  font: var(--15_body2_read_b);  letter-spacing: 0.01em;  color: #fff;  background: var(--primary-primary);  border-radius: 6.25rem;  padding: 0.375rem 2.313rem;}