.story.divarea + .divarea.t5 {margin-top:0;} #contents .c_wrap {position:relative; width:100%;} #contents canvas {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; width:100%; pointer-events:none;} #contents .c_title {display:flex; align-items:flex-start; gap:24px; position:absolute; bottom:0; padding-right:20px; margin-bottom:-150px; text-align:left; font-size:10.4167vw; font-weight:400; line-height:7.8125vw; letter-spacing:-0.4167vw;} #contents .aos-animate .c_title {animation:subtitle 1.6s cubic-bezier(0.5, 0, 0.25, 1) forwards; animation-delay:0.2s} @keyframes subtitle { 0% {bottom:0; margin-bottom:-7.8125vw;} 33% {bottom:0; margin-bottom:40px;} 60% {bottom:0; margin-bottom:40px;} 100% {bottom:calc(100% - 7.8125vw); margin-bottom:0;}} @keyframes subtitle1 { 0% {bottom:0; margin-bottom:-7.8125vw;} 33% {bottom:0; margin-bottom:50px;} 60% {bottom:0; margin-bottom:50px;} 100% {bottom:calc(100% - 7.8125vw); margin-bottom:0;}} @keyframes subtitle2 { 0% {bottom:0; margin-bottom:-11.6473vw;} 33% {bottom:0; margin-bottom:50px;} 60% {bottom:0; margin-bottom:50px;} 100% {bottom:calc(100% - 11.6473vw); margin-bottom:0;}} @keyframes riseUp { to {transform:translateY(0);}} #contents .t1 + .divarea {margin-top:120px; padding-top:7.8125vw; opacity:0!important; transition-duration:0.7s;} #contents #plasticCanvas05 {position:absolute; left:0; right:0; top:0; bottom:auto; z-index:4; height:1594px; pointer-events:none; background-image:url("../images/pic_plastic05.png"); background-repeat:no-repeat; background-size:100% 100%;} #contents.story .ca_hero {overflow:hidden; opacity:0;} #contents.story .ca_hero.step01 {opacity:1; transition:0.3s;} #contents.story .ca_hero .cah_marquee {display:flex; justify-content:center; align-items:center; position:relative; height:180px;} #contents.story .ca_hero.step02 .cah_marquee {transform:translateY(0);} #contents.story .ca_hero .cah_marquee ul {display:flex; position:absolute; top:0; will-change:transform; white-space:nowrap; animation:slidemarquee 100s linear infinite; animation-play-state:running;} #contents.story .ca_hero .cah_marquee ul.t1 {animation-delay:-50s;} #contents.story .ca_hero .cah_marquee ul li {display:inline-flex; overflow:hidden; align-items:center; text-align:center; white-space:nowrap; font-size:180px; line-height:180px;} #contents.story .ca_hero .cah_marquee ul li i {display:inline-block; width:160px; height:160px; margin:0 20px; animation:2.5s linear infinite rotate_normal; background-image:url("../images/career/icon_star.svg"); background-size:100% auto; background-position:center;} #contents.story .ca_hero .cah_txt {display:inline-block; width:100%; margin:60px 0; font-size:clamp(30px,2.8646vw,55px); font-weight:500; line-height:clamp(40px,3.64vw,70px); color:var(--black10); text-align:left;} #contents.story .ca_hero .cah_txt span {display:inline-block;} #contents.story .ca_hero .cah_txt > span {display:inline-block; float:left; width:100%;} #contents.story .ca_hero.step03 .cah_txt > span:nth-child(1) span, #contents.story .ca_hero.step04 .cah_txt > span:nth-child(2) span, #contents.story .ca_hero.step05 .cah_txt > span:nth-child(3) span, #contents.story .ca_hero.step06 .cah_txt > span:nth-child(4) span {transform:translateY(0);} #contents.story .ca_hero .cah_txt b {display:inline-block; position:relative; font-weight:500;} #contents.story .ca_hero .cah_txt b:before {content:attr(title); position:absolute; left:0; top:0; width:100%; color:var(--black); clip-path:rect(0 0 100% 0 round 0);} #contents.story .ca_hero.step07 .cah_txt b.t1:before {clip-path:rect(0 100% 100% 0 round 0); transition:0.5s;} #contents.story .ca_hero.step08 .cah_txt b.t2:before {clip-path:rect(0 100% 100% 0 round 0); transition:0.5s;} #contents.story .ca_hero .cah_slogan {display:flex; align-items:flex-end; justify-content:space-between; opacity:0; transition:0.5s;} #contents.story .ca_hero.step09 .cah_slogan {opacity:1;} #contents.story .ca_hero .cah_slogan > p {display:inline-block; width:100%; font-size:clamp(18px,1.3021vw,25px); font-weight:600; line-height:clamp(30px,2.0833vw,40px); letter-spacing:-0.5px; text-align:left; word-break:keep-all;} #contents.story .ca_hero .cah_slogan > p > span {display:inline-block; float:left; width:100%; text-align:left;} #contents.story .ca_hero .cah_slogan .cahs_since {display:flex; gap:15px; flex-shrink:0;} #contents.story .ca_hero .cah_slogan .cahs_since > p {display:inline-block; width:63px; font-size:12px; font-weight:400; line-height:20px; letter-spacing:-0.5px; text-align:left;} #contents.story .ca_hero .cah_slogan .cahs_since > p > span {display:inline-block; float:left; width:100%;} #contents.story .ca_hero .cah_slogan .cahs_since > p > span:last-child {font-weight:700;} #contents.story .ca_hero .cah_slogan .cahs_since > mark {display:inline-block; vertical-align:middle; background-color:var(--blue); border-radius:20px; padding:0 20px; font-size:25px; color:var(--yellow); font-weight:500; line-height:40px; letter-spacing:-0.5px;} /* #contents.story .ca_hero .cah_pic {position:relative; overflow:hidden; margin-top:120px; margin-bottom:120px; background-image:url("../images/about/25_SMC_Newyork_day_2%20(258).jpg");background-repeat:no-repeat;background-position:top;background-size:cover;background-attachment:fixed; font-size:0; line-height:0;} */ /* [기본 공통 스타일] 기본 배경 이미지 설정 및 부드러운 전환 효과 추가 */ #contents.story .ca_hero .cah_pic { position:relative; overflow:hidden; margin-top:120px; margin-bottom:120px; background-image:url("../images/story/KDKoo 검정색로고_PNG.png"); background-repeat:no-repeat; background-position:top; background-size:cover; background-attachment:fixed; font-size:0; line-height:0; transition: background-image 0.4s ease; /* 이미지가 자연스럽게 페이드 되며 바뀌는 효과 */ } /* ======================================================= 각 섹션별 화면 중앙(active)에 왔을 때 바뀔 이미지 경로 지정 ======================================================= */ /* 1번째 히어로 섹션 (팬들의 열광에서...) */ #contents.story .ca_hero:nth-of-type(1) .cah_pic.active { background-image: url("../images/about/25_SMC_Newyork_day_2%20(258).jpg"); } /* 2번째 히어로 섹션 (디지털 콘텐츠에서...) */ #contents.story .ca_hero:nth-of-type(2) .cah_pic.active { background-image: url("../images/story/active_img_2.jpg"); /* 요청하신 이미지 */ } /* 3번째 히어로 섹션 (글로벌 무대로...) */ #contents.story .ca_hero:nth-of-type(3) .cah_pic.active { background-image: url("../images/story/active_img_3.jpg"); } /* 4번째 히어로 섹션 (브랜드 경험의 경계를...) */ #contents.story .ca_hero:nth-of-type(4) .cah_pic.active { background-image: url("../images/story/active_img_4.jpg"); } /* 5번째 히어로 섹션 (글로벌 브랜드의 파트너...) */ #contents.story .ca_hero:nth-of-type(5) .cah_pic.active { background-image: url("../images/story/active_img_5.jpg"); } #contents.story .ca_hero .cah_pic img {display:none; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; object-fit:cover;} #contents.story.ios .ca_hero .cah_pic img {display:block;} #contents.story .c_inside {padding-top:0} #contents.story .c_inside .ci_news {margin-top:0} #contents.story .c_inside .ci_news.aos-animate:before {width:calc(100% - 40px)} #contents.story .c_inside .ci_news li {padding-left:0} #contents.story .c_inside .ci_news li > p {padding-left:0} #contents.story .c_inside .ci_news li > p > a, #contents.story .c_inside .ci_news li > p > button {position:relative; line-height:clamp(16px, 2.6042vw, 50px); letter-spacing:-0.8px; transition:0.3s} #contents.story .c_inside .ci_news li.hover > p > a, #contents.story .c_inside .ci_news li.hover > p > button {font-weight:600} #contents.story .c_inside .ci_news li.closed.hover > p > a, #contents.story .c_inside .ci_news li.closed.hover > p > button {cursor:default !important;} #contents.story .c_inside .ci_news li > p > a span, #contents.story .c_inside .ci_news li > p > button span {height:clamp(16px, 2.6042vw, 50px)} #contents.story .c_inside .ci_news li > p > a span:before, #contents.story .c_inside .ci_news li > p > button span:before {display:none} #contents.story .c_inside .ci_news li > p > i {border:none; background:none} #contents.story .c_inside .ci_news li.closed > p > i {display:none !important;} #contents.story .c_inside .ci_news li > p i.icon.right_small {background-image:url("../images/common/icon_right_small_t1.svg")} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {content:"梨꾩슜以�"; display:block; position:absolute; left:calc(100% - clamp(5px, 0.7813vw, 15px)); top:clamp(10px, 1.5625vw, 30px); padding:0 clamp(10px, 1.0417vw, 20px); border-radius:30px; border:1px solid var(--blue); background:rgba(1, 25, 247, 0.9); box-shadow:0 10px 20px 0 rgba(1, 25, 247, 0.20); color:var(--yellow); font-size:clamp(12px, 0.8333vw, 16px); font-weight:500; line-height:clamp(20px, 1.4583vw, 28px); letter-spacing:-0.64px; white-space:nowrap} #contents.story .c_inside .ci_news .cin_sticky {float:right; right:0; left:inherit; width:clamp(170px, 22.9167vw, 440px); aspect-ratio:4/3; box-shadow:0 clamp(20px, 2.6042vw, 50px) clamp(50px, 5.2083vw, 100px) 0 rgba(17, 20, 38, 0.40); opacity:1;} #contents.story .c_inside .ci_news .cin_sticky.off2 {opacity:0;} #contents.story .cc_recruit {padding-bottom:275px;} #contents.story .cc_recruit .ccr_contents {display:flex; align-items:center; width:100%} #contents.story .cc_recruit .ccr_contents > div {display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:320px; aspect-ratio:1/1; box-sizing:border-box; border-radius:100%; border:3px solid var(--black); background:var(--purple); transition:0.3s;} #contents.story .cc_recruit .ccr_contents > div + div {margin-left:-27px;} #contents.story .cc_recruit .ccr_contents > div:hover, #contents.story .cc_recruit .ccr_contents > div.on {background:var(--black); transform:scale(1.125);} #contents.story .cc_recruit .ccr_contents > div:hover mark, #contents.story .cc_recruit .ccr_contents > div.on mark, #contents.story .cc_recruit .ccr_contents > div:hover span.text, #contents.story .cc_recruit .ccr_contents > div.on span.text{color:var(--white)} #contents.story .cc_recruit .ccr_contents > div > div {display:flex; flex-direction:column; align-items:flex-start; justify-content:center;} #contents.story .cc_recruit .ccr_contents mark {color:var(--blue); font-size:25px; font-weight:600; letter-spacing:-0.5px; line-height:40px; transition:0.3s;} #contents.story .cc_recruit .ccr_contents span.text {transition:0.3s;} #contents.story .cc_recruit .ccr_contents > div mark + span span {float:inherit; width:auto} #contents.story .cc_recruit .ccr_contents .ccrc_text {position:absolute; left:calc(50% - clamp(21px, 2.5vw, 45px)); top:calc(100% - clamp(30px, 3.9vw, 70px)); padding-top:clamp(80px, 9.4792vw, 182px);} #contents.story .cc_recruit .ccr_contents div.t1 .ccrc_text {left:calc(50% - clamp(30px, 1.5625vw, 30px)); top:calc(100% - clamp(46px, 5.9896vw, 115px));} #contents.story .cc_recruit .ccr_contents div.t2 .ccrc_text {left:calc(50% - clamp(30px, 5vw, 90px)); top:calc(100% - clamp(30px, 5.5vw, 90px));} #contents.story .cc_recruit .ccr_contents div:last-child .ccrc_text {left:auto; right:30%;} #contents.story .cc_recruit .ccr_contents div:last-child .ccrc_text span {text-align:right;} #contents.story .cc_recruit .ccr_contents .ccrc_text p {opacity:0; transition:0.5s;} #contents.story .cc_recruit .ccr_contents div.on .ccrc_text p, #contents.story .cc_recruit .ccr_contents div:hover .ccrc_text p {opacity:1; transition-delay:0.3s;} #contents.story .cc_recruit .ccr_contents .ccrc_text::before {content:""; opacity:0; display:block; position:absolute; top:0; left:0; width:1px; height:1px; margin-bottom:2px; background:var(--black); transition:0.5s} #contents.story .cc_recruit .ccr_contents div:last-child .ccrc_text::before {left:auto; right:0;} #contents.story .cc_recruit .ccr_contents .ccrc_text span {white-space:nowrap} #contents.story .cc_recruit .ccr_contents div.on .ccrc_text::before, #contents.story .cc_recruit .ccr_contents div:hover .ccrc_text::before {height:clamp(80px, 9.375vw, 180px); opacity:1} #contents.story .cc_faq .ccf_swiperwrap {display:inline-block; overflow:hidden; position:relative; width:100%;} #contents.story .cc_faq .ccf_contents {overflow:visible; float:right; width:480px; margin-top:120px} #contents.story .cc_faq .ccf_contents .ccfc_list {display:flex; width:max-content;} #contents.story .cc_faq .ccf_contents .ccfc_list li {flex:none; position:relative; box-sizing:border-box; padding:0 45px;} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {flex:none; position:relative; width:100% !important; aspect-ratio:3/4; box-sizing:border-box; padding:40px 30px; border-radius:5px; border-bottom:1px solid rgba(17, 20, 38, 0.1); border-top:1px solid rgba(17, 20, 38, 0.1); background:url("../images/pic_faq01.jpg") center center no-repeat; background-size:cover; text-align:left} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box::before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; transition:0.3s} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box:hover::before {background:rgba(0, 0, 0, 0.6)} @keyframes faq_slide {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q {display:flex; align-items:flex-start; gap:10px; position:relative; color:var(--white)} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {content:"Q."; font-size:25px; line-height:40px; letter-spacing:-1px; font-weight:500} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q span {color:var(--white)} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_a {opacity:0; display:flex; align-items:flex-start; gap:10px; position:relative; color:var(--white); transition:0.3s} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_a::before {content:"A."; font-size:16px; line-height:30px; letter-spacing:-0.32px; font-weight:200} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_a span {color:var(--white)} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box:hover .ccfcl_a {opacity:1; margin-top:20px;} /* career를 about으로 복제 */ #contents.story .c_inside {padding-top:0} #contents.story .c_inside .ci_news {margin-top:0} #contents.story .c_inside .ci_news.aos-animate:before {width:calc(100% - 40px)} #contents.story .c_inside .ci_news li {padding-left:0} #contents.story .c_inside .ci_news li > p {padding-left:0} #contents.story .c_inside .ci_news li > p > a, #contents.story .c_inside .ci_news li > p > button {position:relative; line-height:clamp(16px, 2.6042vw, 50px); letter-spacing:-0.8px; transition:0.3s} #contents.story .c_inside .ci_news li.hover > p > a, #contents.story .c_inside .ci_news li.hover > p > button {font-weight:600} #contents.story .c_inside .ci_news li.closed.hover > p > a, #contents.story .c_inside .ci_news li.closed.hover > p > button {cursor:default !important;} #contents.story .c_inside .ci_news li > p > a span, #contents.story .c_inside .ci_news li > p > button span {height:clamp(16px, 2.6042vw, 50px)} #contents.story .c_inside .ci_news li > p > a span:before, #contents.story .c_inside .ci_news li > p > button span:before {display:none} #contents.story .c_inside .ci_news li > p > i {border:none; background:none} #contents.story .c_inside .ci_news li.closed > p > i {display:none !important;} #contents.story .c_inside .ci_news li > p i.icon.right_small {background-image:url("../images/common/icon_right_small_t1.svg")} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {content:"梨꾩슜以"; display:block; position:absolute; left:calc(100% - clamp(5px, 0.7813vw, 15px)); top:clamp(10px, 1.5625vw, 30px); padding:0 clamp(10px, 1.0417vw, 20px); border-radius:30px; border:1px solid var(--blue); background:rgba(1, 25, 247, 0.9); box-shadow:0 10px 20px 0 rgba(1, 25, 247, 0.20); color:var(--yellow); font-size:clamp(12px, 0.8333vw, 16px); font-weight:500; line-height:clamp(20px, 1.4583vw, 28px); letter-spacing:-0.64px; white-space:nowrap} #contents.story .c_inside .ci_news .cin_sticky {float:right; right:0; left:inherit; width:clamp(170px, 22.9167vw, 440px); aspect-ratio:4/3; box-shadow:0 clamp(20px, 2.6042vw, 50px) clamp(50px, 5.2083vw, 100px) 0 rgba(17, 20, 38, 0.40); opacity:1;} #contents.story .c_inside .ci_news .cin_sticky.off2 {opacity:0;} @media all and (max-width:1920px) { #contents.career .c_inside .ci_news .cin_sticky {right:clamp(10px, 8.0208vw, 154px); left:inherit} } @media all and (max-width:1280px) { #contents.story .ca_hero .cah_marquee {height:150px;} #contents.story .ca_hero .cah_marquee ul li {font-size:150px; line-height:150px;} #contents.story .ca_hero .cah_marquee ul li i {width:140px; height:140px; margin:0 15px;} #contents.story .ca_hero .cah_txt {margin:40px 0;} #contents.story .ca_hero .cah_pic {margin-top:80px; margin-bottom:80px;} } @media all and (max-width:1024px) { #contents.story .ca_hero .cah_marquee {height:120px;} #contents.story .ca_hero .cah_marquee ul li {font-size:120px; line-height:120px;} #contents.story .ca_hero .cah_marquee ul li i {width:110px; height:110px; margin:0 10px;} #contents.story .ca_hero .cah_txt {margin:30px 0; font-size:3.6vw; line-height:4.5vw;} #contents.story .ca_hero .cah_slogan > p {font-size:2vw; line-height:3vw;} #contents.story .ca_hero .cah_pic {margin-top:60px; margin-bottom:60px;} #contents .ca_vision .divarea > div > div {height:152px} #contents .ca_vision .divarea div p > span {display:flex; flex-direction:column; align-items:flex-start} #contents .ca_awards {padding:70px 0} #contents .ca_awards:before {left:30px; right:30px;} #contents .ca_awards .caa_list li {padding:25px 0} #contents .ca_awards .caa_list li:first-child {padding-top:0} #contents .ca_awards .caa_list li div > strong {width:auto} #contents .c_contact .btn_wrap {margin-top:-30px} /* career를 about으로 복제 */ #contents.story .cc_hero .wrap > .divarea {margin-top:150px;} #contents.story .cc_hero .cch_title > p > span {display:none;} #contents.story .cc_hero .cch_title > span {position:absolute; bottom:-90px; display:flex;} #contents.story .cc_hero .cch_title > p:nth-child(4) {justify-content:flex-end;} #contents.story .cc_hero .cch_title > p:nth-child(4) > strong {width:59vw;} #contents.story .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:77%; transition:1s;} #contents.story section:not(.c_intro).aos-animate:before {right:30px; width:calc(100% - 60px)} #contents.story .cc_text {gap:30px} #contents.story .cc_text h3 {font-size:36px; line-height:46px} #contents.story .cc_work .ccw_contents {column-gap:30px} #contents.story .cc_work .ccw_contents li {width:calc((100% - 30px) / 2)} #contents.story .cc_work .ccw_contents li > div strong {font-size:26px; line-height:36px;} #contents.story .cc_work .ccw_contents li > div span {font-size:18px; line-height:25px} #contents.story .cc_work .ccw_contents li > .text {padding-right:0;} #contents.story .cc_work .ccw_contents .ccwc_icon {width:42px; height:42px; margin-bottom:30px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2)::after {width:23px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3)::after {width:11px} #contents.story .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(1)::after, #contents.story .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(2)::after {width:24px;} #contents.story .cc_benefit .divarea + div {margin-top:35px} #contents.story .cc_benefit .ccb_contents {row-gap:50px} #contents.story .cc_benefit .ccb_contents li {width:calc((100% - 10px) / 2)} #contents.story .cc_benefit .ccb_contents .ccbc_icon i, #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {width:58px;} #contents.story .c_inside .ci_news .cin_sticky {right:clamp(10px, 9.0208vw, 154px); width:clamp(150px, 20.9167vw, 440px)} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {left:calc(100% - 3px)} #contents.story .cc_position {padding-bottom:65px} #contents.story .cc_recruit {padding-bottom:186px} #contents.story .cc_recruit .ccr_contents mark {font-size:16px; line-height:22px} #contents.story .cc_recruit .ccr_contents > div mark + span {display:flex; flex-direction:column; align-items:flex-start; font-size:16px; line-height:22px;} #contents.story .cc_faq .ccf_contents {width:320px; margin-top:65px} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {padding:35px 25px} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:20px;} /* career를 about으로 복제 */ #contents.story .cc_hero .wrap > .divarea {margin-top:150px;} #contents.story .cc_hero .cch_title > p > span {display:none;} #contents.story .cc_hero .cch_title > span {position:absolute; bottom:-90px; display:flex;} #contents.story .cc_hero .cch_title > p:nth-child(4) {justify-content:flex-end;} #contents.story .cc_hero .cch_title > p:nth-child(4) > strong {width:59vw;} #contents.story .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:77%; transition:1s;} #contents.story section:not(.c_intro).aos-animate:before {right:30px; width:calc(100% - 60px)} #contents.story .cc_text {gap:30px} #contents.story .cc_text h3 {font-size:36px; line-height:46px} #contents.story .cc_work .ccw_contents {column-gap:30px} #contents.story .cc_work .ccw_contents li {width:calc((100% - 30px) / 2)} #contents.story .cc_work .ccw_contents li > div strong {font-size:26px; line-height:36px;} #contents.story .cc_work .ccw_contents li > div span {font-size:18px; line-height:25px} #contents.story .cc_work .ccw_contents li > .text {padding-right:0;} #contents.story .cc_work .ccw_contents .ccwc_icon {width:42px; height:42px; margin-bottom:30px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2)::after {width:23px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3)::after {width:11px} #contents.story .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(1)::after, #contents.story .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(2)::after {width:24px;} #contents.story .cc_benefit .divarea + div {margin-top:35px} #contents.story .cc_benefit .ccb_contents {row-gap:50px} #contents.story .cc_benefit .ccb_contents li {width:calc((100% - 10px) / 2)} #contents.story .cc_benefit .ccb_contents .ccbc_icon i, #contents.story .cc_benefit .ccb_contents .ccbc_icon mark::after {width:58px;} #contents.story .c_inside .ci_news .cin_sticky {right:clamp(10px, 9.0208vw, 154px); width:clamp(150px, 20.9167vw, 440px)} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {left:calc(100% - 3px)} #contents.story .cc_position {padding-bottom:65px} #contents.story .cc_recruit {padding-bottom:186px} #contents.story .cc_recruit .ccr_contents mark {font-size:16px; line-height:22px} #contents.story .cc_recruit .ccr_contents > div mark + span {display:flex; flex-direction:column; align-items:flex-start; font-size:16px; line-height:22px;} #contents.story .cc_faq .ccf_contents {width:320px; margin-top:65px} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {padding:35px 25px} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:20px;} /* career를 about으로 복제 */ #contents.story .cc_hero .wrap > .divarea {margin-top:150px;} #contents.story .cc_hero .cch_title > p > span {display:none;} #contents.story .cc_hero .cch_title > span {position:absolute; bottom:-90px; display:flex;} #contents.story .cc_hero .cch_title > p:nth-child(4) {justify-content:flex-end;} #contents.story .cc_hero .cch_title > p:nth-child(4) > strong {width:59vw;} #contents.story .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:77%; transition:1s;} #contents.story section:not(.c_intro).aos-animate:before {right:30px; width:calc(100% - 60px)} #contents.story .cc_text {gap:30px} #contents.story .cc_text h3 {font-size:36px; line-height:46px} #contents.story .cc_work .ccw_contents {column-gap:30px} #contents.story .cc_work .ccw_contents li {width:calc((100% - 30px) / 2)} #contents.story .cc_work .ccw_contents li > div strong {font-size:26px; line-height:36px;} #contents.story .cc_work .ccw_contents li > div span {font-size:18px; line-height:25px} #contents.story .cc_work .ccw_contents li > .text {padding-right:0;} #contents.story .cc_work .ccw_contents .ccwc_icon {width:42px; height:42px; margin-bottom:30px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2)::after {width:23px} #contents.story .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3)::after {width:11px} #contents.story .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(1)::after, #contents.career .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(2)::after {width:24px;} #contents.story .cc_benefit .divarea + div {margin-top:35px} #contents.story .cc_benefit .ccb_contents {row-gap:50px} #contents.story .cc_benefit .ccb_contents li {width:calc((100% - 10px) / 2)} #contents.story .cc_benefit .ccb_contents .ccbc_icon i, #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {width:58px;} #contents.story .c_inside .ci_news .cin_sticky {right:clamp(10px, 9.0208vw, 154px); width:clamp(150px, 20.9167vw, 440px)} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {left:calc(100% - 3px)} #contents.story .cc_position {padding-bottom:65px} #contents.story .cc_recruit {padding-bottom:186px} #contents.story .cc_recruit .ccr_contents mark {font-size:16px; line-height:22px} #contents.story .cc_recruit .ccr_contents > div mark + span {display:flex; flex-direction:column; align-items:flex-start; font-size:16px; line-height:22px;} #contents.story .cc_faq .ccf_contents {width:320px; margin-top:65px} #contents.story .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {padding:35px 25px} #contents.story .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:20px;} } @media all and (max-width:768px) { #contents.story .ca_hero .cah_txt {font-size:25px; line-height:35px;} #contents.story .ca_hero .cah_slogan {flex-wrap:wrap; gap:20px;} #contents.story .ca_hero .cah_slogan > p {font-size:16px; line-height:28px;} #contents.story .ca_hero .cah_slogan > p > span {display:inline; float:none;} #contents.story .ca_hero .cah_pic {height:auto !important; aspect-ratio:4/3;} #contents.story .ca_hero .cah_pic img {display:block;} #contents.story .ca_hero .cah_marquee {height:110px;} #contents.story .ca_hero .cah_marquee ul li {font-size:100px; line-height:100px;} #contents.story .ca_hero .cah_marquee ul li i {width:90px; height:90px; margin:0 8px;} /* career를 about으로 복제 */ #contents.story .c_inside .ci_news.aos-animate:before {width:100%} #contents.story .c_inside .ci_news .cin_sticky + ul {margin-top:-150px !important;} #contents.story .c_inside .ci_news li > .cin_pic {display:none} #contents.story .c_inside .ci_news li > p > a, #contents.story .c_inside .ci_news li > p > button {width:auto; padding:25px 0} #contents.story .c_inside .ci_news.aos-animate .cin_sticky {transform:scale(1); opacity:1} #contents.story .c_inside .ci_news li > p > i {display:flex} #contents.story .c_inside .ci_news .cin_sticky {right:clamp(10px, 13.0208vw, 154px); width:clamp(200px, 20.9167vw, 440px)} #contents.story .c_inside .ci_news li > p a.on::after, #contents.story .c_inside .ci_news li > p button.on::after {top:14px} } @media all and (max-width:600px) { } @media all and (max-width:425px) { #contents.story .ca_hero .cah_marquee {height:90px;} #contents.story .ca_hero .cah_marquee ul li {font-size:90px; line-height:90px;} #contents.story .ca_hero .cah_marquee ul li i {width:80px; height:80px; margin:0 6px;} #contents.story .ca_hero .cah_txt {font-size:22px; line-height:32px;} #contents.story .ca_hero .cah_slogan > p {font-size:15px; line-height:27px;} #contents.story .ca_hero .cah_slogan .cahs_since {gap:10px;} #contents.story .ca_hero .cah_slogan .cahs_since > p {line-height:16px;} #contents.story .ca_hero .cah_slogan .cahs_since > mark {padding:0 15px; height:32px; border-radius:15px; font-size:22px; line-height:32px;} } @media all and (max-width:360px) { #contents.story .ca_hero .cah_txt {font-size:19px; line-height:30px;} }