@charset "utf-8"; 

/* common */
#wrap.project #header,
#wrap.project #aside {mix-blend-mode:initial;}
#wrap.project #header .h_logo {background-image:url("../images/common/logo_black.svg");}
#wrap.project #header .h_nav ul li a .autotext:before,
#wrap.project #header .h_nav ul li a .autotext:after,
#wrap.project #header .h_contact .autotext:before,
#wrap.project #header .h_contact .autotext:after {color:var(--black);}
#wrap.project .logoline {background-color:var(--white);}
#wrap.project.footer_top .logoline {background-color:var(--black);}
#wrap.project #aside ul li .a_btn {background-color:var(--black)}
#wrap.project #aside ul li .a_btn i {background-position:left; transition:0s background;}
#wrap.project #aside ul li .a_btn:hover {background-color:var(--yellow)}
#wrap.project #aside ul li .a_btn:hover i {background-position:right;}

#wrap.project #header,
#wrap.project #aside {mix-blend-mode:difference;}
#wrap.project #header .h_logo {background-image:url("../images/common/logo_white.svg");}
#wrap.project #header .h_nav ul li a .autotext:before,
#wrap.project #header .h_nav ul li a .autotext:after,
#wrap.project #header .h_contact .autotext:before,
#wrap.project #header .h_contact .autotext:after {color:var(--white);}
#wrap.project .logoline {background-color:var(--yellow);}
#wrap.project.footer_top .logoline {background-color:var(--black);}
#wrap.project #aside ul li .a_btn {background-color:var(--white)}
#wrap.project #aside ul li .a_btn:hover {background-color:var(--blue)}
#wrap.project #aside ul li .a_btn i {background-position:right; filter:invert(11%) sepia(100%) saturate(5590%) hue-rotate(240deg) brightness(91%) contrast(128%);}
#wrap.project #aside ul li .a_btn:hover i {filter:brightness(2000%);}
/*#wrap.project #aside ul li .a_scroll i.icon.up {filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(104%) contrast(103%);}*/
#wrap.project #header .h_contact .autotext:before,
#wrap.project #header .h_contact .autotext:after {color:#FEE608;}

/* fonts */
/* KWANGYA119 fonts start */
@font-face {
	font-family:"SMTOWNOTF"; 
	src:local("SMTOWNOTF Regular"), local("SMTOWNOTF-Regular"),
	url("../fonts/SMTOWNOTF-Regular.woff2") format("woff2"),
	url("../fonts/SMTOWNOTF-Regular.woff") format("woff"),
	url("../fonts/SMTOWNOTF-Regular.otf") format("opentype"); 
	font-weight:400; 
	font-style:normal; 
	font-display:swap; 
}
@font-face {
	font-family:"SMTOWNOTF"; 
	src:local("SMTOWNOTF Medium"), local("SMTOWNOTF-Medium"),
	url("../fonts/SMTOWNOTF-Medium.woff2") format("woff2"),
	url("../fonts/SMTOWNOTF-Medium.woff") format("woff"),
	url("../fonts/SMTOWNOTF-Medium.otf") format("opentype"); 
	font-weight:500; 
	font-style:normal; 
	font-display:swap; 
}
@font-face {
	font-family:"SMTOWNOTF"; 
	src:local("SMTOWNOTF Bold"), local("SMTOWNOTF-Bold"),
	url("../fonts/SMTOWNOTF-Bold.woff2") format("woff2"),
	url("../fonts/SMTOWNOTF-Bold.woff") format("woff"),
	url("../fonts/SMTOWNOTF-Bold.otf") format("opentype"); 
	font-weight:700; 
	font-style:normal; 
	font-display:swap; 
}
/* KWANGYA119 fonts end */

/* eurocave fonts start */
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); 
/* eurocave fonts end */


/* project */
#contents.project {background-color:#fff;}
#contents.project .cp_wrap {position:relative; width:100%; margin:0 auto;}

/* cp_hero */
#contents.project .cp_hero {padding:0;}
#contents.project .cp_hero .cph_banner {height:100%;}
#contents.project .cp_hero .cph_banner .cphb_box {display:flex; align-items:flex-end; box-sizing:border-box; position:relative; width:100%; height:100vh; padding:60px; background-size:cover; background-repeat:no-repeat; background-position:center;}
#contents.project .cp_hero .cph_banner .cp_imgwrap {position:absolute;}
#contents.project .cp_hero .cph_banner .cp_imgwrap img {width:100%; opacity:0; transform:translateY(40px); transition:opacity 0.6s ease, transform 0.6s ease;}
#contents.project .cp_hero .cph_banner.on .cp_imgwrap img {opacity:1; transform:translateY(0);}
#contents.project .cp_hero .cph_banner .cphb_box ul {display:flex; justify-content:space-between; position:relative; z-index:1; width:100%;}
#contents.project .cp_hero .cph_banner .cphb_box ul li {overflow:hidden; font-size:clamp(12px, 0.8333vw, 16px); font-weight:400; line-height:clamp(21px, 2.0833vw, 40px); letter-spacing:-0.32px; text-align:left;}
#contents.project .cp_hero .cph_banner .cphb_box ul li:nth-child(2) {text-align:right;}
#contents.project .cp_hero .cph_banner .cphb_box ul li p {display:inline-block; vertical-align:middle; float:left; width:100%;}
#contents.project .cp_hero .cph_banner .cphb_box ul li p:nth-child(1) {line-height:clamp(20px, 1.5625vw, 30px);}
#contents.project .cp_hero .cph_banner .cphb_box ul li p:nth-child(2) {font-size:clamp(14px, 1.3021vw, 30px); font-weight:700; letter-spacing:-0.6px;}
#contents.project .cp_hero .cph_banner .cphb_box ul li img {float:right; height:clamp(21px, 2.0833vw, 40px);}
#contents.project .cp_hero .cpb_overview {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; box-sizing:border-box; width:100%; max-width:1540px; margin:0 auto; padding:160px 50px;}
#contents.project .cp_hero .cpb_overview .cp_imgwrap {display:flex; flex-direction:column; gap:30px;}
#contents.project .cp_hero .cpb_overview .cp_imgwrap img:nth-child(2) {width:80px;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap {width:100%; max-width:900px;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_top {text-align:left;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_top strong {display:block; width:100%; font-weight:500; letter-spacing:-1px; text-transform:uppercase;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_top p {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; font-weight:500; letter-spacing:-0.8px; word-break:keep-all; text-transform:uppercase;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info {display:flex; justify-content:space-between; gap:30px; width:100%; margin-top:50px; padding-top:50px; border-top:1px solid #D9D9D9;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li {display:flex; flex-direction:column; width:33.3333%; text-align:left;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li strong {font-weight:700; line-height:40px; letter-spacing:-0.4px; text-transform:uppercase;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li i {display:inline-block; vertical-align:middle; width:12px; height:1px; margin:10px 0; background-color:var(--black);}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li p {font-weight:400; line-height:40px; letter-spacing:-0.5px; text-transform:uppercase;}
#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li p span {display:block;}



/* portfolio - cp_hero */
/* #contents.portfolio .cp_hero .cph_banner .cphb_box {overflow:hidden; background-image:url('../images/project/portfolio/bg_hero.jpg');} */
#contents.portfolio .cphb_box {
    overflow: hidden;
    position: relative;
    /* 고정 경로 대신 변수 사용 */
    background-image: var(--bg-img, url('../images/project/portfolio/bg_hero.jpg')); 
    background-size: cover;
    background-position: center;
    /* 변수가 없을 경우를 대비해 기본값(fallback)을 넣었습니다 */
}

/* ... 나머지 가상 요소 및 z-index 코드는 그대로 유지 ... */

/* 배경을 흐리게 처리할 가상 요소(overlay) 생성 */
#contents.portfolio .cphb_box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.3); /* 살짝 밝게 덮기 */
    backdrop-filter: blur(10px); /* 10px만큼 흐림 처리 */
    z-index: 1;
}

/* 내부 콘텐츠가 흐려지지 않게 z-index 설정 */
#contents.portfolio .cphb_box > * {
    position: relative;
    z-index: 2;
}

#contents.portfolio .cp_hero .cph_banner .cp_imgwrap {top:50%; left:50%; z-index:1; width:100%; max-width:clamp(240px, 46.875vw, 900px); transform:translate(-50%, -50%); filter:drop-shadow(0 40px 80px rgba(0, 0, 0, 0.25)); animation:shake-pause 6s infinite; transform-origin:center;}
#wrap.project #contents.portfolio .cp_hero .cph_banner .cp_imgwrap img {opacity:1; transform:translateY(0);}
#contents.portfolio .cp_hero .cph_banner .cphb_deco {position:absolute; background-size:contain; background-repeat:no-repeat; background-position:center;}
#contents.portfolio .cp_hero .cph_banner .cphb_deco.t1 {top:-15.74vh; right:17.4479vw; width:16.5104vw; background-image:url('../images/project/portfolio/deco_hero01.svg'); aspect-ratio:317/308; animation:blinking01 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_hero .cph_banner .cphb_deco.t2 {bottom:17.5vh; left:-3.6458vw; width:30.3125vw; background-image:url('../images/project/portfolio/deco_hero02.svg'); aspect-ratio:582/168; animation:blinking02 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_hero .cph_banner .cphb_deco.t3 {bottom:15vh; right:1.7708vw; width:45.4688vw; background-image:url('../images/project/portfolio/deco_hero03.svg'); aspect-ratio:873/119; animation:blinking03 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_hero .cpb_overview {position:relative;}
#contents.portfolio .cp_hero .cpb_overview .cp_imgwrap img:nth-child(1) {height:90px;}
#contents.portfolio .cp_hero .cpb_overview .cp_txtwrap .cpbo_top p {font-family:'Pretendard' !important;}
#contents.portfolio .cp_hero .cpb_overview .cp_txtwrap .cpbo_top p > span {float:none; display:inline;}
#contents.portfolio .cp_hero .cpb_overview .cp_txtwrap .cpbo_top p > span span {display:inline;}
@keyframes shake-pause {0%, 50% {transform:translate(-50%, -50%) rotate(0deg);} 51.85% {transform:translate(-50%, -50%) rotate(-5deg);} 53.7% {transform:translate(-50%, -50%) rotate(5deg);} 55.55% {transform:translate(-50%, -50%) rotate(-5deg);} 57.4% {transform:translate(-50%, -50%) rotate(5deg);} 59% {transform:translate(-50%, -50%) rotate(0deg);} 100% {transform:translate(-50%, -50%) rotate(0deg);}}
@keyframes blinking01 {0% {transform:skew(3deg, -5deg) scale(0.87);} 25% {transform:skew(7deg, 3deg) scale(0.95);} 50% {transform:skew(6deg, -1deg) scale(0.9);} 75% {transform:skew(5deg, 1deg) scale(0.9);} 100% {transform:none;}}
@keyframes blinking02 {0% {transform:skew(5deg, 1deg) scale(0.9);} 50% {transform:skew(8deg, -1deg) scale(0.9);} 25% {transform:skew(13deg, -5deg) scale(0.87);} 75% {transform:skew(17deg, -3deg) scale(0.95);} 100% {transform:none;}}
@keyframes blinking03 {0% {transform:skew(26deg, -1deg) scale(0.9);} 25% {transform:skew(17deg, -3deg) scale(0.95);} 50% {transform:skew(5deg, 1deg) scale(0.9);} 75% {transform:skew(23deg, -5deg) scale(0.87);} 100% {transform:none;}}


/* portfolio - common */
#contents.portfolio {background-color:#fff; background-image:url('../images/project/portfolio/bg.png'); background-size:506px 881px; background-repeat:repeat; background-position:left top; font-family:"Oswald", 'Pretendard', sans-serif;}
#contents.portfolio .text,
#contents.portfolio .cp_text,
#contents.portfolio .cp_title {font-family:"Oswald", 'Pretendard', sans-serif !important; word-break:keep-all;}
#contents.portfolio .cp_title {font-size:50px; font-weight:700; color:#111426; line-height:70px; letter-spacing:-1px; text-transform:uppercase; word-break:keep-all;}
#contents.portfolio .cp_title > span {display:block;}
#contents.portfolio .cp_title .emphasis {position:relative; z-index:1; color:#FFE512; white-space:nowrap;}
#contents.portfolio .cp_title .emphasis:before {content:''; position:absolute; top:8px; bottom:-7px; left:-7px; right:calc(100% + 7px); z-index:-1; background-image:url('../images/project/portfolio/bg_title.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center left; transition:0.5s all;}
#contents.portfolio .aos-animate .cp_title .emphasis:before {right:-6px; transition-delay:0.5s;}
#contents.portfolio .cp_text {font-size:25px; font-weight:500; color:#111426; line-height:40px; letter-spacing:-0.5px; word-break:keep-all;}
#contents.portfolio .cp_text > span {display:block;}
#contents.portfolio .cp_text > span span {display:inline-block;}

/* portfolio - cp_brand */
#contents.portfolio .cp_brand {overflow:hidden; position:relative; padding:120px 0 220px;}
#contents.portfolio .cp_brand .cp_wrap {max-width:1440px;}
#contents.portfolio .cp_brand .cp_txtwrap {display:flex; flex-direction:column; gap:20px; text-align:left;}
#contents.portfolio .cp_brand .cp_txtwrap .cp_text > span span {display:block;}
#contents.portfolio .cp_brand .cp_imgwrap {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; margin-top:665px;}
#contents.portfolio .cp_brand .cp_imgwrap img:nth-child(1) {width:100%; max-width:736px;}
#contents.portfolio .cp_brand .cp_imgwrap img:nth-child(2) {position:relative; bottom:-67px; width:100%; max-width:278px;}
#contents.portfolio .cp_brand .cpb_deco {position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none;}
#contents.portfolio .cp_brand .cpb_deco .icon {position:absolute; background-size:cover; background-repeat:no-repeat; background-position:center;}
#contents.portfolio .cp_brand .cpb_deco .icon.t1 {display:inline-block; vertical-align:middle; top:-70px; right:78px; width:238px; height:auto; background-image:url('../images/project/portfolio/deco_brand01.svg'); aspect-ratio:238/292; animation:blinking01 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_brand .cpb_deco .icon.t2 {display:inline-block; vertical-align:middle; bottom:985px; left:365px; width:194px; height:auto; background-image:url('../images/project/portfolio/deco_brand02.svg'); aspect-ratio:194/201; animation:blinking02 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_brand .cpb_deco .icon.t3 {display:inline-block; vertical-align:middle; bottom:692px; left:30px; width:224px; height:auto; background-image:url('../images/project/portfolio/deco_brand03.svg'); aspect-ratio:224/168; animation:blinking03 1s steps(1, end) infinite; transform-origin:center;}

/* portfolio - cp_rule */
#contents.portfolio .cp_rule {position:relative;}
#contents.portfolio .cp_rule .cp_wrap {max-width:1440px; text-align:left;}
#contents.portfolio .cp_rule .cp_txtwrap {display:flex; flex-direction:column; gap:20px; text-align:left;}
#contents.portfolio .cp_rule .cp_txtwrap .cp_text > span span {display:block;}
#contents.portfolio .cp_rule .cpr_contents {display:flex; flex-wrap:wrap; row-gap:110px; margin-top:120px;}
#contents.portfolio .cp_rule .cpr_contents li {position:relative; width:50%; text-align:left;}
#contents.portfolio .cp_rule .cpr_contents li strong {display:block; font-size:80px; font-weight:500; color:#111426; line-height:90px; letter-spacing:-1.6px; word-break:keep-all;}
#contents.portfolio .cp_rule .cpr_contents li p {box-sizing:border-box; font-size:25px; font-weight:500; color:#111426; line-height:40px; letter-spacing:-0.5px; word-break:keep-all;}
#contents.portfolio .cp_rule .cpr_contents li:nth-child(1) p,
#contents.portfolio .cp_rule .cpr_contents li:nth-child(3) p {padding-right:20px;}
#contents.portfolio .cp_rule .cpr_contents li p > span {display:block;}
#contents.portfolio .cp_rule .cpr_contents li p > span span {display:inline-block;}
#contents.portfolio .cp_rule .cpr_contents li em {position:absolute; top:-26px; left:3px; padding:5px 10px; font-size:20px; font-weight:700; color:#FFE512; line-height:20px; letter-spacing:-0.4px; background-image:url('../images/project/portfolio/bg_number.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center;}
#contents.portfolio .cp_rule .cp_imgwrap {display:inline-block; vertical-align:middle; position:relative; margin-top:210px;}
#contents.portfolio .cp_rule .cp_imgwrap:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:17px; right:-195px; z-index:1; width:332px; height:auto; background-image:url('../images/project/portfolio/deco_rule01.svg'); background-size:cover; background-repeat:no-repeat; background-position:center; aspect-ratio:332/283; animation:blinking01 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_rule .cp_imgwrap:after {content:''; display:inline-block; vertical-align:middle; position:absolute; bottom:-42px; left:-68px; z-index:1; width:285px; height:auto; background-image:url('../images/project/portfolio/deco_rule02.svg'); background-size:cover; background-repeat:no-repeat; background-position:center; aspect-ratio:285/132; animation:blinking02 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_rule .cp_imgwrap img {float:left; width:100%; max-width:605px;}
#contents.portfolio .cp_rule .cpr_deco {position:absolute; top:-65px; right:-90px; width:582px; aspect-ratio:582/377; opacity:1 !important;}
#contents.portfolio .cp_rule .cpr_deco img {width:100%;}
#contents.portfolio .cp_rule .cpr_deco .deco_line {position:absolute; top:0; left:0; background-size:cover; background-repeat:no-repeat; mix-blend-mode:multiply;}
#contents.portfolio .cp_rule .cpr_deco .deco_line.t1 {right:100%; bottom:0; background-image:url('../images/project/portfolio/line_rule01.png'); background-position:left center;}
#contents.portfolio .cp_rule .cpr_deco .deco_line.t2 {right:100%; bottom:0; background-image:url('../images/project/portfolio/line_rule02.png'); background-position:left center;}
#contents.portfolio .cp_rule .cpr_deco .deco_line.t3 {right:0; bottom:100%; background-image:url('../images/project/portfolio/line_rule03.png'); background-position:top center;}
#contents.portfolio .cp_rule .cpr_deco .deco_line.t4 {right:0; bottom:100%; background-image:url('../images/project/portfolio/line_rule04.png'); background-position:top center;}
#contents.portfolio .cp_rule .cpr_deco.aos-animate .deco_line.t1 {right:0; transition:0.5s all; transition-delay:0;}
#contents.portfolio .cp_rule .cpr_deco.aos-animate .deco_line.t2 {right:0; transition:0.5s all; transition-delay:0.2s;}
#contents.portfolio .cp_rule .cpr_deco.aos-animate .deco_line.t3 {bottom:0; transition:0.5s all; transition-delay:0.6s;}
#contents.portfolio .cp_rule .cpr_deco.aos-animate .deco_line.t4 {bottom:0; transition:0.5s all; transition-delay:0.8s;}

/* portfolio - cp_online */
#contents.portfolio .cp_online {padding:0;}
#contents.portfolio .cp_online .cpo_top {display:flex; align-items:center; padding:160px 0;}
#contents.portfolio .cp_online .cpo_top .cp_txtwrap {width:50%;}
#contents.portfolio .cp_online .cpo_top .cp_txtwrap p {font-weight:400; text-transform:uppercase;}
#contents.portfolio .cp_online .cpo_top .cp_txtwrap p > span span {display:block;}
#contents.portfolio .cp_online .cpo_top .cp_imgwrap {width:50%;}
#contents.portfolio .cp_online .cpo_top .cp_imgwrap img {width:100%;}
#contents.portfolio .cp_online .cpo_bottom {position:relative; padding:320px 0 120px;}
#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {display:flex; flex-direction:row; justify-content:center; align-items:center; overflow:hidden; position:absolute; left:50%; top:56px; box-sizing:border-box; width:798px; margin-left:-384px; background-image:url('../images/project/portfolio/deco_online01.svg'); background-size:cover; background-repeat:no-repeat; background-position:right center; clip-path:rect(0 0 100% 0 round 0); aspect-ratio:798/229; transition:0.6s all;}
#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap.aos-animate {clip-path:rect(0 100% 100% 0 round 0);}
#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap p {margin-top:-20px; font-weight:400; text-transform:uppercase; white-space:nowrap;}
#contents.portfolio .cp_online .cpo_bottom .cp_imgwrap {position:relative; width:100%; max-width:800px; margin:0 auto;}
#contents.portfolio .cp_online .cpo_bottom .cp_imgwrap img {position:relative; width:100%;}
#contents.portfolio .cp_online .cpo_bottom .cp_imgwrap img:nth-child(2) {position:absolute; width:100%; top:0; left:0;}

/* portfolio - cp_design */
#contents.portfolio .cp_design {overflow:hidden; padding:0;}
#contents.portfolio .cp_design .cpd_top {display:flex; background-color:#f6f6f6;}
#contents.portfolio .cp_design .cpd_top .cp_imgwrap {width:50%;}
#contents.portfolio .cp_design .cpd_top .cp_imgwrap img {width:100%;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail {position:relative; width:50%; opacity:1 !important;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpdtt_img {position:absolute; top:50%; left:50%; width:190px; margin-top:-168px; margin-left:-95px;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpdtt_img img {width:100%;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info {display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:0; left:0; width:100%; padding-top:125%;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info p {padding:3px 0; font-size:14px; font-weight:700; color:#000; line-height:20px; text-align:left;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info em {display:inline-block; vertical-align:middle; position:relative; width:100px; height:20px; margin:3px 0;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info em:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:1px; bottom:1px; left:0; right:100%; z-index:0; background-color:#000;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail.aos-animate .cpddt_info em:before {right:10%; transition:1.4s all; transition-delay:1.2s; transition-timing-function:linear;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info em:after {content:''; display:inline-block; vertical-align:middle; position:relative; top:0; left:0; z-index:1; width:100%; height:100%; background-image:url('../images/project/portfolio/deco_design02.png'); background-size:contain; background-repeat:no-repeat; background-position:left center;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpddt_info i {display:inline-block; vertical-align:middle; width:15px; height:15px; margin-top:10px; border:1px solid #000; background-color:#fff;}
#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail.aos-animate .cpddt_info i {background-color:#B24747; transition:0.5s all; transition-delay:2.8s;}
#contents.portfolio .cp_design .cpd_bottom {display:flex; flex-direction:row; flex-wrap:wrap; max-width:1440px; margin:0 auto; padding:120px 0;}
#contents.portfolio .cp_design .cpd_bottom > strong {display:block; width:100%; font-family:Oswald; font-size:25px; font-weight:700; color:#111426; line-height:40px; letter-spacing:-0.5px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en {display:inline-block; vertical-align:middle; width:50%; margin-top:40px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en strong {display:block; width:100%; font-family:Oswald; font-size:500px; font-weight:400; color:#111426; line-height:500px; letter-spacing:-10px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en p {display:block; width:100%; margin-top:60px; font-family:Oswald; font-size:25px; font-weight:700; color:#111426; line-height:40px; letter-spacing:-0.5px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en ul {display:block; width:100%; margin-top:20px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en li {font-family:Oswald; font-size:25px; color:#111426; line-height:40px; letter-spacing:-0.5px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en li:nth-child(1) {font-weight:700;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en li:nth-child(2) {font-weight:600;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en li:nth-child(3) {font-weight:500;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_en li:nth-child(4) {font-weight:300;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr {display:inline-block; vertical-align:middle; width:50%; margin-top:40px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong {display:block; width:100%; font-family:Pretendard; font-size:450px; font-weight:600; color:#111426; line-height:500px; letter-spacing:-9px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong span {font-size:300px; font-weight:700; line-height:300px; letter-spacing:-6px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr p {display:block; width:100%; margin-top:60px; font-family:Pretendard; font-size:25px; font-weight:700; color:#111426; line-height:40px; letter-spacing:-0.5px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr ul {display:block; width:100%; margin-top:20px; text-align:left;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li {font-family:Pretendard; font-size:25px; font-weight:600; color:#111426; line-height:40px; letter-spacing:-0.5px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li:nth-child(1) {font-weight:700;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li:nth-child(2) {font-weight:500;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li:nth-child(3) {font-weight:400;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li:nth-child(4) {font-weight:300;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon {display:block; width:100%; margin-top:120px;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul {display:flex; flex-wrap:wrap; row-gap:70px; position:relative; opacity:1 !important;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li {width:90px; height:90px; padding-right:calc(25% - 112.5px);}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5n) {padding-right:0;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):before {content:''; position:absolute; top:0; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):after {content:''; position:absolute; top:90px; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):before {content:''; position:absolute; top:160px; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):after {content:''; position:absolute; top:250px; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):before {content:''; position:absolute; top:320px; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):after {content:''; position:absolute; top:410px; left:-70px; right:calc(100% + 70px); height:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:before {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:0; width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:after {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:90px; width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:before {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:calc(25% - 22.5px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:after {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:calc(25% + 67.5px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:before {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:calc(50% - 45px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:after {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); left:calc(50% + 45px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:before {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); right:calc(25% - 22.5px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:after {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); right:calc(25% + 67.5px); width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:before {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); right:0; width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:after {content:''; position:absolute; top:-70px; bottom:calc(100% + 70px); right:90px; width:1px; background-color:#000; opacity:0.1;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):before {right:-70px; transition:1.6s all; transition-delay:0;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):after {right:-70px; transition:1.6s all; transition-delay:0.2s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):before {right:-70px; transition:1.6s all; transition-delay:0.4s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):after {right:-70px; transition:1.6s all; transition-delay:0.6s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):before {right:-70px; transition:1.6s all; transition-delay:0.8s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):after {right:-70px; transition:1.6s all; transition-delay:1s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:before {bottom:-70px; transition:1.6s all; transition-delay:0.2s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:after {bottom:-70px; transition:1.6s all; transition-delay:0.4s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:before {bottom:-70px; transition:1.6s all; transition-delay:0.6s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:after {bottom:-70px; transition:1.6s all; transition-delay:0.8s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:before {bottom:-70px; transition:1.6s all; transition-delay:1s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:after {bottom:-70px; transition:1.6s all; transition-delay:1.2s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:after {bottom:-70px; transition:1.6s all; transition-delay:1.4s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:before {bottom:-70px; transition:1.6s all; transition-delay:1.6s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:after {bottom:-70px; transition:1.6s all; transition-delay:1.8s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:before {bottom:-70px; transition:1.6s all; transition-delay:2s;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon {width:100%; height:100%; padding:0; border-radius:0; background-color:transparent; background-size:cover; background-repeat:no-repeat; background-position:center;}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.arrow {background-image:url('../images/project/portfolio/icon_design01.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.filter {background-image:url('../images/project/portfolio/icon_design02.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.thumbnail {background-image:url('../images/project/portfolio/icon_design03.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.list {background-image:url('../images/project/portfolio/icon_design04.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.sort {background-image:url('../images/project/portfolio/icon_design05.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.calendar {background-image:url('../images/project/portfolio/icon_design06.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.gift {background-image:url('../images/project/portfolio/icon_design07.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.card {background-image:url('../images/project/portfolio/icon_design08.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.exchange {background-image:url('../images/project/portfolio/icon_design09.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.delivery {background-image:url('../images/project/portfolio/icon_design10.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.setting {background-image:url('../images/project/portfolio/icon_design11.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.ticket {background-image:url('../images/project/portfolio/icon_design12.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.archive {background-image:url('../images/project/portfolio/icon_design13.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.tags {background-image:url('../images/project/portfolio/icon_design14.svg');}
#contents.portfolio .cp_design .cpd_bottom .cpdb_icon .icon.eye {background-image:url('../images/project/portfolio/icon_design15.svg');}

/* portfolio - cp_experience */
#contents.portfolio .cp_experience {overflow:hidden;}
#contents.portfolio .cp_experience .cp_wrap {max-width:1440px;}
#contents.portfolio .cp_experience .cp_txtwrap {display:flex; flex-direction:column; gap:20px;}
#contents.portfolio .cp_experience .cp_imgwrap {margin-top:120px;}
#contents.portfolio .cp_experience .cp_imgwrap ul {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
#contents.portfolio .cp_experience .cp_imgwrap li {display:flex; flex-direction:column; align-items:center; position:relative;}
#contents.portfolio .cp_experience .cp_imgwrap li img {width:300px; margin-top:140px; filter:drop-shadow(0 20px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0 40px 20px rgba(0, 0, 0, 0.15));}
#contents.portfolio .cp_experience .cp_imgwrap li:nth-child(2) img:nth-child(1) {position:relative; z-index:1; width:443px; margin-top:0;}
#contents.portfolio .cp_experience .cp_imgwrap li:nth-child(2) video {position:absolute; top:3.4%; left:4%; z-index:0; width:92.5%; border-radius:0 0 8% 8%;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes {display:inline-block; vertical-align:middle; position:relative; margin-top:120px; font-size:60px; font-weight:500; color:#111426; line-height:90px; letter-spacing:-1.2px; text-align:center; opacity:1 !important; word-break:keep-all;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes:after {content:''; position:absolute; top:79px; left:109px; width:375px; height:107px; background-image:url('../images/project/portfolio/deco_experience03.svg'); background-size:cover; background-repeat:no-repeat; background-position:top center; opacity:0; animation:blinking02 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes:before {content:''; position:absolute; top:68px; right:-3px; width:125px; height:23px; background-image:url('../images/project/portfolio/deco_experience02.svg'); background-size:cover; background-repeat:no-repeat; background-position:top center; opacity:0; animation:blinking03 1s steps(1, end) infinite; transform-origin:center;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes.aos-animate:before {opacity:1; transition:0.5s all; transition-delay:0.7s;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes.aos-animate:after {opacity:1; transition:0.5s all; transition-delay:0.7s;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes span {display:flex; justify-content:center; align-items:center;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco {display:inline-block; vertical-align:middle; position:relative; height:90px;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco:before {position:absolute; background-size:cover; background-repeat:no-repeat; background-position:top center;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t1 {width:134px;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t1:before {content:''; top:-1px; left:30px; width:83px; height:80px; background-image:url('../images/project/portfolio/deco_experience01.png');}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t2 {width:148px;}
#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t2:before {content:''; top:-30px; left:15px; width:124px; height:120px; background-image:url('../images/project/portfolio/deco_experience04.png');}

/* portfolio - cp_look */
#contents.portfolio .cp_look {overflow:hidden; padding:120px 0; background-color:#f6f6f6;}
#contents.portfolio .cp_look .cp_wrap {max-width:1440px;}
#contents.portfolio .cp_look .cp_txtwrap {display:flex; flex-direction:column; gap:20px; text-align:left;}
#contents.portfolio .cp_look .cp_imgwrap {width:100%; max-width:1260px; margin:0 auto; margin-top:120px; animation:floating01 3s ease-in-out infinite;}
#contents.portfolio .cp_look .cp_imgwrap img {width:100%; filter:drop-shadow(-10px 15px 20px rgba(0, 0, 0, 0.05)) drop-shadow(0 -40px 40px rgba(0, 0, 0, 0.05));}

/* portfolio - cp_story */
#contents.portfolio .cp_story {overflow:hidden; padding:0; background-color:#fff;}
#contents.portfolio .cp_story .cp_wrap {display:flex;}
#contents.portfolio .cp_story .cp_txtwrap {display:flex; flex-direction:column; justify-content:center; gap:20px; box-sizing:border-box; width:50%; text-align:left;}
#contents.portfolio .cp_story .cp_txtwrap .cp_title,
#contents.portfolio .cp_story .cp_txtwrap .cp_text {width:560px; margin:0 auto;}
#contents.portfolio .cp_story .cp_imgwrap {width:50%;}
#contents.portfolio .cp_story .cp_imgwrap img {width:100%;}

/* portfolio - cp_uiux */
#contents.portfolio .cp_uiux {padding:180px 0;}
#contents.portfolio .cp_uiux .cp_wrap {max-width:1440px;}
#contents.portfolio .cp_uiux .cp_imgwrap.t1 {display:flex; justify-content:center; gap:100px;}
#contents.portfolio .cp_uiux .cp_imgwrap li {width:300px;}
#contents.portfolio .cp_uiux .cp_txtwrap {width:100%; margin-top:160px;}
#contents.portfolio .cp_uiux .cpu_sliderwrap {position:relative;}
#contents.portfolio .cp_uiux .cpu_slider {overflow:hidden; width:100%; max-width:1200px; margin:0 auto; margin-top:160px;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide {overflow:hidden; max-width:190px;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide img {float:left; width:100%;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info {display:block; float:left; width:100%; padding:10px 0; text-align:left;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info p {display:block; width:100%; padding:0 3px; font-size:14px; font-weight:700; color:#000; line-height:20px;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:5px; margin-top:10px;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color i {display:inline-block; vertical-align:middle; width:15px; height:15px; border:1px solid #000;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .brick {background-color:#B24747;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .black {background-color:#000;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .mint {background-color:#A3C9CE;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .white {background-color:#fff;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .brown {background-color:#B26C47;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .red {background-color:#9E0505;}
#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color .darkbrown {background-color:#4E3030;}
#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; top:95px; left:50px; width:40px; height:40px; border:1px solid rgba(0, 0, 0, 0); background-image:url('../images/project/portfolio/icon_slider_prev.svg'); background-size:cover; background-repeat:no-repeat; background-position:top center; cursor:pointer; transition:0.3s all;}
#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev:hover {border:1px solid rgba(0, 0, 0, 0.1);}
#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; top:95px; right:50px; width:40px; height:40px; border:1px solid rgba(0, 0, 0, 0); background-image:url('../images/project/portfolio/icon_slider_next.svg'); background-size:cover; background-repeat:no-repeat; background-position:top center; cursor:pointer; transition:0.3s all;}
#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next:hover {border:1px solid rgba(0, 0, 0, 0.1);}
#contents.portfolio .cp_uiux .cp_imgwrap {width:100%;}
#contents.portfolio .cp_uiux .cp_imgwrap.t2 {margin-top:160px;}
#contents.portfolio .cp_uiux .cp_imgwrap.t3 {margin-top:160px;}
#contents.portfolio .cp_uiux .cp_imgwrap img {width:100%; filter:drop-shadow(0 20px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0 40px 20px rgba(0, 0, 0, 0.15));}

/* portfolio - cp_userbility */
#contents.portfolio .cp_userbility {overflow:hidden; background-color:#f6f6f6;}
#contents.portfolio .cp_userbility .cp_imgwrap {position:relative; width:100%; max-width:1440px; margin:0 auto; padding-top:260px;}
#contents.portfolio .cp_userbility .cp_imgwrap:before {content:''; position:absolute; top:154px; left:0; right:0; background-image:url('../images/project/portfolio/bg_userbility01.png'); background-size:contain; background-repeat:no-repeat; background-position:top center; aspect-ratio:1280/920;}
#contents.portfolio .cp_userbility .cp_imgwrap strong {position:absolute; top:0; left:0; right:0; z-index:0; font-size:300px; font-weight:400; color:#E4E4E4; line-height:376px; letter-spacing:-6px; text-align:center;}
#contents.portfolio .cp_userbility .cp_imgwrap img {position:relative; z-index:1; width:100%; max-width:1280px;}
#contents.portfolio .cp_userbility .cp_imgwrap video {position:absolute; top:283px; left:50%; z-index:0; width:1086px; margin-left:-543px;}
#contents.portfolio .cp_userbility .cp_txtwrap {display:flex; flex-direction:column; gap:20px; margin-top:160px;}
#contents.portfolio .cp_userbility .cpu_contents {margin-top:160px;}
#contents.portfolio .cp_userbility .cpu_contents ul {display:flex; flex-direction:column; gap:160px;}
#contents.portfolio .cp_userbility .cpu_contents li {display:flex; gap:100px;}
#contents.portfolio .cp_userbility .cpu_contents li:nth-child(1) {justify-content:flex-start;}
#contents.portfolio .cp_userbility .cpu_contents li:nth-child(2) {justify-content:flex-end;}
#contents.portfolio .cp_userbility .cpu_contents li img {width:100%; max-width:720px; filter:drop-shadow(0 20px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0 40px 20px rgba(0, 0, 0, 0.15));}
#contents.portfolio .cp_userbility .cpu_contents li:nth-child(1) img:nth-child(1) {margin-left:-135px;}
#contents.portfolio .cp_userbility .cpu_contents li:nth-child(2) img:nth-child(2) {margin-right:-135px;}

@keyframes nav_ani1 {0% {transform:translateY(0%);} 10% {transform:translateY(-4%);} 20% {transform:translateY(0%);} 30% {transform:translateY(-4%);} 40%,100% {transform:translateY(0%);}}
@keyframes nav_ani2 {0% {transform:rotate(0) scale(1);} 3% {transform:rotate(0) scale(1.05);} 22% {transform:rotate(180deg) scale(1.05);} 25% {transform:rotate(180deg) scale(1);} 100% {transform:rotate(180deg) scale(1);}}
@keyframes nav_ani3 {0% {transform:translateY(0%);} 8% {transform:translateY(-4%);} 12% {transform:translateY(0%);} 16% {transform:translateY(-4%);} 20%,100% {transform:translateY(0%);}}
@keyframes nav_ani4 {0% {opacity:0;} 10% {opacity:0;} 12% {opacity:1;} 90% {opacity:1;} 92% {opacity:0;} 100% {opacity:0;}}
@keyframes nav_ani5 {0% {transform:rotate(0);} 10% {transform:rotate(3deg);} 20% {transform:rotate(-3deg);} 30% {transform:rotate(3deg);} 40%,100% {transform:rotate(0);}}
@keyframes nav_ani6 {0% {transform:translateY(0%);} 15% {transform:translateY(-4%);} 30% {transform:translateY(0%);} 45% {transform:translateY(-4%);} 60%,100% {transform:translateY(0%);}}
@keyframes nav_ani7 {0% {transform:rotate(0);} 30%,100% {transform:rotate(360deg);}}
@keyframes nav_ani8 {0% {transform:translate(0, 0);opacity:1;} 15% {transform:translate(0, -6px);opacity:0;} 20% {transform:translate(0, 6px);opacity:0;} 30%, 100% {transform:translate(0, 0);opacity:1;}}

@keyframes ai_ani {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
@keyframes ai_ani_re {0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);}}


/* full - cp_view */
#contents.full .cp_view {width:100%; padding:0;}
#contents.full .cp_view .cp_imgwrap {width:100%; font-size:0; line-height:0;}
#contents.full .cp_view .cp_imgwrap img {width:100%;}


/* footer */
#footer.f_project {float:left;}
#footer.f_project,
#footer.f_project .text,
#footer.f_project .text span {font-family:Saira, Pretendard, sans-serif, NanumGothic, NanumGothicBold, verdana, gulim, dotum;}
#footer.f_project {display:inline-block; position:relative; width:100%; min-width:320px; padding-top:120px; padding-bottom:60px; background-color:var(--yellow); overflow:hidden;}
#footer.f_project:before {content:""; display:none; position:absolute; left:60px; right:60px; top:0; height:1px; background-color:var(--black);}
#footer.f_project .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_project .f_wrap {display:inline-block; position:relative; width:100%; max-width:1440px; margin:0 auto;}
#footer.f_project .f_wrap + .f_wrap {margin-top:100px; padding-top:100px; border-top:1px solid rgba(17, 20, 38, 0.5);}
#footer.f_project .f_wrap.t2 + .f_wrap,
#footer.f_project .f_wrap.t3 + .f_wrap {margin-top:60px; padding-top:0; border-top:0;}
#footer.f_project .f_wrap .divarea {gap:50px; padding-left:calc(100% - 800px);}
#footer.f_project .titlearea {top:100px;}
#footer.f_project .titlearea h2 {line-height:50px;}
#footer.f_project .titlearea .decotitle i {background-color:#0119F7;}
#footer.f_project .titlearea.logo {height:50px;}
#footer.f_project .titlearea.logo img {height:100%;}
#footer.f_project .titlearea.logo:before {content:''; position:absolute; bottom:0; left:0; width:25px; height:6px; border-radius:2px; background-color:var(--blue);}
#footer.f_project .f_wrap.t2 .titlearea,
#footer.f_project .f_wrap.t2 + .f_wrap .titlearea {top:0;}
#footer.f_project .f_wrap.t2 .titlearea h2 {font-size:40px; font-weight:700; line-height:50px; letter-spacing:-0.8px;}
#footer.f_project .f_wrap.t3 li {width:100%;}
#footer.f_project .f_wrap.t3 li strong {font-size:50px; font-weight:700; line-height:60px; letter-spacing:-1px;}
#footer.f_project .f_area {display:flex; flex-wrap:wrap; gap:50px; width:100%; padding:0; opacity:1 !important;}
#footer.f_project .f_area p.text.giant .autotext {font-weight:600; line-height:30px;}
#footer.f_project .f_area p.text.giant .autotext:before {font-weight:200;}
#footer.f_project .f_area p.text.giant .autotext:after {top:40px; font-weight:600;}
#footer.f_project .f_area ul {display:flex; box-sizing:border-box; overflow:hidden; width:100%; padding:0 60px;}
#footer.f_project .f_area ul li {width:50%;}
#footer.f_project .f_area ul li strong {font-weight:600; line-height:50px; letter-spacing:-0.5px;}
#footer.f_project .f_area ul li p {font-weight:300; line-height:50px; letter-spacing:-0.5px;}
#footer.f_project .f_area ul li .autotext {line-height:40px;}
#footer.f_project li a span:before {color:var(--black); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
#footer.f_project li a span:after {top:50px; color:var(--black); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
#footer.f_project li a:hover span:before {top:-50px;}
#footer.f_project li a:hover span:after {top:0;}
#footer.f_project .f_area.aos-animate  p.text.giant .autotext:before {top:-40px;}
#footer.f_project .f_area.aos-animate  p.text.giant .autotext:after {top:0;}
#footer.f_project .f_btn {display:none;}





@media all and (max-width:1680px) {
	/* cp_hero */
	#contents.project .cp_hero .cph_banner .cphb_box {padding:3.125vw;}



	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:48px; line-height:68px;}
	#contents.portfolio .cp_text {font-size:23px; line-height:35px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand {padding:120px 50px 220px;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule {padding:160px 50px;}
	#contents.portfolio .cp_rule .cpr_deco {right:-40px;}
	#contents.portfolio .cp_rule .cpr_contents li p {font-size:23px; line-height:35px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_bottom {padding:120px 50px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):before {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):after {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):before {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):after {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):before {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):after {left:-40px; right:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:before {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:after {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:before {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:after {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:before {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:after {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:before {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:after {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:before {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:after {top:-40px; bottom:calc(100% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):before {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):after {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):before {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):after {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):before {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):after {right:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:before {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:after {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:before {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:after {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:before {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:after {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:after {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:before {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:after {bottom:-40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:before {bottom:-40px;}

	/* portfolio - cp_experience */
	#contents.portfolio .cp_experience {padding:120px 50px;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look {padding:120px 50px;}

	/* portfolio - cp_story */
	#contents.portfolio .cp_story .cp_txtwrap .cp_title,
	#contents.portfolio .cp_story .cp_txtwrap .cp_text {width:500px;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux {padding:180px 50px;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev {left:0;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next {right:0;}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility {padding:160px 50px;}
	#contents.portfolio .cp_userbility .cpu_contents li:nth-child(1) img:nth-child(1) {margin-left:-270px;}
	#contents.portfolio .cp_userbility .cpu_contents li:nth-child(2) img:nth-child(2) {margin-right:-270px;}



	/* footer */
	#footer.f_project {padding-top:100px; padding-bottom:50px;}
	#footer.f_project:before {left:50px; right:50px;}
	#footer.f_project .f_area {padding-left:60px;}
	#footer.f_project .f_area p.text.giant .autotext {line-height:25px;}
}




@media all and (max-width:1440px) {
	/* cp_hero */
	#contents.project .cp_hero .cpb_overview {padding:120px 50px 160px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap img:nth-child(2) {width:70px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap {max-width:800px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info {margin-top:30px; padding-top:30px;}


	/* full - cp_hero */
	#contents.full .cp_hero .cpb_overview .cp_imgwrap {max-width:calc(100% - 880px);}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule .cpr_deco {width:534px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en {margin-top:2.7759vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en strong {font-size:34.6981vw; line-height:34.6981vw; letter-spacing:-0.6940vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en p {margin-top:4.1638vw; font-size:1.7349vw; line-height:2.7759vw; letter-spacing:-0.0347vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en ul {margin-top:1.3879vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en li {font-size:1.7349vw; line-height:2.7759vw; letter-spacing:-0.0347vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr {margin-top:2.7759vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong {font-size:31.2283vw; line-height:34.6981vw; letter-spacing:-0.6246vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong span {font-size:20.8189vw; line-height:20.8189vw; letter-spacing:-0.4164vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr p {margin-top:4.1638vw; font-size:1.7349vw; line-height:2.7759vw; letter-spacing:-0.0347vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr ul {margin-top:1.3879vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li {font-size:1.7349vw; line-height:2.7759vw; letter-spacing:-0.0347vw;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux .cp_txtwrap {margin-top:12%;}
	#contents.portfolio .cp_uiux .cpu_slider {width:78.1250vw; max-width:100%; margin-top:12%;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev {top:calc(50% - 34px); margin-top:-20px;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next {top:calc(50% - 34px); margin-top:-20px;}
	#contents.portfolio .cp_uiux .cp_imgwrap.t2 {margin-top:12%;}
	#contents.portfolio .cp_uiux .cp_imgwrap.t3 {margin-top:12%;}

	/* portfolio - cp_experience */
	#contents.portfolio .cp_experience .cp_imgwrap {margin-top:8.3333vw;}
	#contents.portfolio .cp_experience .cp_imgwrap li img {width:20.8333vw; margin-top:9.7222vw; filter:drop-shadow(0 1.3889vw 1.3889vw rgba(0, 0, 0, 0.10)) drop-shadow(0 2.7778vw 1.3889vw rgba(0, 0, 0, 0.15));}
	#contents.portfolio .cp_experience .cp_imgwrap li:nth-child(2) img:nth-child(1) {width:30.7639vw;}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility .cp_imgwrap {padding-top:18.0556vw;}
	#contents.portfolio .cp_userbility .cp_imgwrap:before {top:10.6944vw;}
	#contents.portfolio .cp_userbility .cp_imgwrap strong {font-size:20.8333vw; line-height:26.1111vw; letter-spacing:-0.4167vw;}
	#contents.portfolio .cp_userbility .cp_txtwrap {margin-top:12%;}
	#contents.portfolio .cp_userbility .cpu_contents {margin-top:11.1111vw;}
	#contents.portfolio .cp_userbility .cpu_contents ul {flex-direction:column; gap:11.1111vw;}
	#contents.portfolio .cp_userbility .cpu_contents li {gap:6.9444vw;}
	#contents.portfolio .cp_userbility .cpu_contents li img {width:100%; max-width:50vw; filter:drop-shadow(0 1.3889vw 1.3889vw rgba(0, 0, 0, 0.10)) drop-shadow(0 2.7778vw 1.3889vw rgba(0, 0, 0, 0.15));}
	#contents.portfolio .cp_userbility .cpu_contents li:nth-child(1) img:nth-child(1) {margin-left:-23vw;}
	#contents.portfolio .cp_userbility .cpu_contents li:nth-child(2) img:nth-child(2) {margin-right:-23vw;}
	#contents.portfolio .cp_userbility .cp_imgwrap video {top:19.7vw; width:78vw; margin-left:-39vw;}



	/* footer */
	#footer.f_project .f_wrap + .f_wrap {margin-top:90px; padding-top:90px;}
}





@media all and (max-width:1280px) {
	/* cp_hero */
	#contents.project .cp_hero .cpb_overview {padding:100px 40px 140px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap {gap:20px; margin-top:5px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap img:nth-child(2) {width:60px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap {max-width:66.6666%;}

	/* portfolio - cp_hero */
	#contents.portfolio .cp_hero .cpb_overview .cp_txtwrap .cpbo_top p > span {display:inline-block;}


	/* full - cp_hero */
	#contents.full .cp_hero .cpb_overview .cp_imgwrap {max-width:calc(33.3333% - 20px);}

	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:45px; line-height:60px;}
	#contents.portfolio .cp_title .emphasis:before {bottom:-2px;}
	#contents.portfolio .cp_text {font-size:21px; line-height:32px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand {padding:100px 40px 160px;}
	#contents.portfolio .cp_brand .cp_imgwrap {margin-top:50%;}
	#contents.portfolio .cp_brand .cp_imgwrap img:nth-child(1) {max-width:56%;}
	#contents.portfolio .cp_brand .cp_imgwrap img:nth-child(2) {max-width:24%;}
	#contents.portfolio .cp_brand .cpb_deco .icon.t1 {width:18vw; top:-6vw; right:5vw;}
	#contents.portfolio .cp_brand .cpb_deco .icon.t2 {width:15vw; bottom:65vw; left:30vw;}
	#contents.portfolio .cp_brand .cpb_deco .icon.t3 {width:19vw; bottom:47vw; left:2vw;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule {padding:26% 40px 120px;}
	#contents.portfolio .cp_rule .cpr_deco {top:-15vw; right:-2vw; width:40vw;}
	#contents.portfolio .cp_rule .cpr_contents {margin-top:100px;}
	#contents.portfolio .cp_rule .cpr_contents li p {font-size:21px; line-height:32px;}
	#contents.portfolio .cp_rule .cpr_contents li strong {font-size:74px; line-height:84px; letter-spacing:-1.4px;}
	#contents.portfolio .cp_rule .cpr_contents li em {padding:4px 8px; font-size:18px; line-height:18px;}
	#contents.portfolio .cp_rule .cp_imgwrap {width:64%;}
	#contents.portfolio .cp_rule .cp_imgwrap:before {top:3vw; right:-19vw; width:32vw;}
	#contents.portfolio .cp_rule .cp_imgwrap:after {bottom:-4vw; left:-5vw; width:26vw;}
	#contents.portfolio .cp_rule .cp_imgwrap img {max-width:100%;}

	/* portfolio - cp_online */
	#contents.portfolio .cp_online .cpo_top {padding:120px 0;}
	#contents.portfolio .cp_online .cpo_bottom {padding:320px 40px 100px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {width:700px; margin-left:-350px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_bottom {padding:100px 40px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon {margin-top:100px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul {row-gap:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li {width:80px; height:80px; padding-right:calc(25% - 100px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):before {top:0; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):after {top:80px; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):before {top:140px; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):after {top:220px; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):before {top:280px; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):after {top:360px; left:-20px; right:calc(100% + 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:before {top:-20px; bottom:calc(100% + 20px); left:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:after {top:-20px; bottom:calc(100% + 20px); left:80px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:before {top:-20px; bottom:calc(100% + 20px); left:calc(25% - 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:after {top:-20px; bottom:calc(100% + 20px); left:calc(25% + 60px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:before {top:-20px; bottom:calc(100% + 20px); left:calc(50% - 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:after {top:-20px; bottom:calc(100% + 20px); left:calc(50% + 40px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:before {top:-20px; bottom:calc(100% + 20px); right:calc(25% - 20px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:after {top:-20px; bottom:calc(100% + 20px); right:calc(25% + 60px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:before {top:-20px; bottom:calc(100% + 20px); right:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:after {top:-20px; bottom:calc(100% + 20px); right:80px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):before {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1):after {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):before {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(6):after {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):before {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(11):after {right:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:before {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(1) i:after {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:before {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(2) i:after {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:before {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(3) i:after {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:after {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4) i:before {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:after {bottom:-20px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(5) i:before {bottom:-20px;}

	/* portfolio - cp_experience */
	#contents.portfolio .cp_experience {padding:100px 40px;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look {padding:100px 40px;}

	/* portfolio - cp_story */
	#contents.portfolio .cp_story .cp_txtwrap .cp_title,
	#contents.portfolio .cp_story .cp_txtwrap .cp_text {width:450px;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux {padding:120px 40px;}
	#contents.portfolio .cp_uiux .cpu_slider {width:80vw;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info p {padding:0;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color {gap:3px;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color i {width:10px; height:10px;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev {top:calc(50% - 30px);}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next {top:calc(50% - 30px);}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility {padding:120px 40px;}
	#contents.portfolio .cp_userbility .cp_imgwrap video {top:69.6%; width:85%; margin:-42.5%;}


	/* footer */
	#footer.f_project {padding-top:80px; padding-bottom:40px;}
	#footer.f_project:before {left:40px; right:40px;}
	#footer.f_project .f_area {padding-left:40px;}
	#footer.f_project .f_area ul {padding:0 20px;}
	#footer.f_project .f_area p.text.giant .autotext {line-height:22px;}
	#footer.f_project .f_wrap + .f_wrap {margin-top:80px; padding-top:80px;}
	#footer.f_project .f_wrap .divarea {gap:40px; padding-left:33.3333%;}
	#footer.f_project .titlearea {top:80px;}
	#footer.f_project .titlearea.logo {top:90px; height:40px;}
	#footer.f_project .titlearea.logo:before {width:20px; height:5px;}
	#footer.f_project .f_wrap.t2 .titlearea h2 {line-height:40px;}
	#footer.f_project .titlearea h2 {line-height:40px;}
	#footer.f_project .f_area ul li strong {line-height:40px;}
	#footer.f_project .f_area ul li p {line-height:40px;}
	#footer.f_project .f_wrap.t3 li strong {font-size:45px;}
}





@media all and (max-width:1024px) {
	/* cp_hero */
	#contents.project .cp_hero .cpb_overview {flex-direction:column; padding:80px 30px 100px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap {flex-direction:row; width:100%; margin-top:0;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap {max-width:100%; margin-top:30px;}


	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:43px; line-height:56px;}
	#contents.portfolio .cp_text {font-size:20px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand {padding:80px 30px 180px;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule {padding:28% 30px 80px;}
	#contents.portfolio .cp_rule .cpr_deco {top:-26vw;}
	#contents.portfolio .cp_rule .cpr_contents {row-gap:100px;}
	#contents.portfolio .cp_rule .cpr_contents li strong {font-size:62px; line-height:72px; letter-spacing:-1.2px;}
	#contents.portfolio .cp_rule .cpr_contents li p {font-size:20px;}
	#contents.portfolio .cp_rule .cpr_contents li em {font-size:16px;}
	#contents.portfolio .cp_rule .cp_imgwrap {margin-top:20%;}

	/* portfolio - cp_online */
	#contents.portfolio .cp_online .cpo_top {flex-direction:column-reverse; padding:80px 30px 120px;}
	#contents.portfolio .cp_online .cpo_top .cp_txtwrap {width:100%; margin-top:50px;}
	#contents.portfolio .cp_online .cpo_top .cp_txtwrap p > span span {display:inline-block;}
	#contents.portfolio .cp_online .cpo_top .cp_imgwrap {width:100%;}
	#contents.portfolio .cp_online .cpo_bottom {padding:270px 30px 100px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {top:40px; width:600px; margin-left:-300px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_top {flex-direction:column; padding:0; background-color:transparent;}
	#contents.portfolio .cp_design .cpd_top .cp_imgwrap {width:100%;}
	#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail {width:100%; height:560px; background-color:#f6f6f6;}
	#contents.portfolio .cp_design .cpd_bottom {padding:100px 30px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon {margin-top:80px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul {row-gap:50px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li {width:60px; height:60px; padding-right:calc(25% - 75px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):before {top:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):after {top:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):before {top:110px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):after {top:170px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):before {top:220px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):after {top:280px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:before {left:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:after {left:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:before {left:calc(25% - 15px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:after {left:calc(25% + 45px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:before {left:calc(50% - 30px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:after {left:calc(50% + 30px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:before {right:calc(25% - 15px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:after {right:calc(25% + 45px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:before {right:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:after {right:60px;}

	/* portfolio - cp_experience */
	#contents.portfolio .cp_experience {padding:100px 30px;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes {margin-top:11.7188vw; font-size:5.6vw; line-height:8.7891vw; letter-spacing:-0.1172vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes:after {top:7.7148vw; left:10.6445vw; width:36.6211vw; height:10.4492vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes:before {top:6.6406vw; right:-0.293vw; width:12.207vw; height:2.2461vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco {height:8.7891vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t1 {width:13.0859vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t1:before {top:-0.0977vw; left:2.9297vw; width:8.1055vw; height:7.8125vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t2 {width:14.4531vw;}
	#contents.portfolio .cp_experience .cp_wrap .cpe_shoes .cpes_deco.t2:before {top:-2.9297vw; left:1.4648vw; width:12.1094vw; height:11.7188vw;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look {padding:100px 30px;}

	/* portfolio - cp_story */
	#contents.portfolio .cp_story {padding:100px 30px 30px;}
	#contents.portfolio .cp_story .cp_wrap {flex-direction:column;}
	#contents.portfolio .cp_story .cp_txtwrap {width:100%;}
	#contents.portfolio .cp_story .cp_txtwrap .cp_title,
	#contents.portfolio .cp_story .cp_txtwrap .cp_text {width:100%;}
	#contents.portfolio .cp_story .cp_imgwrap {width:100%; margin-top:50px;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux {padding:120px 30px;}
	#contents.portfolio .cp_uiux .cp_imgwrap.t1 {gap:7.8125vw;}
	#contents.portfolio .cp_uiux .cp_imgwrap li {width:23.4375vw;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color i {width:8px; height:8px;}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility {padding:120px 30px;}


	/* footer */
	#footer.f_project {padding-top:60px; padding-bottom:30px;}
	#footer.f_project:before {left:30px; right:30px;}
	#footer.f_project .f_area {display:inline-block; width:100%; margin-top:0; padding-left:20px;}
	#footer.f_project .f_area ul li strong {line-height:32px;}
	#footer.f_project .f_area ul li p {line-height:32px;}
	#footer.f_project .f_wrap {padding-bottom:0;}
	#footer.f_project .f_wrap + .f_wrap {margin-top:60px; padding-top:60px;}
	#footer.f_project .f_wrap.t2 .titlearea h2 {font-size:32px; line-height:32px;}
	#footer.f_project .f_wrap.t3 li strong {font-size:32px; line-height:42px;}
	#footer.f_project .titlearea {top:60px;}
	#footer.f_project .titlearea h2 {line-height:32px;}
	#footer.f_project .titlearea.logo {top:65px; height:32px;}
	#footer.f_project .titlearea.logo:before {width:16px; height:4px;}
}





@media all and (max-width:768px) {
	/* common */
	#wrap.project #header .h_btn span {color:var(--black);}
	#wrap.project i.icon.menu_mini {background-position:right; transition:0s background;}

	#wrap.project #header .h_btn span {color:var(--white);}
	#wrap.project #header.off {mix-blend-mode:normal;}
	#wrap.project #header.off .h_logo {background-image:url(../images/common/logo_black.svg);}
	body.open #wrap.project .logoline {background-color:var(--white);}
	#wrap.project #header.off .h_btn span {color:var(--black);}
	#wrap.project i.icon.menu_mini {filter:invert(100%) sepia(16%) saturate(7480%) hue-rotate(292deg) brightness(200%) contrast(105%);}
	#wrap.project #header.off i.icon.menu_mini {background-position:left; filter:none;}


	/* cp_hero */
	#contents.project .cp_hero .cpb_overview {padding:60px 30px 80px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap img:nth-child(2) {width:50px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info {flex-direction:column; gap:20px; padding-top:20px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li {flex-direction:row; width:100%;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li strong {width:94px; line-height:30px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li i {width:1px; height:12px; margin:9px 15px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li p {line-height:30px;}


	/* portfolio - cp_hero */
	#contents.portfolio .cp_hero .cph_banner .cp_imgwrap {max-width:clamp(240px, 70vw, 540px);}
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t1 {top:-8vh; right:15vw; width:26vw;}
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t2 {bottom:18vh; left:-23vw; width:52vw;}
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t3 {bottom:12vh; right:-35vw; width:80vw;}
	#contents.portfolio .cp_hero .cpb_overview .cp_imgwrap img:nth-child(1) {height:70px;}


	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:38px; line-height:52px;}
	#contents.portfolio .cp_title .emphasis:before {bottom:0; left:-5px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand .cp_txtwrap .cp_text > span span {display:inline;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule {padding:26% 30px 60px;}
	#contents.portfolio .cp_rule .cp_txtwrap .cp_text > span span {display:inline;}
	#contents.portfolio .cp_rule .cpr_contents {row-gap:80px;}
	#contents.portfolio .cp_rule .cpr_contents li strong {font-size:48px; line-height:58px; letter-spacing:-1px;}
	#contents.portfolio .cp_rule .cpr_contents li em {padding:4px 6px; font-size:15px; line-height:15px;}

	/* portfolio - cp_online */
	#contents.portfolio .cp_online .cpo_top {padding:60px 30px 120px;}
	#contents.portfolio .cp_online .cpo_bottom {padding:230px 30px 100px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {width:500px; margin-left:-250px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en {display:flex; align-items:flex-end; width:100%; margin-top:4vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en strong {width:66.6666%; font-size:50vw; line-height:50vw; letter-spacing:-1vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en p {position:absolute; bottom:27vw; left:66.6666%; right:0; margin-top:0; font-size:6.25vw; line-height:10vw; letter-spacing:-0.125vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en ul {width:33.3333%; margin-top:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_en li {font-size:4.1667vw; line-height:6.6667vw; letter-spacing:-0.0833vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr {display:flex; align-items:flex-end; width:100%; margin-top:10vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong {width:66.6666%; font-size:33.3333vw; line-height:37.037vw; letter-spacing:-0.6667vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr strong span {font-size:22.2222vw; line-height:22.2222vw; letter-spacing:-0.4444vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr p {position:absolute; bottom:27vw; left:66.6666%; right:0; width:auto; margin-top:0; font-size:6.25vw; line-height:10vw; letter-spacing:-0.125vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr ul {width:33.3333%; margin-top:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_kr li {font-size:4.1667vw; line-height:6.6667vw; letter-spacing:-0.0833vw;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon {margin-top:60px;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look .cp_imgwrap {margin-top:80px;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux .cpu_slider {width:73vw;}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility {padding:100px 25px;}

	/* footer */
	#footer.f_project .f_plastic {height:max(208vw, 100vh); background-image:url("../images/pic_plasticfooter_mo.png");}
	#footer.f_project .f_wrap .divarea {gap:20px; padding-left:0;}
	#footer.f_project .f_wrap.t2 .divarea li {width:100%;}
	#footer.f_project .f_wrap.t2 .titlearea {margin-bottom:5px;}
	#footer.f_project .f_wrap.t2 + .f_wrap,
	#footer.f_project .f_wrap.t3 + .f_wrap {margin-top:30px;}
	#footer.f_project .f_area {padding-left:0;}
	#footer.f_project .f_area p {left:-100%;}
	#footer.f_project .f_area ul {padding:0;}
	#footer.f_project .titlearea {top:unset; margin-bottom:30px;}
	#footer.f_project .titlearea.logo {top:unset; z-index:1; height:20px; margin-bottom:30px;}
	#footer.f_project .titlearea.logo:before {width:10px; height:3px;}
}





@media all and (max-width:600px) {
	/* cp_hero */
	#contents.project .cp_hero .cpb_overview .cp_txtwrap {margin-top:20px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info {margin-top:20px; padding-top:10px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li strong {width:84px;}

	
	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:30px; line-height:46px;}
	#contents.portfolio .cp_title > span span {display:block;}
	#contents.portfolio .cp_title .emphasis:before {left:-4px;}
	#contents.portfolio .cp_text {font-size:17px; line-height:28px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand {padding:80px 30px 120px;}
	#contents.portfolio .cp_brand .cpb_deco .icon.t1 {top:-16vw; right:-1vw;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule .cpr_contents {row-gap:60px;}
	#contents.portfolio .cp_rule .cpr_contents li {width:100%;}
	#contents.portfolio .cp_rule .cpr_contents li strong {font-size:42px; line-height:52px;}
	#contents.portfolio .cp_rule .cpr_contents li p {font-size:17px; line-height:28px;}
	#contents.portfolio .cp_rule .cpr_contents li:nth-child(1) p,
	#contents.portfolio .cp_rule .cpr_contents li:nth-child(3) p {padding:0;}
	#contents.portfolio .cp_rule .cp_imgwrap {width:100%;}
	#contents.portfolio .cp_rule .cp_imgwrap:before {top:-8vw; right:-6vw;}

	/* portfolio - cp_online */
	#contents.portfolio .cp_online .cpo_bottom {padding:160px 30px 100px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {top:20px; width:400px; margin-left:-200px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap p {margin-top:-10px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail {height:420px;}
	#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpdtt_img {width:160px; margin-top:-141px; margin-left:-80px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li {padding-right:calc(50% - 90px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5n) {padding-right:calc(50% - 90px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3n) {padding-right:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):before {top:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1):after {top:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):before {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(6):after {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):before {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(11):after {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4):before {content:''; position:absolute; top:110px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4):after {content:''; position:absolute; top:170px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(7):before {content:''; position:absolute; top:220px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(7):after {content:''; position:absolute; top:280px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(10):before {content:''; position:absolute; top:330px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(10):after {content:''; position:absolute; top:390px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(13):before {content:''; position:absolute; top:440px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(13):after {content:''; position:absolute; top:500px; left:-20px; right:calc(100% + 20px); height:1px; background-color:#000; opacity:0.1;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:before {left:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(1) i:after {left:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:before {left:calc(50% - 30px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(2) i:after {left:calc(50% + 30px);}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:before {left:unset; right:0;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(3) i:after {left:unset; right:60px;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:before {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(4) i:after {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:before {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon li:nth-child(5) i:after {display:none;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4):before {right:-20px; transition:1.6s all; transition-delay:0.8s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(4):after {right:-20px; transition:1.6s all; transition-delay:1s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(7):before {right:-20px; transition:1.6s all; transition-delay:1.2s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(7):after {right:-20px; transition:1.6s all; transition-delay:1.4s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(10):before {right:-20px; transition:1.6s all; transition-delay:1.6s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(10):after {right:-20px; transition:1.6s all; transition-delay:1.8s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(13):before {right:-20px; transition:1.6s all; transition-delay:2s;}
	#contents.portfolio .cp_design .cpd_bottom .cpdb_icon ul.aos-animate li:nth-child(13):after {right:-20px; transition:1.6s all; transition-delay:2.2s;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look .cp_txtwrap .cp_text span {display:inline;}
	#contents.portfolio .cp_look .cp_imgwrap {margin-top:60px;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux .cpu_slider {width:100%;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info {padding:5px 0;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info p {font-size:12px;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color {margin-top:6px;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color i {width:6px; height:6px;}
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-prev,
	#contents.portfolio .cp_uiux .cpu_sliderwrap .cpu_slider-next {display:none;}


	/* footer */
	#footer.f_project .f_area p {display:inline-block; float:left; font-size:15px;}
	#footer.f_project .f_area p.text.giant .autotext {line-height:16px;}
	#footer.f_project .f_wrap.t2 .titlearea {margin-bottom:0;}
	#footer.f_project .f_wrap.t2 .titlearea h2 {font-size:28px; line-height:28px;}
	#footer.f_project .f_wrap.t3 li strong {font-size:28px; line-height:38px;}
}





@media all and (max-width:425px) {
	/* cp_hero */
	#contents.project .cp_hero .cph_banner .cphb_box ul li:nth-child(1) {width:58%;}
	#contents.project .cp_hero .cph_banner .cphb_box ul li:nth-child(2) {width:42%;}
	#contents.project .cp_hero .cpb_overview {padding:60px 25px 80px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info {gap:10px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li i {margin-bottom:5px;}
	#contents.project .cp_hero .cpb_overview .cp_txtwrap .cpbo_info li p {line-height:30px;}
	#contents.project .cp_hero .cpb_overview .cp_imgwrap img:nth-child(2) {width:40px;}

	

	/* portfolio - cp_hero */
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t1 {top:-5vh; right:25vw; width:32vw;}
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t2 {bottom:27vh; width:70vw;}
	#contents.portfolio .cp_hero .cph_banner .cphb_deco.t3 {bottom:16vh; right:-40vw; width:90vw;}
	#contents.portfolio .cp_hero .cpb_overview .cp_imgwrap img:nth-child(1) {height:58px;}


	/* full - cp_hero */
	#contents.full .cp_hero .cpb_overview .cp_imgwrap img:nth-child(1) {max-width:200px;}

	/* portfolio - cp_brand */
	#contents.portfolio .cp_brand {padding:80px 25px 120px;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule {padding:26% 25px 40px;}
	#contents.portfolio .cp_rule .cpr_contents {margin-top:80px;}

	/* portfolio - cp_online */
	#contents.portfolio .cp_online .cpo_top {padding:40px 25px 80px;}
	#contents.portfolio .cp_online .cpo_top .cp_txtwrap {margin-top:30px;}
	#contents.portfolio .cp_online .cpo_top .cp_txtwrap p > span span {display:inline;}
	#contents.portfolio .cp_online .cpo_bottom {padding:120px 25px 80px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap {top:0; width:310px; margin-left:-155px;}
	#contents.portfolio .cp_online .cpo_bottom .cp_txtwrap .cp_text {font-size:14px; line-height:21px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_top {padding:0;}
	#contents.portfolio .cp_design .cpd_bottom {padding:80px 25px;}

	/* portfolio - cp_experience */
	#contents.portfolio .cp_experience {padding:80px 25px;}

	/* portfolio - cp_look */
	#contents.portfolio .cp_look {padding:80px 25px;}

	/* portfolio - cp_story */
	#contents.portfolio .cp_story {padding:80px 25px 25px;}
	#contents.portfolio .cp_story .cp_imgwrap {margin-top:30px;}
	#contents.portfolio .cp_story .cp_txtwrap .cp_text span {display:inline;}

	/* portfolio - cp_uiux */
	#contents.portfolio .cp_uiux {padding:100px 25px;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color {gap:2px;}
	#contents.portfolio .cp_uiux .cpu_slider .swiper-slide .cpus_info .cpusi_color i {width:8px; height:8px;}

	/* portfolio - cp_userbility */
	#contents.portfolio .cp_userbility {padding:80px 25px;}



	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:26px; line-height:38px;}
	#contents.portfolio .cp_title .emphasis:before {top:4px; left:-4px;}
	#contents.portfolio .aos-animate .cp_title .emphasis:before {right:-4px;}

	/* portfolio - cp_design */
	#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail {height:340px;}
	#contents.portfolio .cp_design .cpd_top .cpdt_thumbnail .cpdtt_img {width:120px; margin-top:-106px; margin-left:-60px;}

	/* footer */
	#footer.f_project {padding:40px 0; padding-top:40px; padding-bottom:20px;}
	#footer.f_project .f_wrap + .f_wrap {margin-top:40px; padding-top:40px;}
	#footer.f_project .f_wrap.t2 + .f_wrap,
	#footer.f_project .f_wrap.t3 + .f_wrap {margin-top:20px;}
	#footer.f_project .f_wrap.t3 li strong {font-size:21px; line-height:30px;}
	#footer.f_project .f_area ul li strong {font-size:16px;}
	#footer.f_project .f_area p.text.giant .autotext {line-height:15px;}
	#footer.f_project .titlearea {margin-bottom:20px;}
}





@media all and (max-width:360px) {
	
	/* portfolio - common */
	#contents.portfolio .cp_title {font-size:22px; line-height:32px;}
	#contents.portfolio .cp_title .emphasis:before {left:-2px;}
	#contents.portfolio .cp_text {font-size:16px;}

	/* portfolio - cp_rule */
	#contents.portfolio .cp_rule .cpr_contents li p {font-size:16px;}


	/* footer */
	#footer.f_project .f_area ul li strong {font-size:14px;}
	#footer.f_project .f_wrap.t2 .titlearea h2 {font-size:26px; line-height:26px;}
}