.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 .c_title > span {display:flex;} #contents .c_title span span {display:inline-block; transform:translateY(100px); /* 아래에서 시작 */animation:riseUp 0.8s ease forwards;} #contents .c_title span span:nth-child(1) {animation-delay:0.2s;} #contents .c_title span span:nth-child(2) {animation-delay:0.3s;} #contents .c_title span span:nth-child(3) {animation-delay:0.4s;} #contents .c_title span span:nth-child(4) {animation-delay:0.5s;} #contents .c_title span span:nth-child(5) {animation-delay:0.6s;} #contents .c_title span span:nth-child(6) {animation-delay:0.7s;} #contents .c_title span span:nth-child(7) {animation-delay:0.8s;} #contents .c_title span span:nth-child(8) {animation-delay:0.9s;} #contents .c_title span span:nth-child(9) {animation-delay:1s;} #contents .c_title span span:nth-child(10) {animation-delay:1.1s;} #contents .t1 + .divarea {margin-top:120px; padding-top:7.8125vw; opacity:0!important; transition-duration:0.7s;} #contents .aos-animate .t1 + .divarea {opacity:1!important; transition-delay:1.8s} #contents .aos-animate .t1 + .divarea .translateY100 {transition-delay:1.8s} #contents .aos-animate .t1 + .divarea .giant span:nth-child(1) .translateY100 {transition-delay:2s} #contents .aos-animate .t1 + .divarea .giant span:nth-child(2) .translateY100 {transition-delay:2.1s} #contents .aos-animate .t1 + .divarea .giant span:nth-child(3) .translateY100 {transition-delay:2.2s} #contents .aos-animate .t1 + .divarea .giant:last-child span:nth-child(1) .translateY100 {transition-delay:2.4s} #contents .aos-animate .t1 + .divarea .giant:last-child span:nth-child(2) .translateY100 {transition-delay:2.5s} #contents .c_title mark {opacity:0; box-sizing:border-box; padding:0 1.0417vw; border:1px solid var(--blue); border-radius:30px; background:rgba(1, 25, 247, 0.9); box-shadow:0 10px 20px 0 rgba(1, 25, 247, 0.20); font-size:clamp(14px, 1.3021vw, 25px); line-height:clamp(20px, 1.9792vw, 38px); transition:0.8s} #contents .aos-animate .c_title mark {opacity:1; transition-delay:1.8s} #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 .c_marquee {width:100%; overflow:hidden} #contents .c_intro {overflow:hidden; position:relative; padding-top:220px} #contents .c_intro > .wrap:not(:last-child) {} #contents .c_intro > .wrap > div.t1 {overflow:hidden; position:absolute; left:0; top:0; width:calc(100vw - 15px); max-width:1920px; height:calc(100vh - 220px); padding:0 60px; box-sizing:border-box} #contents .c_intro > .wrap > div.t1 + div {padding-bottom:120px;} #contents .c_intro p b {margin:0.2604vw 0; line-height:3.6458vw} #contents .c_intro p b:before {font-weight:100;} #contents .c_intro p b:after {top:3.7500vw;} #contents .c_intro .aos-animate p b:before {top:-3.6458vw; transition-delay:2.5s;} #contents .c_intro .aos-animate p b:after {top:0; transition-delay:2.5s;} #contents .c_intro .c_marquee {display:flex; flex-wrap:nowrap; gap:40px; margin-bottom:120px;} #contents .c_intro .c_marquee span {font-size:130px; white-space:nowrap; line-height:1.5; font-weight:200; animation:slidemarquee2 30s linear infinite;} @keyframes slidemarquee2 { 0% {transform:translateX(-100%);} 100% {transform:translateX(-200%);}} #contents .c_intro .divarea > p {display:flex; flex-direction:column; gap:3.1250vw;} #contents .c_intro .divarea > p .title.t2 {font-size:3.1250vw; line-height:4.1667vw; letter-spacing:-0.0625vw} #contents .c_intro .divarea > p span.giant {font-size:clamp(16px, 1.3021vw, 30px); line-height:clamp(25px, 2.0833vw, 40px)} #contents .c_intro .ci_pic {display:flex; justify-content:space-between; gap:3.45%;} #contents .c_intro .ci_pic > div {flex:0 0 auto; display:flex; flex-direction:column;} #contents .c_intro .ci_pic img {width:100%; border-radius:5px} #contents .c_intro .ci_pic .t1 {flex:0 0 18.1%; justify-content:flex-start;} #contents .c_intro .ci_pic .t2 {flex:0 0 46.55%; align-self:center;} #contents .c_intro .ci_pic .t3 {flex:0 0 28.45%; justify-content:flex-end;} /*#contents .c_service {overflow:hidden; background-color:var(--black);}*/ /*#contents .c_service #plasticCanvas03 {position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; width:100%; height:100%; pointer-events:none;}*/ /*#contents .c_service .divarea > div > p b {line-height:20px; font-weight:100;}*/ /*#contents .c_service .divarea > div > p b:before {top:0; font-weight:100; color:var(--yellow); transition:0.3s}*/ /*#contents .c_service .divarea > div > p b:after {top:22px; color:var(--yellow); font-weight:600; white-space:nowrap; transition:0.3s}*/ /*#contents .c_service .divarea > div.aos-animate p b:before {top:-20px; transition-delay:0.5s;}*/ /*#contents .c_service .divarea > div.aos-animate p b:after {top:0; height:20px; transition-delay:0.7s;}*/ /*#contents .c_service .cs_list {width:100%}*/ /*#contents .c_service .cs_list > div {display:flex; align-items:flex-start; padding:40px 0}*/ /*#contents .c_service .cs_list .csl_img {flex-shrink:0; width:22.41%; height:185px; border-radius:20px; overflow:hidden}*/ /*#contents .c_service .cs_list img {display:block; width:100%; height:100%; object-fit:cover}*/ /*#contents .c_service .cs_list .csl_img + div {box-sizing:border-box; width:100%; padding-left:120px}*/ /*#contents .c_service .cs_list > div > div:first-child {flex-shrink:0; width:360px}*/ /*#contents .c_service .cs_list > div p > span br {display:none;}*/ /*#contents .c_service .cs_line {width:100%; height:1px; padding:0!important; background:var(--yellow); opacity:.1}*/ /*#contents .c_service .cs_line.t1 {opacity:.5}*/ #contents.about .ca_hero {overflow:hidden; opacity:0;} #contents.about .ca_hero.step01 {opacity:1; transition:0.3s;} #contents.about .ca_hero .cah_marquee {display:flex; justify-content:center; align-items:center; position:relative; height:180px;} #contents.about .ca_hero.step02 .cah_marquee {transform:translateY(0);} #contents.about .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.about .ca_hero .cah_marquee ul.t1 {animation-delay:-50s;} #contents.about .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.about .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.about .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.about .ca_hero .cah_txt span {display:inline-block;} #contents.about .ca_hero .cah_txt > span {display:inline-block; float:left; width:100%;} #contents.about .ca_hero.step03 .cah_txt > span:nth-child(1) span, #contents.about .ca_hero.step04 .cah_txt > span:nth-child(2) span, #contents.about .ca_hero.step05 .cah_txt > span:nth-child(3) span, #contents.about .ca_hero.step06 .cah_txt > span:nth-child(4) span {transform:translateY(0);} #contents.about .ca_hero .cah_txt b {display:inline-block; position:relative; font-weight:500;} #contents.about .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.about .ca_hero.step07 .cah_txt b.t1:before {clip-path:rect(0 100% 100% 0 round 0); transition:0.5s;} #contents.about .ca_hero.step08 .cah_txt b.t2:before {clip-path:rect(0 100% 100% 0 round 0); transition:0.5s;} #contents.about .ca_hero .cah_slogan {display:flex; align-items:flex-end; justify-content:space-between; opacity:0; transition:0.5s;} #contents.about .ca_hero.step09 .cah_slogan {opacity:1;} #contents.about .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.about .ca_hero .cah_slogan > p > span {display:inline-block; float:left; width:100%; text-align:left;} #contents.about .ca_hero .cah_slogan .cahs_since {display:flex; gap:15px; flex-shrink:0;} #contents.about .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.about .ca_hero .cah_slogan .cahs_since > p > span {display:inline-block; float:left; width:100%;} #contents.about .ca_hero .cah_slogan .cahs_since > p > span:last-child {font-weight:700;} #contents.about .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.about .ca_hero .cah_pic {position:relative; overflow:hidden; margin-top:120px; margin-bottom:120px; background-image:url("../images/about/pic_company.jpg");background-repeat:no-repeat;background-position:top;background-size:cover;background-attachment:fixed; font-size:0; line-height:0;} #contents.about .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.about.ios .ca_hero .cah_pic img {display:block;} #contents .ca_vision .divarea > div {width:100%;} #contents .ca_vision .divarea > div > div:first-child { border-top:1px solid var(--black)} #contents .ca_vision .divarea > div > div {display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; height:130px; padding:40px 0; box-sizing:border-box; border-bottom:1px solid rgba(17, 20, 38, 0.1)} #contents .ca_vision .divarea div p {position:relative} #contents .ca_vision .divarea div p + p {opacity:0} #contents .ca_vision .divarea div p i {opacity:1; display:block; position:absolute; top:50%; right:0; width:16px; aspect-ratio:1/1; margin-top:-8px; background:url("../images/common/icon_plus_small.svg") right center no-repeat; background-size:auto 100%; transition:0.3s} #contents .ca_vision .divarea div.on p i {opacity:0} #contents .ca_vision .cav_line {width:100%; height:1px; padding:0!important; background:var(--black); opacity:0.1} #contents .ca_vision .cav_line.t1 {opacity:1} #contents .ca_awards {padding:125px 0} #contents .ca_awards:before {content:""; position:absolute; left:60px; right:60px; top:0; height:1px; background-color:var(--black);} #contents .ca_awards .divarea > div {width:100%} #contents .ca_awards .caa_list li {position:relative; padding:30px 0;} #contents .ca_awards .caa_list li > div {display:flex; align-items:center; position:relative; opacity:0; transition:0.7s} #contents .ca_awards .aos-animate .caa_list li > div {opacity:1} #contents .ca_awards .caa_list li:before {content:""; position:absolute; right:0; bottom:0; width:0.01px; height:1px; background-color:rgba(17, 20, 38, 0.1); transition:0.7s;} #contents .ca_awards .aos-animate .caa_list li:before {width:100%} #contents .ca_awards .aos-animate .caa_list li:nth-child(1)::before {transition-delay:0s;} #contents .ca_awards .aos-animate .caa_list li:nth-child(2)::before {transition-delay:0.2s;} #contents .ca_awards .aos-animate .caa_list li:nth-child(3)::before {transition-delay:0.4s;} #contents .ca_awards .aos-animate .caa_list li:nth-child(4)::before {transition-delay:0.6s;} #contents .ca_awards .aos-animate .caa_list li:nth-child(5)::before {transition-delay:0.8s;} #contents .ca_awards .aos-animate .caa_list li:nth-child(6)::before {transition-delay:1s;} #contents .ca_awards .caa_list li div > p {display:flex; align-items:center; gap:10px; width:100%;} #contents .ca_awards .aos-animate .caa_list li:nth-child(1) > div {transition-delay:0.4s} #contents .ca_awards .aos-animate .caa_list li:nth-child(2) > div {transition-delay:0.5s} #contents .ca_awards .aos-animate .caa_list li:nth-child(3) > div {transition-delay:0.6s} #contents .ca_awards .aos-animate .caa_list li:nth-child(4) > div {transition-delay:0.7s} #contents .ca_awards .aos-animate .caa_list li:nth-child(5) > div {transition-delay:0.8s} #contents .ca_awards .aos-animate .caa_list li:nth-child(6) > div {transition-delay:0.9s} #contents .ca_awards .caa_list li p > span:first-child {display:flex; align-items:center; gap:10px; width:100%;} #contents .ca_awards .caa_list li p > span.text {flex-shrink:0; position:relative; width:auto; padding-left:10px; border-radius:30px; overflow:hidden; transition:0.3s} #contents .ca_awards .caa_list li p > span.text:before {content:""; position:absolute; top:0; left:0; bottom:0; z-index:-1; width:0; background:var(--black); transition:0.3s} #contents .ca_awards .caa_list li.hover p > span.text:before {width:100%;} #contents .ca_awards .caa_list li.hover p > span.text {padding-right:10px; background:var(--black); color:var(--yellow)} #contents .ca_awards .caa_list li div > strong {display:flex; align-items:center; flex-shrink:0; position:relative; width:360px; padding-left:19px;} #contents .ca_awards .caa_list li div > strong:before {content:""; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background-color:var(--black);} #contents .ca_awards .caa_list li div > strong > i {opacity:0; transition:0.3s} #contents .ca_awards .caa_list li.hover div > strong > i {margin-left:15px; opacity:1;} #contents .ca_awards .caa_list li div > p > span a {position:relative;} #contents .ca_awards .caa_list li div > p > span a > span {display:inline;} #contents .ca_awards .caa_list li.hover div > p > span a {font-weight:500;} #contents .ca_awards .caa_list li div > p > span a:before {content:""; position:absolute; left:0; bottom:5px; width:1%; height:1px; background-color:var(--black); opacity:0; transition:0.3s;} #contents .ca_awards .caa_list li.hover div > p > span a:before {width:100%; opacity:1;} #contents .ca_partners {padding:120px 0; background:var(--black)} #contents .ca_partners .c_marquee {display:flex; flex-wrap:nowrap; gap:90px;} #contents .ca_partners .c_marquee ul {display:flex; flex-wrap:nowrap; align-items:center; gap:90px; animation:slidemarquee2 50s linear infinite;} #contents .ca_partners .c_marquee.t1 {margin-top:90px;} #contents .ca_partners .c_marquee.t1 ul {animation:slidemarquee3 80s linear infinite;} @keyframes slidemarquee3 { 0% {transform:translateX(-200%);} 100% {transform:translateX(-100%);}} #contents .ca_partners .c_marquee li img {display:block} #contents .c_contact .btn_wrap {margin-top:-60px} #contents .c_contact .btn_wrap {transform:translate3d(0,50px,0)} #contents .c_contact .btn_wrap.aos-animate {transform:translateZ(0)} #contents .c_cate > ul {display:flex;} #contents .c_cate.t1 > ul {gap:80px;} #contents .c_cate li > div {display:flex; align-items:flex-start; font-family:"Saira";} #contents .c_cate li:nth-child(1) > div {transition-delay:2s} #contents .c_cate li:nth-child(2) > div {transition-delay:2.1s} #contents .c_cate li:nth-child(3) > div {transition-delay:2.2s} #contents .c_cate li:nth-child(4) > div {transition-delay:2.3s} #contents .c_cate > ul .cc_btn {position:relative; padding-left:28px; font-size:30px; color:var(--black); font-weight:300; line-height:50px; letter-spacing:-0.6px} #contents .c_cate > ul .cc_btn::before {content:""; display:block; position:absolute; top:50%; left:0; width:8px; aspect-ratio:1/1; margin-top:-4px; border-radius:100%; background:var(--black)} #contents .c_cate > ul .cc_btn:after {content:""; display:block; position:absolute; bottom:5px; left:28px; width:0; height:3px; background:var(--black); transition:0.3s} #contents .c_cate > ul .cc_btn:hover, #contents .c_cate > ul .cc_btn.on {font-weight:600; transition:0.3s} #contents .c_cate > ul .cc_btn:hover:after, #contents .c_cate > ul .cc_btn.on:after {width:calc(100% - 25px);} #contents .c_cate > ul > li > span {width:15px; margin-left:5px; font-size:12px; font-weight:400; line-height:20px; letter-spacing:-0.24px} #contents.inside .c_intro {padding-bottom:80px} #contents.inside .c_intro > .wrap > div.t1 {overflow:visible} #contents.inside .c_cate {padding-bottom:5vw} #contents.inside .c_intro + .c_inside {padding-top:0; margin-top:-5vw; z-index:1;} #contents.inside .c_inside .ci_news {margin-top:0} #contents.inside .ci_hero {padding-bottom:0; opacity:0; transition:0.3s;} #contents.inside .ci_hero.step01 {opacity:1;} #contents.inside .ci_hero .cih_wrap {display:inline-block; width:100%; position:relative;} #contents.inside .ci_hero .cih_title {display:flex; flex-wrap:wrap; gap:clamp(5px,1.04vw,20px); width:100%; position:relative;} #contents.inside .ci_hero .cih_title > p {display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; height:clamp(10px,18.22vw,350px); width:100%; text-align:center;} #contents.inside .ci_hero .cih_title > p:nth-child(1) {gap:20px; justify-content:space-between;} #contents.inside .ci_hero .cih_title > p:nth-child(3) {gap:20px;} #contents.inside .ci_hero .cih_title > p > strong {display:flex; gap:10px; align-items:center; justify-content:center; width:100%; font-size:clamp(10px,20.31vw,390px); font-weight:100; line-height:clamp(10px,18.22vw,350px); white-space:nowrap; letter-spacing:-0.5vw;} #contents.inside .ci_hero .cih_title > p > strong .regular {font-weight:400;} #contents.inside .ci_hero.step02 .cih_title > p:nth-child(1) > strong {transform:translateY(0);} #contents.inside .ci_hero.step06 .cih_title > p:nth-child(2) > strong {transform:translateY(0);} #contents.inside .ci_hero .cih_title > p > strong .semibold {font-weight:600;} #contents.inside .ci_hero .cih_title > p > strong > i {display:inline-block; width:1px; height:1px; background-size:100% auto; background-position:center; transition:1s;} #contents.inside .ci_hero .cih_title > p > span {display:flex; flex-wrap:wrap; align-content:flex-end; flex-shrink:0; position:relative; width:31.04vw; height:14.06vw;} #contents.inside .ci_hero .cih_title > p > span:before {content:""; position:absolute; left:0; right:0; top:0; height:clamp(10px,9.37vw,180px); background-image:url("../images/inside/pic_hero.jpg"); background-repeat:no-repeat;background-position:center;background-size:100% auto; clip-path:rect(0 0 100% 0 round 0); transition:0.5s;} #contents.inside .ci_hero.step03 .cih_title > p > span:before { clip-path:rect(0 100% 100% 0 round 0);} #contents.inside .ci_hero .cih_title > p > span > span {display:flex; width:100%;} #contents.inside .ci_hero .cih_title > p > span > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:0.9375vw; line-height:1.8229vw; letter-spacing:-0.5px; white-space:nowrap;} #contents.inside .ci_hero.step04 .cih_title > p > span > span:nth-child(1) > span, #contents.inside .ci_hero.step04 .cih_title > p > span > span:nth-child(2) > span {transform:translateY(0);} #contents.inside .ci_hero .cih_title > p > span > span i.squre {display:inline-block; width:0.7813vw; height:0.7813vw; border-radius:2px; background-color:var(--black);} #contents.inside .ci_hero .cih_title > p > em {display:flex; flex-wrap:wrap; align-content:space-between; height:clamp(10px,14.58vw,180px);} #contents.inside .ci_hero .cih_title > p > em > b {display:flex; align-items:center; gap:15px; opacity:0; transition:0.5s; transition-delay:0.3s;} #contents.inside .ci_hero.step07 .cih_title > p > em > b {opacity:1;} #contents.inside .ci_hero .cih_title > p > em > b > span {display:flex; flex-wrap:wrap; width:70px; font-size:12px; line-height:20px; letter-spacing:-0.25px;} #contents.inside .ci_hero .cih_title > p > em > b > span > span {display:inline-block; width:100%; text-align:left;} #contents.inside .ci_hero .cih_title > p > em > b > span > span.bold {font-weight:700;} #contents.inside .ci_hero .cih_title > p > em > b > mark {display:inline-block; vertical-align:middle; background-color:var(--blue); border-radius:20px; padding:0 20px; box-sizing:border-box; width:70px; font-size:25px; color:var(--yellow); font-weight:500; line-height:40px; letter-spacing:-0.5px;} #contents.inside .ci_hero .cih_title > p > em > span {display:inline-block; width:100%;} #contents.inside .ci_hero .cih_title > p > em > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:0.9375vw; line-height:1.8229vw; letter-spacing:-0.5px; white-space:nowrap;} #contents.inside .ci_hero.step07 .cih_title > p > em > span:nth-child(1) > span > span, #contents.inside .ci_hero.step07 .cih_title > p > em > span:nth-child(2) > span > span, #contents.inside .ci_hero.step07 .cih_title > p > em > span:nth-child(3) > span > span {transform:translateY(0);} #contents.inside .ci_hero .cih_title .ciht_stickblur01 {position:absolute; left:35.5%; top:45.5%; z-index:3; width:26vw; height:1.5vw; border-radius:0.75vw; animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.inside .ci_hero .cih_title .ciht_stickblur02 {position:absolute; left:36.5%; top:47.5%; z-index:3; width:24vw; height:1.5vw; border-radius:0.75vw; transform:rotate(50deg); animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.inside .ci_hero .cih_title .ciht_stickblur03 {position:absolute; left:34.3%; top:47%; z-index:3; width:26vw; height:1.5vw; border-radius:0.75vw; transform:rotate(102deg); animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.inside .ci_hero .cih_title .ciht_stickblur04 {position:absolute; left:33.5%; top:46.5%; z-index:3; width:27vw; height:1.5vw; border-radius:0.75vw; transform:rotate(-39deg); animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.inside .ci_hero .cih_title .ciht_stickcircle {position:absolute; left:46%; top:40%; width:6vw; height:6vw; border-radius:50%; animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.inside .ci_hero .cih_title .ciht_rect01 {position:absolute; left:40%; top:26.5%; width:18vw; height:18vw; border-radius:50%; z-index:3; transform:skew(-9deg, -1deg); -webkit-mask:radial-gradient(circle at center, transparent 61%, black 41%); mask:radial-gradient(circle at center, transparent 61%, black 41%); backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw); animation:5s infinite normal running updown;} #contents.inside .ci_hero .cih_title .ciht_rect02 {position:absolute; left:39%; top:25%; width:18vw; height:18vw; border-radius:50%; z-index:3; transform:skew(-9deg, -1deg); -webkit-mask:radial-gradient(circle at center, transparent 61%, black 41%); mask:radial-gradient(circle at center, transparent 61%, black 41%); backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw); animation:5s infinite normal running updown;} #contents.inside .ci_hero .cih_title > i {opacity:0; transition:0.7s;} #contents.inside .ci_hero .cih_pic {display:inline-block; position:absolute; left:50%; top:50%; z-index:3; width:clamp(1px,36.4583vw,700px); transform:translate(-50%,-50%) scale(1); font-size:0; line-height:0; pointer-events:none; aspect-ratio:1/1;} #contents.inside .ci_hero .cih_title .ciht_smallblur, #contents.inside .ci_hero .cih_title .ciht_bigblur, #contents.inside .ci_hero .cih_pic {opacity:0; aspect-ratio:1/1; animation:5s infinite normal running updown; transition:0.7s;} #contents.inside .ci_hero.step08 .cih_pic {opacity:0.7;} #contents.inside .ci_hero.step08 .cih_title > i {opacity:1;} #contents.inside .ci_hero .cih_pic > img {width:100%; height:auto;} #contents.inside .ci_hero + .c_inside {opacity:0; transition:0.3s;} #contents.inside .ci_hero.step08 + .c_inside {opacity:1;} #contents .c_inside .ci_news + div .morebtn {opacity:0; gap:20px; margin-top:80px; transition:0.7s} #contents .c_inside .ci_news + div .morebtn span {font-size:25px; letter-spacing:-0.5px; line-height:50px} #contents .c_inside .ci_news + div .morebtn span:after {top:50px} #contents .c_inside .ci_news + div .morebtn:hover span:after {top:0} #contents .c_inside .ci_news + div .morebtn:hover span:before {top:-50px} #contents .c_inside .ci_news + div .morebtn mark {padding:0 10px; border-radius:30px; background:var(--blue); box-shadow:0 10px 20px 0 rgba(1, 25, 247, 0.20); color:var(--yellow); font-family:"Saira"; font-size:20px; font-weight:500; letter-spacing:-0.8px; line-height:30px;} #contents .c_inside .ci_news + div .morebtn i {width:20px; aspect-ratio:1/1;} #contents .c_inside .ci_news.aos-animate + div .morebtn {opacity:1; margin-left:37px; transition-delay:1s} #contents .c_view {transform:none !important;} #contents .c_view .cv_wrap {display:flex; align-items:flex-start; position:relative; width:100%} #contents .c_view .titlearea {opacity:1; display:flex; flex-direction:column; align-items:flex-start; position:sticky; top:140px; padding-right:60px; box-sizing:border-box} #contents .c_view .titlearea h3 {display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:60px; margin-bottom:10px; font-size:clamp(35px,2.6042vw,50px)} #contents .c_view .titlearea h3 > mark {padding:0 15px; border-radius:30px; background:var(--black); color:var(--yellow)} #contents .c_view .titlearea h3 > mark + span {line-height:0} #contents .c_view .titlearea h3 > mark + span span {line-height:clamp(50px,3.6458vw,70px)} #contents .c_view .titlearea h3 ~ a {margin-top:60px} #contents.contact .c_view .titlearea h3 {display:inline-block; gap:0; margin-bottom:30px; margin-top:0; line-height:0; font-size:clamp(25px,2.6042vw,50px)} #contents.contact .c_view .titlearea h3 span {line-height:0} #contents.contact .c_view .titlearea h3 span span {line-height:clamp(40px,4.1667vw,80px)} #contents.contact .c_view .titlearea h3 span span mark {word-break:break-all;} #contents .c_view .cv_content {opacity:0!important; width:66.666%; padding-left:60px; font-size:25px; font-weight:200; line-height:40px; word-break:keep-all;} #contents .c_view .cv_content.aos-animate {opacity:1!important;} #contents .c_view .cv_content strong {font-weight:500;} #contents .c_view .cv_content .cvc_img {width:100%;} #contents .c_view .cv_content .cvc_img img {width:100%; border-radius:5px;} #contents .c_view .cv_content img {width:100% !important; height:auto !important; /*margin-top:60px;*/ max-width:100%; border-radius:5px; font-size:0; line-height:0;} #contents .c_view + .c_inside {padding:0} #contents.contact .c_intro {overflow:visible} #contents .c_view .cv_content form {width:100%} #contents .c_view .cv_content form > .divarea {padding-left:0;} #contents .c_view .cv_content form > .divarea > div {padding-left:0; padding-top:80px; border-top:1px solid rgba(17, 20, 38, 0.5)} #contents .c_view .cv_content form > .divarea > .btn_wrap {border-top:none} #contents .c_view .cv_content form > .divarea + .divarea {} #contents .c_view .cv_content form > .divarea > div {width:100%} #contents .c_view .cv_content form #agree + span mark {text-decoration:underline; text-underline-position:under} #contents .c_view .cv_content p {display:block;} #contents .c_view .cv_content p + p {margin-top:60px;} #contents .c_view .cv_content p img {float:left;} #contents .c_view .cv_content .col2 {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:40px;} #contents .c_view .cv_content .col2 img {width:calc(50% - 20px) !important; height:auto; margin-top:0;} #contents.inside .c_view .divarea > div, #contents.inside .c_view .divarea > p, #contents.inside .c_view .divarea > ul, #contents.inside .c_view .divarea > .decotitle {padding-left:0} #contents.contact .cc_hero {padding-bottom:0; opacity:0;} #contents.contact .cc_hero.step01 {opacity:1;} #contents.contact .cc_hero .cch_wrap {display:inline-block; width:100%; position:relative;} #contents.contact .cc_hero .cch_title {display:flex; flex-wrap:wrap; gap:clamp(5px,1.04vw,20px); width:100%; position:relative;} #contents.contact .cc_hero .cch_title > p {display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; height:clamp(10px,9.4vw,180px); width:100%; text-align:center;} #contents.contact .cc_hero .cch_title > p:nth-child(1) {gap:20px; justify-content:space-between;} #contents.contact .cc_hero .cch_title > p:nth-child(3) {gap:20px;} #contents.contact .cc_hero .cch_title > p > strong {display:flex; gap:10px; align-items:center; justify-content:center; width:100%; font-size:clamp(10px,9.4vw,180px); font-weight:100; line-height:clamp(10px,9.4vw,180px); white-space:nowrap; letter-spacing:-0.375vw;} #contents.contact .cc_hero .cch_title > p:nth-child(3) > strong {width:auto;} #contents.contact .cc_hero.step01 .cch_title > p:nth-child(1) > strong {transform:translateY(0);} #contents.contact .cc_hero.step03 .cch_title > p:nth-child(2) > strong {width:auto; transform:translateY(0);} #contents.contact .cc_hero.step06 .cch_title > p:nth-child(3) > strong {transform:translateY(0);} #contents.contact .cc_hero .cch_title > p > strong .semibold {font-weight:600;} #contents.contact .cc_hero .cch_title > p > strong > i {display:inline-block; width:1px; height:1px; background-size:100% auto; background-position:center; transition:1s;} #contents.contact .cc_hero .cch_title > p > strong > i.circle {background-image:url("../images/contact/icon_circle.svg");} #contents.contact .cc_hero .cch_title > p > strong > i.ring {background-image:url("../images/contact/icon_ring.svg"); clip-path:rect(0 100% 0 0 round 0);} #contents.contact .cc_hero .cch_title > p > strong > i.sphere {background-image:url("../images/contact/icon_sphere.svg"); opacity:0;} #contents.contact .cc_hero.step02 .cch_title > p > strong > i.circle {width:clamp(10px,8.3333vw,160px); height:clamp(10px,8.3333vw,160px);} #contents.contact .cc_hero.step03 .cch_title > p > strong > i.circle {animation:30s linear infinite rotate_normal;} #contents.contact .cc_hero.step04 .cch_title > p > strong > i.ring {width:clamp(10px,8.3333vw,160px); height:clamp(10px,8.3333vw,160px);} #contents.contact .cc_hero.step05 .cch_title > p > strong > i.ring {clip-path:rect(0 100% 100% 0 round 0);} #contents.contact .cc_hero.step06 .cch_title > p > strong > i.ring {animation:5s linear infinite rotate_y;} #contents.contact .cc_hero.step07 .cch_title > p > strong > i.sphere {width:clamp(10px,8.3333vw,160px); height:clamp(10px,8.3333vw,160px);} #contents.contact .cc_hero.step08 .cch_title > p > strong > i.sphere {opacity:1;} #contents.contact .cc_hero.step08 .cch_title > p > strong > i.sphere {animation:5s infinite normal running updown;} #contents.contact .cc_hero .cch_title > p > strong > i.sphere {background-image:url("../images/contact/icon_sphere.svg");} #contents.contact .cc_hero .cch_title > p > span {display:flex; flex-wrap:wrap; flex-shrink:0; width:31.5104vw; height:7.2917vw;} #contents.contact .cc_hero .cch_title > p > span > span {display:flex; width:100%;} #contents.contact .cc_hero .cch_title > p > span > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:0.9375vw; line-height:1.8229vw; letter-spacing:-0.5px; white-space:nowrap;} #contents.contact .cc_hero.step09 .cch_title > p > span > span:nth-child(1) > span, #contents.contact .cc_hero.step09 .cch_title > p > span > span:nth-child(2) > span, #contents.contact .cc_hero.step09 .cch_title > p > span > span:nth-child(3) > span, #contents.contact .cc_hero.step09 .cch_title > p > span > span:nth-child(4) > span {transform:translateY(0);} #contents.contact .cc_hero .cch_title > p > span > span i.squre {display:inline-block; width:0.7813vw; height:0.7813vw; border-radius:2px; background-color:var(--black);} #contents.contact .cc_hero .cch_title > p > em {display:flex;} #contents.contact .cc_hero .cch_title > p > em > b {display:flex; align-items:center; gap:15px; opacity:0; transition:0.5s; transition-delay:0.3s;} #contents.contact .cc_hero.step09 .cch_title > p > em > b {opacity:1;} #contents.contact .cc_hero .cch_title > p > em > b > span {display:flex; flex-wrap:wrap; width:95px; font-size:12px; line-height:20px; letter-spacing:-0.25px;} #contents.contact .cc_hero .cch_title > p > em > b > span > span {display:inline-block; width:100%; text-align:left;} #contents.contact .cc_hero .cch_title > p > em > b > span > span.bold {font-weight:700;} #contents.contact .cc_hero .cch_title > p > em > b > mark {display:inline-block; vertical-align:middle; box-sizing:border-box; width:85px; 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.contact .cc_hero .cch_title > p > em > span {display:none; flex-wrap:wrap; flex-shrink:0; width:31.5104vw; height:7.2917vw;} #contents.contact .cc_hero .cch_title > p > em > span > span {display:flex; width:100%;} #contents.contact .cc_hero .cch_title > p > em > span > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:0.9375vw; line-height:1.8229vw; letter-spacing:-0.5px; white-space:nowrap;} #contents.contact .cc_hero.step09 .cch_title > p > em > span > span:nth-child(1) > span, #contents.contact .cc_hero.step09 .cch_title > p > em > span > span:nth-child(2) > span, #contents.contact .cc_hero.step09 .cch_title > p > em > span > span:nth-child(3) > span, #contents.contact .cc_hero.step09 .cch_title > p > em > span > span:nth-child(4) > span {transform:translateY(0);} #contents.contact .cc_hero .cch_title > p > em > span > span i.squre {display:inline-block; width:0.7813vw; height:0.7813vw; border-radius:2px; background-color:var(--black);} /* career */ #contents.career .cc_hero {opacity:0;} #contents.career .cc_hero.step01 {opacity:1;} #contents.career .cc_hero .cch_wrap {display:inline-block; width:100%; position:relative;} #contents.career .cc_hero .cch_title {display:flex; flex-wrap:wrap; gap:clamp(5px,1.04vw,20px); width:100%; position:relative;} #contents.career .cc_hero .cch_title > p {display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; height:clamp(10px,9.4vw,180px); width:100%; text-align:center;} #contents.career .cc_hero .cch_title > p:nth-child(4) {gap:20px; justify-content:space-between;} #contents.career .cc_hero .cch_title > p > strong {display:flex; gap:10px; align-items:center; justify-content:center; width:100%; font-size:clamp(10px,9.4vw,180px); font-weight:100; line-height:clamp(10px,9.4vw,180px); white-space:nowrap; letter-spacing:-0.375vw;} #contents.career .cc_hero.step01 .cch_title > p:nth-child(3) > strong {transform:translateY(0);} #contents.career .cc_hero.step02 .cch_title > p:nth-child(4) > strong {transform:translateY(0);} #contents.career .cc_hero.step03 .cch_title > p:nth-child(5) > strong {transform:translateY(0);} #contents.career .cc_hero .cch_title > p:nth-child(4) > strong {width:60vw; justify-content:space-between;} #contents.career .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:100%; transition:2s;} #contents.career .cc_hero .cch_title > p > strong .semibold {font-weight:600;} #contents.career .cc_hero .cch_title > p > strong > i {display:inline-block; width:clamp(10px,8.3333vw,160px); height:clamp(10px,8.3333vw,160px); background-image:url("../images/career/icon_star.svg"); background-size:100% auto; background-position:center; transition:2s;} #contents.career .cc_hero.step06 .cch_title > p > strong > i {animation:3s infinite normal running rotate;} #contents.career .cc_hero .cch_title > p > span {display:flex; flex-wrap:wrap; flex-shrink:0; width:350px; height:105px;} #contents.career .cc_hero .cch_title > p > span > span {display:flex; width:100%;} #contents.career .cc_hero .cch_title > p > span > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:18px; line-height:35px; letter-spacing:-0.5px; white-space:nowrap;} #contents.career .cc_hero .cch_title > p > span > span:last-child > span {justify-content:flex-end;} #contents.career .cc_hero.step05 .cch_title > p > span > span:nth-child(1) > span, #contents.career .cc_hero.step05 .cch_title > p > span > span:nth-child(2) > span, #contents.career .cc_hero.step05 .cch_title > p > span > span:nth-child(3) > span {transform:translateY(0);} #contents.career .cc_hero .cch_title > p > span > span i.squre {display:inline-block; width:15px; height:15px; border-radius:2px; background-color:var(--black);} #contents.career .cc_hero .cch_title > p > span > span i.star {display:inline-block; width:18px; height:18px; background-image:url("../images/career/icon_star.svg"); background-size:100% auto; background-position:center;} #contents.career .cc_hero .cch_title > span {display:none; flex-wrap:wrap; flex-shrink:0; width:350px; height:105px;} #contents.career .cc_hero .cch_title > span > span {display:flex; width:100%;} #contents.career .cc_hero .cch_title > span > span > span {display:flex; align-items:center; gap:5px; width:100%; font-size:18px; line-height:35px; letter-spacing:-0.5px; white-space:nowrap;} #contents.career .cc_hero .cch_title > span > span:last-child > span {justify-content:flex-end;} #contents.career .cc_hero.step05 .cch_title > span > span:nth-child(1) > span, #contents.career .cc_hero.step05 .cch_title > span > span:nth-child(2) > span, #contents.career .cc_hero.step05 .cch_title > span > span:nth-child(3) > span {transform:translateY(0);} #contents.career .cc_hero .cch_title > span > span i.squre {display:inline-block; width:15px; height:15px; border-radius:2px; background-color:var(--black);} #contents.career .cc_hero .cch_title > span > span i.star {display:inline-block; width:18px; height:18px; background-image:url("../images/career/icon_star.svg"); background-size:100% auto; background-position:center;} #contents.career .cc_hero .cch_title .ccht_smallblur {position:absolute; left:52.9%; top:3%; z-index:3; width:clamp(1px,3.17vw,61px); height:clamp(1px,5.2083vw,100px); transform:translateX(-50%) rotate(50deg) scale(1); border-radius:54% 50% 61% 50% / 49% 67% 43% 61%; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.career .cc_hero .cch_title .ccht_bigblur {position:absolute; left:50%; top:51.7%; z-index:3; width:clamp(1px,19.5vw,384px); height:clamp(1px,23.2292vw,446px); transform:translate(-50%,-50%) rotate(50deg) scale(1); border-radius:54% 50% 61% 50% / 49% 67% 43% 61%; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw);} #contents.career .cc_hero .cch_pic {display:inline-block; position:absolute; left:50%; top:50%; z-index:3; width:clamp(1px,43.7vw,840px); transform:translate(-50%,-50%) scale(1); font-size:0; line-height:0; pointer-events:none; aspect-ratio:1/1;} #contents.career .cc_hero .cch_title .ccht_smallblur, #contents.career .cc_hero .cch_title .ccht_bigblur, #contents.career .cc_hero .cch_pic {opacity:0; aspect-ratio:1/1; animation:5s infinite normal running updown; transition:0.7s;} #contents.career .cc_hero.step06 .cch_title .ccht_smallblur, #contents.career .cc_hero.step06 .cch_title .ccht_bigblur {opacity:1; transition:0.7s;} #contents.career .cc_hero.step06 .cch_pic {opacity:0.7;} #contents.career .cc_hero .cch_pic > img {width:100%; height:auto;} @keyframes updown {0%{margin-top:-1.04vw;} 50%{margin-top:1.04vw;} 100%{margin-top:-1.04vw;}} @keyframes rotate {0%{transform:rotate(0)} 70%{transform:rotate(360deg)} 100%{transform:rotate(360deg)}} @keyframes rotate_normal {0%{transform:rotate(0)} 100%{transform:rotate(-360deg)}} @keyframes rotate_y {0%{transform:rotateX(0)} 50%{transform:rotateX(35deg)} 100%{transform:rotateX(0deg)}} #contents.career .cc_hero .cch_decowrap {display:inline-block; width:100%;} #contents.career .cc_hero .cch_decowrap {margin-top:10px; height:60px;} #contents.career .cc_hero .cch_deco > span {display:flex; align-items:flex-end; position:relative; box-sizing:border-box; width:100%; height:12px; padding-left:15px; transition:0.5s; transition-delay:0.3s; text-align:left;} #contents.career .cc_hero .wrap > .divarea {margin-top:140px; opacity:0 !important; transition:0.3s;} #contents.career .cc_hero.step07 .wrap > .divarea {opacity:1 !important;} #contents.career .cc_hero.step07 .divarea .cch_deco > span {height:60px;} #contents.career .cc_hero .titlearea div {width:clamp(120px, 10.4167vw, 200px); aspect-ratio:4/3; border-radius:5px; background:url("../images/career/pic_introcareer01.jpg") center center no-repeat; background-size:100%} #contents.career .cc_hero .divarea > div {display:flex; align-items:flex-end; justify-content:space-between; width:100%} #contents.career .cc_hero .divarea div.t1 {width:37.5vw; aspect-ratio:1/1; border-radius:5px; background:url("../images/career/pic_introcareer02.jpg") center center no-repeat; background-size:100%} #contents.career .cc_hero .divarea div.t2 {width:19.7917vw; aspect-ratio:190/253; border-radius:5px; background:url("../images/career/pic_introcareer03.jpg") center center no-repeat; background-size:100%} #contents.career section:not(.cc_hero):before {content:""; position:absolute; left:auto !important; right:60px; width:1%; top:0; height:1px; background-color:var(--black); opacity:0; transition:0.3s;} #contents.career section:not(.cc_hero).aos-animate:before {width:calc(100% - 120px); opacity:1;} #contents.career .cc_hero .cch_deco > span:before {content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background-color:var(--black);} #contents.career .cc_hero .cch_deco > span > span {display:inline-block; width:100%; font-size:12px; line-height:12px;} #contents.career .cc_text {display:flex; flex-direction:column; gap:60px; align-items:flex-start} #contents.career .cc_text h3 {font-size:45px; font-weight:700; letter-spacing:-0.9px; line-height:50px; word-break:keep-all} #contents.career .cc_work .divarea + div {margin-top:100px} #contents.career .cc_work .ccw_contents {display:flex; flex-wrap:wrap; row-gap:160px; position:relative; width:100%; padding-top:100px} #contents.career .cc_work .ccw_contents::before {content:""; display:block; position:absolute; right:0; left:auto; top:0; width:1%; height:1px; background:rgba(17, 20, 38, 0); transition:0.3s} #contents.career .cc_work .ccw_contents.aos-animate::before {opacity:1; width:calc(100% - 40px); background:rgba(17, 20, 38, 0.5);} #contents.career .cc_work .ccw_contents li {display:flex; flex-direction:column; align-items:flex-start; width:50%} #contents.career .cc_work .ccw_contents .ccwc_icon {position:relative; width:60px; height:60px; margin-bottom:60px;} #contents.career .cc_work .ccw_contents .ccwc_icon i {display:block; box-sizing:border-box; transition:0.6s 0.3s;} #contents.career .cc_work .ccw_contents .ccwc_icon i::after {box-sizing:border-box;transition-delay:0.5s !important; transition:0.6s;} #contents.career .cc_work .ccw_contents li.t1 .ccwc_icon i:nth-child(1) {width:100%; height:100%; border:3px solid var(--black)} #contents.career .cc_work .ccw_contents li.t1 .ccwc_icon i:nth-child(2) {position:absolute; right:0; bottom:0; width:100%; height:100%; border:3px solid var(--black); border-radius:30px 30px 0 30px; transform:scale(0); transform-origin:100% 100%;} #contents.career .cc_work .ccw_contents li.aos-animate.t1 .ccwc_icon i:nth-child(2) {transform:scale(1)} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(1) {width:100%; height:100%; border:3px solid var(--black)} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2), #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3) {display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; width:100%; height:100%;} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2)::after {content:""; position:absolute; width:33px; aspect-ratio:1/1; border:3px solid var(--black); transform:rotate(45deg);} #contents.career .cc_work .ccw_contents li.aos-animate.t2 .ccwc_icon i:nth-child(2)::after {transform:rotate(135deg);} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3)::after {content:""; position:absolute; width:15px; aspect-ratio:1/1; border:3px solid var(--black); border-radius:100%; transform:scale(0); opacity:0} #contents.career .cc_work .ccw_contents li.aos-animate.t2 .ccwc_icon i:nth-child(3)::after {transform:scale(1); opacity:1} #contents.career .cc_work .ccw_contents li.t3 .ccwc_icon i:nth-child(1) {width:100%; aspect-ratio:1/1; border:3px solid var(--black);} #contents.career .cc_work .ccw_contents li.aos-animate.t3 .ccwc_icon i:nth-child(1) {border-radius:0 60px 0 0;} #contents.career .cc_work .ccw_contents li.t3 .ccwc_icon i:nth-child(2) {position:absolute; top:0; left:0; width:100%; aspect-ratio:1/1; border:3px solid var(--black);} #contents.career .cc_work .ccw_contents li.aos-animate.t3 .ccwc_icon i:nth-child(2) {border-radius:60px 0 0 0;} #contents.career .cc_work .ccw_contents li.t4 .ccwc_icon i {display:flex; align-items:center; justify-content:center; width:100%; height:100%;} #contents.career .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(1)::after {content:""; width:34px; aspect-ratio:1/2; border:3px solid var(--black); border-radius:30px;} #contents.career .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(2) {position:absolute; top:0; left:0; width:100%; height:100%;} #contents.career .cc_work .ccw_contents li.t4 .ccwc_icon i:nth-child(2)::after {content:""; width:34px; aspect-ratio:1/2; border:3px solid var(--black); border-radius:30px;} #contents.career .cc_work .ccw_contents li.aos-animate.t4 .ccwc_icon i:nth-child(1)::after {transform:rotate(45deg)} #contents.career .cc_work .ccw_contents li.aos-animate.t4 .ccwc_icon i:nth-child(2)::after {transform:rotate(-45deg)} #contents.career .cc_work .ccw_contents .ccwc_icon + div {display:flex; flex-direction:column; align-items:flex-start} #contents.career .cc_work .ccw_contents li > .text {box-sizing:border-box; padding-right:10%;} #contents.career .cc_work .ccw_contents li > div strong {margin-bottom:5px; font-size:40px; font-weight:600; line-height:50px; letter-spacing:-0.8px;} #contents.career .cc_work .ccw_contents li > div span {margin-bottom:20px;} #contents.career .cc_benefit .divarea + div {margin-top:80px} #contents.career .cc_benefit .ccb_contents {display:flex; flex-wrap:wrap; row-gap:80px; column-gap:10px} #contents.career .cc_benefit .ccb_contents li {display:flex; flex-direction:column; align-items:flex-start; width:calc((100% - 30px) / 4)} #contents.career .cc_benefit .ccb_contents li > strong, #contents.career .cc_benefit .ccb_contents li > .text {box-sizing:border-box; padding-right:10%;} #contents.career .cc_benefit .ccb_contents .ccbc_icon {display:flex; align-items:center; justify-content:center; position:relative; width:100px; aspect-ratio:1/1; margin-bottom:15px} #contents.career .cc_benefit .ccb_contents .ccbc_icon i {width:65px; aspect-ratio:65/60; background:url("../images/icon_benefit01.svg") center center no-repeat; background-size:100%} #contents.career .cc_benefit .ccb_contents .t2 .ccbc_icon i {background-image:url("../images/icon_benefit02.svg")} #contents.career .cc_benefit .ccb_contents .t3 .ccbc_icon i {background-image:url("../images/icon_benefit03.svg")} #contents.career .cc_benefit .ccb_contents .t4 .ccbc_icon i {background-image:url("../images/icon_benefit04.svg")} #contents.career .cc_benefit .ccb_contents .t5 .ccbc_icon i {background-image:url("../images/icon_benefit05.svg")} #contents.career .cc_benefit .ccb_contents .t6 .ccbc_icon i {background-image:url("../images/icon_benefit06.svg")} #contents.career .cc_benefit .ccb_contents .t7 .ccbc_icon i {background-image:url("../images/icon_benefit07.svg")} #contents.career .cc_benefit .ccb_contents .t8 .ccbc_icon i {background-image:url("../images/icon_benefit08.svg")} #contents.career .cc_benefit .ccb_contents .t9 .ccbc_icon i {background-image:url("../images/icon_benefit09.svg")} #contents.career .cc_benefit .ccb_contents .t10 .ccbc_icon i {background-image:url("../images/icon_benefit10.svg")} #contents.career .cc_benefit .ccb_contents .t11 .ccbc_icon i {background-image:url("../images/icon_benefit11.svg")} #contents.career .cc_benefit .ccb_contents .t12 .ccbc_icon i {background-image:url("../images/icon_benefit12.svg")} #contents.career .cc_benefit .ccb_contents .t13 .ccbc_icon i {background-image:url("../images/icon_benefit13.svg")} #contents.career .cc_benefit .ccb_contents .t14 .ccbc_icon i {background-image:url("../images/icon_benefit14.svg")} #contents.career .cc_benefit .ccb_contents .ccbc_icon mark {display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%;} #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {content:""; display:block;width:65px; aspect-ratio:65/60; background:url("../images/icon_benefit01_on.svg") center center no-repeat; background-size:100%; opacity:0; transition:0.6s} #contents.career .cc_benefit .ccb_contents.aos-animate .ccbc_icon mark::after {opacity:1} #contents.career .cc_benefit .ccb_contents .t2 .ccbc_icon mark::after {background-image:url("../images/icon_benefit02_on.svg");transition-delay:0.1s;} #contents.career .cc_benefit .ccb_contents .t3 .ccbc_icon mark::after {background-image:url("../images/icon_benefit03_on.svg");transition-delay:0.2s;} #contents.career .cc_benefit .ccb_contents .t4 .ccbc_icon mark::after {background-image:url("../images/icon_benefit04_on.svg");transition-delay:0.3s;} #contents.career .cc_benefit .ccb_contents .t5 .ccbc_icon mark::after {background-image:url("../images/icon_benefit05_on.svg");transition-delay:0.4s;} #contents.career .cc_benefit .ccb_contents .t6 .ccbc_icon mark::after {background-image:url("../images/icon_benefit06_on.svg");transition-delay:0.5s;} #contents.career .cc_benefit .ccb_contents .t7 .ccbc_icon mark::after {background-image:url("../images/icon_benefit07_on.svg");transition-delay:0.6s;} #contents.career .cc_benefit .ccb_contents .t8 .ccbc_icon mark::after {background-image:url("../images/icon_benefit08_on.svg");transition-delay:0.7s;} #contents.career .cc_benefit .ccb_contents .t9 .ccbc_icon mark::after {background-image:url("../images/icon_benefit09_on.svg");transition-delay:0.8s;} #contents.career .cc_benefit .ccb_contents .t10 .ccbc_icon mark::after {background-image:url("../images/icon_benefit10_on.svg");transition-delay:0.9s;} #contents.career .cc_benefit .ccb_contents .t11 .ccbc_icon mark::after {background-image:url("../images/icon_benefit11_on.svg");transition-delay:1.0s;} #contents.career .cc_benefit .ccb_contents .t12 .ccbc_icon mark::after {background-image:url("../images/icon_benefit12_on.svg");transition-delay:1.1s;} #contents.career .cc_benefit .ccb_contents .t13 .ccbc_icon mark::after {background-image:url("../images/icon_benefit13_on.svg");transition-delay:1.2s;} #contents.career .cc_benefit .ccb_contents .t14 .ccbc_icon mark::after {background-image:url("../images/icon_benefit14_on.svg");transition-delay:1.3s;} #contents.career .cc_position {padding-bottom:120px} /* popup - cc_position */ #positionPopup {display:block; position:fixed; inset:0; z-index:1000; pointer-events:none;} #positionPopup.active {pointer-events:auto;} #positionPopup .pp_dim {position:fixed; top:0; bottom:0; left:0; right:0; background-color:#000; opacity:0; transition:0.3s;} #positionPopup.active .pp_dim {opacity:0.7;} #positionPopup .pp_contents {position:absolute; top:0; right:-100%; overflow:hidden; width:100%; max-width:1680px; height:100vh; margin:0; background-color:#fff; transition:0.3s;} #positionPopup.active .pp_contents {right:0;} #positionPopup .pp_contents .ppc_wrap {display:flex; height:100%;} #positionPopup .pp_contents .ppc_side {display:flex; flex-direction:column; justify-content:space-between; position:relative; box-sizing:border-box; width:480px; padding:20px; background-color:#0a2cff; color:#fff;} #positionPopup .pp_contents .ppc_side:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; background-image:url("../images/pic_plasticpopup.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; pointer-events:none;} #positionPopup .pp_contents .ppc_side .ppcs_top {box-sizing:border-box; width:100%; padding:10px;} #positionPopup .pp_contents .ppc_side .ppcs_top .ppcst_subtitle {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; font-family:"Saira"; font-size:24px; font-weight:100; line-height:40px; color:#fff; letter-spacing:-0.48px; word-break:keep-all; text-align:left; text-transform:uppercase;} #positionPopup .pp_contents .ppc_side .ppcs_top .ppcst_subtitle:after {content:''; display:block; width:16px; height:4px; border-radius:2px; background-color:#FEE608;} #positionPopup .pp_contents .ppc_side .ppcs_top .ppcst_title {display:block; margin-top:15px; font-family:"Saira"; font-size:50px; font-weight:500; line-height:60px; color:#fff; letter-spacing:-1px; word-break:keep-all; text-align:left; text-transform:uppercase;} #positionPopup .pp_contents .ppc_side .ppcs_top .ppcst_title span {display:block;} #positionPopup .pp_contents .ppc_side .ppcs_bottom {display:block; width:100%;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply {display:flex; flex-direction:row; justify-content:space-between; align-items:center; box-sizing:border-box; width:100%; padding:20px; border:1px solid #fff; border-radius:10px; background-color:#fff; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .icon {background-repeat:no-repeat; background-position:center; background-size:100% auto; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .icon.apply {width:48px; height:48px; background-image:url("../images/career/icon_apply.svg");} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .icon.arrow {width:36px; height:36px; background-image:url("../images/career/icon_arrowBig.svg");} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .ppcsba_textwrap {display:flex; flex-direction:column; width:calc(100% - 114px);} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .ppcsba_textwrap p {color:#111426; font-family:"Saira"; font-size:12px; font-weight:400; line-height:20px; letter-spacing:-0.24px; text-align:left; word-break:keep-all; text-transform:uppercase; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply .ppcsba_textwrap strong {color:#111426; font-size:20px; font-weight:700; line-height:30px; letter-spacing:-0.4px; text-align:left; word-break:keep-all; text-transform:uppercase; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply:hover {background-color:transparent;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply:hover .ppcsba_textwrap p {color:#fff;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply:hover .ppcsba_textwrap strong {color:#fff;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply:hover .icon.apply {background-image:url("../images/career/icon_apply_w.svg");} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_apply:hover .icon.arrow {filter:invert(99%) sepia(99%) saturate(2%) hue-rotate(343deg) brightness(103%) contrast(100%);} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap {display:block; overflow:hidden; width:100%; margin-top:10px;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap > button {display:flex; flex-direction:row; justify-content:space-between; align-items:center; box-sizing:border-box; width:calc(50% - 5px); border-radius:5px; border:1px solid #fff; padding:15px 10px; color:#fff; font-family:"Saira"; font-size:14px; font-weight:400; line-height:20px; letter-spacing:-0.28px; word-break:keep-all; text-transform:uppercase; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap .ppcsb_left {float:left; text-align:right;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap .ppcsb_left:before {content:''; display:block; width:18px; background-image:url("../images/career/icon_arrowSml.svg"); background-repeat:no-repeat; background-position:center; background-size:100% auto; filter:invert(99%) sepia(99%) saturate(2%) hue-rotate(343deg) brightness(103%) contrast(100%); aspect-ratio:1/1; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap .ppcsb_right {float:right; text-align:left;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap .ppcsb_right:after {content:''; display:block; width:18px; background-image:url("../images/career/icon_arrowSml.svg"); background-repeat:no-repeat; background-position:center; background-size:100% auto; filter:invert(99%) sepia(99%) saturate(2%) hue-rotate(343deg) brightness(103%) contrast(100%); transform:rotate(180deg); aspect-ratio:1/1; transition:0.3s;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap > button:hover {background-color:#fff; color:#000;} #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap button:hover:before, #positionPopup .pp_contents .ppc_side .ppcs_bottom .ppcsb_btnwrap button:hover:after {filter:none;} #positionPopup .pp_contents .ppc_body {overflow:auto; box-sizing:border-box; width:calc(100% - 480px); padding:100px;} #positionPopup .pp_contents .ppc_body > h3 {display:block; font-family:"Saira"; font-size:50px; font-weight:500; line-height:60px; color:#111426; letter-spacing:-1px; text-align:left; word-break:keep-all; text-transform:uppercase;} #positionPopup .pp_contents .ppc_body > strong {display:block; font-size:50px; font-weight:700; line-height:70px; color:#111426; letter-spacing:-1px; text-align:left; word-break:keep-all; text-transform:uppercase;} #positionPopup .pp_contents .ppc_body .ppcb_area {display:block; width:100%;} #positionPopup .pp_contents .ppc_body strong + .ppcb_area {margin-top:80px;} #positionPopup .pp_contents .ppc_body .ppcb_area + .ppcb_area {margin-top:40px; padding-top:40px; border-top:1px solid rgba(17, 20, 38, 0.10);} #positionPopup .pp_contents .ppc_body .ppcb_area + .ppcb_area .ppcb_box + .ppcb_box {margin-top:20px; padding-top:20px; border-top:1px solid rgba(17, 20, 38, 0.10);} #positionPopup .pp_contents .ppc_body .ppcb_area h4 {display:flex; flex-direction:row; align-items:center; font-size:20px; font-weight:700; line-height:30px; color:#111426; letter-spacing:-0.4px; text-align:left; word-break:keep-all;} #positionPopup .pp_contents .ppc_body .ppcb_area h4:before {content:''; display:block; width:36px; height:36px; margin-right:12px; background-repeat:no-repeat; background-position:center; background-size:100% auto;} #positionPopup .pp_contents .ppc_body .ppcb_area.work h4:before {background-image:url("../images/career/icon_work.svg");} #positionPopup .pp_contents .ppc_body .ppcb_area.task h4:before {background-image:url("../images/career/icon_task.svg");} #positionPopup .pp_contents .ppc_body .ppcb_area.employee h4:before {background-image:url("../images/career/icon_employee.svg");} #positionPopup .pp_contents .ppc_body .ppcb_area p {display:block; font-size:16px; font-weight:400; line-height:30px; color:#111426; letter-spacing:-0.32px; text-align:left; word-break:keep-all;} #positionPopup .pp_contents .ppc_body .ppcb_area p span {display:block;} #positionPopup .pp_contents .ppc_body .ppcb_area li {display:block; position:relative; box-sizing:border-box; padding-left:24px; font-size:16px; font-weight:400; line-height:30px; color:#111426; letter-spacing:-0.32px; text-align:left; word-break:keep-all;} #positionPopup .pp_contents .ppc_body .ppcb_area li:before {content:''; display:block; position:absolute; top:13px; left:10px; width:3px; height:3px; border-radius:50%; background-color:#111426;} #positionPopup .pp_contents .ppc_body .ppcb_area .ppcb_box strong {display:block; font-size:18px; font-weight:600; line-height:30px; color:#111426; letter-spacing:-0.36px; text-transform:uppercase; text-align:left; word-break:keep-all;} #positionPopup .pp_contents .ppc_body .ppcb_area h4 + p, #positionPopup .pp_contents .ppc_body .ppcb_area h4 + ul, #positionPopup .pp_contents .ppc_body .ppcb_area .ppcb_box h4 + strong {margin-top:20px;} #positionPopup .pp_contents .ppc_body .ppcb_area .ppcb_box ul + strong {margin-top:30px} #contents.career .c_inside {padding-top:0} #contents.career .c_inside .ci_news {margin-top:0} #contents.career .c_inside .ci_news.aos-animate:before {width:calc(100% - 40px)} #contents.career .c_inside .ci_news li {padding-left:0} #contents.career .c_inside .ci_news li > p {padding-left:0} #contents.career .c_inside .ci_news li > p > a, #contents.career .c_inside .ci_news li > p > button {position:relative; line-height:clamp(16px, 2.6042vw, 50px); letter-spacing:-0.8px; transition:0.3s} #contents.career .c_inside .ci_news li.hover > p > a, #contents.career .c_inside .ci_news li.hover > p > button {font-weight:600} #contents.career .c_inside .ci_news li.closed.hover > p > a, #contents.career .c_inside .ci_news li.closed.hover > p > button {cursor:default !important;} #contents.career .c_inside .ci_news li > p > a span, #contents.career .c_inside .ci_news li > p > button span {height:clamp(16px, 2.6042vw, 50px)} #contents.career .c_inside .ci_news li > p > a span:before, #contents.career .c_inside .ci_news li > p > button span:before {display:none} #contents.career .c_inside .ci_news li > p > i {border:none; background:none} #contents.career .c_inside .ci_news li.closed > p > i {display:none !important;} #contents.career .c_inside .ci_news li > p i.icon.right_small {background-image:url("../images/common/icon_right_small_t1.svg")} #contents.career .c_inside .ci_news li > p a.on::after, #contents.career .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.career .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.career .c_inside .ci_news .cin_sticky.off2 {opacity:0;} #contents.career .cc_recruit {padding-bottom:275px;} #contents.career .cc_recruit .ccr_contents {display:flex; align-items:center; width:100%} #contents.career .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(--yellow); transition:0.3s;} #contents.career .cc_recruit .ccr_contents > div + div {margin-left:-27px;} #contents.career .cc_recruit .ccr_contents > div:hover, #contents.career .cc_recruit .ccr_contents > div.on {background:var(--black); transform:scale(1.125);} #contents.career .cc_recruit .ccr_contents > div:hover mark, #contents.career .cc_recruit .ccr_contents > div.on mark, #contents.career .cc_recruit .ccr_contents > div:hover span.text, #contents.career .cc_recruit .ccr_contents > div.on span.text{color:var(--white)} #contents.career .cc_recruit .ccr_contents > div > div {display:flex; flex-direction:column; align-items:flex-start; justify-content:center;} #contents.career .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.career .cc_recruit .ccr_contents span.text {transition:0.3s;} #contents.career .cc_recruit .ccr_contents > div mark + span span {float:inherit; width:auto} #contents.career .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.career .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.career .cc_recruit .ccr_contents div.t2 .ccrc_text {left:calc(50% - clamp(30px, 5vw, 90px)); top:calc(100% - clamp(30px, 5.5vw, 90px));} #contents.career .cc_recruit .ccr_contents div:last-child .ccrc_text {left:auto; right:30%;} #contents.career .cc_recruit .ccr_contents div:last-child .ccrc_text span {text-align:right;} #contents.career .cc_recruit .ccr_contents .ccrc_text p {opacity:0; transition:0.5s;} #contents.career .cc_recruit .ccr_contents div.on .ccrc_text p, #contents.career .cc_recruit .ccr_contents div:hover .ccrc_text p {opacity:1; transition-delay:0.3s;} #contents.career .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.career .cc_recruit .ccr_contents div:last-child .ccrc_text::before {left:auto; right:0;} #contents.career .cc_recruit .ccr_contents .ccrc_text span {white-space:nowrap} #contents.career .cc_recruit .ccr_contents div.on .ccrc_text::before, #contents.career .cc_recruit .ccr_contents div:hover .ccrc_text::before {height:clamp(80px, 9.375vw, 180px); opacity:1} #contents.career .cc_faq .ccf_swiperwrap {display:inline-block; overflow:hidden; position:relative; width:100%;} #contents.career .cc_faq .ccf_contents {overflow:visible; float:right; width:480px; margin-top:120px} #contents.career .cc_faq .ccf_contents .ccfc_list {display:flex; width:max-content;} #contents.career .cc_faq .ccf_contents .ccfc_list li {flex:none; position:relative; box-sizing:border-box; padding:0 45px;} #contents.career .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.career .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.career .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.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q {display:flex; align-items:flex-start; gap:10px; position:relative; color:var(--white)} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {content:"Q."; font-size:25px; line-height:40px; letter-spacing:-1px; font-weight:500} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q span {color:var(--white)} #contents.career .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.career .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.career .cc_faq .ccf_contents .ccfc_list .ccfcl_a span {color:var(--white)} #contents.career .cc_faq .ccf_contents .ccfc_list li .ccfcl_box:hover .ccfcl_a {opacity:1; margin-top:20px;} @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:1680px) { #contents .c_intro > .wrap > div.t1 {padding:0 50px;} #contents .c_intro .c_marquee span {font-size:120px; animation-duration:40s} #contents .c_intro .ci_pic > div {gap:30px} #contents .ca_awards:before {left:50px; right:50px;} #contents .ca_awards .caa_list li div > strong {width:260px} #contents .c_contact .btn_wrap {margin-top:-40px} #contents.inside .c_intro {padding-bottom:60px} #contents.inside .c_intro + .c_inside {margin-top:-9vw} #contents.inside .c_intro > .wrap > div.t1 + div {padding-bottom:100px} #contents .c_inside .ci_news + div .morebtn {margin-top:60px} #contents .c_inside .ci_news.aos-animate + div .morebtn {margin-left:27px} #contents .c_view .cv_content {padding-left:30px; font-size:23px; line-height:35px; letter-spacing:-0.8px;} #contents .c_view .titlearea {padding-right:30px} #contents .c_view .titlearea h3, #contents .c_view .titlearea h3 ~ a {margin-top:50px} #contents .c_view .cv_content form > .divarea > div {padding-top:60px} #contents.career .cc_hero .wrap > .divarea {margin-top:100px;} #contents.career section:not(.cc_hero):before {right:50px} #contents.career section:not(.cc_hero).aos-animate:before {width:calc(100% - 100px)} #contents.career .cc_text {gap:55px;} #contents.career .cc_text h3 {font-size:42px} #contents.career .cc_work .ccw_contents li > div strong {font-size:38px;} #contents.career .cc_work .ccw_contents.aos-animate::before {width:calc(100% - 30px)} #contents.career .cc_benefit .divarea + div {margin-top:60px} #contents.career .c_inside .ci_news.aos-animate:before {width:calc(100% - 30px)} #contents.career .cc_position {padding-bottom:100px} #contents.career .cc_recruit .ccr_contents > div + div {margin-left:-20px} #contents.career .cc_recruit .ccr_contents mark {font-size:23px; line-height:35px} #contents.career .cc_faq .ccf_contents {margin-top:100px; width:430px;} #contents.career .cc_faq .ccf_contents .ccfc_list li {padding:0 35px;} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:23px; line-height:35px;} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_a::before {font-size:15px; line-height:28px;} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_a span {line-height:28px;} } @media all and (max-width:1440px) { #contents .c_intro {padding-top:160px} #contents .c_intro > .wrap > div.t1 {height:100%} #contents.contact .c_intro > .wrap > div.t1 {height:calc(100vh - 200px)} #contents .c_intro .c_marquee span {font-size:100px} #contents .c_intro .ci_pic img.t2 {width:67.35%} /*#contents .c_service .cs_list > div > div:first-child {width:220px;}*/ /*#contents .c_service .cs_list .csl_img + div {padding-left:50px}*/ /*#contents .c_service .divarea > div > p b {line-height:16px}*/ #contents .ca_awards .caa_list li div > strong {width:220px} #contents .c_cate.t1 > ul {gap:50px} #contents.inside .ci_hero .cih_title > p > strong {font-size:clamp(10px,20vw,390px);} #contents.inside .c_intro .wrap {display:flex; flex-direction:column; justify-content:space-between; gap:30px; height:calc(100vh - 225px)} #contents.inside .c_intro + .c_inside {margin-top:0} #contents.inside .c_intro > .wrap > div.t1 + div {padding-bottom:0} #contents .c_inside .ci_news + div .morebtn {gap:15px;} #contents .c_inside .ci_news + div .morebtn i {width:18px} #contents .c_inside .ci_news + div .morebtn span {font-size:20px; line-height:40px;} #contents .c_inside .ci_news + div .morebtn mark {font-size:15px; line-height:25px} #contents .c_inside .ci_news + div .morebtn span:after {top:40px;} #contents.career .cc_hero .cch_title > p > span {width:300px; height:90px;} #contents.career .cc_hero .cch_title > p > span > span > span {font-size:15px; line-height:30px;} #contents.career .cc_hero .cch_title > span > span > span {font-size:15px; line-height:30px;} #contents.career .cc_recruit {padding-bottom:254px;} #contents.career .cc_recruit .ccr_contents > div mark + span {font-size:20px} /*#contents.career .cc_recruit .ccr_contents .ccrc_text {padding-top:clamp(120px, 9.4792vw, 182px);}*/ /*#contents.career .cc_recruit .ccr_contents.aos-animate .ccrc_text::before {height:clamp(120px, 9.375vw, 180px)}*/ #contents.career .cc_recruit .ccr_contents .ccrc_text p {font-size:14px; line-height:27px;} } @media all and (max-width:1280px) { /* 컨텐츠 */ #contents .c_cate > ul .cc_btn {padding-left:25px; font-size:25px; line-height:40px;} #contents .c_cate > ul .cc_btn::before {width:6px; margin-top:-3px;} #contents .c_cate > ul .cc_btn:after {left:25px; bottom:3px;} #contents .c_cate > ul .cc_btn:hover:after, #contents .c_cate > ul .cc_btn.on:after {width:calc(100% - 25px);} #contents .t1 + .divarea {padding-top:120px; margin-top:90px} #contents.inside .ci_hero .cih_title > p > strong {font-size:clamp(10px,19vw,390px);} #contents .c_intro > .wrap > div.t1 {padding:0 40px;} #contents .aos-animate .c_title {animation:subtitle1 1.6s cubic-bezier(0.5, 0, 0.25, 1) forwards; animation-delay:0.2s} #contents .c_intro > .wrap:not(:last-child) {display:flex; align-items:flex-end; height:calc(100vh - 160px); padding-bottom:100px;} #contents .c_intro > .wrap > div.t1 {padding-bottom:100px} #contents .c_intro > .wrap > div.t1 + div {padding-bottom:0} #contents .c_intro .divarea > p .title.t2 {font-size:3.9vw;} #contents .c_intro .c_marquee {margin-bottom:90px} #contents .c_intro .ci_pic img.t2 {width:66%} /*#contents .c_service .cs_list > div > div:first-child {width:180px}*/ /*#contents .c_service .cs_list .csl_img {height:150px}*/ /*#contents .c_service .cs_list .csl_img + div {padding-left:40px}*/ #contents.about .ca_hero .cah_marquee {height:150px;} #contents.about .ca_hero .cah_marquee ul li {font-size:150px; line-height:150px;} #contents.about .ca_hero .cah_marquee ul li i {width:140px; height:140px; margin:0 15px;} #contents.about .ca_hero .cah_txt {margin:40px 0;} #contents.about .ca_hero .cah_pic {margin-top:80px; margin-bottom:80px;} #contents .ca_awards {padding:100px 0} #contents .ca_awards:before {left:40px; right:40px;} #contents .ca_awards .caa_list li div > strong {width:100%} #contents .ca_awards .caa_list li > div {flex-direction:column; align-items:flex-start} #contents .ca_awards .caa_list li p > span.text {position:absolute; right:0; top:0;} #contents .ca_awards .caa_list li div > p > span a {margin-left:19px;} #contents .ca_vision .divarea > div > div {height:108px; padding:30px 0} #contents .ca_partners {padding:90px 0} #contents .ca_partners .c_marquee {gap:65px} #contents .ca_partners .c_marquee ul {gap:60px} #contents .ca_partners .c_marquee li img {max-height:30px} #contents .ca_partners .c_marquee.t1 {margin-top:50px} #contents .c_contact .btn_wrap {margin-top:-50px} #contents .c_cate.t1 > ul {gap:30px} #contents.inside .c_intro {padding-bottom:50px} #contents.inside .c_intro .wrap {height:calc(100vh - 200px)} #contents.inside .ci_hero .cih_title > p > em > span > span {font-size:15px; line-height:25px;} #contents .c_inside .ci_news + div .morebtn {margin-top:50px} #contents .c_inside .ci_news.aos-animate + div .morebtn {margin-left:17px} #contents .c_inside .ci_news + div .morebtn {gap:10px;} #contents .c_inside .ci_news + div .morebtn i {width:16px} #contents .c_inside .ci_news + div .morebtn span {font-size:18px; line-height:34px;} #contents .c_inside .ci_news + div .morebtn span:after {top:34px;} #contents .c_inside .ci_news + div .morebtn mark {padding:0 8px; font-size:13px; line-height:23px} #contents .c_view .cv_content {padding-left:20px; font-size:21px; line-height:32px; letter-spacing:-0.7px;} #contents .c_view .titlearea {padding-right:20px} #contents .c_view .titlearea h3, #contents .c_view .titlearea h3 ~ a {margin-top:40px} #contents .c_view .cv_content form > .divarea > div {padding-top:50px} #contents.contact .cc_hero {margin-top:50px;} #contents.career .cc_hero {margin-top:50px;} #contents.career .cc_hero .wrap > .divarea {margin-top:90px;} #contents.career .cc_hero .cch_title > p > span {width:250px; height:75px;} #contents.career .cc_hero .cch_title > p > span > span > span {font-size:13px; line-height:25px;} #contents.career .cc_hero .cch_title > p > span > span i {transform:scale(0.9);} #contents.career .cc_hero .cch_title > span {width:250px; height:75px;} #contents.career .cc_hero .cch_title > span > span > span {font-size:13px; line-height:25px;} #contents.career .cc_hero .cch_title > span > span i {transform:scale(0.9);} #contents.career section:not(.c_intro):before {right:40px} #contents.career section:not(.c_intro).aos-animate:before {width:calc(100% - 80px)} #contents.career .cc_text {gap:40px} #contents.career .cc_text h3 {font-size:40px} #contents.career .cc_work .ccw_contents {row-gap:130px} #contents.career .cc_work .ccw_contents.aos-animate::before {width:calc(100% - 20px)} #contents.career .cc_work .ccw_contents li > div strong {font-size:32px; line-height:40px} #contents.career .cc_work .ccw_contents li .text span {display:inline; float:none; width:auto} #contents.career .cc_work .divarea + div {margin-top:90px} #contents.career .cc_work .ccw_contents .ccwc_icon {margin-bottom:40px} #contents.career .cc_work .ccw_contents li > div span {margin-bottom:10px} #contents.career .cc_benefit .divarea + div {margin-top:50px} #contents.career .cc_benefit .ccb_contents {row-gap:60px} #contents.career .cc_benefit .ccb_contents li {width:calc((100% - 20px) / 3)} #contents.career .cc_benefit .ccb_contents .ccbc_icon {margin-bottom:5px} #contents.career .c_inside .ci_news.aos-animate:before {width:calc(100% - 20px)} #contents.career .cc_position {padding-bottom:90px} #contents.career .cc_recruit {padding-bottom:214px} #contents.career .cc_recruit .ccr_contents > div {border-width:2px} #contents.career .cc_recruit .ccr_contents > div mark + span {font-size:17px; line-height:25px} #contents.career .cc_recruit .ccr_contents mark {font-size:17px; line-height:25px} #contents.career .cc_faq .ccf_contents {margin-top:90px; width:350px;} #contents.career .cc_faq .ccf_contents .ccfc_list li {padding:0 25px;} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:21px; line-height:32px;} } @media all and (max-width:1024px) { /* 컨텐츠 */ #contents .c_cate > ul .cc_btn {padding-left:18px; font-size:22px; line-height:35px;} #contents .c_cate > ul .cc_btn::before {width:4px; margin-top:-2px;} #contents .c_cate > ul .cc_btn:after {left:19px; bottom:2px; height:2px;} #contents .c_cate > ul .cc_btn:hover:after, #contents .c_cate > ul .cc_btn.on:after {width:calc(100% - 19px);} #contents.inside .ci_hero .cih_title {margin-top:18vw;} #contents.inside .ci_hero .cih_title > p:nth-child(2) {flex-wrap:wrap; gap:20px; justify-content:flex-start;} #contents.inside .ci_hero .cih_title > p > span {position:absolute; right:0; top:-18vw; width:42vw; height:18vw;} #contents.inside .ci_hero .cih_title > p > span:before {height:13vw;} #contents.inside .ci_hero .cih_title > p > span > span > span {font-size:1.3vw; line-height:2vw;} #contents.inside .ci_hero .cih_title > p > span > span i.squre {width:1.3vw; height:1.3vw;} #contents.inside .ci_hero.step07 .cih_title > p:nth-child(2) {overflow:visible;} #contents.inside .ci_hero .cih_title > p > strong {font-size:21vw;} #contents.inside .ci_hero.step02 .cih_title > p:nth-child(1) > strong {justify-content:flex-start;} #contents.inside .ci_hero.step06 .cih_title > p:nth-child(2) > strong {order:1; justify-content:flex-start;} #contents.inside .ci_hero .cih_title > p > em {flex-wrap:nowrap; flex-direction:row-reverse; gap:20px; align-items:center; order:2; height:auto;} #contents.inside .ci_hero .cih_title > p:nth-child(1) {flex-wrap:wrap;} #contents.inside .ci_hero.step03 .cih_title > p:nth-child(1) {overflow:visible;} #contents.inside .ci_hero .cih_title > p:nth-child(1) strong {width:100%;} #contents.inside .ci_hero .cih_title > p > em > b > span {line-height:15px;} #contents.inside .ci_hero .cih_title > p > em > b > mark {padding:0 15px; width:56px; height:32px; border-radius:15px; font-size:22px; line-height:32px;} #contents.inside .ci_hero .cih_title > i {transform:scale(1.5);} #contents.inside .ci_hero .cih_title .ciht_stickblur01 {top:21.5%;} #contents.inside .ci_hero .cih_title .ciht_stickblur02 {top:25.5%; transform:rotate(50deg) scale(1.5);} #contents.inside .ci_hero .cih_title .ciht_stickblur03 {top:17%; transform:rotate(102deg) scale(1.5);} #contents.inside .ci_hero .cih_title .ciht_stickblur04 {top:21.5%; transform:rotate(-39deg) scale(1.5);} #contents.inside .ci_hero .cih_title .ciht_stickcircle {top:16%; transform:scale(1.4);} #contents.inside .ci_hero .cih_title .ciht_rect01 {top:3.5%; transform:skew(-9deg, -1deg) scale(1.4);} #contents.inside .ci_hero .cih_title .ciht_rect02 {top:2%; transform:skew(-9deg, -1deg) scale(1.4);} #contents.inside .ci_hero .cih_pic {width:54vw; transform:translate(-50%,-50%);} #contents.inside .ci_hero + .c_inside {padding-top:0; margin-top:100px;} #contents .c_intro > .wrap > div.t1 {padding:0 30px;} #contents .c_intro .divarea > p span.giant span {display:inline; float:none} #contents .c_intro .c_marquee {gap:30px; margin-bottom:65px} #contents .c_intro .c_marquee span {font-size:74px} #contents.about .ca_hero .cah_marquee {height:120px;} #contents.about .ca_hero .cah_marquee ul li {font-size:120px; line-height:120px;} #contents.about .ca_hero .cah_marquee ul li i {width:110px; height:110px; margin:0 10px;} #contents.about .ca_hero .cah_txt {margin:30px 0; font-size:3.6vw; line-height:4.5vw;} #contents.about .ca_hero .cah_slogan > p {font-size:2vw; line-height:3vw;} #contents.about .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} #contents.inside .c_intro > .wrap > div.t1 + div {padding-bottom:65px} /*#contents.inside .c_inside .divarea.t5 {padding-left:0;}*/ /*#contents.inside .c_inside .divarea.t5 .c_cate.t1 {padding-left:0;}*/ #contents.inside .c_cate {margin-top:100px;} #contents .c_cate.t1 > ul {row-gap:15px; flex-wrap:wrap;} #contents .c_cate.t1 > ul > li {width:auto;} #contents.inside .c_intro {padding-bottom:40px} #contents .c_inside .ci_news + div .morebtn {width:auto !important; margin-top:40px} #contents .c_inside .ci_news + div .morebtn.t2 span:before, #contents .c_inside .ci_news + div .morebtn.t2 span:after {content:"MORE VIEW";} #contents.contact .c_view .titlearea h3 span {display:inline-block} #contents .c_view .cv_content {font-size:20px;} #contents .c_view .cv_content .col2 {gap:20px;} #contents .c_view .cv_content .col2 img {width:calc(50% - 10px) !important;} #contents .c_view .titlearea.aos-animate h3 span {opacity:1; transition-delay:0.8s!important;} #contents .c_view .titlearea h3, #contents .c_view .titlearea h3 ~ a {margin-top:45px} .morebtn.t1 span + i {width:20px; aspect-ratio:1/1;} #contents .c_view .cv_content form > .divarea > div {padding-top:40px} #contents.contact .cc_hero {margin-bottom:150px;} #contents.contact .cc_hero .cch_title > p > span {display:none;} #contents.contact .cc_hero .cch_title > span {display:flex;} #contents.contact .cc_hero .cch_title > p:nth-child(3) {flex-wrap:wrap;} #contents.contact .cc_hero.step09 .cch_title > p:nth-child(3) {overflow:visible;} #contents.contact .cc_hero .cch_title > p > em {align-self:flex-start; width:100%; padding-left:8.5vw; gap:20px;} #contents.contact .cc_hero .cch_title > p > em > b > span {line-height:15px;} #contents.contact .cc_hero .cch_title > p > em > b > mark {padding:0 15px; width:70px; height:32px; border-radius:15px; font-size:22px; line-height:32px;} #contents.contact .cc_hero .cch_title > p > em > span {display:flex; width:500px; height:100px;} #contents.contact .cc_hero .cch_title > p > em > span > span > span {font-size:15px; line-height:25px;} #contents.contact .cc_hero .cch_title > p > em > span > span i.squre {width:10px; height:10px;} #contents.contact .cc_hero .cch_title > p:nth-child(2) > strong {padding-left:25vw;} #contents.contact .cc_hero .cch_title > p:nth-child(3) > strong {width:100%; padding-right:14vw;} #contents.career .cc_hero .wrap > .divarea {margin-top:150px;} #contents.career .cc_hero .cch_title > p > span {display:none;} #contents.career .cc_hero .cch_title > span {position:absolute; bottom:-90px; display:flex;} #contents.career .cc_hero .cch_title > p:nth-child(4) {justify-content:flex-end;} #contents.career .cc_hero .cch_title > p:nth-child(4) > strong {width:59vw;} #contents.career .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:77%; transition:1s;} #contents.career section:not(.c_intro).aos-animate:before {right:30px; width:calc(100% - 60px)} #contents.career .cc_text {gap:30px} #contents.career .cc_text h3 {font-size:36px; line-height:46px} #contents.career .cc_work .ccw_contents {column-gap:30px} #contents.career .cc_work .ccw_contents li {width:calc((100% - 30px) / 2)} #contents.career .cc_work .ccw_contents li > div strong {font-size:26px; line-height:36px;} #contents.career .cc_work .ccw_contents li > div span {font-size:18px; line-height:25px} #contents.career .cc_work .ccw_contents li > .text {padding-right:0;} #contents.career .cc_work .ccw_contents .ccwc_icon {width:42px; height:42px; margin-bottom:30px} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(2)::after {width:23px} #contents.career .cc_work .ccw_contents li.t2 .ccwc_icon i:nth-child(3)::after {width:11px} #contents.career .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.career .cc_benefit .divarea + div {margin-top:35px} #contents.career .cc_benefit .ccb_contents {row-gap:50px} #contents.career .cc_benefit .ccb_contents li {width:calc((100% - 10px) / 2)} #contents.career .cc_benefit .ccb_contents .ccbc_icon i, #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {width:58px;} #contents.career .c_inside .ci_news .cin_sticky {right:clamp(10px, 9.0208vw, 154px); width:clamp(150px, 20.9167vw, 440px)} #contents.career .c_inside .ci_news li > p a.on::after, #contents.career .c_inside .ci_news li > p button.on::after {left:calc(100% - 3px)} #contents.career .cc_position {padding-bottom:65px} #contents.career .cc_recruit {padding-bottom:186px} #contents.career .cc_recruit .ccr_contents mark {font-size:16px; line-height:22px} #contents.career .cc_recruit .ccr_contents > div mark + span {display:flex; flex-direction:column; align-items:flex-start; font-size:16px; line-height:22px;} #contents.career .cc_faq .ccf_contents {width:320px; margin-top:65px} #contents.career .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {padding:35px 25px} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:20px;} } @media all and (max-width:768px) { /* 컨텐츠 */ #contents .c_cate > ul .cc_btn {padding-left:15px; font-size:18px; line-height:30px;} #contents .c_cate > ul .cc_btn:after {left:15px; bottom:2px; height:2px;} #contents .c_cate > ul .cc_btn:hover:after, #contents .c_cate > ul .cc_btn.on:after {width:calc(100% - 15px);} #contents .c_title {gap:20px; font-size:14.9750vw; line-height:11.6473vw} #contents .c_intro {padding-top:100px} #contents .c_intro > .wrap:not(:last-child) {height:calc(100vh - 100px)} #contents .c_intro .divarea > p .title.t2 {font-size:7.4875vw; line-height:8.3195vw} #contents .c_intro p b {margin:0.8319vw 0; line-height:6.6556vw} #contents .c_intro .aos-animate p b:before {top:-6.6556vw} #contents .c_intro p b:after {top:6.9884vw} #contents .c_intro > .wrap:not(:last-child) {padding-bottom:65px;} #contents .c_intro .ci_pic img.t1 {width:calc(100% - 68% - 20px);} #contents .c_intro .ci_pic img.t2 {width:calc(100% - 26% - 20px);} #contents .c_intro .ci_pic img.t3 {width:calc(100% - 68% - 20px);} #contents .aos-animate .c_title {animation:subtitle2 1.6s cubic-bezier(0.5, 0, 0.25, 1) forwards; animation-delay:0.2s} #contents.about .ca_hero .cah_txt {font-size:25px; line-height:35px;} #contents.about .ca_hero .cah_slogan {flex-wrap:wrap; gap:20px;} #contents.about .ca_hero .cah_slogan > p {font-size:16px; line-height:28px;} #contents.about .ca_hero .cah_slogan > p > span {display:inline; float:none;} #contents.about .ca_hero .cah_pic {height:auto !important; aspect-ratio:4/3;} #contents.about .ca_hero .cah_pic img {display:block;} #contents .ca_vision .divarea > div > div {height:132px} #contents .ca_awards .caa_list li {transition-delay:0!important;} #contents .ca_awards .caa_list li > div {opacity:1} #contents .ca_awards .caa_list li.on p > span.text:before {width:100%;} #contents .ca_awards .caa_list li.on p > span.text {padding-right:10px; background:var(--black); color:var(--yellow)} #contents .ca_awards .caa_list li.on div > strong > i {margin-left:15px; opacity:1;} #contents .ca_awards .caa_list li.on div > p > span a {font-weight:500;} #contents .ca_awards .caa_list li.on div > p > span a:before {width:100%; opacity:1;} #contents .ca_partners {padding:55px 0;} #contents .ca_partners .c_marquee {gap:50px} #contents .ca_partners .c_marquee li img {max-height:25px} #contents.inside .c_intro {overflow:visible; padding-bottom:30px} #contents.inside .c_intro .wrap {height:calc(100vh - 140px)} #contents .c_inside .ci_news + div .morebtn {margin-top:30px} #contents .c_cate.t1 > ul > li {width:auto} #contents .c_inside .ci_news.aos-animate + div .morebtn {margin-left:170px;} #contents .c_view .cv_content {width:100%; padding-left:0} #contents.contact .titlearea {position:fixed !important; top:auto !important; left:30px; bottom:30px; z-index:10; width:calc(100% - 130px); margin-bottom:0 !important; padding-right:0; box-sizing:border-box; padding:16px 20px; border-radius:25px; background-color:var(--black); opacity:0; transition:0.3s; pointer-events:none;} #wrap.asideOn #contents.contact .c_view .titlearea {opacity:1; pointer-events:auto;} #contents.isbottom .c_view .titlearea {opacity:0 !important; pointer-events:none !important;} #contents.contact .c_view .titlearea .translateY100 {transform:translateY(0) !important;} #contents.contact .c_view .titlearea h3 {margin-bottom:0; font-size:16px; line-height:26px; color:var(--yellow);} #contents.contact .c_view .titlearea h3 mark, #contents.contact .c_view .titlearea .text {color:var(--yellow);} #contents.contact .c_view .titlearea h3 span span {display:inline; line-height:26px; color:var(--yellow);} #contents.contact .c_view .titlearea > span {display:none;} #contents .c_view .titlearea h3, #contents .c_view .titlearea h3 ~ a {margin-top:25px} #contents .c_view .titlearea {position:relative; top:0; margin-bottom:40px;} #contents .c_view .cv_wrap {flex-direction:column; align-items:flex-start;} #contents.contact .c_view .cv_wrap {margin-top:0} /*#contents .c_view .cv_content > .mt60,*/ /*#contents .c_view .cv_content img {margin-top:30px}*/ #contents .c_view .cv_content p + p {margin-top:30px;} #contents .c_view .cv_content form > .divarea > div {padding-top:30px} #contents.contact .cc_hero .cch_title > p > strong {gap:0.6510vw; font-size:10.4vw; line-height:10.4vw;} #contents.contact .cc_hero.step02 .cch_title > p > strong > i.circle, #contents.contact .cc_hero.step04 .cch_title > p > strong > i.ring, #contents.contact .cc_hero.step07 .cch_title > p > strong > i.sphere {flex-shrink:0; width:9vw; height:9vw;} #contents.contact .cc_hero .cch_title > p > em {flex-wrap:wrap; padding-left:3.5vw;} #contents.about .ca_hero .cah_marquee {height:110px;} #contents.about .ca_hero .cah_marquee ul li {font-size:100px; line-height:100px;} #contents.about .ca_hero .cah_marquee ul li i {width:90px; height:90px; margin:0 8px;} #contents.career .cc_hero .cch_title .ccht_smallblur, #contents.career .cc_hero .cch_title .ccht_bigblur {transform:translate(-50%, -50%) rotate(50deg) scale(1.3);} #contents.career .cc_hero .cch_pic {transform:translate(-50%,-50%) scale(1.3);} #contents.career .cc_hero .titlearea {margin-bottom:0;} #contents.career .cc_hero .cch_title > p > strong {font-size:10.6vw; line-height:10.6vw;} #contents.career .cc_hero .cch_title > p:nth-child(4) > strong {width:67vw;} #contents.career .cc_hero.step04 .cch_title > p:nth-child(4) > strong {width:80%;} #contents.career .cc_hero .wrap > .divarea {margin-top:120px;} #contents.career .cc_hero .divarea > div {justify-content:flex-end;} #contents.career .cc_hero .titlearea div {position:absolute; left:0; width:20%; height:calc(15.6vw - 15px); background-size:cover; aspect-ratio:auto;} #contents.career .cc_hero .divarea div.t1 {width:calc(66.66% - 15px); background-size:cover;} #contents.career .cc_hero .divarea div.t2 {position:absolute; left:0; right:calc(66.66% + 15px); top:calc(15.6vw + 15px); bottom:0; width:auto; aspect-ratio:auto; background-size:cover;} #contents.career .cc_text h3 {font-size:34px} #contents.career .cc_work .divarea + div {margin-top:65px} #contents.career .cc_work .ccw_contents {row-gap:100px; padding-top:0} #contents.career .cc_work .ccw_contents.aos-animate::before {display:none} #contents.career .cc_work .ccw_contents li > div strong {font-size:28px} #contents.career .cc_work .ccw_contents li > div span {font-size:20px} #contents.career .cc_benefit .ccb_contents li {width:calc((100% - 20px) / 3)} #contents.career .cc_work .ccw_contents .ccwc_icon i, #contents.career .cc_work .ccw_contents .ccwc_icon i::after { border-width:2px !important; transition-delay:0s !important;} #contents.inside .c_inside .ci_news {margin-top:80px;} #contents.career .c_inside .ci_news.aos-animate:before {width:100%} #contents.career .c_inside .ci_news .cin_sticky + ul {margin-top:-150px !important;} #contents.career .c_inside .ci_news li > .cin_pic {display:none} #contents.career .c_inside .ci_news li > p > a, #contents.career .c_inside .ci_news li > p > button {width:auto; padding:25px 0} #contents.career .c_inside .ci_news.aos-animate .cin_sticky {transform:scale(1); opacity:1} #contents.career .c_inside .ci_news li > p > i {display:flex} #contents.career .c_inside .ci_news .cin_sticky {right:clamp(10px, 13.0208vw, 154px); width:clamp(200px, 20.9167vw, 440px)} #contents.career .c_inside .ci_news li > p a.on::after, #contents.career .c_inside .ci_news li > p button.on::after {top:14px} #contents.inside .divarea.t5 {position:fixed; top:auto; left:30px; bottom:30px; opacity:0; z-index:3; pointer-events:none;} #contents.inside .divarea.t5 .c_cate {position:absolute; top:auto; left:0; bottom:0; width:160px; margin-top:0; margin-bottom:0; padding-bottom:0; border-radius:25px; opacity:0; transition:0.3s;} #contents.inside .divarea.t5 .c_cate .cc_catebtn {display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 20px; border-radius:25px; font-size:18px; background-color:var(--black); color:var(--yellow); font-weight:600; line-height:30px;} #wrap.asideOn #contents.inside .divarea.t5 .c_cate {opacity:1;} #wrap.asideOn #contents.inside .divarea.t5 .c_cate .cc_catebtn {pointer-events:auto;} #wrap.asideOn #contents.inside.isbottom .divarea.t5 .c_cate {opacity:0;} #wrap.asideOn #contents.inside.isbottom .divarea.t5 .c_cate .cc_catebtn {pointer-events:none;} #contents.inside .divarea.t5 .c_cate .cc_catebtn i {display:inline-block; position:relative; width:10px; height:10px;} #contents.inside .divarea.t5 .c_cate .cc_catebtn i:before {content:""; position:absolute; left:50%; top:50%; width:8px; height:2px; margin-top:-1px; margin-left:-6px; border-radius:1px; background-color:var(--yellow); transform:rotate(-45deg);} #contents.inside .divarea.t5 .c_cate .cc_catebtn i:after {content:""; position:absolute; left:50%; top:50%; width:8px; height:2px; margin-top:-1px; margin-left:-2px; border-radius:1px; background-color:var(--yellow); transform:rotate(45deg); transition:0.3s;} #contents.inside .divarea.t5.on .c_cate {background-color:var(--black);} #contents.inside .divarea.t5.on .c_cate .cc_catebtn i {transform:rotate(180deg);} #wrap.asideOn #contents.inside .divarea.t5.on ul {opacity:1; pointer-events:auto;} #wrap.asideOn #contents.inside.isbottom .divarea.t5.on ul {opacity:0; pointer-events:none;} #contents.inside .divarea.t5 ul {gap:0; margin-bottom:-9px; padding-top:10px; opacity:0; pointer-events:none; transition:0.3s;} #contents.inside .divarea.t5 ul li {text-align:left; width:100%;} #contents.inside .divarea.t5 .c_cate > ul .cc_btn::before {display:none;} #contents.inside .divarea.t5 ul .cc_btn {width:100%; padding-left:20px; font-size:18px; color:var(--yellow); font-weight:400 !important; line-height:35px; text-align:left;} #contents.inside .divarea.t5 ul span {display:none;} #contents.inside .ci_hero + .c_inside {padding-top:0; margin-top:80px;} } @media all and (max-width:600px) { #contents .c_intro .c_marquee span {font-size:60px} #contents .ca_awards .caa_list li > div {gap:5px} #contents .ca_awards .caa_list li div > p {display:flex; flex-direction:column; align-items:flex-start; gap:5px;} #contents .c_cate.t1 > ul {row-gap:5px;} #contents.inside .ci_hero .cih_title {margin-top:26vw;} #contents.inside .ci_hero .cih_title > p > span {top:-26vw; width:51vw; height:23vw;} #contents.inside .ci_hero .cih_title > p > span:before {height:16vw;} #contents.inside .ci_hero .cih_title > p > span > span > span {font-size:1.6vw; line-height:2.5vw;} #contents.inside .ci_hero .cih_title > p > span > span i.squre {width:1.3vw; height:1.3vw;} #contents.inside .ci_hero .cih_title > p > em > span > span {font-size:14px; line-height:24px;} #contents.inside .ci_hero .cih_pic {width:72vw;} #contents.inside .ci_hero .cih_title > i {transform:scale(2);} #contents.inside .ci_hero .cih_title .ciht_stickblur01 {top:10.5%;} #contents.inside .ci_hero .cih_title .ciht_stickblur02 {top:14.5%; transform:rotate(50deg) scale(2);} #contents.inside .ci_hero .cih_title .ciht_stickblur03 {left:31.3%; top:14%; transform:rotate(102deg) scale(2);} #contents.inside .ci_hero .cih_title .ciht_stickblur04 {left:31.5%; top:8.5%; transform:rotate(-39deg) scale(2);} #contents.inside .ci_hero .cih_title .ciht_stickcircle {left:44%; top:3%; transform:scale(1.9);} #contents.inside .ci_hero .cih_title .ciht_rect01 {top:-7.5%; transform:skew(-9deg, -1deg) scale(1.9);} #contents.inside .ci_hero .cih_title .ciht_rect02 {top:-8%; transform:skew(-9deg, -1deg) scale(1.9);} #contents.inside .c_cate {margin-top:80px;} #contents.contact .c_intro {padding-bottom:50px} #contents.contact .cc_hero {margin-top:20px; margin-bottom:130px;} #contents.contact .cc_hero .cch_title > p > em {padding-left:2.5vw;} #contents.contact .cc_hero .cch_title > p > em > span {width:400px; height:88px;} #contents.contact .cc_hero .cch_title > p > em > span > span > span {font-size:12px; line-height:22px;} #contents .c_view .cv_content {font-size:17px; line-height:25px} #contents .c_view .cv_content .col2 {flex-direction:column; gap:30px;} #contents .c_view .cv_content .col2 img {width:100% !important;} #contents.career .cc_text {gap:20px} #contents.career .cc_text h3 {font-size:30px; line-height:40px} #contents.career .cc_text h3 + p span {display:inline; float:inherit; width:auto} #contents.career .cc_work .ccw_contents {row-gap:50px} #contents.career .cc_work .ccw_contents li > div strong {font-size:21px; line-height:25px} #contents.career .cc_work .ccw_contents li > div span {font-size:17px;} #contents.career .cc_work .ccw_contents li > p {font-size:14px; line-height:25px} #contents.career .cc_benefit .ccb_contents {row-gap:40px} #contents.career .cc_benefit .ccb_contents li {width:calc((100% - 10px) / 2)} #contents.career .cc_benefit .ccb_contents .ccbc_icon i, #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {width:62px} #contents.career .c_inside .ci_news li > p > a, #contents.career .c_inside .ci_news li > p > button {font-size:20px} #contents.career .c_inside .ci_news .cin_sticky {width:125px} #contents.career .c_inside .ci_news .cin_sticky + ul {margin-top:-94px !important;} #contents.career .cc_recruit {padding-bottom:164px} #contents.career .cc_recruit .ccr_contents mark, #contents.career .cc_recruit .ccr_contents > div mark + span {font-size:14px; line-height:20px} #contents.career .cc_recruit .ccr_contents .ccrc_text {left:calc(50% - 16px); top:calc(100% - 16px) !important; padding-top:60px} #contents.career .cc_recruit .ccr_contents div.t1 .ccrc_text {top:calc(100% - 32px) !important;} #contents.career .cc_recruit .ccr_contents div.on .ccrc_text::before, #contents.career .cc_recruit .ccr_contents div:hover .ccrc_text::before {height:60px} #contents.career .cc_recruit .ccr_contents .ccrc_text p {font-size:13px; line-height:25px;} #contents.career .cc_faq .ccf_contents {width:260px;} #contents.career .cc_faq .ccf_contents .ccfc_list li {padding:0 15px;} #contents.career .cc_faq .ccf_contents .ccfc_list .ccfcl_q::before {font-size:17px; line-height:25px;} #contents.career .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {min-height:350px;} } @media all and (max-width:425px) { #contents .c_title {gap:15px} #contents .c_title mark {padding:0 7px} #contents .c_intro > .wrap > div.t1 {padding:0 25px} #contents .c_intro .c_marquee span {font-size:50px} #contents .ca_awards:before {left:25px; right:25px} #contents .ca_awards .caa_list li.on div > strong > i {display:none;} #contents .ca_awards .caa_list li div > strong {padding-left:15px; font-size:13px;} #contents .ca_awards .caa_list li p > span.text {font-size:13px;} #contents .ca_awards .caa_list li div > p > span a {margin-left:15px;} #contents .ca_vision .divarea > div > div {height:122px;} #contents.contact .cc_hero .cch_title > p:nth-child(3) {gap:10px;} #contents.contact .cc_hero .cch_title > p > em > b {gap:10px;} #contents.contact .cc_hero .cch_title > p > em > b > mark {padding:0 10px; width:53px; height:24px; border-radius:12px; font-size:18px; line-height:24px;} #contents.contact .cc_hero .cch_title > p > em > span {width:100%; height:20vw;} #contents.contact .cc_hero .cch_title > p > em > span > span > span {font-size:2.65vw; line-height:5vw;} #contents.contact .cc_hero .cch_title > p > em > span > span i.squre {width:8px; height:8px;} #contents.contact .c_intro {padding-bottom:40px} #contents.contact .c_view .titlearea {left:25px; bottom:25px; width:calc(100% - 110px); padding:9px 15px; border-radius:20px;} #contents.contact .c_view .titlearea h3 {font-size:14px; line-height:24px;} #contents.contact .c_view .titlearea h3 span span {line-height:24px;} #contents.inside .c_intro {padding-bottom:25px} #contents.inside .c_inside .ci_news {margin-top:60px;} #contents .c_inside .ci_news + div .morebtn {margin-top:25px} #contents .c_inside .ci_news.aos-animate + div .morebtn {margin-left:137px;} #contents.inside .divarea.t5 {left:25px; bottom:25px;} #contents.inside .divarea.t5 .c_cate {width:145px; border-radius:20px;} #contents.inside .divarea.t5 .c_cate .cc_catebtn {padding:7px 18px; border-radius:20px; font-size:16px; line-height:26px;} #contents.inside .divarea.t5 ul {margin-bottom:-6px;} #contents.inside .divarea.t5 ul .cc_btn {padding-left:18px; text-align:left; font-size:16px; line-height:30px;} #contents.inside .ci_hero .cih_title > p:nth-child(2) {gap:10px;} #contents.inside .ci_hero .cih_title > p > em > b {gap:10px;} #contents.inside .ci_hero .cih_title > p > em > b > mark {padding:0 10px; width:42px; height:24px; border-radius:12px; font-size:18px; line-height:24px;} #contents.about .ca_hero .cah_marquee {height:90px;} #contents.about .ca_hero .cah_marquee ul li {font-size:90px; line-height:90px;} #contents.about .ca_hero .cah_marquee ul li i {width:80px; height:80px; margin:0 6px;} #contents.about .ca_hero .cah_txt {font-size:22px; line-height:32px;} #contents.about .ca_hero .cah_slogan > p {font-size:15px; line-height:27px;} #contents.about .ca_hero .cah_slogan .cahs_since {gap:10px;} #contents.about .ca_hero .cah_slogan .cahs_since > p {line-height:16px;} #contents.about .ca_hero .cah_slogan .cahs_since > mark {padding:0 15px; height:32px; border-radius:15px; font-size:22px; line-height:32px;} #contents.career .cc_hero {margin-top:30px;} #contents.career .cc_hero .cch_title .ccht_smallblur, #contents.career .cc_hero .cch_title .ccht_bigblur {transform:translate(-50%, -50%) rotate(50deg) scale(1.3);} #contents.career .cc_hero .cch_pic {transform:translate(-50%,-50%) scale(1.5);} #contents.career .cc_hero .divarea > .text > span:nth-child(n + 2) {display:inline; float:none;} #contents.career .cc_hero .titlearea div {width:25%; height:calc(14vw - 10px);} #contents.career .cc_hero .divarea div.t1 {width:calc(60% - 10px);} #contents.career .cc_hero .divarea div.t2 {top:calc(14vw + 10px); right:calc(60% + 10px);} #contents.career section:not(.c_intro).aos-animate:before {right:25px; width:calc(100% - 50px)} #contents.career .cc_work .ccw_contents {row-gap:50px} #contents.career .cc_work .ccw_contents li {position:relative; width:100%} #contents.career .cc_work .ccw_contents .ccwc_icon {margin-bottom:20px} #contents.career .cc_work .ccw_contents .ccwc_icon + div {position:absolute; left:60px; top:-5px} #contents.career .cc_recruit .ccr_contents > div + div {margin-left:-15px} #contents.career .c_inside .ci_news .cin_sticky {right:0;} #contents.career .cc_faq .ccf_contents {float:none;} #contents.career .cc_faq .ccf_contents .ccfc_list li .ccfcl_box {margin:0;} #contents.career .cc_faq .ccf_contents .ccfc_list li.swiper-slide-active .ccfcl_box::before {background:rgba(0, 0, 0, 0.6)} #contents.career .cc_faq .ccf_contents .ccfc_list li.swiper-slide-active .ccfcl_a {opacity:1; margin-top:20px;} } @media all and (max-width:360px) { #contents.contact .c_intro {padding-bottom:35px} #contents.career .cc_benefit .ccb_contents {row-gap:30px} #contents.career .cc_benefit .ccb_contents li {position:relative; width:100%; padding-left:75px} #contents.career .cc_benefit .ccb_contents li > strong, #contents.career .cc_benefit .ccb_contents li > .text {padding-right:0;} #contents.career .cc_benefit .ccb_contents .ccbc_icon {justify-content:flex-start; position:absolute; left:0; top:-5px; height:60px; margin-bottom:0} #contents.career .cc_benefit .ccb_contents .ccbc_icon i, #contents.career .cc_benefit .ccb_contents .ccbc_icon mark::after {width:52px} #contents.career .cc_benefit .ccb_contents .ccbc_icon mark {justify-content:flex-start} #contents.career .cc_recruit .ccr_contents > div + div {margin-left:-10px} #contents.career .cc_recruit .ccr_contents mark, #contents.career .cc_recruit .ccr_contents > div mark + span {font-size:13px; line-height:16px} #contents.career .cc_recruit .ccr_contents .ccrc_text {left:calc(50% - 20px); top:calc(100% - 20px); padding-top:48px} #contents.career .cc_recruit .ccr_contents > div:hover .ccrc_text, #contents.career .cc_recruit .ccr_contents > div.on .ccrc_text {transform:scale(0.8889);} #contents.career .cc_recruit .ccr_contents div.t2 .ccrc_text {left:calc(50% - 20px);} #contents.career .cc_recruit .ccr_contents div.on .ccrc_text::before, #contents.career .cc_recruit .ccr_contents div:hover .ccrc_text::before {height:48px} #contents.career .cc_recruit .ccr_contents .ccrc_text p {font-size:12px; line-height:23px} #contents.about .ca_hero .cah_txt {font-size:19px; line-height:30px;} #contents.inside .ci_hero .cih_title > p > em > span > span {font-size:12px; line-height:22px;} #contents .c_view .cv_content {font-size:16px;} #contents .c_inside .ci_news + div .morebtn span em {display:none;} }