@charset "utf-8"; /* CSS Document */ /* 공용 */ .navbg {display:flex;flex-direction:column;align-items:center;position:fixed;top:30px;left:50%; z-index:5 !important; width:100%;max-width:640px;height:70px;margin-left:-320px;border-radius:50px;font:600 1.15rem sans-serif;overflow:hidden;box-sizing:border-box;transition:box-shadow .3s,border .3s; pointer-events:none;} .navbg::after {content:"";position:absolute;inset:0;z-index:1;display:block;border-radius:100px;box-sizing:border-box;border:1px solid transparent;border-top-color:#ffffff75;border-right-color:var(--white);border-bottom-color:#ffffffa6; border-left-color:#ffffff80; box-shadow:-10px -10px 26px #0001 inset;} .navbg::before {content:"";position:absolute;inset:0;display:block;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;box-shadow:10px 10px 25px rgb(255 255 255 / 32%) inset;} .logoline {position:fixed; left:60px; top:76px; z-index:1000; width:15px; height:4px; background-color:var(--white);} .scrollbg {position:fixed; right:60px; bottom:60px; width:60px; height:60px; border-radius:50%; pointer-events:none; opacity:0; transition:0.3s;} #wrap.main .scrollbg, #wrap.asideOn .scrollbg {opacity:1;} .scrollbg::after {content:"";position:absolute;inset:0;z-index:1;display:block;border-radius:100px;box-sizing:border-box;border:1px solid transparent;border-top-color:#ffffff75;border-right-color:#fff;border-bottom-color:#ffffffa6;border-left-color:#ffffff80;box-shadow:-10px -10px 26px #0001 inset;} .scrollbg::before {content:"";position:absolute;inset:0;display:block;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;box-shadow:10px 10px 25px rgb(255 255 255 / 32%) inset;} .loadingbox {display:flex; align-items:center; justify-content:center; position:fixed; left:0; right:0; top:0; bottom:0; z-index:9999; pointer-events:none;} .loadingbox:before {content:"";position:absolute; left:0; right:0; top:0; bottom:0; background-color:var(--black); transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:1s; pointer-events:auto;} .loadingbox:after {content:"";position:absolute; left:0; right:0; top:100%; height:100%; background-color:var(--black); transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:1s; pointer-events:none;} .loadingbox .l_logo {display:inline-block; overflow:hidden; position:relative; width:168px; height:90px; opacity:0;} .loadingbox .l_logo:before, .loadingbox .l_logo:after {content:""; position:absolute; left:0; right:0; top:0; bottom:0; background-image:url("../images/common/logo_n.svg"); background-repeat:no-repeat; background-size:100% auto; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:0.6s;} .loadingbox .l_logo:after {background-image:url("../images/common/logo_b.svg");} .onLogo .loadingbox .l_logo {opacity:1;} .step01 .loadingbox .l_logo:before {transform:translateY(-120%);} .step02 .loadingbox .l_logo:after {transform:translateY(-120%);} .step03 .loadingbox:before {bottom:100%;} .step04 #footer {transition:0.5s; opacity:1;} .endloading #contents, .endloading #footer {transition:0s;} .off .loadingbox:after {top:0; pointer-events:auto;} .loadingbox {display:none;} body.open {overflow:hidden;} .height {height:100vh;} .translateY100 {transform:translateY(100%); transition-timing-function:cubic-bezier(.39,.575,.565,1); transition-duration:0.5s;} .aos-animate .translateY100 {transform:translateY(0);} .overflow-hidden {overflow:hidden;} /*.loadingbox {display:none;}*/ /*#contents,*/ /*#footer {opacity:1 !important;}*/ /* 헤더 */ #header {position:fixed; left:0; right:0; top:0; z-index:200; box-sizing:border-box; min-width:320px; padding:50px 0; pointer-events:none; mix-blend-mode:difference;} #header .wrap {max-width:100%;} #header .h_logo {display:inline-block; position:relative; float:left; z-index:1; width:56px; height:56px; background-image:url("../images/common/logo-mb.svg"); background-repeat:no-repeat; background-size:100% auto; pointer-events:auto; cursor:pointer;} #header .h_logo a {position:absolute; left:0; right:0; top:0; bottom:0;} #header .h_logo.on a {pointer-events:none;} #header .h_btn {display:none;} #header .h_nav {pointer-events:none;} #header .h_nav ul {display:flex; align-items:center; justify-content:center; gap:70px; position:absolute; left:50%; top:-20px; z-index:2; width:640px; height:70px; margin-left:-320px; padding:0; font-size:0; line-height:0;} #header .h_nav ul li {display:flex; height:100%; pointer-events:auto; cursor:pointer;} #header .h_nav ul li a {display:flex; align-items:center; position:relative; overflow:hidden; height:100%; font-size:17px; font-weight:400; pointer-events:auto;} #header .h_nav ul li.on a {font-weight:600; pointer-events:none !important;} #wrap.project #header .h_nav ul li.on a, #wrap.inside_view #header .h_nav ul li.on a {pointer-events:auto !important;} #header .h_nav ul li a .autotext {height:20px;} #header .h_nav ul li a:hover .autotext:before {top:-20px;} #header .h_nav ul li a:hover .autotext:after {top:0;} #header .h_nav ul li.on a .autotext:before {top:0;} #header .h_nav ul li.on a .autotext:after {top:20px;} #header .h_nav ul li a .autotext:before, #header .h_nav ul li a .autotext:after {color:var(--white);} #header .h_nav ul li a em {display:none;} #header .h_contact {display:inline-block; position:relative; float:right; height:30px; font-size:16px; font-weight:400; line-height:30px; pointer-events:auto; cursor:pointer;} #header .h_contact:before {content:""; position:absolute; left:0; right:0; top:-5px; bottom:-5px;} #header .h_contact .autotext:before, #header .h_contact .autotext:after {color:var(--white);} #header .h_contact:hover .autotext:before {top:-20px;} #header .h_contact:hover .autotext:after {top:0;} #header .h_contact.on a {pointer-events:none;} #header .h_mobilecontent {opacity:0; pointer-events:none;} #header .h_plastic {opacity:0; pointer-events:none;} .projectcate {display:flex; flex-direction:column-reverse; position:fixed; left:10px; bottom:15px; z-index:10; opacity:0; border-radius:5px; padding:15px 20px; pointer-events:none; mix-blend-mode: difference; transition:0.3s;} /* 사이드 */ #aside {position:fixed; right:0; bottom:60px; z-index:100; width:100%; min-width:320px; text-align:right; pointer-events:none; mix-blend-mode:difference; opacity:0; pointer-events:none; transition:0.3s;} #wrap.main #aside, #wrap.asideOn #aside {opacity:1 !important;} #wrap.main #aside ul li .a_scroll, #wrap.asideOn #aside ul li .a_scroll, #wrap.main #aside ul li .a_btn, #wrap.asideOn #aside ul li .a_btn {pointer-events:auto;} #aside ul {display:inline-block; float:right; width:60px;} #aside ul li {display:flex; position:relative; width:100%; height:60px;} #aside ul li + li {margin-top:15px;} #aside ul li .a_btn {display:flex; align-items:center; justify-content:center; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:50%; background-color:var(--white); transition:0.3s;} #aside ul li .a_btn:hover {background-color:var(--black)} #aside ul li .a_btn:hover i {background-position:left;} #aside ul li .a_scroll {overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0;} #aside ul li .a_scroll:hover i {margin-top:-10px;} /* 컨텐츠 공통 */ .divarea {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; box-sizing:border-box; width:100%; padding-left:33.333%; text-align:left; opacity:1 !important;} .divarea.nowrap {flex-wrap:nowrap; gap:10px;} .divarea > div, .divarea > p, .divarea > ul, .divarea > .decotitle {position:relative; box-sizing:border-box; padding-left:40px;} .divarea + div {margin-top:120px;} .divarea + .divarea.t1 {margin-top:160px;} .divarea + .divarea.t2 {margin-top:90px;} .divarea + .divarea.t3 {margin-top:80px;} .divarea + .divarea.t4 {margin-top:60px;} .titlearea {display:inline-block; position:absolute; float:left; left:0; top:0; width:33.333%; text-align:left;} .decotitle {display:inline-block; position:relative; font-size:20px; font-weight:600; line-height:30px; letter-spacing:-0.5px;} .decotitle i {position:absolute; right:-36px; top:50%; width:16px; height:4px; margin-top:-2px; border-radius:2px; background-color:var(--blue);} .morebtn {display:flex; flex-shrink:0; align-items:center; gap:15px; height:30px;} .morebtn.t1 {gap:20px;} .morebtn span, .morebtn mark {display:inline-block; position:relative; overflow:hidden; vertical-align: middle; font-size:12px; color:transparent; font-weight:600; line-height:20px; letter-spacing:-0.25px;} .morebtn.t1 span, .morebtn.t1 mark {font-size:16px;} .morebtn span:before, .morebtn mark:before {color:var(--black); text-decoration:underline; text-underline-position:under; transition:0.3s;} .morebtn span:after, .morebtn mark:after {top:20px; color:var(--black); text-decoration:underline; text-underline-position:under; transition:0.3s;} .morebtn.t1 span:before, .morebtn.t1 span:after, .morebtn.t1 mark:before, .morebtn.t1 mark:after{text-underline-offset:4px; text-underline-position:initial;} .morebtn.cm span:before, .morebtn.cm span:after {color:var(--yellow);} .morebtn:hover span:before, .morebtn:hover mark:before {top:-20px;} .morebtn:hover span:after, .morebtn:hover mark:after {top:0;} .sitkcytitle {display:inline-block; float:left; position:sticky; left:0; top:130px; z-index:3; height:200px; margin-left:13px; padding-left:19px; font-size:12px; font-weight:700; line-height:12px; letter-spacing:0.5px; transform-origin:top left; transform:rotate(90deg);} .sitkcytitle:before {content:""; position:absolute; left:0; top:3px; width:4px; height:4px; border-radius:50%; background-color:currentColor;} .autotext {display:inline-block; vertical-align:bottom; overflow:hidden; position:relative; margin:5px 0; line-height:20px; color:transparent; white-space:nowrap} .autotext:before {content:attr(data-text); position:absolute; left:0; top:0; color:var(--black); transition:0.3s;} .autotext:after {content:attr(data-text); position:absolute; left:0; top:20px; color:var(--black); transition:0.3s;} .no-transition .autotext:before, .no-transition .autotext:after {transition:0s;} #contents, #footer {opacity:0; transition:0.3s;} #contents.ready, #footer.ready {opacity:1;} #contents.end, #footer.end {transition:0s;} /* 컨텐츠 */ /* 컨텐츠 배경 이미지 설정 (2026.06.19) */ #contents {display:inline-block; position:relative; float:left; width:100%; min-width:320px; margin-top:0; background-color:#fff; background-image:url('../images/project/portfolio/bg.png'); background-size:506px 881px; background-repeat:repeat; background-position:left top;} #contents.leave {transform:translateY(-10vh); opacity:0 !important;} /*#contents.leave {position:absolute; left:0; right:0; top:0; transform:translateY(-10vh); opacity:0 !important;}*/ #contents + #contents {opacity:0 !important;} #contents section {position:relative; padding:160px 0;} #contents .c_state {display:flex; justify-content:space-between; width:100%;} #contents .c_state li {position:relative; overflow:hidden; width:240px; opacity:1 !important;} #contents .c_state li .cs_box {position:relative; top:100%; transition-timing-function:cubic-bezier(.39,.575,.565,1); transition-duration:0.5s;} #contents .c_state li.aos-animate .cs_box {top:0;} #contents .c_state li.aos-animate:nth-child(2) .cs_box {transition-delay:0.2s;} #contents .c_state li.aos-animate:nth-child(3) .cs_box {transition-delay:0.4s;} #contents .c_state li.aos-animate:nth-child(4) .cs_box {transition-delay:0.6s;} #contents .c_state li strong {width:100%; margin:0; font-size:12px; font-weight:400; line-height:20px;} #contents .c_state li strong:after {font-weight:800; color:var(--blue);} #contents .c_state li:nth-child(1) strong:after {content:"북미";} #contents .c_state li:nth-child(2) strong:after {content:"유럽";} #contents .c_state li:nth-child(3) strong:after {content:"중동";} #contents .c_state li:nth-child(4) strong:after {content:"아시아";} #contents .c_state li:hover strong:before {top:-20px;} #contents .c_state li:hover strong:after {top:0;} #contents .c_state li i {display:inline-block; width:12px; height:1px; margin-top:11px; background-color:var(--black); transition:0.3s;} #contents .c_state li:hover i {background-color:var(--blue);} #contents .c_state li .cs_box > span {display:inline-block; vertical-align:middle; width:100%; margin-top:15px; font-size:clamp(80px, 5.208333vw, 100px); font-weight:100; line-height:clamp(80px, 5.208333vw, 100px); letter-spacing:-4px; transition:0.3s;} #contents .c_state li:hover .cs_box > span {font-weight:600; color:var(--blue);} #contents .c_cate.t2 {display:inline-block; float:left; position:sticky; left:0; top:130px; } #contents .c_cate.t2 ul {flex-wrap:wrap; gap:20px;} #contents .c_cate.t2 ul li {display:flex; width:100%;} #contents .c_cate.t2 ul li:first-child {display:none;} /*#contents .c_cate.t2.cc_detail ul li {display:none;}*/ /*#contents .c_cate.t2.cc_detail ul li.on {display:flex;}*/ /* 메인 */ #contents.main .wrap > div {position:relative; width:100%;} #contents.main .divarea > p.text.giant .autotext {font-weight:600; line-height:30px;} #contents.main .divarea > p.text.giant .autotext:before {font-weight:100;} #contents.main .divarea > p.text.giant .autotext:after {top:30px; font-weight:600;} #contents.main .divarea > p.text.giant.cm .autotext:before, #contents.main .divarea > p.text.giant.cm .autotext:after {color:var(--yellow);} #contents.main .divarea.aos-animate > p.text.giant .autotext:before {top:-30px;} #contents.main .divarea.aos-animate > p.text.giant .autotext:after {top:0;} #contents.main .cm_list {display:inline-block; position:relative; width:580px; opacity:1 !important;} #contents.main .cm_list > i {position:absolute; left:-35px; top:7px; opacity:0;} #contents.main .aos-animate .cm_list > i {left:-20px; opacity:1;} #contents.main .cm_list ul {display:flex; flex-wrap:wrap; column-gap:20px;} #contents.main .cm_list ul li {display:flex; align-items:center; gap:20px;} #contents.main .aos-animate .cm_list ul li:nth-child(1) .translateY100 {transition-delay:0.1s;} #contents.main .aos-animate .cm_list ul li:nth-child(2) .translateY100 {transition-delay:0.2s;} #contents.main .aos-animate .cm_list ul li:nth-child(3) .translateY100 {transition-delay:0.3s;} #contents.main .aos-animate .cm_list ul li:nth-child(4) .translateY100 {transition-delay:0.4s;} #contents.main .aos-animate .cm_list ul li:nth-child(5) .translateY100 {transition-delay:0.5s;} #contents.main .cm_list ul li i {display:inline-block; position:relative; flex-shrink:0; width:4px; height:4px; border-radius:50%; background-color:currentColor; transform:translateY(30px);} #contents.main .aos-animate .cm_list ul li i.translateY100 {transform:translateY(0);} #contents.main .cm_hero {display:inline-block; overflow:hidden; position:relative; width:100%; height:100vh; padding:0;} #contents.main .cm_hero canvas {display:none; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:0; transition:1s;} #contents.main .cm_hero #plasticCanvas01 {bottom:auto; height:105vh; opacity:0; transition:1s;} #contents.main .cm_hero.on canvas, #contents.main .cm_hero.on #plasticCanvas01 {opacity:1;} /* 새로운 인터렉션 START */ #contents.main .cm_hero .cmh_plastic {position:absolute; left:0; right:0; top:0; z-index:1; width:100%; height:1410px; pointer-events:none; background-image:url("../images/pic_plastic01.png"); background-repeat:no-repeat; background-size:100% 100%} #contents.main .cm_hero .cmh_marquee {display:flex; justify-content:center; align-items:center; overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; opacity:0; transition:0.5s} #wrap.step03 #contents.main .cm_hero .cmh_marquee {opacity:1;} #contents.main .cm_hero .cmh_marquee ul {display:flex; position:absolute; will-change:transform; white-space:nowrap; animation:slidemarquee 50s linear infinite; animation-play-state:running; transform:translateY(-50%);} #contents.main .cm_hero .cmh_marquee ul.t1 {animation-delay:-25s;} #contents.main .cm_hero .cmh_marquee ul li {display:inline-flex; overflow:hidden; position:relative; width:3550px; height:370px; text-align:center; white-space:nowrap;} #contents.main .cm_hero .cmh_marquee ul li img {width:100%; height:auto; opacity:0; will-change:opacity;} #contents.main .cm_hero .cmh_marquee ul li img.on {opacity:1;} #contents.main .cm_hero .cmh_marquee ul li img:nth-child(n + 1) {position:absolute; left:0; top:0;} /* 새로운 인터렉션 END */ #contents.main .cm_hero .wrap {height:100%;} #contents.main .cm_hero .wrap:before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-image:url("../images/pic_plastic01.png"); background-repeat:no-repeat; background-size:100% 100%; opacity:0; transition:0.3s;} #wrap.step03 #contents.main .cm_hero .wrap:before {opacity:1;} #contents.main .cm_hero .titlearea {display:none; top:auto; bottom:60px;} .step03 #contents.main .cm_hero .titlearea {display:block;} #contents.main .cm_hero .cmh_wrap {display:flex; flex-wrap:wrap; align-items:flex-end; box-sizing:border-box; padding-bottom:60px; height:100%;} #contents.main .cm_hero .cmh_qr {display:flex; gap:30px; position:relative; width:100%;} #contents.main .cm_hero .cmh_qr img {top:100%; width:60px; height:60px;} .endloading #contents.main .cm_hero .cmh_qr img {transform:translateY(0);} #contents.main .cm_hero .cmh_qr p {line-height:20px;} #contents.main .cm_hero .cmh_qr p span {float:left;} .endloading #contents.main .cm_hero .cmh_qr p span:nth-child(1) span {transform:translateY(0); transition-delay:0.2s;} .endloading #contents.main .cm_hero .cmh_qr p span:nth-child(2) span {transform:translateY(0); transition-delay:0.3s;} .endloading #contents.main .cm_hero .cmh_qr p span:nth-child(3) span {transform:translateY(0); transition-delay:0.4s;} #contents.main .cm_hero .cmh_txt {display:none; opacity:1 !important;} #contents.main .cm_hero .cmh_txt b {font-weight:700;} #contents.main .cm_hero .cmh_txt b:before {font-weight:300;} #contents.main .cm_hero .cmh_txt b:after {top:22px; font-weight:700;} .step03 #contents.main .cm_hero .cmh_txt {display:block;} .endloading #contents.main .cm_hero .cmh_txt > span:nth-child(1) > span {transform:translateY(0); transition-delay:0.3s;} .endloading #contents.main .cm_hero .cmh_txt > span:nth-child(2) > span {transform:translateY(0); transition-delay:0.4s;} .endloading #contents.main .cm_hero .cmh_txt b:before {top:-20px; transition-delay:0.9s;} .endloading #contents.main .cm_hero .cmh_txt b:after {top:0; transition-delay:0.9s;} #contents.main .cm_vision {padding-top:100px;} #contents.main .cm_vision .cmv_list > i {position:absolute; left:-35px; top:7px; opacity:0;} #contents.main .cm_vision .aos-animate .cmv_list > i {left:-20px; opacity:1;} #contents.main .cm_vision .cmv_list li {display:flex; gap:20px} #contents.main .cm_vision .cmv_list li strong {width:200px;} #contents.main .cm_vision .cmv_list li .autotext {font-weight:600;} #contents.main .cm_vision .cmv_list li .autotext:before {font-weight:400;} #contents.main .cm_vision .cmv_list li .autotext:after {top:30px; font-weight:600;} #contents.main .cm_vision .aos-animate .cmv_list li .autotext:before {top:-20px;} #contents.main .cm_vision .aos-animate .cmv_list li .autotext:after {top:0;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(1) strong span {transition-delay:0.1s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(1) span span {transition-delay:0.1s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(2) strong span {transition-delay:0.2s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(2) span span {transition-delay:0.2s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(3) strong span {transition-delay:0.3s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(3) span span {transition-delay:0.3s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(1) .autotext:before {transition-delay:0.5s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(1) .autotext:after {transition-delay:0.5s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(2) .autotext:before {transition-delay:0.6s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(2) .autotext:after {transition-delay:0.6s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(3) .autotext:before {transition-delay:0.7s;} #contents.main .cm_vision .aos-animate .cmv_list li:nth-child(3) .autotext:after {transition-delay:0.7s;} #contents .c_projects {opacity:1 !important; transform:none !important;} #contents .c_projects: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 .c_projects.aos-animate:before {width:calc(100% - 120px); opacity:1;} #contents .c_projects .cp_plastic {position:absolute; left:0; right:0; top:-150px; z-index:1; width:100%; height:1143px; pointer-events:none; background-image:url("../images/pic_plastic02.png"); background-repeat:no-repeat; background-size:100% 100%} #contents .c_projects .cp_wrap.t1 {overflow:hidden;} #contents .c_projects .cp_stickyarea {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; pointer-events:none;} #contents .c_projects .cp_marquee {display:flex; justify-content:center; align-items:center; position:relative; width:calc(100% + 120px); height:160px; margin-left:-60px; margin-top:0; padding-top:120px; padding-bottom:160px;} #contents .c_projects .cp_marquee ul {display:flex; position:absolute; top:120px; will-change:transform; white-space:nowrap; animation:slidemarquee 50s linear infinite; animation-play-state:running;} #contents .c_projects .cp_marquee.pause ul {animation-play-state:paused;} #contents .c_projects .cp_marquee ul.t1 {animation-delay:-25s;} #contents .c_projects .cp_marquee.t1.pause ul.t1 {margin-left:50px;} #contents .c_projects .cp_marquee.t2.pause ul.t1 {margin-left:50px;} #contents .c_projects .cp_marquee ul li {display:inline-flex; overflow:hidden; width:230px; height:130px; border-radius:70px; margin:0 30px; text-align:center; white-space:nowrap; box-shadow:0 30px 60px 0 rgba(17, 20, 38, 0.15); transition:0.3s;} #contents .c_projects .cp_marquee ul li:hover {transform:scale(1.3);} #contents .c_projects .cp_marquee ul li img {width:100%; height:auto;} @keyframes slidemarquee {0% {transform:translate(100%);} to {transform:translate(-100%);} } #contents .c_projects .cp_wrap.t2 {margin-top:-70px;} #contents .c_projects .cp_awardarea {display:inline-block; width:100%; position:relative; margin-top:120px; opacity:1 !important; transform:none !important;} #contents .c_projects .cp_award {display:inline-block; vertical-align:middle; width:100%; margin-top:-200px;} #contents.projects .c_projects .cp_award {margin-top:0;} #contents .c_projects .cp_award > ul {display:flex; flex-wrap:wrap; vertical-align:middle; width:100%} #contents .c_projects .cp_award > ul > li {display:flex; align-content:flex-start; flex-wrap:wrap; vertical-align:middle; float:left; width:calc(50% - 30px);} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:60px;} #contents .c_projects .cp_award > ul > li:nth-child(n + 3) {margin-top:60px;} #contents .c_projects .cp_award > ul > li > a {display:inline-block; width:100%;} #contents .c_projects .cp_award > ul > li > a .cpa_pic {display:inline-block; overflow:hidden; position:relative; float:left; width:100%; border-radius:5px; font-size:0; line-height:0; transition:0.5s;} #contents .c_projects .cp_award > ul > li > a:hover .cpa_pic {transform:scale(1.065); box-shadow: 0 50px 100px 0 rgba(17, 20, 38, 0.25); transition:0.3s;} #contents .c_projects .cp_award > ul > li > a .cpa_pic img {width:100%; height:auto; opacity:1;} #contents .c_projects .cp_award > ul > li > a .cpa_pic i {position:absolute; right:15px; top:15px; width:55px; height:55px; background-image:url("../images/symbol_wa.png"); background-size:100% 100%; background-repeat:no-repeat;} #contents .c_projects .cp_award > ul > li > a .cpa_pic video {position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; opacity:0; transition: opacity 0.4s ease;} #contents .c_projects .cp_award > ul > li > a .cpa_pic.on video {opacity:1;} #contents .c_projects .cp_award > ul > li > a .cpa_pic.on img {opacity:0; transition:0.4s;} #contents .c_projects .cp_award > ul > li .cpa_title {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; padding:10px 0; opacity:1 !important; font-size:16px;} #contents .c_projects .cp_award > ul > li .cpa_title span {display:flex; justify-content:space-between; align-items:flex-start; position:relative; width:100%;} #contents .c_projects .cp_award > ul > li .cpa_title span span {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; box-sizing:border-box; width:100%; padding-right:21px;} #contents .c_projects .cp_award > ul > li .cpa_title span i {position:absolute; top:6px; right:0;} #contents .c_projects .cp_award > ul > li .cpa_title:before {content:""; position:absolute; left:0; bottom:0; width:0.01px; height:1px; background-color:var(--black); transition:0.5s;} #contents .c_projects .cp_award > ul > li .cpa_title.aos-animate:before {width:100%; transition-delay:0.2s;} #contents.projects .c_projects .cp_award > ul > li .cpa_title:before {width:100%; transition-delay:0.2s;} #contents .c_projects .cp_award .cpa_cate {display:flex; flex-wrap:wrap; column-gap:10px; width:100%; margin-top:10px; padding:3px 0; line-height:24px;} #contents .c_projects .cp_award .cpa_cate li {display:flex; align-items:center; gap:10px; opacity:1 !important;;} #contents .c_projects .cp_award .cpa_cate li i {display:inline-block; position:relative; flex-shrink:0; width:4px; height:4px; border-radius:50%; background-color:currentColor;} #contents .c_projects .cp_award .cpa_cate li:last-child i {display:none;} #contents .c_projects .cp_award .cpa_cate li:nth-child(1) .translateY100 {transition-delay:0.1s;} #contents .c_projects .cp_award .cpa_cate li:nth-child(2) .translateY100 {transition-delay:0.2s;} #contents .c_projects .cp_award .cpa_cate li:nth-child(3) .translateY100 {transition-delay:0.3s;} #contents .c_projects .cp_award .cpa_cate li:nth-child(4) .translateY100 {transition-delay:0.4s;} #contents .c_projects .cp_award .cpa_cate li:nth-child(5) .translateY100 {transition-delay:0.5s;} #contents .c_projects .cp_award .cpa_cate li i.translateY100 {transform:translateY(30px);} #contents .c_projects .cp_award .cpa_cate.aos-animate li i.translateY100 {transform:translateY(0);} #contents .c_projects .cp_award.t1 > ul > li > a {width:43%;} #contents .c_projects .cp_award.t1 > ul > li .cpa_box {box-sizing:border-box; width:57%; padding-left:30px;} #contents .c_projects .cp_list {display:inline-block; vertical-align:middle; width:100%;} #contents .c_projects .cp_list > ul {display:inline-block; vertical-align:middle; width:100%; border-top:var(--black) solid 1px;} #contents .c_projects .cp_list > ul > li {display:inline-block; position:relative; float:left; vertical-align:middle; width:100%; opacity:1 !important;} #contents .c_projects .cp_list > ul > li:before {content:""; position:absolute; right:0; bottom:0; width:0.01px; height:1px; background-color:var(--black); opacity:0.1; transition:0.7s;} #contents .c_projects .cp_list > ul > li.aos-animate:before {width:100%;} #contents.projects .c_projects .cp_list > ul > li:before {width:100%;} #contents .c_projects .cp_list > ul > li > a {display:flex; align-items:center; justify-content:space-between; padding:20px 0;} #contents .c_projects .cp_list > ul > li > a .cpl_title {display:flex; align-items:center; box-sizing:border-box; width:31%; padding-right:2%; flex-shrink:0; line-height:22px;} #contents .c_projects .cp_list > ul > li > a .cpl_title span {width:auto;} #contents .c_projects .cp_list > ul > li > a .cpl_title i.icon {opacity:0;} #contents .c_projects .cp_list > ul > li > a:hover .cpl_title i.icon {margin-left:10px; opacity:1;} #contents .c_projects .cp_list > ul > li > a .cpl_title .translateY100 {display:flex; align-items:center; gap:15px; overflow-wrap:anywhere;} #contents .c_projects .cp_list > ul > li > a .cpl_title .translateY100 i {display:inline-block; position:relative; flex-shrink:0; width:4px; height:4px; border-radius:50%; background-color:currentColor;} #contents .c_projects .cp_list > ul > li .cpl_cate {display:flex; flex-wrap:wrap; column-gap:10px; box-sizing:border-box; width:100%; padding:3px 0; padding-right:5%; line-height:24px;} #contents .c_projects .cp_list > ul > li .cpl_cate li {display:flex; align-items:center; gap:10px; opacity:1 !important;;} #contents .c_projects .cp_list > ul > li .cpl_cate li i {display:inline-block; position:relative; flex-shrink:0; width:4px; height:4px; border-radius:50%; background-color:currentColor;} #contents .c_projects .cp_list > ul > li .cpl_cate li:last-child i {display:none;} #contents .c_projects .cp_list > ul > li .cpl_cate li:nth-child(1) .translateY100 {transition-delay:0.1s;} #contents .c_projects .cp_list > ul > li .cpl_cate li:nth-child(2) .translateY100 {transition-delay:0.2s;} #contents .c_projects .cp_list > ul > li .cpl_cate li:nth-child(3) .translateY100 {transition-delay:0.3s;} #contents .c_projects .cp_list > ul > li .cpl_cate li:nth-child(4) .translateY100 {transition-delay:0.4s;} #contents .c_projects .cp_list > ul > li .cpl_cate li:nth-child(5) .translateY100 {transition-delay:0.5s;} #contents .c_projects .cp_list > ul > li .cpl_cate li i.translateY100 {transform:translateY(30px);} #contents .c_projects .cp_list > ul > li .cpl_cate.aos-animate li i.translateY100 {transform:translateY(0);} #contents .c_projects .cp_list > ul > li > a .icon {flex-shrink:0;} #contents .c_projects .cp_area:nth-child(n + 3) {position:relative; margin-top:120px; padding-top:120px;} #contents .c_projects .cp_area:nth-child(n + 3):before {content:""; position:absolute; left:calc(33.333% + 40px); top:0; right:0; height:1px; background-color:var(--black);} #contents .c_projects .morebtn.t1 {margin-top:60px; margin-left:40px;} #contents .c_service .cs_wrap {position:relative; width:100%;} #contents .c_service .cs_line {content:""; position:absolute; left:auto !important; right:60px; width:1%; top:0; height:1px; background-color:var(--black); opacity:0; transition:0.3s;} #contents .c_service .cs_line.aos-animate {width:calc(100% - 120px); opacity:1;} #contents .c_service .cs_plastic {position:absolute; left:-60px; right:auto !important; bottom:-100px; z-index:2; width:calc(100% + 120px); height:1957px; pointer-events:none; background-image:url("../images/pic_plastic03_new.png"); background-repeat:no-repeat; background-size:100% 100%;} #contents .c_service .cs_title {font-size:clamp(17px,1.8229vw,35px); line-height:clamp(27px,2.3438vw,45px);} #contents .c_service .cs_title i {display:inline-block; width:clamp(12px,1.3021vw,25px); height:clamp(12px,1.3021vw,25px); margin-right:5px; border-radius:2px; background-color:var(--black);} #contents .c_service .cs_title .translateY100 {transform:translateY(0);} #contents .c_service .cs_title .autotext {line-height:clamp(17px,1.8229vw,35px);} #contents .c_service .cs_title .autotext:before {font-weight:100;} #contents .c_service .cs_title .autotext:after {top:clamp(17px,1.8229vw,35px);} #contents .c_service .divarea.aos-animate .cs_title .autotext:before {top:-35px;} #contents .c_service .divarea.aos-animate .cs_title .autotext:after {top:0;} #contents .c_service .cs_decowrap {margin-top:40px; height:60px;} #contents .c_service .cs_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.8s; text-align:left;} #contents .c_service .divarea.aos-animate .cs_deco > span {height:60px;} #contents .c_service .cs_deco > span:before {content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background-color:var(--black);} #contents .c_service .cs_deco > span > span {display:inline-block; width:100%; font-size:12px; line-height:12px;} #contents .c_service .divarea.div2 .translateY100 {transform:translateY(0);} #contents .c_service .divarea.div2 p {display:inline-block; vertical-align:middle; width:50%; text-align:left;} #contents .c_service .cs_sticky {display:inline-block; width:100%; height:300vh; margin-top:0;} #contents .c_service .cs_sticky .divarea.div2 p:first-child span {text-underline-offset:2px; text-decoration:underline;} #contents .c_service .cs_sticky .css_stickywrap {display:flex; align-items:flex-end; flex-wrap:wrap; position:sticky; left:0; top:0; width:100%; height:100vh;} #contents .c_service .cs_sticky .css_wrap {display:inline-block; position:relative; width:100%;} #contents .c_service .cs_sticky .css_wrap:before {content:""; position:absolute; left:0; right:0; top:0; height:1px; background-color:var(--black);} #contents .c_service .cs_sticky .css_wrap:after {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:var(--black);} #contents .c_service .cs_sticky .css_wrap > div {display:inline-block; overflow:hidden; width:calc(100% + 60px);} #contents .c_service .cs_sticky .css_content {display:flex; flex-wrap:nowrap;} #contents .c_service .cs_sticky .css_content .cssc_box {position:relative; overflow:hidden; flex-shrink:0; text-align:left; opacity:1 !important;} #contents .c_service .cs_sticky .css_content .cssc_box:before {content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--black); opacity:0.1;} #contents .c_service .cs_sticky .css_content .cssc_box.t1:before {display:none;} #contents .c_service .cs_sticky .css_content .cssc_box > div {display:flex; flex-wrap:wrap; align-content:space-between; position:relative; box-sizing:border-box; width:615px; height:450px; padding:40px;width:535px;} #contents .c_service .cs_sticky .css_content .cssc_title {display:flex; flex-wrap:wrap; gap:5px; width:100%;} #contents .c_service .cs_sticky .css_content .cssc_title > span {display:flex; justify-content:space-between; position:relative; width:100%; font-size:20px; font-weight:600; color:var(--black); line-height:30px; letter-spacing:-0.5px;} #contents .c_service .cs_sticky .css_content .cssc_title > span > b {font-size:40px; font-weight:600; line-height:50px; letter-spacing:-0.5px;} #contents .c_service .cs_sticky .css_content .cssc_title i {display:inline-block; vertical-align:middle; width:28px; height:28px; background-image:url("../images/common/icon_service.svg"); background-repeat:no-repeat; background-size:100% auto;} #contents .c_service .cs_sticky .css_content .cssc_box.t2 .cssc_title i {background-position:center 33.333%;} #contents .c_service .cs_sticky .css_content .cssc_box.t3 .cssc_title i {background-position:center 66.666%;} #contents .c_service .cs_sticky .css_content .cssc_box.t4 .cssc_title i {background-position:center 100%;} #contents .c_service .cs_sticky .css_content strong {display:inline-block; vertical-align:middle; width:100%; font-size:100px; font-weight:500; color:var(--black); line-height:100px; letter-spacing:-0.5px;} #contents .c_service .cs_sticky .css_content p {display:flex; width:100%; min-height:90px; font-size:12px; color:var(--black); font-weight:400; line-height:30px; letter-spacing:-0.5px; opacity:0.6; word-break:keep-all;} #contents.main .cm_inside {padding-top:130px;} #contents .c_inside .ci_news {display:inline-block; position:relative; float:left; box-sizing:border-box; width:100%; margin-top:125px; opacity:1 !important;} #contents .c_inside .ci_news.off {opacity:0 !important; transition:0s !important;} #contents .c_inside .ci_news:before {content:""; position:absolute; right:0; width:0.001px; top:0; height:1px; background-color:var(--black); transition:0.5s;} #contents .c_inside .ci_news.aos-animate:before {width:100%; opacity:1;} #contents .c_inside .ci_news .cin_sticky {display:inline-block; float:left; overflow:hidden; position:sticky; left:0; top:50%; z-index:1; width:calc(33.333% - 140px); margin-left:140px; border-radius:5px; box-shadow:0 50px 100px 0 rgba(17, 20, 38, 0.40); font-size:0; line-height:0; transition:0.5s;} #contents .c_inside .ci_news .cin_sticky img {position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:auto; aspect-ratio:4/3;} #contents .c_inside .ci_news .cin_sticky .cnis_imgbox {display:inline-block; position:relative; width:100%; height:auto; background-color:var(--yellow); aspect-ratio:4/3;} #contents .c_inside .ci_news ul {display:inline-block; float:left; width:100%; margin-top:-332px;} #contents .c_inside .ci_news.t1 ul {margin-top:0 !important;} #contents .c_inside .ci_news li {display:inline-block; float:left; position:relative; box-sizing:border-box; width:100%; padding-left:33.333%;} #contents .c_inside .ci_news li:before {content:""; position:absolute; right:0; bottom:0; width:0.01px; height:1px; background-color:var(--black); opacity:0.1; transition:0.7s;} #contents .c_inside .ci_news.aos-animate li:before {width:100%;} #contents .c_inside .ci_news.aos-animate li:nth-child(1):before {transition-delay:0.2s;} #contents .c_inside .ci_news.aos-animate li:nth-child(2):before {transition-delay:0.3s;} #contents .c_inside .ci_news.aos-animate li:nth-child(3):before {transition-delay:0.4s;} #contents .c_inside .ci_news.aos-animate li:nth-child(4):before {transition-delay:0.5s;} #contents .c_inside .ci_news.aos-animate li:nth-child(5):before {transition-delay:0.6s;} #contents .c_inside .ci_news.aos-animate li:nth-child(6):before {transition-delay:0.7s;} #contents .c_inside .ci_news.aos-animate li:nth-child(7):before {transition-delay:0.8s;} #contents .c_inside .ci_news.aos-animate li:nth-child(8):before {transition-delay:0.9s;} #contents .c_inside .ci_news.aos-animate li:nth-child(9):before {transition-delay:1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(10):before {transition-delay:1.1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(11):before {transition-delay:1.2s;} #contents .c_inside .ci_news li > strong {display:flex; align-items:center; position:absolute; left:0; top:50%; margin-top:-15px; padding-left:19px; font-size:12px; font-weight:600; color:var(--black); line-height:30px; letter-spacing:-0.5px; transition:0.7s; opacity:0;} #contents .c_inside .ci_news.aos-animate li > strong {opacity:1;} #contents .c_inside .ci_news.aos-animate li:nth-child(1) > strong {transition-delay:0.3s;} #contents .c_inside .ci_news.aos-animate li:nth-child(2) > strong {transition-delay:0.4s;} #contents .c_inside .ci_news.aos-animate li:nth-child(3) > strong {transition-delay:0.5s;} #contents .c_inside .ci_news.aos-animate li:nth-child(4) > strong {transition-delay:0.6s;} #contents .c_inside .ci_news.aos-animate li:nth-child(5) > strong {transition-delay:0.7s;} #contents .c_inside .ci_news.aos-animate li:nth-child(6) > strong {transition-delay:0.8s;} #contents .c_inside .ci_news.aos-animate li:nth-child(7) > strong {transition-delay:0.9s;} #contents .c_inside .ci_news.aos-animate li:nth-child(8) > strong {transition-delay:1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(9) > strong {transition-delay:1.1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(10) > strong {transition-delay:1.2s;} #contents .c_inside .ci_news.aos-animate li:nth-child(11) > strong {transition-delay:1.3s;} #contents .c_inside .ci_news li > strong:before {content:""; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background-color:var(--black);} #contents .c_inside .ci_news li > strong > i {opacity:0;} #contents .c_inside .ci_news li.hover > strong > i {margin-left:15px; opacity:1;} #contents .c_inside .ci_news li > .cin_pic {display:inline-block; overflow:hidden; position:absolute; left:140px; top:50%; width:calc(33.333% - 140px); border-radius:5px; box-shadow:0 50px 100px 0 rgba(17, 20, 38, 0.40); transform:translateY(-50%) scale(0.3); opacity:0; pointer-events:none; transition:0.3s;} #contents .c_inside .ci_news li > .cin_pic img {float:left; width:100%; height:auto; aspect-ratio:4/3;} #contents .c_inside .ci_news li > p {display:inline-block; position:relative;box-sizing:border-box; width:100%; padding-left:40px; padding-right:50px; text-align:left; opacity:0; transition:0.7s;} #contents .c_inside .ci_news.aos-animate li > p {opacity:1;} #contents .c_inside .ci_news.aos-animate li:nth-child(1) > p {transition-delay:0.3s;} #contents .c_inside .ci_news.aos-animate li:nth-child(2) > p {transition-delay:0.4s;} #contents .c_inside .ci_news.aos-animate li:nth-child(3) > p {transition-delay:0.5s;} #contents .c_inside .ci_news.aos-animate li:nth-child(4) > p {transition-delay:0.6s;} #contents .c_inside .ci_news.aos-animate li:nth-child(5) > p {transition-delay:0.7s;} #contents .c_inside .ci_news.aos-animate li:nth-child(6) > p {transition-delay:0.8s;} #contents .c_inside .ci_news.aos-animate li:nth-child(7) > p {transition-delay:0.9s;} #contents .c_inside .ci_news.aos-animate li:nth-child(8) > p {transition-delay:1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(9) > p {transition-delay:1.1s;} #contents .c_inside .ci_news.aos-animate li:nth-child(10) > p {transition-delay:1.2s;} #contents .c_inside .ci_news.aos-animate li:nth-child(11) > p {transition-delay:1.3s;} #contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {display:inline-block; position:relative; vertical-align:middle; padding:clamp(16px, 2.0833vw, 40px) 0; font-size:clamp(16px, 2.0833vw, 40px); font-weight:100; color:var(--black); line-height:clamp(16px, 3.125vw, 60px); letter-spacing:-0.5px; transition:0.5s;} #contents .c_inside .ci_news li.hover > p > a, #contents .c_inside .ci_news li.hover > p > button {font-weight:500;} #contents .c_inside .ci_news li > p > a span, #contents .c_inside .ci_news li > p > button span {overflow:hidden; display:-webkit-box; position:relative;box-sizing:border-box; width:100%; height:clamp(16px, 3.125vw, 60px); -webkit-line-clamp:1; text-align:left; text-overflow:ellipsis; -webkit-box-orient:vertical;} #contents .c_inside .ci_news li > p > a span:before, #contents .c_inside .ci_news li > p > button span:before {content:""; position:absolute; left:0; bottom:0; width:1%; height:3px; background-color:var(--black); opacity:0; transition:0.3s;} #contents .c_inside .ci_news li.hover > p > a span:before, #contents .c_inside .ci_news li.hover > p > button span:before {width:100%; opacity:1;} #contents .c_inside .ci_news li > p > i {display:flex; justify-content:center; align-items:center; position:absolute; right:0; top:50%; box-sizing:border-box; width:30px; height:30px; margin-top:-15px; border-radius:50%; border:var(--black) solid 1px; transition:0.3s;} #contents .c_inside .ci_news li.hover > p > i {background-color:var(--black);} #contents .c_inside .ci_news li.hover > p > i > i {background-position:left;} /* 프로젝트 */ #contents.projects .c_intro {overflow:visible;} #contents.projects .c_intro.step01 {padding-bottom:0;} #contents.projects .c_intro > .wrap > div.t1 {width:100%;} #contents.projects .c_intro > .wrap > div.t1 + div {padding-bottom:80px;} #contents.projects .c_contact:before {content:""; position:absolute; left:60px; right:60px; top:0; height:1px; background-color:var(--black);} #contents .c_cate .cc_catebtn {display:none;} #contents.projects .c_cate > ul .cc_btn, #contents.projects .c_cate > ul .morebtn {pointer-events:auto} #contents.projects .c_cate > ul .morebtn {margin-left:0; margin-top:40px;} #contents.projects .c_projects .cp_wrap.t2 {margin-top:0;} #contents.projects .c_projects .cp_awardarea {margin-top:0; min-height:400px;} #contents.projects .cp_hero {margin-bottom:80px; padding-bottom:0; opacity:0; transition:0.3s;} #contents.projects .cp_hero.step01 {opacity:1;} #contents.projects .cp_hero .cph_wrap {display:inline-block; width:100%; position:relative;} #contents.projects .cp_hero .cph_content {display:flex; width:100%; position:relative;} #contents.projects .cp_hero .cph_content > p {display:inline-block; width:100%; font-size:clamp(10px,4.16vw,80px); font-weight:500; line-height:clamp(10px,4.16vw,80px); text-align:left;} #contents.projects .cp_hero .cph_content > p > span {display:inline-block; width:100%;} #contents.projects .cp_hero .cph_content > p > span span {clip-path:rect(0 0 100% 0 round 0); transition:0.5s;} #contents.projects .cp_hero.step02 .cph_content > p > span span {display:inline-block; clip-path:rect(0 100% 100% 0 round 0);} #contents.projects .cp_hero.step02 .cph_content > p > span:nth-child(1) span {transition-delay:0.2s;} #contents.projects .cp_hero.step02 .cph_content > p > span:nth-child(2) span {transition-delay:0.3s;} #contents.projects .cp_hero.step02 .cph_content > p > span:nth-child(3) span {transition-delay:0.4s;} #contents.projects .cp_hero.step02 .cph_content > p > span:nth-child(4) span {transition-delay:0.5s;} #contents.projects .cp_hero.step02 .cph_content > p > span:nth-child(5) span {transition-delay:0.6s;} #contents.projects .cp_hero .cph_content > span {display:flex; flex-wrap:wrap; align-content:flex-end; flex-shrink:0; position:relative; width:clamp(10px,28.64vw,550px); height:clamp(10px,20.31vw,390px);} #contents.projects .cp_hero .cph_content > span:before {content:""; position:absolute; left:0; right:0; top:0; height:clamp(10px,16.14vw,310px); background-image: url("../images/portfolio/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.projects .cp_hero.step03 .cph_content > span:before {clip-path:rect(0 100% 100% 0 round 0);} #contents.projects .cp_hero .cph_content > span > span {display:flex; width:100%;} #contents.projects .cp_hero .cph_content > 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.projects .cp_hero.step03 .cph_content > span > span:nth-child(1) > .translateY100, #contents.projects .cp_hero.step03 .cph_content > span > span:nth-child(2) > span {transform:translateY(0);} #contents.projects .cp_hero .cph_content > span > span i.squre {display:inline-block; width:0.7813vw; height:0.7813vw; border-radius:2px; background-color:var(--black);} #contents.projects .cp_hero .cph_wrap > strong {display:flex; width:100%; margin-top:clamp(10px,120px,6.25vw); font-size:clamp(10px,9.37vw,180px); font-weight:100; line-height:clamp(10px,9.37vw,180px);} #contents.projects .cp_hero .cph_wrap > strong b {font-weight:400;} #contents.projects .cp_hero .cph_wrap > strong > span {display:flex;} #contents.projects .cp_hero.step04 .cph_wrap > strong > span {transform:translateY(0);} #contents.projects .cp_hero .cph_pic {display:inline-block; position:absolute; left:50%; top:50%; z-index:3; width:clamp(1px,41.66vw,800px); transform:translate(-50%,-80%); font-size:0; line-height:0; pointer-events:none; aspect-ratio:4/5; opacity:0; transition:0.7s; animation: 5s infinite normal running updown;} #contents.projects .cp_hero.step05 .cph_pic {transform:translate(-50%,-50%); opacity:0.7;} #contents.projects .cp_hero .cph_pic > img {width:100%; height:auto;} #contents.projects .cp_hero .cch_bottomblur {position:absolute; left:50%; top:93.7%; z-index:3; width:17vw; height:4.8vw; transform:translate(-50%,-50%) scale(1); animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw); opacity:0; transition:0.2s; transition-delay:0.5s;} #contents.projects .cp_hero .cph_middleblur {position:absolute; left:50%; top:49.7%; z-index:3; width:12vw; height:29vw; transform:translate(-50%,-50%) scale(1); clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); animation:5s infinite normal running updown; backdrop-filter:blur(0.5208vw); -webkit-backdrop-filter:blur(0.5208vw); opacity:0; transition:0.2s; transition-delay:0.5s;} #contents.projects .cp_hero.step05 .cch_bottomblur, #contents.projects .cp_hero.step05 .cph_middleblur {transform:translate(-50%,-50%); opacity:1;} #contents.projects .cp_hero ~ .c_projects {opacity:0 !important;} #contents.projects .cp_hero.step05 ~ .c_projects {opacity:1 !important;} /* 함께하는 사랑밭 */ #contents.sarangbat .cp_hero .cph_banner .cphb_box {overflow:hidden; background-image:url('../images/project/sarangbat/bg_hero.jpg');} #contents.sarangbat .cp_hero .cph_banner .cp_imgwrap {display:flex; justify-content:space-between; align-items:center; overflow:hidden; gap:60px; top:0; bottom:0; left:0; right:0; box-sizing:border-box; padding:0 80px;} #contents.sarangbat .cp_hero .cph_banner .cpi_logo {width:500px;} #contents.sarangbat .cp_hero .cph_banner img {width:100%; height:auto;} #contents.sarangbat .cp_hero .cph_banner .cpi_pic {width:650px;} /* 푸터 */ #footer {display:inline-block; position:relative; width:100%; min-width:320px; padding-top:120px; padding-bottom:60px;} #contents.project ~ #footer {display:none !important;} #contents.leave ~ #footer, #contents + #contents ~ #footer {transform:translateY(-10vh); opacity:0 !important;} #footer:before {content:""; position:absolute; left:60px; right:60px; top:0; height:1px; background-color:var(--black);} #footer .f_plastic {position:absolute; left:0; right:0; bottom:0; z-index:1; width:100%; height:1600px; pointer-events:none; background-image:url("../images/pic_plasticfooter.png"); background-repeat:no-repeat; background-size:100% 100%;} #footer .f_wrap {display:inline-block; position:relative; width:100%;} #footer .f_mail {display:flex; gap:30px; align-items:center; overflow:hidden; position:relative; box-sizing:border-box; margin-left:40px; font-size:clamp(16px, 4.6875vw, 90px); font-weight:500; color:var(--black); line-height:clamp(20px, 5.2083vw, 100px); letter-spacing:clamp(-2px, -0.0938vw, -1px);} #footer .f_mail .fm_interaction {position:relative;} #footer .f_mail .fm_interaction:before {content:""; position:absolute; left:0; bottom:0; width:0.01px; height:4px; background-color:var(--black); transition:0.3s;} #footer .f_mail.aos-animate .fm_interaction span {display:inline-block; transform:translateY(clamp(20px, 5.2083vw, 100px)); animation:riseUp 0.5s ease forwards;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(1) {animation-delay:0.05s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(2) {animation-delay:0.1s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(3) {animation-delay:0.15s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(4) {animation-delay:0.2s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(5) {animation-delay:0.25s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(6) {animation-delay:0.3s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(7) {animation-delay:0.35s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(8) {animation-delay:0.4s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(9) {animation-delay:0.45s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(10) {animation-delay:0.5s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(11) {animation-delay:0.55s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(12) {animation-delay:0.6s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(13) {animation-delay:0.65s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(14) {animation-delay:0.7s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(15) {animation-delay:0.75s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(16) {animation-delay:0.8s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(17) {animation-delay:0.85s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(18) {animation-delay:0.9s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(19) {animation-delay:0.95s;} #footer .f_mail.aos-animate .fm_interaction span:nth-child(20) {animation-delay:1s;} #footer .f_mail.aos-animate .fm_interaction:before {width:100%; transition-delay:1.3s;} @keyframes riseUp {to { transform: translateY(0); }} #footer .f_mail .fm_interaction:hover:after {width:100%; transition-delay:0.2s;} #footer .f_mail span {margin:0; flex-shrink:0; position:relative; line-height:inherit; text-align:left;} #footer .f_mail i {position:relative; background:none !important; opacity:0;} #footer .f_mail.aos-animate i {opacity:1; transition-delay:1.3s;} #footer .f_mail i:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:url("../images/common/icon_link_giant.svg") right center repeat; background-size:auto 100%; transition:0.3s;} #footer .f_mail:hover i:before {background-position:right -200% center} #footer .f_subtitle {display:inline-block; position:relative; box-sizing:border-box; width:100%; padding-left:19px;} #footer .f_subtitle.f_snstitle {display:none;} #footer .f_subtitle i {position:absolute; left:-19px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background-color:currentColor;} #footer .f_info {display:flex; flex-wrap:wrap; align-content:space-between; width:50%;} #footer .f_info ul {display:flex; flex-wrap:wrap; align-content:space-between; gap:40px; width:100%;} #footer .f_info li {display:flex; flex-wrap:wrap; gap:10px; opacity:1 !important;} #footer .f_info li a {overflow:hidden; position:relative; text-align:left; color:transparent;} #footer .f_info li a span {line-height:30px;} #footer .f_info li a span:before {color:var(--black); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;} #footer .f_info li a span:after {top:30px; color:var(--black); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;} #footer .f_info li a:hover span:before {top:-30px;} #footer .f_info li a:hover span:after {top:0;} #footer .f_area {display:flex; flex-wrap:wrap; gap:50px; width:50%; padding-left:80px; opacity:1 !important;} #footer .f_area p.text.giant .autotext {font-weight:600; line-height:30px;} #footer .f_area p.text.giant .autotext:before {font-weight:200;} #footer .f_area p.text.giant .autotext:after {top:40px; font-weight:600;} #footer .f_area.aos-animate p.text.giant .autotext:before {top:-40px;} #footer .f_area.aos-animate p.text.giant .autotext:after {top:0;} #footer .f_sns {display:inline-block; vertical-align:middle; width:100%;} #footer .f_sns li {display:flex; vertical-align:middle; width:100%;} #footer .f_sns li + li {margin-top:10px;} #footer .f_sns li a {display:flex; align-items:center;} #footer .f_sns li a span {display:flex; align-items:center; gap:10px; overflow:hidden; position:relative; font-size:25px; color:transparent; font-weight:200; line-height:30px; letter-spacing:-0.5px;} #footer .f_sns li a span:before {text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;} #footer .f_sns li a span:after {top:30px; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;} #footer .f_sns li a:hover span:before {top:-30px;} #footer .f_sns li a:hover span:after {top:0;} #footer .f_copyright {position:absolute; left:0; bottom:0; font-size:16px; font-weight:600; line-height:30px; letter-spacing:-0.5px;} #footer .f_function {display:flex; box-sizing:border-box; width:100%; margin-top:10px; text-align:left;} #footer .f_function a {display:flex; align-items:center; gap:20px;} #footer .f_function a span {display:inline-block; overflow:hidden; position:relative; font-size:16px; color:transparent; font-weight:600; line-height:30px; letter-spacing:-0.5px;} #footer .f_function a span:before {color:var(--black); text-underline-offset:3px; text-decoration:underline;} #footer .f_function a span:after {top:30px; color:var(--black); text-underline-offset:3px; text-decoration:underline;} #footer .f_function a:hover span:before {top:-30px;} #footer .f_function a:hover span:after {top:0;} #footer .f_btn {display:none;} @media all and (max-width:1920px) { #contents .c_inside .ci_news .cin_sticky {left:200px; top:calc(50% - 170px); margin-left:0;} } @media all and (max-width:1680px) { /* 공통 */ .logoline {left:50px; top:71px;} .scrollbg {right:50px; bottom:50px;} .navbg {top:25px;} /* 헤더 */ #header {padding:45px 0;} /* 사이드 */ #aside {bottom:50px;} /* 컨텐츠 공통 */ .divarea > div, .divarea > p, .divarea > ul, .divarea > .decotitle {padding-left:30px;} .divarea + div {margin-top:100px;} .divarea + .divarea.t1 {margin-top:140px;} .divarea + .divarea.t2 {margin-top:70px;} .divarea + .divarea.t3 {margin-top:60px;} .divarea + .divarea.t4 {margin-top:50px;} /* 컨텐츠 */ #contents.main .divarea > p.text.giant .autotext {line-height:25px;} #contents.main .cm_hero .titlearea {bottom:50px;} #contents.main .cm_hero .cmh_wrap {padding-bottom:50px;} #contents.main .cm_hero .cmh_qr img {width:56px; height:56px;} #contents.main .cm_hero .cmh_qr p {line-height:18px;} #contents.main .cm_hero .cmh_txt b {margin:4px 0;} #contents .c_projects:before, #contents.projects .c_contact:before, #contents .c_service .cs_line {left:50px; right:50px;} #contents .c_service .cs_plastic {left:-50px;} #contents .c_projects.aos-animate:before, #contents .c_service .cs_line.aos-animate, #contents .c_service .cs_plastic {width:calc(100% - 100px);} #contents .c_service .cs_plastic {width:calc(100% + 100px);} #contents .c_projects .cp_area:nth-child(n + 3) {margin-top:100px; padding-top:100px;} #contents .c_projects .cp_area:nth-child(n + 3):before {left:calc(33.333% + 30px);} #contents .c_projects .cp_award > ul > li {width:calc(50% - 25px);} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:50px;} #contents .c_projects .cp_award > ul > li:nth-child(n + 3) {margin-top:50px;} #contents .c_projects .morebtn.t1 {margin-top:50px; margin-left:30px;} #contents .c_inside .ci_news {margin-top:105px;} #contents .c_inside .ci_news .cin_sticky {left:190px; width:calc(33.333% - 150px);} #contents .c_inside .ci_news li > p {padding-left:30px;} #contents .c_inside .ci_news li > .cin_pic {width:calc(33.333% - 150px);} #contents .c_service .cs_sticky .css_wrap > div {width:calc(100% + 50px);} #contents .c_service .divarea.div2 p > span > span {display:inline;} /* 푸터 */ #footer {padding-top:100px; padding-bottom:50px;} #footer:before {left:50px; right:50px;} #footer .f_mail {width:calc(100% - 30px); margin-left:30px;} #footer .f_sns li + li {margin-top:8px;} #footer .f_sns li a span {font-size:22px;} #footer .f_area {padding-left:60px;} #footer .f_area p.text.giant .autotext {line-height:25px;} } @media all and (max-width:1440px) { /* 콘텐츠 */ #contents .c_state li .cs_box > span {font-size:clamp(70px, 5.5556vw, 80px); line-height:clamp(70px, 5.5556vw, 80px);} /* 메인 */ #contents.main .cm_vision .cmv_list li {flex-wrap:wrap; gap:0;} #contents.main .cm_vision .cmv_list li strong {display:none; width:100%;} #contents.main .cm_vision .cmv_list li > span {padding:5px 0; line-height:20px;} #contents.main .cm_vision .cmv_list li > span .autotext {margin:0;} #contents .c_projects .cp_award.t1 > ul > li .cpa_title {padding-top:0;} #contents .c_projects .cp_award.t1 > ul > li {width:100%;} #contents .c_projects .cp_award.t1 > ul > li > a {box-sizing:border-box; width:33.3333%; padding-right:20px;} #contents .c_projects .cp_award.t1 > ul > li .cpa_box {width:66.6666%; padding-left:20px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(n + 2) {margin-top:50px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(2n) {margin-left:0;} #contents .c_service .cs_sticky .css_content .cssc_box > div {padding:30px;} } @media all and (max-width:1280px) { /* 공통 */ .logoline {left:40px; top:66px;} .scrollbg {right:40px; bottom:40px;} .navbg {top:20px; width:580px; margin-left:-290px;} /* 헤더 */ #header {padding:40px 0;} #header .h_nav ul {gap:60px; width:600px; margin-left:-300px;} #header .h_nav ul li a {font-size:15px;} #header .h_contact {font-size:15px;} /* 사이드 */ #aside {bottom:40px;} /* 컨텐츠 공통 */ .divarea > div, .divarea > p, .divarea > ul, .divarea > .decotitle {padding-left:20px;} .divarea + div {margin-top:90px;} .divarea + .divarea.t1 {margin-top:110px;} .divarea + .divarea.t2 {margin-top:60px;} .divarea + .divarea.t3 {margin-top:50px;} .divarea + .divarea.t4 {margin-top:40px;} .decotitle {font-size:18px;} .decotitle i {right:-32px; width:15px;} .morebtn {gap:10px;} /* 컨텐츠 */ #contents section {padding:120px 0;} #contents .c_state li strong {white-space:nowrap;} #contents .c_state li .cs_box > span {font-size:clamp(60px, 5.46875vw, 70px); line-height:clamp(60px, 5.46875vw, 70px);} #contents .c_cate.t2 ul {gap:15px;} /* 메인 */ #contents.main .divarea > p.text.giant .autotext {line-height:21px;} #contents.main .cm_hero .cmh_qr img {width:52px; height:52px;} #contents.main .cm_hero .cmh_qr p {font-size:11px; line-height:17px;} #contents.main .cm_list {width:520px;} #contents.main .cm_list ul {column-gap:15px;} #contents.main .cm_list ul li {gap:15px;} #contents.main .cm_hero .titlearea {bottom:40px;} #contents.main .cm_hero .cmh_qr {gap:20px;} #contents.main .cm_hero .cmh_wrap {padding-bottom:40px;} #contents.main .cm_hero .cmh_txt b {margin:3px 0;} #contents.main .cm_hero .cmh_marquee ul li {width:2840px; height:294px;} #contents.main .cm_vision .cmv_list {width:520px;} #contents .c_projects:before, #contents.projects .c_contact:before, #contents .c_service .cs_line {left:40px; right:40px;} #contents .c_service .cs_plastic {left:-40px;} #contents .c_projects.aos-animate:before, #contents .c_service .cs_line.aos-animate {width:calc(100% - 80px);} #contents .c_service .cs_plastic {width:calc(100% + 80px);} #contents .c_projects .cp_plastic {top:-220px;} #contents .c_projects .cp_area:nth-child(n + 3) {margin-top:90px; padding-top:90px;} #contents .c_projects .cp_area:nth-child(n + 3):before {left:calc(33.333 + 20px);} #contents .c_projects .cp_awardarea {margin-top:100px;} #contents .c_projects .cp_marquee {padding-top:80px;} #contents .c_projects .cp_marquee ul {top:90px;} #contents .c_projects .cp_award > ul > li {width:calc(50% - 20px);} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:40px;} #contents .c_projects .cp_award > ul > li:nth-child(n + 3) {margin-top:40px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(n + 2) {margin-top:40px;} #contents .c_projects .morebtn.t1 {margin-top:35px; margin-left:20px;} #contents .c_service .cs_sticky .css_wrap > div {width:calc(100% + 40px);} #contents .c_service .cs_sticky .css_content strong {font-size:7.2vw; line-height:7.2vw;} #contents.main .cm_inside {padding-top:100px;} #contents .c_inside .ci_news {margin-top:90px;} #contents .c_inside .ci_news .cin_sticky {left:180px; width:calc(33.333% - 145px);} #contents .c_inside .ci_news li {padding-left:33.333%;} #contents .c_inside .ci_news li > .cin_pic {width:calc(33.333% - 145px);} #contents .c_inside .ci_news li > p {padding-left:20px;} #contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {padding:30px 0; font-size:clamp(16px, 2.4306vw, 35px); line-height:clamp(16px, 3.8194vw, 55px);} #contents .c_inside .ci_news li > p > a > span, #contents .c_inside .ci_news li > p > button > span {height:clamp(16px, 3.8194vw, 55px);} /* 프로젝트 */ #contents.projects .c_intro .divarea > p .title.t2 span {display:inline;} /* 푸터 */ #footer {padding-top:80px; padding-bottom:40px;} #footer:before {left:40px; right:40px;} #footer .f_mail {gap:20px; width:calc(100% - 20px); margin-left:20px;} #footer .f_mail .fm_interaction:before {height:3px;} #footer .f_mail i.icon.giant {width:30px; height:30px;} #footer .f_area {padding-left:40px;} #footer .f_area p.text.giant .autotext {line-height:22px;} #footer .f_info ul {gap:30px;} #footer .f_sns li + li {margin-top:5px;} #footer .f_sns li a span {font-size:20px;} } @media all and (max-width:1024px) { /* 공통 */ .logoline {left:30px; top:56px;} .scrollbg {right:30px; bottom:30px; width:50px; height:50px;} .navbg {top:15px; width:500px; height:60px; margin-left:-250px;} .loadingbox .l_logo {width:112px; height:60px;} /* 헤더 */ #header {padding:30px 0;} #header .h_nav ul {top:-15px; width:500px; margin-left:-250px; gap:50px; height:60px;} #header .h_nav ul li a {font-size:14px;} #header .h_contact {font-size:14px;} /* 사이드 */ #aside {bottom:30px;} #aside ul {width:50px;} #aside ul li {height:50px;} #aside ul li + li {margin-top:10px;} /* 컨텐츠 공통 */ .divarea + div {margin-top:65px;} .divarea + .divarea.t1 {margin-top:90px;} .divarea + .divarea.t2 {margin-top:50px;} .divarea + .divarea.t3 {margin-top:40px;} .divarea + .divarea.t4 {margin-top:35px;} .morebtn.t1 span {font-size:14px;} .morebtn.t2 {align-items:center; justify-content:center; gap:0; width:30px; height:30px;} .morebtn.t2 span span {display:none;} .morebtn.t2 span:before, .morebtn.t2 span:after {content:"MORE"} /* 컨텐츠 */ #contents section {padding:100px 0;} #contents .c_state {flex-wrap:wrap; row-gap:clamp(30px, 4.8828vw, 50px);} #contents .c_state li {width:50%;} #contents .c_state li:nth-child(2n) {box-sizing:border-box; padding-left:10px;} #contents .c_state li .cs_box > span {font-size: clamp(60px, 7.8125vw, 80px); line-height: clamp(60px, 7.8125vw, 80px);} #contents .c_cate.t2 ul {gap:10px;} /* 메인 */ #contents.main .cm_list > i {left:-20px;} #contents.main .aos-animate .cm_list > i {left:-10px;} #contents.main .cm_hero .titlearea {bottom:30px;} #contents.main .cm_hero .cmh_qr {gap:15px;} #contents.main .cm_hero .cmh_wrap {padding-bottom:30px;} #contents.main .cm_hero .cmh_txt .cmht_pc {display:none;} #contents.main .cm_hero .cmh_marquee ul li {width:2485px; height:259px;} #contents.main .cm_vision {padding-top:80px;} #contents.main .cm_vision .cmv_list > i {left:-20px;} #contents.main .cm_vision .aos-animate .cmv_list > i {left:-10px;} #contents .c_projects:before, #contents.projects .c_contact:before, #contents .c_service .cs_line {left:30px; right:30px;} #contents .c_service .cs_plastic {left:-30px;} #contents .c_projects.aos-animate:before, #contents .c_service .cs_line.aos-animate {width:calc(100% - 60px);} #contents .c_service .cs_plastic {width:calc(100% + 60px);} #contents .c_projects .cp_plastic {top:-160px; height:900px;} #contents .c_projects .cp_area:nth-child(n + 3) {margin-top:65px; padding-top:65px;} #contents .c_projects .cp_awardarea {margin-top:60px;} #contents .c_projects .cp_marquee {height:90px; padding-top:100px; padding-bottom:130px;} #contents .c_projects .cp_marquee ul {top:80px;} #contents .c_projects .cp_marquee ul li {margin:0 20px; width:160px; height:90px;} #contents .c_projects .cp_award > ul > li {width:100%;} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:0;} #contents .c_projects .cp_award > ul > li:nth-child(n + 2) {margin-top:30px;} #contents .c_projects .cp_award.t1 > ul > li > a {width:50%; padding-right:15px;} #contents .c_projects .cp_award.t1 > ul > li .cpa_box {width:50%; padding-left:15px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(n + 2) {margin-top:30px;} #contents .c_service .cs_sticky .css_wrap > div {width:calc(100% + 30px);} #contents .c_service .divarea.div2 p {width:100%;} #contents .c_service .divarea.div2 p:first-child {display:none;} #contents .c_service .cs_sticky .divarea.div2 p {width:50%; margin-top:0;} #contents .c_service .divarea.div2 p + p {margin-top:30px;} #contents .c_service .cs_sticky .css_content .cssc_box > div {padding:25px 20px; width:400px; height:350px;} #contents .c_service .cs_sticky .css_stickywrap {align-content:space-between; max-height:500px; min-height:500px; padding-top:calc(100vh - 550px); margin-top:calc(-100vh + 600px);} #contents .c_inside .ci_news .cin_sticky {left:145px; width:calc(33.333% - 110px);} #contents .c_inside .ci_news li {padding-left:33.333%;} #contents .c_inside .ci_news li > .cin_pic {left:115px; width:calc(33.333% - 110px);} #contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {padding:20px 0; font-size:clamp(16px, 2.9297vw, 30px); line-height:clamp(16px, 4.8828vw, 50px);} #contents .c_inside .ci_news li > p > a > span, #contents .c_inside .ci_news li > p > button > span{height:clamp(16px, 4.8828vw, 50px);} #contents .c_inside .ci_news li.hover > p > a span:before, #contents .c_inside .ci_news li.hover > p > button span:before {bottom:4px; height:2px;} #contents .c_projects .morebtn.t1 {position:relative; top:auto; margin-top:30px;} #contents.projects .cp_hero {margin-bottom:60px;} #contents.projects .c_projects {padding-top:60px;} /*#contents.projects .cp_hero .cph_content {flex-wrap:wrap; flex-direction:column-reverse; align-items:flex-end;}*/ /*#contents.projects .cp_hero .cph_content > span {order:2;}*/ #contents.projects .cp_hero .cph_content > p {font-size:5.5vw; line-height:5.5vw;} #contents.projects .cp_hero .cph_content > span {width:33vw; height: 22vw;} #contents.projects .cp_hero .cph_content > span:before {height:17vw;} #contents.projects .cp_hero .cph_content > span > span > span {font-size:1.3vw; line-height:2vw;} #contents.projects .cp_hero .cph_content > span > span i.squre {width:1.2vw; height:1.2vw;} #contents.projects .cp_hero .cch_bottomblur {top:87.7%;} #contents.projects .cp_hero .cph_middleblur {top:50.78%;} #contents.projects .c_projects .cp_awardarea .morebtn.t2 {width:auto;} #contents.projects .c_projects .cp_awardarea .morebtn.t2 > span:before, #contents.projects .c_projects .cp_awardarea .morebtn.t2 > span:after {content:"MORE VIEW";} #contents.projects .c_projects .cp_awardarea .morebtn.t2 > span span {display:inline-block} #contents.projects .c_projects .cp_awardarea .morebtn.t2 > span span:before, #contents.projects .c_projects .cp_awardarea .morebtn.t2 > span span:after {display:none;} /* 푸터 */ #footer {padding-top:60px; padding-bottom:30px;} #footer:before {left:30px; right:30px;} #footer .f_wrap {padding-bottom:65px;} #footer .f_mail i.icon.giant {width:26px; height:26px;} #footer .f_info {z-index:1; width:100%;} #footer .f_info ul {flex-wrap:nowrap; align-items:flex-start; gap:0; width:100%;} #footer .f_info li {width:50%;} #footer .f_info li:last-child {box-sizing:border-box; padding-left:30px;} #footer .f_area {display:inline-block; width:100%; margin-top:25px; padding-left:20px;} #footer .f_sns {margin-left:-8px; margin-bottom:90px;} #footer .f_sns li {width:auto; margin:0 8px;} #footer .f_sns li + li {margin-top:0;} #footer .f_sns li a {gap:5px;} #footer .f_sns li a span {font-size:18px;} #footer .f_download {position:absolute; left:20px; bottom:-200px; margin-top:0;} #footer .f_function a {gap:10px;} #footer .f_function a span {font-size:15px;} #footer .f_function i {width:20px; height:20px;} } @media all and (max-width:768px) { /* 공통 */ .navbg {display:none;} .logoline {top:47px; width:10px; height:3px; opacity:0;} .step02 .logoline {opacity:1;} /* 헤더 */ #header .h_logo {width:37px; height:20px; opacity:0;} .step02 #header .h_logo {opacity:1;} #header .h_contact {display:none;} #header .h_nav {position:fixed; left:0; right:0; top:0; bottom:0; pointer-events:none;} #header .h_nav:before {content:""; position:fixed; left:0; right:0; top:0; bottom:0; clip-path:rect(0 100% 0 0 round 0); background-color:var(--black); background-image:url("../images/pic_plastic01_mo.png"); background-repeat:no-repeat; background-size:100% 100%; pointer-events:none; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:0.5s;} #header .h_nav ul {flex-wrap:wrap; gap:0; position:absolute; left:0; right:0; top:120px; width:100%; margin-left:0;} #header .h_nav ul li {position:relative; box-sizing:border-box; width:100%; padding:0 30px; pointer-events:none;} #header .h_nav ul li + li {margin-top:20px;} #header .h_nav ul li a {display:flex; position:relative; align-items:flex-start; box-sizing:border-box; width:100%; height:60px; font-size:40px; font-weight:200; line-height:60px; opacity:0; transition:0.3s; pointer-events:none;} #header .h_nav ul li a:after {content:""; position:absolute; right:0; top:50%; width:16px; height:16px; margin-top:-8px; background-image:url("../images/common/icon_right.svg"); background-size:200% auto; background-position:right;} #header .h_nav ul li a .autotext {overflow:initial; height:auto; margin:0; color:var(--black); line-height:60px;} #header .h_nav ul li a .autotext:before, #header .h_nav ul li a .autotext:after{display:none !important;} #header.open .h_nav ul li {pointer-events:auto;} #header.open .h_nav ul li a {opacity:1; transition-delay:0.6s; pointer-events:auto} #header .h_nav ul li a em {display:inline-block; position:relative; left:-10px; padding:0 10px; border-radius:30px; border:1px solid var(--blue); background:rgba(1, 25, 247, 0.90); box-shadow:0 10px 20px 0 rgba(1, 25, 247, 0.20); border-radius:12px; font-size:15px; font-weight:500; color:var(--yellow); line-height:22px;} #header .h_btn {display:inline-block; position:relative; float:right; z-index:1;; transition:0.3s; pointer-events:auto; opacity:0;} .step02 #header .h_btn {opacity:1;} #header .h_btn:before {content:""; position:absolute; left:0; right:0; bottom:-5px; top:-5px;} #header .h_btn span {display:flex; align-items:center; gap:3px; font-size:12px; color:var(--yellow); font-weight:600; line-height:20px;} #header .h_btn .hb_close {display:none;} #header .h_mobilecontent {position:fixed; left:30px; right:30px; bottom:30px; min-width:320px; transition:0.3s;} #header .h_mobilecontent p {display:inline-block; position:relative; box-sizing:border-box; width:100%; padding:5px 0; padding-left:15px; font-size:16px; color:var(--black); font-weight:200; line-height:25px; letter-spacing:-0.32px; text-align:left;} #header .h_mobilecontent p:before {content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background-color:var(--black);} #header .h_mobilecontent p span {display:inline-block; float:left; width:100%;} #header .h_mobilecontent p span:last-child {font-weight:600;} #header .h_mobilecontent .btn {justify-content: center; margin-top:20px; padding:0; font-size:16px; line-height:26px;} #header .h_mobilecontent .btn a {display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px 0; color: var(--white);} #header .h_mobilecontent .btn:hover a {color:var(--black) !important;} #header .h_plastic {position:fixed; left:0; right:0; top:0; bottom:0; z-index:1; min-width:320px; transition:0.3s;} #header.off {mix-blend-mode:normal;} #header.open .h_plastic {opacity:1;} #header.open .h_nav {pointer-events:auto;} #header.open .h_nav:before {clip-path:rect(0 100% 100% 0 round 0);} #header.open .h_mobilecontent {opacity:1; pointer-events:auto; transition-delay:0.6s;} #header.open .h_mobilecontent .btn {pointer-events:auto;} #header.open .h_contact.on ~ .h_mobilecontent .btn a {pointer-events:none;} #header.open .h_btn .hb_menu {display:none;} #header.open .h_btn .hb_close {display:flex;} #header.off .h_logo {background-image:url("../images/common/logo_black.svg");} #header.off .h_btn span {color:var(--black);} #header.off .h_btn i.icon.yellow {background-position:right;} #wrap.project #header .h_nav ul li.on a, #wrap.inside_view #header .h_nav ul li.on a {pointer-events:none !important;} #wrap.project #header.open .h_nav ul li.on a, #wrap.inside_view #header.open .h_nav ul li.on a {pointer-events:auto !important;} #aside ul, #wrap.main .scrollbg {opacity:0;} .step02 #aside ul, #wrap.main.step02 .scrollbg {opacity:1;} /* 컨텐츠 공통 */ .divarea {padding-left:0;} .divarea > div, .divarea > p, .divarea > ul, .divarea > .decotitle {padding-left:0;} .divarea + div {margin-top:60px;} .divarea + .divarea.t1 {margin-top:60px;} .divarea + .divarea.t2 {margin-top:40px;} .divarea + .divarea.t3 {margin-top:30px;} .divarea + .divarea.t4 {margin-top:25px;} .titlearea {position:relative; width:100%; margin-bottom:60px;} .sitkcytitle {display:none;} .decotitle {font-size:16px;} .decotitle i {right:-28px; width:14px;} /* 컨텐츠 */ #contents section {padding:80px 0;} #contents .c_state li i {margin-top:6px;} #contents .c_state li .cs_box > span {margin-top:5px; font-size:clamp(60px, 10.4167vw, 80px); line-height: clamp(60px, 10.4167vw, 80px);} #contents .c_state li.on i {background-color:var(--blue);} #contents .c_state li.on strong:before {top:-20px;} #contents .c_state li.on strong:after {top:0;} #contents .c_state li.on .cs_box > span {font-weight:600; color:var(--blue);} #contents .c_cate.t2 {margin-bottom:30px;} #contents .c_cate.t2 ul {gap:5px;} #contents .c_cate.t2 ul li {width:auto;} /* 메인 */ #contents.main .divarea .morebtn {position:absolute; right:-10px; top:-90px;} #contents.main .cm_list > i {display:none;} #contents.main .cm_hero .wrap:before {background-image:url("../images/pic_plastic01_mo.png");} #contents.main .cm_hero .titlearea {position:relative; bottom:auto; width:100%; margin-bottom:0;} #contents.main .cm_hero .cmh_wrap {gap:15px; align-content:flex-end;} #contents.main .cm_hero #plasticCanvas01 {height:100vh;} #contents.main .cm_hero .cmh_qr {display:none;} #contents.main .cm_hero .cmh_marquee ul li {width:2130px; height:222px;} #contents.main .cm_vision {padding-top:60px;} #contents.main .cm_vision .cmv_list li strong {display:inline-block;} #contents.main .cm_vision .cmv_list li > span {display:none;} #contents.main .cm_vision .aos-animate .cmv_list > i {display:none;} #contents .c_projects .cp_plastic {top:-280px; height:1362px; background-image:url("../images/pic_plastic02_mo.png");} #contents .c_projects .cp_marquee ul li.on {transform:scale(1.3) !important;} #contents .c_projects .cp_marquee ul li:hover {transform:scale(1);} #contents .c_projects .cp_area:nth-child(n + 3) {margin-top:50px; padding-top:50px;} #contents .c_projects .cp_area:nth-child(n + 3):before {left:0;} #contents .c_projects .cp_award {margin-top:0;} #contents .c_projects .cp_award > ul > li {width:calc(50% - 15px);} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:30px;} #contents .c_projects .cp_award > ul > li:nth-child(2) {margin-top:0;} #contents .c_projects .cp_award > ul > li:nth-child(n + 3) {margin-top:30px;} #contents .c_projects .cp_award > ul > li > a:hover .cpa_pic {box-shadow:0 25px 50px 0 rgba(17, 20, 38, 0.25);} #contents .c_projects .cp_award.t1 > ul > li > a {width:220px;} #contents .c_projects .cp_award.t1 > ul > li .cpa_box {width:calc(100% - 220px);} #contents .c_projects .morebtn.t1 {position:relative; top:auto; right:auto; margin-left:0;} #contents .c_service {padding-bottom:0;} #contents .c_service .mobile-only {display:flex !important;} #contents .c_service .mobile-only p:first-child {display:block !important;} #contents .c_service .cs_sticky {margin-top:60px;} #contents .c_service .cs_sticky .css_stickywrap {top:70px; align-items:flex-start; height:524px !important; max-height:unset; min-height:unset; padding-top:unset; margin-top:unset;} #contents .c_service .cs_sticky .divarea {display:none;} #contents .c_service .cs_sticky .css_wrap {margin-top:0 !important;} #contents .c_service .cs_sticky .css_wrap > div {width:100%;} #contents .c_service .cs_sticky .css_content {flex-wrap:wrap;} #contents .c_service .cs_sticky .css_content .cssc_box {width:100% !important;} #contents .c_service .cs_sticky .css_content .cssc_box > div {gap:20px; box-sizing:border-box; width:100%; height:auto; min-height:250px; padding:20px 0;} #contents .c_service .cs_sticky .css_content .cssc_box:last-child > div {padding:30px 0;} #contents .c_service .cs_sticky .css_content .cssc_box:before {right:auto; bottom:auto; width:100%; height:1px; opacity:0.1; transition:0.3s;} #contents .c_service .cs_sticky .css_content strong {font-size:60px; line-height:60px;} #contents .c_service .cs_sticky .css_content .cssc_title {position:relative;} #contents .c_service .cs_sticky .css_content .cssc_title i {position:absolute; left:0; top:2px; width:24px; height:24px;} #contents .c_service .cs_sticky .css_content .cssc_title > span {padding-left:36px; font-size:18px; line-height:28px;} #contents .c_service .cs_sticky .css_content .cssc_title > span b {position:absolute; left:0; top:75px; font-size:30px; line-height:40px;} #contents.main .cm_inside {padding-top:80px;} #contents .c_inside .ci_news {margin-top:80px} #contents .c_inside .ci_news .cin_sticky {display:inline-block; float:left; overflow:hidden; position:sticky; left:0; top:calc(50% - 57px) !important; z-index:1; width:152px; border-radius:5px; box-shadow:0 25px 50px 0 rgba(17, 20, 38, 0.40); font-size:0; line-height:0; transform:scale(0.3); opacity:0; transition:0.3s;} #contents .c_inside .ci_news .cin_sticky.on {transform:scale(1); opacity:1 !important;} #contents .c_inside .ci_news .cin_sticky.on.off {transform:scale(0.3); opacity:0 !important;} #contents .c_inside .ci_news .cin_sticky img {width:100%; height:auto;} #contents .c_inside .ci_news ul {display:inline-block; width:100%; margin-top:0 !important;} #contents .c_inside .ci_news .cin_sticky + ul {margin-top:-114px !important;} #contents .c_inside .ci_news li {display:flex; align-items:center; gap:20px; padding-left:0;} #contents .c_inside .ci_news li:last-child {padding-bottom:0;} #contents .c_inside .ci_news li:last-child:before {bottom:0;} #contents .c_inside .ci_news li > .cin_pic {flex-shrink:0; position:relative; left:auto; top:auto; z-index:1; transform:translateY(0) scale(0.3); width:152px; opacity:0;} #contents .c_inside .ci_news li.on > .cin_pic {transform:scale(1); opacity:1;} #contents .c_inside .ci_news li > p {height:auto; padding-left:0; padding-right:0; word-break:keep-all;} #contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {display:inline-block; width:100%; padding:10px 0; font-size:23px; line-height:40px;} #contents .c_inside .ci_news li > p > a > span, #contents .c_inside .ci_news li > p > button > span {height:auto; max-height:80px; -webkit-line-clamp:2;} #contents .c_inside .ci_news li > p > i {display:none;} #contents .c_projects .cp_awardarea {min-height:auto;} #contents.projects .cp_hero .cph_wrap > strong {width:calc(100% + 4vw); margin-left:-2vw; font-size:18.6vw; line-height:18.425vw;} #contents.projects .cp_hero .cph_wrap > strong > span {flex-wrap:wrap;justify-content: center; } #contents.projects .cp_hero .cch_bottomblur {top:74.7%;} #contents.projects .cp_hero .cch_bottomblur, #contents.projects .cp_hero .cph_middleblur {backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);} #contents.projects .cp_stickyarea {position:fixed; top:auto; left:30px; bottom:30px; opacity:0; transition: 0.3s;} #contents.projects .cp_stickyarea .c_cate {position:absolute; top:auto; left:0; bottom:0; width:230px; margin-bottom:0; border-radius:25px;} #contents.projects .cp_stickyarea .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.projects .cp_stickyarea {opacity:1;} #wrap.asideOn #contents.projects .cp_stickyarea .c_cate .cc_catebtn {pointer-events:auto;} #wrap.asideOn #contents.projects.isbottom .cp_stickyarea {opacity:0;} #wrap.asideOn #contents.projects.isbottom .cp_stickyarea .c_cate .cc_catebtn {pointer-events:none;} #contents.projects .cp_stickyarea .c_cate .cc_catebtn i {display:inline-block; position:relative; width:10px; height:10px;} #contents.projects .cp_stickyarea .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.projects .cp_stickyarea .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.projects .cp_stickyarea.on .c_cate {background-color:var(--black);} #contents.projects .cp_stickyarea.on .c_cate .cc_catebtn i {transform:rotate(180deg);} #wrap.asideOn #contents.projects .cp_stickyarea.on ul {opacity:1; pointer-events:auto;} #wrap.asideOn #contents.projects.isbottom .cp_stickyarea.on ul {opacity:0; pointer-events:none;} #wrap.asideOn #contents.projects .cp_stickyarea.on ul .cc_btn {pointer-events:auto !important;} #contents.projects .cp_stickyarea ul {gap:0; margin-bottom:-9px; padding-top:10px; opacity:0; pointer-events:none; transition:0.3s;} #contents.projects .cp_stickyarea ul li {width:100%; text-align:left;} #contents.projects .cp_stickyarea .c_cate > ul .cc_btn::before {display:none;} #contents.projects .cp_stickyarea ul .cc_btn {width:100%; padding-left:20px; font-size:18px; color:var(--yellow); font-weight:400 !important; line-height:35px; text-align:left; pointer-events:none;} #contents.projects .cp_stickyarea ul > li > span {opacity:0;} #contents .c_service .cs_plastic {height:1000px;} #contents.projects .cp_stickyarea.on .morebtn {pointer-events:auto;} #contents.projects .c_cate > ul .morebtn {pointer-events:none; margin-top:0; box-sizing:border-box; width:100%; height:35px; padding-left:20px; font-size:18px; line-height:35px; color:var(--yellow);} #contents.projects .c_cate > ul .morebtn mark {font-weight:400; color:var(--yellow);} #contents.projects .c_cate > ul .morebtn mark:before, #contents.projects .c_cate > ul .morebtn mark:after {display:none;} #contents.projects .c_cate > ul .morebtn i {display:none;} /* 푸터 */ #footer .f_plastic {height:max(208vw, 100vh); background-image:url("../images/pic_plasticfooter_mo.png");} #footer .f_wrap {padding-bottom:70px;} #footer .f_mail {gap:10px; margin-left:0; width:100%; font-size:7.8vw; line-height:8.8vw;} #footer .f_mail.aos-animate .fm_interaction span {transform:translateY(8.8vw);} #footer .f_mail i.icon.giant {width:20px; height:20px;} #footer .f_download {left:0;} #footer .f_function i {width:15px; height:15px;} #footer .f_area {padding-left:0;} #footer .f_area p {left:-100%;} } @media all and (max-width:600px) { /* 공통 */ .loadingbox .l_logo {width:93px; height:50px;} /* 컨텐츠 */ #contents.main .divarea > p.text.giant {display:inline;} #contents.main .divarea > p.text.giant span {display:inline;} #contents.main .divarea > p.text.giant .autotext {line-height:16px;} #contents .c_projects .cp_award > ul > li {width:100%;} #contents .c_projects .cp_award > ul > li:nth-child(2n) {margin-left:0;} #contents .c_projects .cp_award > ul > li:nth-child(2) {margin-top:30px;} #contents .c_projects .cp_award.t1 > ul > li .cpa_title {padding-top:10px;} #contents .c_projects .cp_award.t1 > ul > li {width:50%;} #contents .c_projects .cp_award.t1 > ul > li > a {width:100%; padding-right:0;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(n + 2) {margin-top:0;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(n + 3) {margin-top:20px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(2n) {box-sizing:border-box; padding-left:10px;} #contents .c_projects .cp_award.t1 > ul > li:nth-child(2n + 1) {box-sizing:border-box; padding-right:10px;} #contents .c_projects .cp_award.t1 > ul > li .cpa_box {width:100%; padding-left:0;} #contents .c_projects .cp_list > ul > li > a {flex-wrap:wrap; padding:15px 0;} #contents .c_projects .cp_list > ul > li > a .cpl_title {width:100%; padding-right:10%;} #contents .c_projects .cp_list > ul > li > a .cpl_title .translateY100 {align-items:flex-start;} #contents .c_projects .cp_list > ul > li > a .cpl_title .translateY100 i {margin-top:9px;} #contents .c_projects .cp_list > ul > li > a > strong {width:100%;} #contents .c_projects .cp_list > ul > li > a > i {position:absolute; right:0; top:18px;} #contents .c_projects .cp_award > ul > li > a:hover .cpa_pic {transform:scale(1); box-shadow:none;} #contents .c_projects .cp_list > ul > li .cpl_cate li {padding-left:20px;} #contents .c_service .cs_sticky .css_content .cssc_title > span b {top:55px;} #contents .c_service .cs_sticky .css_content p > span {min-height:120px;} #contents .c_service .cs_title > span {float:none; display:inline;} /* 프로젝트 */ #contents.projects .cp_hero .cph_content {flex-wrap:wrap; flex-direction:column-reverse; gap:3vw; align-items:flex-end;} #contents.projects .cp_hero .cph_content > span {align-content:flex-start; order:2; width:100%; height:34vw;} #contents.projects .cp_hero .cph_content > span:before {left:unset; width:43vw; height:24vw;} #contents.projects .cp_hero .cph_content > span > span > span {font-size:1.8vw; line-height:2.8vw;} #contents.projects .cp_hero .cph_content > span > span i.squre {width:1.8vw; height:1.8vw;} #contents.projects .cp_hero .cph_middleblur {top:49.78%;} #contents.projects .cp_hero .cch_bottomblur {top:86.7%;} #contents.projects .cp_hero.step05 .cch_bottomblur, #contents.projects .cp_hero.step05 .cph_middleblur {transform:translate(-50%, -50%) scale(1.5);} #contents.projects .cp_hero .cph_content > p {position:absolute; top:7.5vw; font-size:4.2vw; line-height:4.8vw;} #contents.projects .cp_hero .cph_wrap > strong {margin-top:0; font-size:17.8vw; line-height:18vw;} #contents.projects .cp_hero .cph_pic {transform:translate(-50%, -80%) scale(1.5);} #contents.projects .cp_hero.step05 .cph_pic {transform:translate(-50%,-50%) scale(1.5);} /* 푸터 */ #footer .f_mail {font-size:7.4vw; line-height:8.4vw;} #footer .f_mail .fm_interaction:before {height:2px;} #footer .f_sns li a span {font-size:18px;} #footer .f_area p {display:inline-block; float:left; font-size:15px;} #footer .f_area p.text.giant .autotext {line-height:16px;} } @media all and (max-width:425px) { /* 공통 */ .logoline {left:25px; top:42px;} .scrollbg {right:25px; bottom:25px; width:40px; height:40px;} /* 헤더 */ #header {padding:25px 0;} #header .h_mobilecontent {left:25px; right:25px; bottom:25px; min-width:270px;} #header .h_nav ul li {padding:0 25px;} /* 사이드 */ #aside {bottom:25px;} #aside ul {width:40px;} #aside ul li {height:40px;} #aside ul li i.icon {width:20px; height:20px;} /* 컨텐츠 공통 */ .divarea + .divarea.t3 {margin-top:30px;} /* 컨텐츠 */ #contents .c_cate.t2 ul li {width:100%;} #contents.main .cm_hero .cmh_wrap {padding-bottom:25px;} #contents .c_projects .cp_plastic {top:-253px;} #contents .c_projects .cp_award > ul > li:nth-child(2) {margin-top:30px;} #contents .c_projects #plasticCanvas02 {top:-40px; height:700px;} #contents .c_inside .ci_news {margin-top:60px;} #contents .c_inside .ci_news .cin_sticky {top:calc(50% - 45px); z-index:1; width:120px; height:90px;} #contents .c_inside .ci_news .cin_sticky + ul {margin-top:-90px !important;} #contents .c_inside .ci_news li > .cin_pic {width:120px; height:90px;} #contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {font-size:20px; line-height:25px;} #contents .c_inside .ci_news li > p > a > span, #contents .c_inside .ci_news li > p > button > span {max-height:50px;} #contents .c_service .cs_sticky .css_content .cssc_title > span > b {top:65px; font-size:clamp(32px, 9.4118vw, 40px); line-height:clamp(42px,11.7647vw,50px);} #contents .c_service .cs_sticky .css_content strong {font-size:clamp(50px,14.1176vw,60px);} #contents .c_service .cs_sticky .css_content p > span {min-height:120px;} #contents .c_service .cs_sticky .css_content .cssc_box > div {gap:80px;} #contents .c_service .cs_sticky .css_content .cssc_box:last-child > div {padding:25px 0;} #contents .c_projects.aos-animate:before, #contents .c_service .cs_line.aos-animate {width:calc(100% - 50px);} #contents .c_service .cs_plastic {left:-25px;} #contents .c_service .cs_plastic {width:calc(100% + 50px);} #contents.projects .cp_hero .cph_content > span:before {width:42vw; height:23vw;} #contents.projects .cp_hero .cph_wrap > strong {width:calc(100% + 6vw); margin-left:-3vw; font-size:17.5vw; line-height:18.5vw;} #contents.projects .cp_hero .cph_pic {width:55vw;} #contents.projects .cp_stickyarea {left:25px; bottom:25px;} #contents.projects .cp_stickyarea .c_cate {width:210px; border-radius:20px;} #contents.projects .cp_stickyarea .c_cate .cc_catebtn {padding:7px 18px; border-radius:20px; font-size:16px; line-height:26px;} #contents.projects .cp_stickyarea ul {margin-bottom:-6px;} #contents.projects .cp_stickyarea ul .cc_btn {padding-left:18px; text-align:left; font-size:16px; line-height:30px;} #contents.projects .cp_hero.step05 .cch_bottomblur, #contents.projects .cp_hero.step05 .cph_middleblur {transform:translate(-50%, -50%) scale(2);} #contents.projects .cp_hero .cch_bottomblur {top:96.7%;} /*#contents .c_inside .ci_news {margin-top:60px;}*/ /*#contents .c_inside .ci_news li {flex-wrap:wrap; gap:10px;}*/ /*#contents .c_inside .ci_news li > .cin_pic {width:100%;}*/ /*#contents .c_inside .ci_news li > strong {position:relative; left:auto; top:auto;}*/ /*#contents .c_inside .ci_news li > p {top:0; height:auto; max-height:70px;}*/ /*#contents .c_inside .ci_news li > p > a, #contents .c_inside .ci_news li > p > button {font-size:20px; line-height:35px;}*/ /*#contents .c_inside .ci_news li > p > a > span, #contents .c_inside .ci_news li > p > button > span {height:auto; max-height:70px}*/ /* 푸터 */ #footer {padding:40px 0;} #footer:before {left:25px; right:25px;} #footer .titlearea {margin-bottom:40px;} #footer .f_mail {font-size:7.45vw; line-height:9vw;} #footer .f_mail i.icon.giant {width:16px; height:16px;} #footer .f_subtitle {width:145px; line-height:25px;} #footer .f_subtitle.f_snstitle {display:inline-block; float:left;} #footer .f_info ul {flex-wrap:wrap; gap:25px;} #footer .f_info li {flex-wrap:nowrap; padding-left:0 !important; width:100%; gap:0;} #footer .f_info li p, #footer .f_info li a {display:inline-block; width:calc(100% - 145px); font-size:15px; line-height:25px;} #footer .f_info li a span {margin:3px 0; line-height:19px;} #footer .f_sns {float:left; margin-left:0; width:calc(100% - 145px);} #footer .f_sns li {margin:0;} #footer .f_sns li + li {margin-top:5px;} #footer .f_sns li a span {font-size:15px; line-height:19px;} #footer .f_sns li a span > span {margin:3px 0;} #footer .f_sns li a i.icon.small {width:12px; height:12px;} #footer .f_sns li a span:before {text-underline-offset:3px;} #footer .f_area p.text.giant .autotext {line-height:15px;} #footer .f_download {bottom:-165px;} /*#footer .f_info {display:none;}*/ /*#footer .f_info ul {width:100%; gap:15px; flex-wrap:wrap;}*/ /*#footer .f_info li {gap:0; width:100%; padding-left:0 !important;;}*/ /*#footer .f_area {display:none; position:relative; padding-bottom:20px;}*/ /*#footer .f_area:before {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:var(--black); opacity:0.3;}*/ /*#footer .f_btn.open ~ .f_area {display:inline-block;}*/ /*#footer .f_sns li + li {margin-top:0;}*/ /*#footer .f_area {width:100%; padding-left:0; margin-top:10px;}*/ /*#footer .f_area p {position:relative; left:auto; bottom:auto; margin-top:10px;}*/ /*#footer .f_btn {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; font-size:15px; color:var(--black); font-weight:700; line-height:40px;}*/ /*#footer .f_btn i {display:inline-block; position:relative; top:-2px; right:3px; width:8px; height:8px; border-top:var(--black) solid 1px; border-right:var(--black) solid 1px; transform:rotate(135deg); transition:0.3s;}*/ /*#footer .f_btn.open i {top:2px; transform:rotate(-45deg);}*/ /*#footer .f_btn:before {content:""; position:absolute; left:0; right:0; top:0; height:1px; background-color:var(--black); opacity:0.3;}*/ /*#footer .f_btn:after {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:var(—black); opacity:0.3;}*/ /*#footer .f_btn.open:after {display:none;}*/ } @media all and (max-width:360px) { #contents.main .cm_hero .cmh_txt {font-size:14px;} #contents.main .divarea > p.text.giant .autotext {line-height:15px;} /* 푸터 */ #footer .f_subtitle {width:120px;} #footer .f_info li p, #footer .f_info li a {width:calc(100% - 120px);} #footer .f_sns {width:calc(100% - 120px);} }