/* PC */ @media screen and (max-width: 1680px) { .ts4 .titbox .desc, .ts4 .contbox .txtbox .sub, .ts4 .contbox .txtbox .desc {font-size: 1.125rem;} } @media screen and (max-width: 1560px) { html {font-size: 15.5px !important;} .common_banner .txtbox .title { letter-spacing: -0.06em;} .ns3_4 .contbox { gap: 2.5rem;} .ns3_4 .contbox .box { padding: 2.5rem;} .ns3_4 .contbox .box2 { width: calc((100% - 2.5rem) * 0.33417);} .ns3_4 .contbox .box3 { width: calc((100% - 2.5rem) / 2);} .ns3_4 .contbox .box4 {width: calc((100% - 2.5rem) / 2);} .ns3_4 .contbox .box .imgbox { width: 16rem;} } @media screen and (max-width: 1440px) { html {font-size: 15px!important;} .ts10 .contbox .box .txtbox { max-width: 100%;} .ts10 .contbox .box .txtbox .tit { font: var(--20_body_b);} .ts10 .contbox .box .txtbox .descbox .desc { font: var(--16_body1_normal_r);} .ts10 .contbox .box .txtbox .desc2 { font: var(--14_label1_normal_r);} } @media screen and (max-width: 1380px) { html {font-size: 14.5px !important;} .common_banner .txtbox .title .tablet { display: block !important; letter-spacing: -0.02em;} .us2 .us2_box4 .boxlayout { flex-direction: column; align-items: unset;} } @media screen and (max-width: 1240px) { .br1240 {display: block !important;} } @media screen and (max-width: 1200px) { html {font-size: 14px !important;} .ts10 .contbox .box .txtbox { gap: 0.5rem;} .ns2_2 .contbox > .item .desc { letter-spacing: 0.06em;} } /* Tablet */ @media screen and (max-width: 1080px) { html {font-size: 16px !important;} :root { /* Typography */ --56_display1_r: 400 5.6rem/1.286 'Pretendard', sans-serif; --56_display1_m: 500 5.6rem/1.286 'Pretendard', sans-serif; --56_display1_b: 700 5.6rem/1.286 'Pretendard', sans-serif; --40_display2_r: 400 4rem/1.3 'Pretendard', sans-serif; --40_display2_m: 500 4rem/1.3 'Pretendard', sans-serif; --40_display2_b: 700 4rem/1.3 'Pretendard', sans-serif; --36_title1_r: 400 3.6rem/1.334 'Pretendard', sans-serif; --36_title1_m: 500 3.6rem/1.334 'Pretendard', sans-serif; --36_title1_b: 700 3.6rem/1.334 'Pretendard', sans-serif; --28_title1_r: 400 2.8rem/1.358 'Pretendard', sans-serif; --28_title1_m: 500 2.8rem/1.358 'Pretendard', sans-serif; --28_title1_b: 700 2.8rem/1.358 'Pretendard', sans-serif; --24_title1_r: 400 2.4rem/1.334 'Pretendard', sans-serif; --24_title1_m: 500 2.4rem/1.334 'Pretendard', sans-serif; --24_title1_b: 700 2.4rem/1.334 'Pretendard', sans-serif; --22_heading1_r: 400 2.2rem/1.364 'Pretendard', sans-serif; --22_heading1_m: 500 2.2rem/1.364 'Pretendard', sans-serif; --22_heading1_b: 700 2.2rem/1.364 'Pretendard', sans-serif; --20_heading2_r: 400 2rem/1.4 'Pretendard', sans-serif; --20_heading2_m: 500 2rem/1.4 'Pretendard', sans-serif; --20_heading2_b: 700 2rem/1.4 'Pretendard', sans-serif; --20_body_r: 400 2rem/1.4 'Pretendard', sans-serif; --20_body_m: 500 2rem/1.4 'Pretendard', sans-serif; --20_body_b: 700 2rem/1.4 'Pretendard', sans-serif; --18_headline1_r: 400 1.8rem/1.445 'Pretendard', sans-serif; --18_headline1_m: 500 1.8rem/1.445 'Pretendard', sans-serif; --18_headline1_b: 700 1.8rem/1.445 'Pretendard', sans-serif --17_headline2_r: 400 1.7rem/1.412 'Pretendard', sans-serif; --17_headline2_m: 500 1.7rem/1.412 'Pretendard', sans-serif; --17_headline2_b: 700 1.7rem/1.412 'Pretendard', sans-serif; --16_body1_normal_r: 400 1.6rem/1.5 'Pretendard', sans-serif; --16_body1_normal_m: 500 1.6rem/1.5 'Pretendard', sans-serif; --16_body1_normal_b: 700 1.6rem/1.5 'Pretendard', sans-serif; --16_body1_read_r: 400 1.6rem/1.625 'Pretendard', sans-serif; --16_body1_read_m: 500 1.6rem/1.625 'Pretendard', sans-serif; --16_body1_read_b: 700 1.6rem/1.625 'Pretendard', sans-serif; --16_body1_readl_b: 700 1.6rem/1.2 'Pretendard', sans-serif; --15_body2_normal_r: 400 1.5rem/1.467 'Pretendard', sans-serif; --15_body2_normal_m: 500 1.5rem/1.467 'Pretendard', sans-serif; --15_body2_normal_b: 700 1.5rem/1.467 'Pretendard', sans-serif; --15_body2_read_r: 400 1.5rem/1.6 'Pretendard', sans-serif; --15_body2_read_m: 500 1.5rem/1.6 'Pretendard', sans-serif; --15_body2_read_b: 600 1.5rem/1.6 'Pretendard', sans-serif; --14_label1_normal_r: 400 1.4rem/1.429 'Pretendard', sans-serif; --14_label1_normal_m: 500 1.4rem/1.429 'Pretendard', sans-serif; --14_label1_normal_b: 700 1.4rem/1.429 'Pretendard', sans-serif; --14_label1_read_r: 400 1.4rem/1.571 'Pretendard', sans-serif; --14_label1_read_m: 500 1.4rem/1.571 'Pretendard', sans-serif; --14_label1_read_b: 700 1.4rem/1.571 'Pretendard', sans-serif; --13_label1_r: 400 1.3rem/1.385 'Pretendard', sans-serif; --13_label1_m: 500 1.3rem/1.385 'Pretendard', sans-serif; --13_label1_b: 700 1.3rem/1.385 'Pretendard', sans-serif; --13_read_m: 500 1.3rem/1.3 'Pretendard', sans-serif; --12_caption1_r: 400 1.2rem/1.334 'Pretendard', sans-serif; --12_caption1_m: 500 1.2rem/1.334 'Pretendard', sans-serif; --12_caption1_b: 700 1.2rem/1.334 'Pretendard', sans-serif; --11_caption2_r: 400 1.1rem/1.273 'Pretendard', sans-serif; --11_caption2_m: 500 1.1rem/1.273 'Pretendard', sans-serif; --11_caption2_b: 700 1.1rem/1.273 'Pretendard', sans-serif; /* 모바일추가 */ --22_maintitle_r: 400 2.2rem/1.18 'Pretendard', sans-serif; --22_maintitle_m: 500 2.2rem/1.18 'Pretendard', sans-serif; --22_maintitle_b: 700 2.2rem/1.18 'Pretendard', sans-serif; --18_title_r: 400 1.8rem/1.33 'Pretendard', sans-serif; --18_title_m: 500 1.8rem/1.33 'Pretendard', sans-serif; --18_title_b: 700 1.8rem/1.33 'Pretendard', sans-serif; --16_subtitle_r: 400 1.6rem/1.25 'Pretendard', sans-serif; --16_subtitle_m: 500 1.6rem/1.25 'Pretendard', sans-serif; --16_subtitle_b: 700 1.6rem/1.25 'Pretendard', sans-serif; --14_subtitle_r: 400 1.4rem/1.29 'Pretendard', sans-serif; --14_subtitle_m: 500 1.4rem/1.29 'Pretendard', sans-serif; --14_subtitle_b: 700 1.4rem/1.29 'Pretendard', sans-serif; --14_body_l: 300 1.4rem/1.43 'Pretendard', sans-serif; --14_body_r: 400 1.4rem/1.43'Pretendard', sans-serif; --14_body_m: 500 1.4rem/1.43 'Pretendard', sans-serif; --14_body_b: 700 1.4rem/1.43 'Pretendard', sans-serif; --13_body_r: 400 1.3rem/1.31 'Pretendard', sans-serif; --13_body_m: 500 1.3rem/1.31 'Pretendard', sans-serif; --13_body_b: 700 1.3rem/1.31 'Pretendard', sans-serif; --12_body_r: 400 1.2rem/1.33 'Pretendard', sans-serif; --12_body_m: 500 1.2rem/1.33 'Pretendard', sans-serif; --12_body_sb:600 1.2rem/1.33 'Pretendard', sans-serif; --12_body_b: 700 1.2rem/1.33 'Pretendard', sans-serif; --12_banner_r: 400 1.2rem/1.25 'Pretendard', sans-serif; --12_banner_m: 500 1.2rem/1.25 'Pretendard', sans-serif; --12_banner_sb: 600 1.2rem/1.25 'Pretendard', sans-serif; --12_banner_b: 700 1.2rem/1.25 'Pretendard', sans-serif; --11_footer_r: 400 1.1rem/1.18 'Pretendard', sans-serif; --11_footer_m: 500 1.1rem/1.18 'Pretendard', sans-serif; --11_footer_b: 700 1.1rem/1.18 'Pretendard', sans-serif; } .pc {display: none !important;} .tablet {display: block !important;} .inner { width: 100%; padding: 0 2rem;} /* header */ .header { height: 4.2rem; } .header .h_logo { max-width: 6.6rem;} .header .h_navbox {display: none;} .header .menu_open {display: block;} /* footer */ .footer { padding: 4rem 0 5rem;} .footer .f_inner { flex-direction: column; align-items: unset; gap: 1.4rem;} .footer .f_left { width: 100%; gap: 0;} .footer .f_left .f_logo { width: 7rem; margin-bottom: 1.7rem} .footer .f_left .f_info { gap: 1.4rem;} .footer .f_left .f_info .info_top { font: var(--11_footer_m); letter-spacing: -0.01em;} .footer .f_left .f_info .info_bottom { flex-wrap: wrap; gap: 0.2rem 1.5rem;} .footer .f_left .f_info .info_bottom > .item { width: calc((100% - 3.6rem) / 2); gap: 0.8rem; font: var(--11_footer_r); letter-spacing: -0.01em;} .footer .f_left .f_info .info_bottom > .item .tit {width: 2.8rem;} .footer .f_left .f_nav { margin-top: 3.6rem; gap: 1.2rem;} .footer .f_left .f_nav > li { font: var(--11_caption2_b); letter-spacing: 0.03em; color: var(--primary-primary);} .footer .f_right .f_copyright { font: var(--11_caption2_r); letter-spacing: 0;} .footer .f_right .f_copyright .logo {display: none;} .footer .f_right .f_copyright .txtarea { flex-direction: column; gap: 0; align-items: unset;} /* contact modal */ #contact_modal .contact_box { border-radius: 1rem;} #contact_modal .logobox {display: none;} #contact_modal .formbox { padding: 2rem;} #contact_modal .formbox .tit_box { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 4rem;} #contact_modal .formbox .tit_box .close_btn { display: block; background: url(../img/ic_close.png) no-repeat center / contain; width: 2.4rem; aspect-ratio: 1 / 1; margin-left: auto;} #contact_modal .formbox .tit_box .form_tit { font: var(--22_maintitle_b); letter-spacing: -0.01em;} #contact_modal .formbox .input_wrap { gap: 2rem; margin-bottom: 2.6rem;} #contact_modal .formbox .input_box { width: 100%; gap: 0.6rem;} #contact_modal .formbox .input_box .label { display: block; font: var(--13_body_m); letter-spacing: -0.01em;} #contact_modal .formbox .input_box .input, #contact_modal .formbox .input_box .textarea { font: var(--16_subtitle_r); letter-spacing: -0.01em; padding-bottom: 0.2rem; border-radius: 0;} #contact_modal .formbox .input_box .textarea { height: 7.6rem; border-radius: 0.5rem; padding: 0.8rem;} #contact_modal .formbox .button_box { font: var(--14_subtitle_b); letter-spacing: -0.01em;} #contact_modal .formbox .button_box .send_btn { gap: 0.2rem;} #contact_modal .formbox .button_box .send_btn .arrow { width: 1.6rem;} /* privacy_modal */ #privacy_modal .contact_box { border-radius: 1rem;} #privacy_modal .logobox {display: none;} #privacy_modal .txtbox { padding: 2rem;} #privacy_modal .txtbox .tit_box { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 4rem;} #privacy_modal .txtbox .tit_box .close_btn { display: block; background: url(../img/ic_close.png) no-repeat center / contain; width: 2.4rem; aspect-ratio: 1 / 1; margin-left: auto;} #privacy_modal .txtbox .tit_box .form_tit { font: var(--22_maintitle_b); letter-spacing: -0.01em;} #privacy_modal .txtbox .contbox { gap: 2rem; height: 36.308rem;} #privacy_modal .txtbox .contbox > .item {gap: 0.6rem;} #privacy_modal .txtbox .contbox > .item .tit {font: var(--14_subtitle_m);} #privacy_modal .txtbox .contbox > .item .desc { font: var(--13_body_r);} #privacy_modal .txtbox .contbox > .item .descwrap {gap: 0.6rem;} #privacy_modal .txtbox .contbox > .item .descbox { gap: 0.4rem; font: var(--12_body_r);} #privacy_modal .txtbox .contbox > .item .descbox .txt::before { top: 0.5em; width: 2px;} #privacy_modal .txtbox .btnbox { margin-top: 2.6rem;} #privacy_modal .txtbox .btnbox .close_btn{ font: var(--14_subtitle_b); letter-spacing: -0.01em; } /* app_privacy_modal #app_privacy_modal .contact_box { border-radius: 1rem;} #app_privacy_modal .logobox {display: none;} #app_privacy_modal .txtbox { padding: 2rem;} #app_privacy_modal .txtbox .tit_box { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 4rem;} #app_privacy_modal .txtbox .tit_box .close_btn { display: block; background: url(../img/ic_close.png) no-repeat center / contain; width: 2.4rem; aspect-ratio: 1 / 1; margin-left: auto;} #app_privacy_modal .txtbox .tit_box .form_tit { font: var(--22_maintitle_b); letter-spacing: -0.01em;} #app_privacy_modal .txtbox .contbox { gap: 2rem; height: 36.308rem;} #app_privacy_modal .txtbox .contbox > .item {gap: 0.6rem;} #app_privacy_modal .txtbox .contbox > .item .tit {font: var(--14_subtitle_m);} #app_privacy_modal .txtbox .contbox > .item .desc { font: var(--13_body_r);} #app_privacy_modal .txtbox .contbox > .item .descwrap {gap: 0.6rem;} #app_privacy_modal .txtbox .contbox > .item .descbox { gap: 0.4rem; font: var(--12_body_r);} #app_privacy_modal .txtbox .contbox > .item .descbox .txt::before { top: 0.5em; width: 2px;} #app_privacy_modal .txtbox .btnbox { margin-top: 2.6rem;} #app_privacy_modal .txtbox .btnbox .close_btn{ font: var(--14_subtitle_b); letter-spacing: -0.01em; } */ /* common */ .common_banner { padding: 1.95rem 2rem;} .common_banner > .inner { flex-direction: column; justify-content: center; gap: 2rem; text-align: center; padding: 0;} .common_banner .txtbox { max-width: 100%; width: 100%;} .common_banner .txtbox .title { font: var(--12_banner_sb); letter-spacing: -0.03em;} .common_banner .txtbox .title .mob_hide {display: none;} .common_banner .btnbox { gap: 2rem;} .common_banner .btnbox .btn { font: var(--12_banner_b); letter-spacing: -0.01em; width: 9rem; height: 2rem; padding: 0;} .common_titbox {flex-direction: column;} .common_titbox > .left .title { font: var(--18_title_b); letter-spacing: -0.01em;} .common_titbox > .right {width: 100%; max-width: unset;} .common_titbox > .right .tit { font: var(--14_subtitle_b); color: var(--primary-primary); letter-spacing: -0.01em; text-align: center;} .common_titbox > .right .desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify; color: var(--neutral-lightgray);} .common_titbox > .right .desc br {display: none;} .common_titbox.mob_ver2 { flex-direction: column; align-items: center;text-align: center; gap: 3rem; margin-bottom: 4rem; } .common_titbox.mob_ver2 > .left.tablet { display: flex !important; } .common_titbox.mob_ver2 > .left{ width: 100%; flex-direction: column; align-items: center;} .common_titbox.mob_ver2 > .left .badge { font: var(--14_subtitle_r); line-height: 100%; letter-spacing: -0.01em; text-align: center; color: var(--white); padding: 0.4rem 1.7rem; background: var(--primary-primary); border-radius: 10rem; margin-bottom: 2rem; } .common_titbox.mob_ver2 > .left .title { font: var(--18_title_b); letter-spacing: -0.01em; margin-bottom: 0.2rem;} .common_titbox.mob_ver2 > .left .desc {font: var(--14_subtitle_b); letter-spacing: -0.01em; color: var(--primary-primary); } .common_titbox2 { gap: 2rem; max-width: unset; margin-bottom: 6rem;} .common_titbox2 .tit { font: var(--18_title_b); letter-spacing: -0.01em;} .common_titbox2 .desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify; color: var(--neutral-lightgray);} .common_contbox.reverse .imgbox {margin: 0 -2rem;} .s_breadcrumb .txt { font: var(--11_caption2_r); letter-spacing: 0;} .s_title { font: var(--22_maintitle_b); letter-spacing: -0.01em; min-height: 3.54em;} .s_sub { font: var(--18_title_b); letter-spacing: -0.01em;} .s_desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify;} .common_contbox { flex-direction: column; gap: 4rem; justify-content: unset; align-items: unset;} .common_contbox .txtbox { width: 100%; max-width: 100%; margin-top: 0;} .common_contbox .txtbox .s_breadcrumb { margin-bottom: 1rem;} .common_contbox .txtbox .s_title {margin-bottom: 0;} .common_contbox .imgbox { aspect-ratio: 1 / 0.56111; margin: 0 -2rem; width: calc(100% + 4rem); max-width: unset;} .common_contbox .mob_txtbox {display: flex !important;flex-direction: column; gap: 2rem;} /* modal */ .modal .modal_box { max-width: 30rem; background: var(--white); padding: 2rem; border-radius: 1rem;} .modal .modal_box::before {display: none;} .modal .modal_box .modal_desc { font: var(--13_body_r); letter-spacing: -0.01em; color: var(--neutral-darkgray);} .modal .modal_box .modal_btnbox { gap: 2.4rem; margin-top: 2.6rem;} .modal .modal_box .modal_btnbox .modal_btn { border-radius: 0; padding: 0; font: var(--14_subtitle_b); color: var(--primary-primary); background: none;letter-spacing: -0.01em;} /* tab */ .tab_navbox { top: -2rem; margin-bottom: 6rem; backdrop-filter: blur(0.6rem); padding-top: 7.4rem; margin-top: -5.4rem;} .tab_navbox::before, .tab_navbox::after { content: ""; position: absolute; top: 0; width: 2.6rem; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 100%); z-index: 10; } .tab_navbox::before { left: 0;transform: rotate(-180deg);} .tab_navbox::after { right: 0;} .tab_navbox .tabs_swiper {padding: 0 2rem} .tab_navbox .tab_nav { width: auto; font: var(--16_body1_normal_r); letter-spacing: 0.01em; padding-bottom: 1rem;} .tab_navbox .tab_nav::after {width: calc(100% - 0.6rem); min-width: 8.4rem; height: 0.2rem;} /* sub common */ .sub_section { margin-bottom: 6rem;} .sub_top { height: 22rem;} .sub_top .s_txtbox { align-items: unset; text-align: left; width: 100%; padding: 10.2rem 2rem 0; } .sub_top .s_txtbox .s_title { margin-top: 1rem;} /* main */ .ms1 { overflow: hidden;} .ms1 .banner { aspect-ratio: 1.0277777; } .ms1 .txtbox { left: 0; bottom: 6.6rem; transform: none; width: 100%; padding: 0 2rem;} .ms1 .txtbox .sub { font: var(--13_label1_m); letter-spacing: -0.01em; margin-bottom: 2rem;} .ms1 .txtbox .tit {font: var(--22_maintitle_b); letter-spacing: -0.01em; margin-bottom: 0;} .ms1 .txtbox .desc {display: none;} .ms2 { margin-bottom: 6rem} .ms2 .bg .pc_ver {display: none;} .ms2 .bg .mob_ver {display: block;} .ms2 .txtbox { align-items: unset; text-align: left; padding: 6rem 0 11.3rem;} .ms2 .txtbox .tit { font: var(--18_title_b); margin-bottom: 2rem;} .ms2 .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify; max-width: unset; margin-bottom: 2rem;} .ms2 .txtbox .desc br {display: none;} .ms2 .txtbox .sub { font: var(--16_subtitle_b); letter-spacing: 0em;} .ms2 .txtbox .tit.aos-animate { transition-delay: 6.6s !important;} .ms2 .txtbox .desc.aos-animate { transition-delay: 7.1s !important;} .ms2 .txtbox .sub.aos-animate { transition-delay: 7.6s !important;} .ms3 { margin-bottom: 6rem;} .ms3 > .inner {border-bottom: 0; padding-bottom: 0;} .ms3 .titbox { padding-bottom: 4rem; margin-bottom: 4rem;} .ms3 .titbox .title { font: var(--18_title_b); letter-spacing: -0.01em;} .ms3 .contbox { gap: 4rem; padding-bottom: 8rem; border-bottom: 1px solid var(--neutral-lightgray);} .ms3 .contbox > .contitem { position: relative; flex-direction: column; justify-content: unset;} .ms3 .contbox > .contitem .item_cont { width: 100%; max-width: 100%; flex-direction: column; align-items: unset; justify-content: unset;} .ms3 .contbox > .contitem .item_cont .title { font: var(--16_subtitle_b); letter-spacing: -0.03em; width: 100%; max-width: unset; margin-bottom: 1rem;} .ms3 .contbox > .contitem .item_cont .txtbox {width: 100%; max-width: unset; gap: 2.2rem;} .ms3 .contbox > .contitem .item_cont .txtbox .tit { font: var(--16_subtitle_m); letter-spacing: -0.01em;} .ms3 .contbox > .contitem .item_cont .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify; color: var(--neutral-lightgray);} .ms3 .contbox > .contitem .item_icon { width: 6rem; max-width: unset; position: absolute; right: 0; top: 0;} .ms3 .contbox > .contline { width: 100%; background: var(--neutral-darkgray);} .ms4 { margin-bottom: 16rem} .ms4 > .inner { padding-bottom: 0; border-bottom: 0;} .ms4 .ms4_swiper .swiper-wrapper { align-items: center;} .ms4 .ms4_swiper .cardbox { width: 27.2rem; order: 2;} .ms4 .ms4_swiper .cardbox.active { width: 27.2rem; order: 1;} .ms4 .ms4_swiper .card { border-radius: 1.2rem; padding: 2.4rem 1.6rem; gap: 1.6rem; transition-delay: 1s !important; transition-duration: 0.5s !important;} .ms4 .ms4_swiper .card::after {opacity: 0;} .ms4 .ms4_swiper .card .item_titbox { width: 100%; padding-bottom: 1rem; min-height: unset; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; white-space: nowrap;} .ms4 .ms4_swiper .card .item_titbox .tit { font: var(--15_body2_read_b); letter-spacing: 0.01em; color: var(--neutral-middlegray);} .ms4 .ms4_swiper .card .item_titbox .desc { font: var(--11_caption2_b); letter-spacing: 0.02em; color: var(--grayscale-50);} .ms4 .ms4_swiper .card .item_contbox { gap: 1.4rem} .ms4 .ms4_swiper .card .item_contitem { gap: 0.4rem;} .ms4 .ms4_swiper .card .item_contitem .tit { font: var(--12_caption1_b);} .ms4 .ms4_swiper .card .item_contitem .descbox {font: var(--11_caption2_r);} .ms4 .ms4_swiper .card .item_contitem .descbox .bold {font: var(--13_body_b);letter-spacing: 0.02em;} .ms4 .ms4_swiper .card .item_contitem .descbox .bold2 {font: var(--12_body_sb);letter-spacing: -0.05em;} .ms4 .ms4_swiper .card.active {background: rgba(255, 122, 0, 0.07);} .ms4 .ms4_swiper .card.active .item_titbox {border-color: var(--primary-primary);} .ms4 .ms4_swiper .card.active .item_titbox .desc { font: var(--12_caption1_b);} .ms4 .ms4_swiper .card.active .item_contbox {gap: 1.4rem;} .ms4 .ms4_swiper .card.active .item_contitem .tit { letter-spacing: 0.03em; font-weight: 600;} .ms4 .ms4_swiper .card.active .item_contitem .descbox .desc { gap: 0.6rem; font-weight: 600;} .ms4 .ms4_swiper .card.active .item_contitem .descbox .desc .check { width: 1.6rem; margin-top: 0.1rem;} .ms4 .ms4_swiper .card.active .item_contitem .descbox .desc2 { font: var(--11_caption2_r); letter-spacing: 0; padding-left: 2.2rem;} .ms4 .ms4_swiper .card.active .item_contitem .descbox .desc .txt.ver2 { font: var(--12_body_sb); letter-spacing: -0.05em;} .ms4 .ms4_swiper .scrollbar { display: flex; margin: 4rem 0;} .ms4 .howwrap { position: relative; left: unset; bottom: auto;} .ms4 .howbox { transition-delay: 1.5s !important;} .ms4 .howbox .tit { font: var(--16_subtitle_b); letter-spacing: -0.03em; margin-bottom: 1rem;} .ms4 .howbox .sub { font: var(--13_body_b); letter-spacing: -0.05em; margin-bottom: 0.6rem;} .ms4 .howbox .stepbox .steptxt { font: var(--13_body_r); letter-spacing: -0.07em;} .ms4 .howbox .stepbox .steptxt .txt.pc_ver {display: none;} .ms4 .howbox .stepbox .steptxt .txt.tablet_ver {display: inline-block;} /* about */ .about_wrap {overflow: hidden;} .as1 { margin-top: 10rem; padding: 0; margin-bottom: 8rem;} .as1 .common_contbox .imgbox .img { top: -24.6rem; min-height: 20.2rem;} .as1 .common_contbox .imgbox .img.aos-animate { top: 0; height: 100%;} .as2 {margin-bottom: 14rem;} .as3 {margin-bottom: 16rem;} .as3 .as3_swiper .cardbox { width: 23.6rem; min-width: 23.6rem;} .as3 .as3_swiper .card { border-radius: 1rem; aspect-ratio: 1 / 1.42372; padding: 2rem 2rem 3rem;} .as3 .as3_swiper .card .top .tit { font: var(--16_subtitle_b); letter-spacing: -0.03em;} .as3 .as3_swiper .card .bottom { gap: 2rem;} .as3 .as3_swiper .card .bottom .tit { font: var(--18_headline1_r); letter-spacing: 0em;} .as3 .as3_swiper .card .bottom .tit .bold { line-height: 1.33; letter-spacing: -0.01em;} .as3 .as3_swiper .card .bottom .desc { font: var(--13_body_r); letter-spacing: -0.06em; text-align: justify; color: var(--neutral-lightgray);} .as3 .as3_swiper .card .bg.bg3::after { left: 46.96%; top: 35.46%; width: 6.92%;} .as3 .common_titbox { margin-bottom: 4rem} .as3 .mob_txtbox {margin-top: 2rem;} .as3 .mob_txtbox .desc{ font: var(--13_body_r); letter-spacing: -0.05em; text-align: justify; color: var(--neutral-lightgray);} .as4 .visualwrap {overflow: hidden; aspect-ratio: 1/0.5805555; display: flex; align-items: center; justify-content: center;} .as4 .visualbox { transform: scale(1.361);} .as5 {margin-bottom: 14rem;} .as5 .contbox { flex-direction: column; gap: 2rem;} .as5 .contbox .left, .as5 .contbox .right { width: 100%;} .as5 .contbox .left { gap: 2rem 2.4rem;} .as5 .contbox .left .item { width: calc((100% - 2.4rem) / 2);} .as6 {margin-bottom: 14rem;} .as6 .visualwrap {overflow: hidden; aspect-ratio: 1/0.466666; display: flex; align-items: center; justify-content: center;} .as6 .visualbox { transform: scale(1.2444); } .as7 {margin-bottom: 14rem; overflow: hidden;} .as7 .common_titbox { margin-bottom: 4rem;} .as7 .colorbox { flex-direction: column; gap: 1.4rem;} .as7 .colorbox .item { border-radius: 1rem;} .as7 .colorbox .item .top { gap: 0.2rem;} .as7 .colorbox .item .top .sub { font: var(--16_subtitle_r); letter-spacing: -0.01em;} .as7 .colorbox .item .top .tit { font: var(--18_title_b); letter-spacing: -0.01em;} .as7 .colorbox .item .bottom .desc { font: var(--13_body_r);letter-spacing: -0.05em;} .as7 .colorbox .left { width: 100%;} .as7 .colorbox .left .item { padding: 2.2rem 2rem; gap: 5.4rem;} .as7 .colorbox .right { width: 100%; gap: 1.4rem; flex-direction: row;} .as7 .colorbox .right .item { width: calc((100% - 1.4rem) / 2); gap: 3.2rem; padding: 2rem;} .as8 {margin-bottom: 16rem; overflow: hidden;} .as8 .contbox .item1 {order:1} .as8 .contbox .item5 {order:2} .as8 .contbox .item2 {order:3} .as8 .contbox .item6 {order:4} .as8 .contbox .item1, .as8 .contbox .item6 { width: 100%; aspect-ratio: 1 / 0.66666; overflow: hidden;} .as8 .contbox .item2, .as8 .contbox .item5 { width: 50%;} .as8 .contbox .item3, .as8 .contbox .item4 {display: none;} .as8 .contbox .item1 > img {transform: translate3d(0, -3.125rem, 0);} .as8 .contbox .item2 > img {transform: translate3d(3.125rem, 0, 0);} .as8 .contbox .item5 > img {transform: translate3d(-3.125rem, 0, 0);} .as8 .contbox .item6 > img {transform: translate3d(0, 3.125rem, 0);} .as8 .contbox .item1 > img.aos-animate {transform: translate3d(0, 0, 0);} .as8 .contbox .item2 > img.aos-animate {transform: translate3d(0, 0, 0);} .as8 .contbox .item5 > img.aos-animate {transform: translate3d(0, 0, 0);} .as8 .contbox .item6 > img.aos-animate {transform: translate3d(0, 0, 0);} /* new platform */ .sub_top.sub_newPlatform .s_img > .img { background-image: url(../img/subtop_newPlatform_mob.png);} .ns_box1 .contbox { flex-direction: column; align-items: unset; gap: 4rem;} .ns_box1 .contbox.reverse { flex-direction: column;} .ns_box1 .contbox .txtbox { width: 100%; max-width: 100%;} .ns_box1 .contbox .txtbox .tit { min-height: unset; font: var(--18_title_b); margin-bottom: 0.2rem; letter-spacing: -0.01em;} .ns_box1 .contbox .txtbox .sub { font: var(--14_subtitle_b); letter-spacing: -0.01em; text-align: center; color: var(--primary-primary); margin-bottom: 3rem;} .ns_box1 .contbox .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em;} .ns_box1 .contbox .imgbox { max-width: unset; width: calc(100% + 4rem); transform: translate3d(-3.125rem, 0, 0); transition-delay: 0s !important; margin: 0 -2rem;} .ns_box1 .contbox .imgbox.aos-animate {transform: translate3d(0, 0, 0);} .ns_box1 .contbox .mob_txtbox{display: flex !important; flex-direction: column; gap: 2rem;} .ns_box1 .contbox .mob_txtbox .sub{font: var(--14_subtitle_b); letter-spacing: -0.01em; color: var(--white);} .ns_box1 .contbox .mob_txtbox .desc{font: var(--13_body_r);letter-spacing: -0.06em;text-align: justify; color: var(--neutral-lightgray);} .ns1_1 {margin-bottom: 8rem;} .ns1_1 .contbox .txtbox .tit { text-align: center; justify-content: center;} .ns1_1 .contbox .imgbox { max-width: unset; width: 100%; margin: 0 auto; max-width: 30.6rem;} /* .ns1_1 .contbox .txtbox, .ns1_1 .contbox .imgbox {transition-delay: 1.8s !important; transition-duration: 0.5s !important;} */ .ns1_2 {margin-bottom: 8rem;} .ns1_2 > .inner {border-top: 0; padding-top: 0;} .ns1_2 .titbox { padding-top: 6rem; border-top: 1px solid var(--neutral-pale); gap: 0.2rem; margin-bottom: 6rem;} .ns1_2 .titbox .tit { font: var(--18_title_b); letter-spacing: -0.01em;} .ns1_2 .titbox .desc { font: var(--14_subtitle_b); letter-spacing: -0.01em;} .ns1_2 .contbox { gap: 2rem} .ns1_2 .contbox > .item { border: 0; border-radius: 0; padding-left: 0; height: unset; gap: 1.2rem;} .ns1_2 .contbox > .item .circle { width: 10.8rem; position: relative; left: auto; top: auto;} .ns1_2 .contbox > .item .circle .txt { font: var(--13_body_b); letter-spacing: -0.05em;} .ns1_2 .contbox > .item .circle .txt .small { display: none;} .ns1_2 .contbox > .item .txtbox { flex: 1; gap: 1.2rem; padding: 0;} .ns1_2 .contbox > .item .txtbox .line1 { width: 2.4rem; max-width: unset; height: 1px;} .ns1_2 .contbox > .item .txtbox .line2 {display: none;} .ns1_2 .contbox > .item .txtbox .tit { font: var(--13_body_r); letter-spacing: -0.05em; text-align: left; max-width: unset;} .ns1_2 .contbox > .item .txtbox .tit .small {font: var(--11_footer_r); color: var(--neutral-middlegray);letter-spacing: -0.01em;} .ns1_3 { margin-bottom: 16rem} .ns1_3 .contbox { flex-direction: column; gap: 5rem; width: calc(100% - 2rem * 2); padding: 6rem 0 0;} .ns1_3 .contbox .txtbox { width: 100%; max-width: 100%; gap: 0.2rem; text-align: center;} .ns1_3 .contbox .txtbox .tit { font: var(--18_title_b); letter-spacing: -0.01em;} .ns1_3 .contbox .txtbox .desc { font: var(--14_subtitle_b); text-align: center; letter-spacing: -0.01em;} .ns1_3 .contbox .imgbox { width: 100%; max-width: 100%; justify-content: center;} .ns2_1 .contbox { gap: 0;} .ns2_1 .contbox .txtbox .tit { text-align: left; justify-content: unset; min-height: 2.66em; align-items: unset; } .ns2_1 .contbox .imgbox { max-width: unset; width: calc(100% + 4rem); margin: 1.6rem -2rem 2rem; aspect-ratio: 1 / 0.56111; overflow: hidden; transform: translate3d(-3.125rem, 0, 0); transition-delay: 0s !important;} .ns2_1 .contbox .imgbox.aos-animate {transform: translate3d(0, 0, 0);} .ns2_2 .contbox { flex-direction: column; gap: 3rem; padding: 0 0 8rem; width: calc(100% - 4rem);} .ns2_2 .contbox > .item { width: 100%; border-radius: 1rem;padding: 2rem 2rem 2.2rem;} .ns2_2 .contbox > .item .side { right: 2rem; top: 2rem; font: var(--11_caption2_r); letter-spacing: 0; writing-mode: unset;} .ns2_2 .contbox > .item .icon { width: 5rem; margin-bottom: 0;} .ns2_2 .contbox > .item .tit { font: var(--16_body1_normal_b); letter-spacing: -0.03em; min-height: unset; margin-bottom: 0.6rem;} .ns2_2 .contbox > .item .desc { font: var(--13_body_r); letter-spacing: -0.05em;} .ns2_2 .contbox > .item:hover {background: transparent; border-color: var(--neutral-darkgray);} .ns2_2 .contbox > .item:hover .side {opacity: 0;} .ns2_2 .contbox > .item:hover .icon .img:nth-child(1){opacity: 1;} .ns2_2 .contbox > .item:hover .icon .img:nth-child(2){opacity: 0;} .ns2_2 .contbox > .item:hover .tit {color: var(--neutral-darkgray);} .ns2_2 .contbox > .item:hover .desc {color: var(--neutral-darkgray);} .ns2_2 .contbox > .item.aos-animate {background: var(--grayscale-800); border-color: var(--grayscale-800);} .ns2_2 .contbox > .item.aos-animate .side {opacity: 1;} .ns2_2 .contbox > .item.aos-animate .icon .img:nth-child(1){opacity: 0;} .ns2_2 .contbox > .item.aos-animate .icon .img:nth-child(2){opacity: 1;} .ns2_2 .contbox > .item.aos-animate .tit {color: var(--neutral-white);} .ns2_2 .contbox > .item.aos-animate .desc {color: var(--neutral-lightgray);} .ns2_3 .contbox { padding: 0 0 8rem; width: calc(100% - 4rem);} .ns2_3 .contbox .mob_txtbox .desc {letter-spacing: -0.05em;} .ns2_4 { margin-bottom: 14rem;} .ns2_4 .common_titbox2 { margin-bottom: 04rem; align-items: center;} .ns2_4 .common_titbox2 .badge { border: 1px solid var(--primary-primary); border-radius: 5rem; padding: 0.4rem 1.6rem; display: flex !important; align-items: center; gap: 0.4rem; font: var(--14_body_l); color: var(--primary-primary);} .ns2_4 .common_titbox2 .badge .check {width: 1.2rem;} .ns2_4 .common_titbox2 .desc { text-align: center; letter-spacing: 0.02em;} .ns2_4 .pinbox { padding-top: 0; margin-top: 0;} .ns2_4 .slidebox { flex-direction: column; gap: 2rem;} .ns2_4 .slidebox .ns2_4_picbox { position: relative; width: calc(100% - 6rem); border: 1.4px solid #525252; border-radius: 1.5rem; padding: 1rem;} .ns2_4 .slidebox .ns2_4_pic .item {padding: 0;} .ns2_4 .slidebox .ns2_4_picbox .prev_btn {left:-3rem} .ns2_4 .slidebox .ns2_4_picbox .next_btn {right:-3rem} .ns2_4 .slidebox .ns2_4_picbox .prev_btn, .ns2_4 .slidebox .ns2_4_picbox .next_btn { display: flex; top: 52%; margin: 0; transform: translateY(-50%);} .ns2_4 .slidebox .pagination { position: relative; left: auto; top: auto; bottom: auto; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0 0;} .ns2_4 .slidebox .pagination .swiper-pagination-bullet {position: relative; width: 0.6rem; height: 0.6rem; background: var(--neutral-darkgray); transition: all 0.4s linear; opacity: 1;} .ns2_4 .slidebox .pagination .swiper-pagination-bullet::before {content: ""; background: url(../img/ns2_4_pointer.png) no-repeat center/contain; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); width: 1.6rem; aspect-ratio: 1/1; opacity: 0; transition: all 0.4s linear;} .ns2_4 .slidebox .pagination .swiper-pagination-bullet-active { background: var(--primary-primary);} .ns2_4 .slidebox .pagination .swiper-pagination-bullet-active::before {opacity: 1;} .ns2_4 .slidebox .ns2_4_step { width: 100%; padding: 0;} .ns2_4 .slidebox .ns2_4_step .item { height: unset; padding-left: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;} .ns2_4 .slidebox .ns2_4_step .item::before {display: none;} .ns2_4 .slidebox .ns2_4_step .item .dot {display: none;} .ns2_4 .slidebox .ns2_4_step .item .tit { font: var(--14_subtitle_b); letter-spacing: -0.01em;} .ns2_4 .slidebox .ns2_4_step .item .desc { font: var(--13_body_r); letter-spacing: -0.05em;} .ns2_4 .slidebox .ns2_4_step .item .line {display: none;} .ns2_4 .slidebox .ns2_4_step .pointer {display: none;} .ns2_5 { margin-bottom: 16rem;} .ns2_5 img {width: 100%;} .ns3_1 .contbox { padding: 0 0 8rem; gap: 1.6rem; width: calc(100% - 4rem);} .ns3_1 .contbox .txtbox {transition-delay: 0s !important;} .ns3_1 .contbox .imgbox {transition-delay: 0.5s !important; transform: translate3d(0, 3.125rem, 0); margin: 0 -2rem; padding: 0;} .ns3_1 .contbox .mob_txtbox .desc {letter-spacing: -0.05em;} .ns3_2 { margin-bottom: 14rem;} .ns3_2 .contbox { padding: 0 2rem; gap: 6rem;} .ns3_2 .contbox .txtbox {display: flex; flex-direction: column; align-items: center; text-align: center;} .ns3_2 .contbox .txtbox .badge { border: 1px solid var(--primary-primary); border-radius: 5rem; padding: 0.4rem 1.6rem; display: flex !important; align-items: center; gap: 0.4rem; font: var(--14_body_l); color: var(--primary-primary); margin-bottom: 2rem;} .ns3_2 .contbox .txtbox .badge .check {width: 1.2rem;} .ns3_2 .contbox .txtbox .tit {margin-bottom: 0.6rem;} .ns3_2 .contbox .txtbox .sub {margin-bottom: 3rem;} .ns3_2 .contbox .txtbox .desc {letter-spacing: -0.04em;} .ns3_2 .contbox .imgbox { padding-bottom: 0; width: 100%; margin: 0 auto;} .ns3_2 .contbox .imgbox img { max-width: 29.2rem;} .ns3_3 {margin-bottom: 14rem;} .ns3_3 img {width: 100%;} .ns3_4 { margin-bottom: 16rem} .ns3_4 .common_titbox2 {margin-bottom: 4rem;} .ns3_4 .common_titbox2 .desc {letter-spacing: -0.06em;} .ns3_4 .contbox { flex-direction: column; gap: 0; width: calc(100% + 4rem); margin: 0 -2rem;} .ns3_4 .contbox .box { width: 100% !important; max-width: 100% !important; position: relative; padding: 2rem; height: unset; display: flex; flex-direction: column; gap: 2.4rem; transform: translate3d(0, -3.125rem, 0);} .ns3_4 .contbox .box.aos-animate {transform: translate3d(0, 0, 0);} .ns3_4 .contbox .box .txtbox { gap: 1rem; max-width: 100% !important;} .ns3_4 .contbox .box .txtbox .tit { font: var(--14_subtitle_b); letter-spacing: -0.01em;} .ns3_4 .contbox .box .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em;} .ns3_4 .contbox .box3 .txtbox .desc { letter-spacing: -0.06em;} .ns3_4 .contbox .box .imgbox { position: relative; right: auto; bottom: auto; margin-left: auto; width: 10rem;} /* tech */ .ts1 { margin-top: 10.2rem; overflow: hidden;} .ts1 .common_contbox { width: calc(100% - 4rem); padding: 0 0 8rem;} .ts1 .common_contbox .mob_txtbox {gap: 1rem;} .ts1 .common_contbox .mob_txtbox .s_title { align-items: flex-start; } .ts1 .common_contbox .imgbox .img { height: 100%; width: 100%;} .ts1 .common_contbox .txtbox .s_desc { letter-spacing: -0.05em; text-align: justify;} .ts2 {margin-bottom: 14rem;} .ts3 { margin-bottom: 14rem;} .mob_ts4 {position: relative;} .mob_ts4 .titbox{display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem;} .mob_ts4 .titbox .tit{font: var(--18_title_b); letter-spacing: -0.01em; text-align: center; color: var(--neutral-white);} .mob_ts4 .titbox .desc{font: var(--13_body_r);letter-spacing: -0.05em;text-align: justify; color: var(--neutral-lightgray);} .mob_ts4 .materbox { background: linear-gradient(180deg, #fff 0%, #000 100%); padding: 6rem 0 8rem; display: flex; flex-direction: column; gap: 7.9rem;} .mob_ts4 .materitem{display: flex; flex-direction: column; gap: 2rem;} .mob_ts4 .materitem .box_tit{font: var(--16_subtitle_b);letter-spacing: -0.03em;text-align: center; color: var(--neutral-black);} .mob_ts4 .materitem .marquee_wrap{overflow: hidden; display: flex; flex-direction: column; gap: 2rem;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group > .item{position: relative; display: flex; width: 15rem; height: 5rem;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group > .item .img {width: 100%; height: 100%; object-fit: cover;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group.ver2 > .item {width: 10rem; height: 10rem;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group.ver2 > .item .img { width: 90%; margin: 0 auto; object-fit: contain; } .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group > .item .hover {position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); font: var(--11_footer_r);letter-spacing: -0.01em; text-align: center; color:var(--neutral-white); background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; transition: all 0.3s linear; opacity: 0;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group > .item .hover.ver2 {line-height: 1.1; font-size: 1rem;} .mob_ts4 .materitem .marquee_wrap .marquee .marquee_group > .item:hover .hover {opacity: 1;} .mob_ts4 .materitem .txtbox {display: flex; flex-direction: column; gap: 2rem; padding: 0 2rem;} .mob_ts4 .materitem .txtbox .tit{font: var(--13_body_b);letter-spacing: -0.05em;text-align: center; color: var(--neutral-black);} .mob_ts4 .materitem .txtbox .desc{font: var(--13_body_r);letter-spacing: -0.05em;text-align: center; color: var(--neutral-darkgray);} .mob_ts4 .materitem:nth-child(3) .box_tit, .mob_ts4 .materitem:nth-child(3) .txtbox .tit, .mob_ts4 .materitem:nth-child(4) .box_tit, .mob_ts4 .materitem:nth-child(4) .txtbox .tit, .mob_ts4 .materitem:nth-child(5) .box_tit, .mob_ts4 .materitem:nth-child(5) .txtbox .tit{color: var(--neutral-white);} .mob_ts4 .materitem:nth-child(3) .txtbox .desc, .mob_ts4 .materitem:nth-child(4) .txtbox .desc, .mob_ts4 .materitem:nth-child(5) .txtbox .desc {color: var(--neutral-pale);} .ts5 .common_titbox {margin-bottom: 6rem;} .ts5 .common_titbox > .left {width: 100%;} .ts5 .common_titbox > .left .title {text-align: center;} .ts5 .contwrap { padding-bottom: 8rem; gap: 4rem;} .ts5 .contwrap .sel_cont { flex-direction: column; gap: 2rem;} .ts5 .contwrap .sel_cont .left .title { font: var(--13_body_b); text-align: center; margin-bottom: 0; letter-spacing: -0.05em;} .ts5 .contwrap .sel_cont .left .ts5_thumbox {display: none;} .ts5 .contwrap .sel_cont .right { width: calc(100% + 4rem); max-width: unset; margin: 0 -2rem;} .ts5 .contwrap .sel_cont .right .ts5_picbox { flex-direction: column; max-width: 100%; gap: 1rem; padding: 0.5rem;} .ts5 .contwrap .sel_cont .right .ts5_picbox .swiper-slide {display: flex; justify-content: center;} .ts5 .contwrap .sel_cont .right .ts5_picbox .swiper-slide img {max-width: 60%;} .ts5 .contwrap .sel_cont .right .ts5_picbox .pagination { position: relative; left: auto; top: auto; bottom: auto; width: 100%; display: flex; align-items: center; justify-content: center;} .ts5 .contwrap .sel_cont .right .ts5_picbox .pagination .swiper-pagination-bullet {position: relative; width: 0.6rem; height: 0.6rem; background: var(--neutral-darkgray); transition: all 0.4s linear; opacity: 1;} .ts5 .contwrap .sel_cont .right .ts5_picbox .pagination .swiper-pagination-bullet::before {content: ""; background: url(../img/ns2_4_pointer.png) no-repeat center/contain; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); width: 1.6rem; aspect-ratio: 1/1; opacity: 0; transition: all 0.4s linear;} .ts5 .contwrap .sel_cont .right .ts5_picbox .pagination .swiper-pagination-bullet-active { background: var(--primary-primary);} .ts5 .contwrap .sel_cont .right .ts5_picbox .pagination .swiper-pagination-bullet-active::before {opacity: 1;} .ts6 {margin-bottom: 10rem;} .ts6 .common_titbox > .left {width: 100%; text-align: center;} .ts6 .common_titbox > .right .desc {letter-spacing: -0.05em;} .ts6 .contbox {transform: translate3d(0,0,0);} .ts6 .contbox .imgbox {display: none;} .ts6 .contbox .linebox {display: none;} .ts6 .contbox .txtbox {display: none;} .ts6 .common_titbox > .left {width: 100%; text-align: center;} .ts6 .contbox { aspect-ratio: 1 / 1.055555; width: 100%; max-width: 27rem; margin: 0 auto;} .ts6 .contbox .mob_item { position: absolute;left: 50%; transform: translateX(-50%); width: 100%; transition: all 1.5s linear 0.5s; display: block;} .ts6 .contbox .mob_item .txt { position: absolute;left: 50%; transform: translateX(-50%);height: 2.93rem; width: auto; max-width: unset; transition: all 1.5s linear 0.5s; opacity: 0;} .ts6 .contbox .mob_item.item1 { max-width: 25.6rem; top: 24.7%; } .ts6 .contbox .mob_item.item1 .txt {top: -1.71rem;} .ts6 .contbox .mob_item.item2 {max-width: 24.8rem; top: 38.5%;} .ts6 .contbox .mob_item.item2 .txt {top: -1.971rem;} .ts6 .contbox .mob_item.item3 {max-width: 27.2rem; top: 45.8%;} .ts6 .contbox .mob_item.item3 .txt {top: 0.729rem;} .ts6 .contbox .mob_item.item1 { animation: img1MobMove 4s linear infinite;} .ts6 .contbox .mob_item.item3 { animation: img3MobMove 4s linear infinite;} .ts6 .contbox .mob_item .txt { animation: txtMobFadeIn 4s linear infinite;} @keyframes img1MobMove { 0%,12.5% {top: 24.7%;} 50%,62.5% {top: calc(24.7% - 5rem);} 100% {top: 24.7%;}} @keyframes img3MobMove { 0%,12.5% {top: 45.8%;} 50%,62.5% {top: calc(45.8% + 5rem);} 100% {top: 45.8%;}} @keyframes txtMobFadeIn { 0%,12.5% {opacity: 0;} 50%,62.5% {opacity: 1;} 100% {opacity: 0;}} .ts7 { margin-bottom: 8rem; padding: 6rem 0 4rem; } .ts7 .common_titbox {margin-bottom: 0;} .ts7 .common_titbox > .left {width: 100%; text-align: center;} .ts7 .common_titbox > .right .desc {text-align: center; } .ts7 .ts7_swiper .itembox { min-height: 19rem;} .ts7 .ts7_swiper { padding: 4rem 0;} .ts7 .ts7_swiper .item { margin-right: 1rem; width: 25rem; height: 15.8rem; padding: 2rem; border-radius: 1rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.08);} .ts7 .ts7_swiper .swiper-slide.swiper-slide-prev.item, .ts7 .ts7_swiper .swiper-slide.swiper-slide-next.item { width: 25rem; height: 15.8rem; } .ts7 .ts7_swiper .swiper-slide-active.item { width: 25rem; height: 19rem; } .ts7 .ts7_swiper .item .titbox { gap: 1rem;} .ts7 .ts7_swiper .item .titbox .tit { font: var(--16_subtitle_b); letter-spacing: -0.03em;} .ts7 .ts7_swiper .item .titbox .desc { font: var(--13_body_r);} .ts7 .ts7_swiper .item .titbox .desc.ver2 {letter-spacing: -0.05em;} .ts7 .ts7_swiper .item .titbox .desc.ver3 {letter-spacing: -0.05em;} .ts7 .ts7_swiper .item .titbox .desc.ver4 {letter-spacing: -0.05em;} .ts7 .ts7_swiper .item4 .titbox .desc {letter-spacing: -0.06em;} .ts7 .ts7_swiper .item .iconbox { width: 7rem;} .ts8 .common_titbox2 {margin-bottom: 4rem;} .ts8 .common_titbox2 .tit {width: 100%; text-align: center;} .ts8 .contbox { flex-direction: column; gap: 6rem; padding-bottom: 8rem;} .ts8 .contbox .item { width: 100%; gap: 2rem; transform: translate3d(0,-3.125rem,0);} .ts8 .contbox .item.aos-animate {transform: translate3d(0,0,0);} .ts8 .contbox .item .imgbox img {width: 100%;} .ts8 .contbox .item .desc { font: var(--13_body_r); letter-spacing: -0.05em; color: var(--neutral-lightgray);} .ts8 .contbox .item:nth-child(2) .desc { letter-spacing: -0.06em; } .ts9 {overflow: hidden; z-index: 10; margin-bottom: 0;} .ts9 .common_titbox > .left {width: 100%; text-align: center;} .ts9 .banner { background-image: url(../img/ts9_banner_mob.jpg); padding: 2rem; width: calc(100% + 4rem); margin: 0 -2rem; gap: 1rem;} .ts9 .banner .item { gap: 2rem;} .ts9 .banner .item .tit { width: 10.8rem; font: var(--13_body_r); letter-spacing: -0.05em; color: var(--neutral-middlegray);} .ts9 .banner .item .desc {font: var(--13_body_b); letter-spacing: -0.08em;text-align: justify;} .ts9 .banner .item .desc br {display: none} .ts10 {margin-bottom: 16rem;} .ts10 .bg {display: none;} .ts10 .pin-spacer {pointer-events: none;} .ts10 .contbox {left: auto; top: 0; transform: none;width: 100%; height: unset; aspect-ratio: 1 / 1.3416666; padding: 0; position: sticky; overflow: hidden; } .ts10 .contbox::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 226.95vw; aspect-ratio: 1 / 1.3416666; background: url(../img/ts10_bg_mob2.png) no-repeat center / contain; } .ts10 .contbox .box { position: absolute; padding: 0 2rem !important; width: 100% !important; max-width: unset !important; height: 16.7rem !important; max-height: unset !important; top: 64.25% !important; left: 50% !important; transform: translateX(-50%); right: auto !important; bottom: auto !important; align-items: unset !important;} .ts10 .contbox .box .txtbox { gap: 1.2rem; align-items: center; text-align: center;max-width: 32rem !important; opacity: 1; margin: 0 auto;} .ts10 .contbox .box .txtbox .tit { position: relative; font: var(--16_subtitle_b); letter-spacing: -0.03em; height: 2rem; } .ts10 .contbox .box .txtbox .tit::before {content: ""; position: absolute; bottom: 1rem; height: 1px; background-color: var(--white); } .ts10 .contbox .box .txtbox .tit::after { content: ""; position: absolute; background-color: var(--white); width: 1px; height: 0; } .ts10 .contbox .box .txtbox .descbox { gap: 0;} .ts10 .contbox .box .txtbox .descbox .desc { font: var(--13_body_m); letter-spacing: -0.01em; } .ts10 .contbox .box .txtbox .desc2 { font: var(--13_body_r); letter-spacing: -0.05em; color: var(--neutral-lightgray);} .ts10 .contbox .box .line1, .ts10 .contbox .box .line2 {display: none;} .ts10 .contbox .box1 .txtbox .tit::before { right: calc(100% + 1.05rem); width: 3.3rem; } .ts10 .contbox .box1 .txtbox .tit::after { right: calc(100% + 3.3rem + 1.05rem); top: -5.1rem; } .ts10 .contbox .box2 .txtbox .tit::before {right: calc(100% + 2rem); width: 1.1rem;} .ts10 .contbox .box2 .txtbox .tit::after {right: calc(100% + 1.1rem + 2rem); top: -8.2rem;} .ts10 .contbox .box3 .txtbox .tit::before {left: calc(100% + 0.9rem); width: 2.3rem;} .ts10 .contbox .box3 .txtbox .tit::after {left: calc(100% + 2.3rem + 0.9rem); top: -10.4rem;} .ts10 .contbox .box4 .txtbox .tit::before {right: calc(100% + 2.05rem); width: 1.1rem;} .ts10 .contbox .box4 .txtbox .tit::after {right: calc(100% + 1.1rem + 2.05rem); top: -2.7rem;} .ts10 .contbox .box5 .txtbox .tit::before {right: calc(100% + 1.2rem); width: 1.8rem; } .ts10 .contbox .box5 .txtbox .tit::after {right: calc(100% + 1.8rem + 1.2rem); top: -4.1rem;} .ts10 .contbox .box6 .txtbox .tit::before {left: calc(100% + 1.8rem); width: 2rem;} .ts10 .contbox .box6 .txtbox .tit::after {left: calc(100% + 2rem + 1.8rem); top: -5.5rem;} .ts10 .contbox .box6 .txtbox .desc2 {letter-spacing: -0.06em;} .ts10 .contbox .box {transition: all 0.5s linear;} .ts10 .contbox .box .txtbox .tit::before {opacity: 0; transition: all 0.5s linear;} .ts10 .contbox .box .txtbox .tit::after {transition: all 1s linear;} .ts10 .contbox .box .txtbox .tit .txt, .ts10 .contbox .box .txtbox .descbox, .ts10 .contbox .box .txtbox .desc2 {opacity: 0; transition: all 1s linear;} .ts10.step2 .contbox .box1 .txtbox .tit::after {height: 6.1rem;} .ts10.step3 .contbox .box1 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s;} .ts10.step3 .contbox .box1 .txtbox .tit .txt, .ts10.step3 .contbox .box1 .txtbox .descbox, .ts10.step3 .contbox .box1 .txtbox .desc2 {opacity: 1;} .ts10.step4 .contbox .box1 {opacity: 0; } .ts10.step5 .contbox .box2 .txtbox .tit::after {height: 9.2rem; } .ts10.step6 .contbox .box2 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s;} .ts10.step6 .contbox .box2 .txtbox .tit .txt, .ts10.step6 .contbox .box2 .txtbox .descbox, .ts10.step6 .contbox .box2 .txtbox .desc2 {opacity: 1;} .ts10.step7 .contbox .box2 {opacity: 0; } .ts10.step8 .contbox .box3 .txtbox .tit::after {height: 11.4rem; } .ts10.step9 .contbox .box3 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s; } .ts10.step9 .contbox .box3 .txtbox .tit .txt, .ts10.step9 .contbox .box3 .txtbox .descbox, .ts10.step9 .contbox .box3 .txtbox .desc2 {opacity: 1;} .ts10.step10 .contbox .box3 {opacity: 0; } .ts10.step11 .contbox .box4 .txtbox .tit::after {height: 3.7rem; } .ts10.step12 .contbox .box4 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s; } .ts10.step12 .contbox .box4 .txtbox .tit .txt, .ts10.step12 .contbox .box4 .txtbox .descbox, .ts10.step12 .contbox .box4 .txtbox .desc2 {opacity: 1;} .ts10.step13 .contbox .box4 {opacity: 0; } .ts10.step14 .contbox .box5 .txtbox .tit::after {height: 5.1rem; } .ts10.step15 .contbox .box5 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s; } .ts10.step15 .contbox .box5 .txtbox .tit .txt, .ts10.step15 .contbox .box5 .txtbox .descbox, .ts10.step15 .contbox .box5 .txtbox .desc2 {opacity: 1;} .ts10.step16 .contbox .box5 {opacity: 0; } .ts10.step17 .contbox .box6 .txtbox .tit::after {height: 6.5rem; } .ts10.step18 .contbox .box6 .txtbox .tit::before {opacity: 1; transition-duration: 0.2s; } .ts10.step18 .contbox .box6 .txtbox .tit .txt, .ts10.step18 .contbox .box6 .txtbox .descbox, .ts10.step18 .contbox .box6 .txtbox .desc2 {opacity: 1;} /* app privacy */ .app_privacy section { margin-top: 20%; } .app_privacy .container .inner .txtbox .tit { text-align: left; justify-content: flex-start; } .app_privacy .container .inner .txtbox .sub { color: var(--white); text-align: left; margin-bottom: 0.5%; } .app_privacy .container .inner .txtbox .desc { letter-spacing: -0.07rem !important; } .app_privacy section .inner .txtbox .dot div { width: 5px; height: 5px; margin-top: 1.2%; } .app_privacy section .inner .txtbox .dot .desc { padding-left: 6px; } /* use cases */ .sub_top.sub_useCases .s_img > .img { background-image: url(../img/subtop_useCases_mob.png);} .us1 { margin-top: 4rem;} .us1 > .inner { padding: 0 0 8rem; width: calc(100% - 4rem);} .us1 .common_titbox2 {transition-delay: 1.8s !important; transition-duration: 0.5s !important; margin-bottom: 4rem;} .us1 .common_titbox2 .desc{letter-spacing: -0.06em;} .us1 .contbox { flex-direction: column; gap: 1.2rem; margin-bottom: 1rem;} .us1 .contbox .circle { width: 100%; border-radius: 1rem; aspect-ratio: unset; justify-content: unset; gap: 0.8rem; padding: 2rem;} .us1 .contbox .circle .tit { text-align: left; font: var(--14_subtitle_b); letter-spacing: -0.01em; width: 100%;} .us1 .contbox .circle .desc { font: var(--13_body_r); letter-spacing: -0.05em; text-align: left; width: 100%;} .us1 .contbox .circle:nth-child(3) .desc {letter-spacing: -0.06em;} .us1 .contbox .arrow { width: 0.6rem;} .us1 .bottom_txt { font: var(--14_subtitle_b); text-align: left; letter-spacing: -0.01em;} .us1 .contbox .circle:nth-child(1) {transition-delay: 2.3s !important; } .us1 .contbox .arrow {transition-delay: 2.8s !important; } .us1 .contbox .circle:nth-child(3) {transition-delay: 3.3s !important; } .us1 .bottom_txt {transition-delay: 3.8s !important; } .us1 [data-aos^=fade][data-aos^=fade] {transform: translate3d(0, -3.125rem, 0);} .us1 [data-aos^=fade][data-aos^=fade].aos-animate {transform: translate3d(0, 0, 0);} .us2 { margin-bottom: 16rem;} .us2 .common_titbox2 { margin-bottom: 2rem;} .us2 .common_titbox2 .desc {letter-spacing: -0.06em;} .us2 .tab_navbox .tab_nav {margin-right: 0 !important; width: 25%;} .us2 .tab_navbox .tab_nav .link {min-height: 2rem;} .us2 .us2_bg { padding-top: 100vh; } .us2 .us2_contbox { margin-top: -100vh; padding: 4rem 0; flex-direction: column; gap: 2rem;} .us2 .us2_contbox > .titbox { position: relative; width: 100%; top: auto; max-width: 100%;} .us2 .us2_contbox > .contbox { width: 100%; max-width: 100%; padding: 0; gap: 3rem;} .us2 .us2_boxwrap {display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid #f5f5f5;} .us2 .us2_boxwrap:last-child {border-bottom: 0;} .us2 .us2_boxarea { gap: 0; padding-bottom: 0; border-bottom: 0; display: none;} .us2 .us2_boxarea > div + div {margin-top: 2rem;} .us2 .us2_box_tit { font: var(--16_subtitle_b); letter-spacing: -0.03em;} .us2 .us2_box1 .tit { margin-bottom: 1rem;} .us2 .us2_box1.tablet .tit {margin-bottom: 0;} .us2 .us2_box1 .sub { font: var(--13_body_b); letter-spacing: -0.05em;} .us2 .us2_box1 .desc { font: var(--13_body_r); letter-spacing: -0.06em;} .us2 .us2_box1 .desc .bold { font-weight: 400;} .us2 .us2_box1 .desc .bold:nth-child(1) { letter-spacing: -0.05em; font-weight: 700;} .us2 .us2_box2 { gap: 1rem;} .us2 .us2_box2 .descbox { font: var(--13_body_b); letter-spacing: -0.05em; gap: 0.4rem; min-height: unset;} .us2 .us2_box2 .descbox .desc { padding-left: 1.8rem;} .us2 .us2_box2 .descbox .desc::before { top: 0.2rem; width: 1.4rem;} .us2 .us2_box3 { gap: 1rem;} .us2 .us2_box3 .desc { font: var(--13_body_r); letter-spacing: -0.06em; min-height: unset;} .us2 .us2_box4 { gap: 1rem;} .us2 .us2_box4 .boxlayout { gap: 2rem; } .us2 .us2_box4 .boxlayout .imgbox { gap: 2rem; max-width: 22rem;} .us2 .us2_box4 .boxlayout .imgbox .img { width: calc((100% - 2rem) / 2);} .us2 .us2_box4 .boxlayout .txtbox { font: var(--13_body_r); letter-spacing: -0.05em;} .us2 .us2_box4.ver2 .boxlayout .txtbox { gap: 2rem;} .us2 .us2_box4.ver2 .boxlayout .txtbox .txtitem .desc .bold {display: block;} .us2 .us2_boxwrap .more_btn {font: var(--13_body_m); letter-spacing: -0.01em; color: var(--primary-primary); display: flex !important; align-items: center; gap: 0.4rem; padding: 0 0 1rem; transition: all 0.4s linear; } .us2 .us2_boxwrap .more_btn .arrow{background: url(../img/ic_arrow_down.png) no-repeat center/contain; width: 2.4rem; aspect-ratio: 1/1;} .us2 .us2_boxwrap .more_btn.open .arrow {transform: rotate(180deg);} /* order guide */ .sub_top.sub_orderGuide .s_img > .img { background-image: url(../img/subtop_orderGuide_mob.png);} .os1 { margin-top: 4rem} .os1 > .inner { width: calc(100% - 4rem); padding: 0 0 8rem;} .os1 .s_txtbox {display: flex !important; flex-direction: column; gap: 2rem; margin-bottom: 8rem;} .os1 .s_txtbox .s_sub { font: var(--14_subtitle_b); letter-spacing: -0.01em;} .os1 .s_txtbox .s_desc{font:var(--13_body_r);letter-spacing: -0.05em;text-align: justify;color: var(--neutral-lightgray);} .os1 .imgwrap { width: calc(100% + 4rem); margin: 0 -2rem; gap: 6rem;} .os1 .title { font: var(--18_title_b); margin-bottom: 2rem;} .os1 .step_box {display: none;} .os1 .card_box { padding: 0 0 0 2.4rem; gap: 4rem; margin-bottom: 4rem; margin-top: 0; flex-direction: column;} .os1 .card_box .mob_step_box {position: absolute; left: 0; top: 0; width: 1px; height: 100%;} .os1 .card_box .mob_step_box .line {position: absolute; left: 0.4rem; top: 0.4rem; background: url(../img/os1_line_mob.png) no-repeat top center / contain; width: 0.6rem; height: 0%;} .os1 .card_box .mob_step_box .step { position: absolute; left: 0.3425rem; top: 0; opacity: 0;} .os1 .card_box .mob_step_box .step .dot{position: relative; width: 0.8rem; aspect-ratio: 1 / 1; background: var(--primary-primary); border-radius: 100%;} .os1 .card_box .mob_step_box .step .dot::before{content: ""; width: 0.5rem; aspect-ratio: 1 / 1; display: block; background: var(--white); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;} .os1 .card_box .mob_step_box .step1 .dot::before { top: 40%;} .os1 .card_box .item { width: 100%; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translate3d(0, -3.125rem, 0);} .os1 .card_box .item::before {display: none;} .os1 .step_box { margin-bottom: 1.4rem; width: 1px; height: 100%;} .os1 .card_box .item .txtbox {flex: 1; padding: 0; align-items: flex-start; opacity: 1;} .os1 .card_box .item .txtbox .tit { font: var(--16_subtitle_b); letter-spacing: -0.03em; background: linear-gradient(to right, #ff7a00 -30%, #fff 15%, #ff7a00 160%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: left;} .os1 .card_box .item .txtbox .icon {display: none;} .os1 .card_box .item .txtbox .step { font: var(--11_footer_r); letter-spacing: -0.01em; color: var(--white); } .os1 .card_box .item .txtbox .arrow { display: none;} .os1 .card_box .item .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em; color: var(--grayscale-300); margin: 0; min-height: 3.4rem; min-height: 3.4rem; text-align: left; max-width: unset !important;} .os1 .card_box .item .imgbox {position: relative; width: 7.8rem; aspect-ratio: 1/1; display: flex !important;} .os1 .card_box .item .imgbox > img { width: 11.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: unset;} .os1 .card_box .item .shadow {display: none;} .os1 .bottm_box { flex-direction: column; gap: 1rem;} .os1 .bottm_box .tit { font: var(--14_subtitle_b); letter-spacing: -0.01em; width: 100%;} .os1 .bottm_box .desc { min-height: 3.1668em; font: var(--13_body_m); letter-spacing: -0.01em; text-align: justify;} .os1.aos-animate .title { transition: all 0.5s linear 1.8s;} .os1.aos-animate .mob_step_box .line { height: 100%; transition-delay: 2.3s;} .os1.aos-animate .mob_step_box .step {opacity: 1; transition: all 0.5s linear 2.3s;} .os1.aos-animate .mob_step_box .step1 { top: 0.3rem;} .os1.aos-animate .mob_step_box .step2 { top: calc(11rem + 1.2rem);} .os1.aos-animate .mob_step_box .step3 { top: calc(22rem + 1.98rem);} .os1.aos-animate .mob_step_box .step.step4 { top: calc(33rem + 2.75rem);} .os1.aos-animate .card_box .item:nth-child(1) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 2.8s; } .os1.aos-animate .card_box .item:nth-child(2) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 3.3s; } .os1.aos-animate .card_box .item:nth-child(3) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 3.8s;} .os1.aos-animate .card_box .item:nth-child(4) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 4.3s;} .os2 {margin-bottom: 16rem;} .os2 .titbox { gap: 2rem;} .os2 .titbox .tit { font: var(--18_title_b); letter-spacing: -0.01em;} .os2 .titbox .descbox .desc {font: var(--13_body_m);letter-spacing: -0.06em;text-align: justify;} /* clinic */ .sub_top.sub_clinic .s_img > .img { background-image: url(../img/subtop_clinic_mob.png);} .cs1 { margin-top: 4rem; margin-bottom: 16rem;} .cs1 .s_txtbox {display: flex !important; flex-direction: column; gap: 2rem; margin-bottom: 4rem;} .cs1 .s_txtbox .s_sub { font: var(--14_subtitle_b); letter-spacing: -0.01em;} .cs1 .s_txtbox .s_desc{font:var(--13_body_r);letter-spacing: -0.05em;text-align: justify;color: var(--neutral-lightgray);} .cs1 .imgwrap { width: calc(100% + 4rem); margin: 0 -2rem; gap: 6rem;} /* error */ .es1 { margin-top: 17rem;} .es1 .txtbox .sub { font: var(--14_body_l); margin-bottom: 1rem;} .es1 .txtbox .tit { font: var(--22_maintitle_b); letter-spacing: -0.01em; margin-bottom: 3rem;} .es1 .txtbox .desc { font: var(--13_body_r); letter-spacing: -0.05em; margin-bottom: 5.6rem; color: var(--white);} .es1 .txtbox .link { padding: 0; font: var(--12_caption1_b); border-radius: 10rem; width: 11.6rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;} } @media screen and (max-width: 900px) { html {font-size: 14px !important;} } @media screen and (max-width: 700px) { html {font-size: 11.5px !important;} } /* Mobile */ @media screen and (max-width: 599px) { html {font-size: 11px !important;} .mobile {display: block !important;} } @media screen and (max-width: 480px) { html {font-size: 10px !important;} } @media screen and (max-width: 320px) { html { font-size: 9px !important;} } /* only tablet */ @media screen and (min-width: 600px) and (max-width: 1080px) { .tab_navbox .tab_nav { width: 25%;} .ns3_4 .contbox .box2 .txtbox .desc br.tablet {display: none !important;} .ms2 .bg .pc_ver {display: block;} .ms2 .bg .mob_ver {display: none;} .ns2_4 .slidebox { width: 60%; margin: 0 auto;} } @media screen and (min-width: 769px) and (max-width: 1080px) { .nav_box { max-width: 450px; right: -450px;} .nav_box .nav {gap: 1.5rem; padding: 3rem 2rem;} .nav_box .nav > li { font: var(--14_body_b);} .nav_box .nav > li.button { font: var(--11_caption2_b); height: 2.8rem; padding: 0.8rem 0.5rem;} .ts10 .contbox { aspect-ratio: unset; height: 100vh; top: -2rem;} .ts10 .contbox::before { width: 136vw;} .ts10 .contbox .box { top: 58.25% !important;} } @media screen and (min-width: 769px) and (max-width: 1080px) and (orientation: landscape) { .ts10 .contbox { aspect-ratio: unset; height: 100vh; top: -2rem;} .ts10 .contbox::before { width: 136vw;} .ts10 .contbox .box { top: 64.25% !important;} } @media screen and (min-width: 1080px) and (max-width: 1280px) and (orientation: landscape) { .ns2_2 .contbox { flex-direction: column; gap: 3rem; padding: 0 0 8rem; width: calc(100% - 4rem);} .ns2_2 .contbox > .item { width: 100%; border-radius: 1rem;padding: 2rem 2rem 2.2rem;} .ns2_2 .contbox > .item .side { right: 2rem; top: 2rem; font: var(--11_caption2_r); letter-spacing: 0; writing-mode: unset; font-size: 1.1rem;} .ns2_2 .contbox > .item .icon { width: 5rem; margin-bottom: 0;} .ns2_2 .contbox > .item .tit { font: var(--16_body1_normal_b); letter-spacing: -0.03em; min-height: unset; margin-bottom: 0.6rem; font-size: 1.6rem;} .ns2_2 .contbox > .item.aos-animate .tit br {display: none;} .ns2_2 .contbox > .item .desc { font: var(--13_body_r); letter-spacing: -0.05em; font-size: 1.3rem;} .ns2_2 .contbox > .item:hover {background: transparent; border-color: var(--neutral-darkgray);} .ns2_2 .contbox > .item:hover .side {opacity: 0;} .ns2_2 .contbox > .item:hover .icon .img:nth-child(1){opacity: 1;} .ns2_2 .contbox > .item:hover .icon .img:nth-child(2){opacity: 0;} .ns2_2 .contbox > .item:hover .tit {color: var(--neutral-darkgray);} .ns2_2 .contbox > .item:hover .desc {color: var(--neutral-darkgray);} .ns2_2 .contbox > .item.aos-animate {background: var(--grayscale-800); border-color: var(--grayscale-800);} .ns2_2 .contbox > .item.aos-animate .side {opacity: 1;} .ns2_2 .contbox > .item.aos-animate .icon .img:nth-child(1){opacity: 0;} .ns2_2 .contbox > .item.aos-animate .icon .img:nth-child(2){opacity: 1;} .ns2_2 .contbox > .item.aos-animate .tit {color: var(--neutral-white);} .ns2_2 .contbox > .item.aos-animate .desc {color: var(--neutral-lightgray);} .os1 .imgwrap { width: calc(100% + 4rem); margin: 0 -2rem; gap: 6rem;} .os1 .title { font: 700 1.8rem/1.33 'Pretendard', sans-serif; margin-bottom: 2rem;} .os1 .step_box {display: none;} .os1 .card_box { padding: 0 0 0 2.4rem; gap: 4rem; margin-bottom: 4rem; margin-top: 0; flex-direction: column;} .os1 .card_box .mob_step_box {position: absolute; left: 0; top: 0; width: 1px; height: 100%;} .os1 .card_box .mob_step_box .line {position: absolute; left: 0.4rem; top: 0.4rem; background: url(../img/os1_line_mob.png) no-repeat top center / contain; width: 0.6rem; height: 0%;} .os1 .card_box .mob_step_box .step { position: absolute; left: 0.3425rem; top: 0; opacity: 0;} .os1 .card_box .mob_step_box .step .dot{position: relative; width: 0.8rem; aspect-ratio: 1 / 1; background: var(--primary-primary); border-radius: 100%;} .os1 .card_box .mob_step_box .step .dot::before{content: ""; width: 0.5rem; aspect-ratio: 1 / 1; display: block; background: var(--white); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;} .os1 .card_box .mob_step_box .step1 .dot::before { top: 40%;} .os1 .card_box .item { width: 100%; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translate3d(0, -3.125rem, 0);} .os1 .card_box .item::before {display: none;} .os1 .step_box { margin-bottom: 1.4rem; width: 1px; height: 100%;} .os1 .card_box .item .txtbox {flex: 1; padding: 0; align-items: flex-start; opacity: 1;} .os1 .card_box .item .txtbox .tit { font: 700 1.6rem/1.25 'Pretendard', sans-serif; letter-spacing: -0.03em; background: linear-gradient(to right, #ff7a00 -30%, #fff 15%, #ff7a00 160%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: left; font-size: 1.6rem;} .os1 .card_box .item .txtbox .icon {display: none;} .os1 .card_box .item .txtbox .step { font: 400 1.1rem/1.18 'Pretendard', sans-serif; letter-spacing: -0.01em; color: var(--white); font-size: 1.1rem;} .os1 .card_box .item .txtbox .arrow { display: none;} .os1 .card_box .item .txtbox .desc { font: 400 1.3rem/1.31 'Pretendard', sans-serif; letter-spacing: -0.05em; color: var(--grayscale-300); margin: 0; min-height: 3.4rem; text-align: left; max-width: unset !important; font-size: 1.3rem;} .os1 .card_box .item .txtbox .desc br {display: none;} .os1 .card_box .item .imgbox {position: relative; width: 7.8rem; aspect-ratio: 1/1; display: flex !important;} .os1 .card_box .item .imgbox > img { width: 11.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: unset;} .os1 .card_box .item .shadow {display: none;} .os1 .bottm_box { flex-direction: column; gap: 1rem;} .os1 .bottm_box .tit { font: 700 1.4rem/1.43 'Pretendard', sans-serif; letter-spacing: -0.01em; width: 100%; font-size: 1.4rem;} .os1 .bottm_box .desc { min-height: 3.1668em; font: 500 1.3rem/1.31 'Pretendard', sans-serif; letter-spacing: -0.01em; text-align: justify; font-size: 1.3rem;} .os1.aos-animate .title { transition: all 0.5s linear 1.8s;} .os1.aos-animate .mob_step_box .line { height: 100%; transition-delay: 2.3s;} .os1.aos-animate .mob_step_box .step {opacity: 1; transition: all 0.5s linear 2.3s;} .os1.aos-animate .mob_step_box .step1 { top: 0.3rem;} .os1.aos-animate .mob_step_box .step2 { top: calc(11rem + 1.2rem);} .os1.aos-animate .mob_step_box .step3 { top: calc(22rem + 1.98rem);} .os1.aos-animate .mob_step_box .step.step4 { top: calc(33rem + 2.75rem);} .os1.aos-animate .card_box .item:nth-child(1) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 2.8s; } .os1.aos-animate .card_box .item:nth-child(2) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 3.3s; } .os1.aos-animate .card_box .item:nth-child(3) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 3.8s;} .os1.aos-animate .card_box .item:nth-child(4) {opacity: 1; transform: translate3d(0, 0, 0); transition: all 0.5s linear 4.3s;} .os1 .card_box .item .txtbox .step, .os1 .card_box .mob_step_box {display: block !important;} } @media screen and (min-width: 600px) and (max-width: 768px) { .nav_box { max-width: 380px; right: -380px;} .ts10 .contbox::before { width: 154.95vw;} .ts10 .contbox .box { top: 59.25% !important; } } @media screen and (max-width: 491px) { .app_privacy section .inner .txtbox .dot div { margin-top: 1.9%; } }