/* .wow{ position: absolute; left: 51%; top: 65px; transform: translateX(-50%); width: 83%; height: 1200px; background-image: url(/asset/img/sub/creative/wow.jpeg); background-size: contain; } */ ._creative{color: #fff;} ._creative .s1{ text-align: center; height: 100vh; padding-top: var(--headerH); box-sizing: border-box; margin-bottom: 160px; margin-bottom: 320px; position: relative; } ._creative .s1 .cont{ position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; width: 100%; font-size: 1px; gap: 20em; height: 100%; } ._creative .s1 .txt{ font-weight: 700; display: flex; align-items: center; line-height: 1.2; font-family: 'Roboto'; z-index: 4; font-size: 130em; position: relative; z-index: 11; } ._creative .s1 .txt h3{ display: inline; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; letter-spacing: -0.025em; margin-right: 0.1em; color: var(--green); } ._creative .s1 .txt h3 span{font-family: 'Noto Sans KR'; font-size: 0.8em;} ._creative .s1 .txt .right{text-align: left;font-size: calc(48/130*1em); letter-spacing: -0.025em;} ._creative .s1 .txt .right p:nth-child(2){font-family: 'Roboto'; font-size: 1.2em;} ._creative .s1 .imgArea{ position: relative; display: flex; align-items: center; justify-content: center; } ._creative .s1 .imgArea::after{ content: ''; position: absolute; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 63%); pointer-events: none; height: 150%; width: 470%; left: 50%; bottom: -10%; transform: translateX(-50%); z-index: 10; } ._creative .s1 .imgArea .bg{position: relative; z-index: 10; pointer-events: none;} ._creative .s1 .imgArea .bg img{width: 540em; transform: translateX(16%);} ._creative .s1 .imgArea .box{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; /* box-shadow: 0 0 0 1px dodgerblue; */ } ._creative .s1 .imgArea .box .imgBx{position: absolute;} ._creative .s1 .imgArea .box .imgBx.n6{z-index: 2;} ._creative .s1 .imgArea .box .imgBx.n9{z-index: 2;} ._creative .s1 .imgArea .box .imgBx.n11{z-index: 3;} ._creative .s1 .imgArea .box .imgBx.n14{z-index: 2;} ._creative .s1 .imgArea .box .imgBx.n16{z-index: 3;} ._creative .s1 .imgArea .box .imgBx.n17{z-index: 2;} ._creative .s1 .imgArea .box .imgBx.n20{z-index: 4;} ._creative .s1 .imgArea .box .imgBx.n20{z-index: 2;} ._creative .s1 .imgArea .box .imgBx div{filter: grayscale(1) brightness(0.3);} ._creative .s1 .imgArea .box .imgBx div img{} /* 모션 셋팅 */ ._creative .s1 .txt{transform: translateY(60px); opacity: 0;} ._creative .s1 .imgArea .box .imgBx{transform: scale(0.5); opacity: 0;} ._creative .s1 .imgArea .bg{transform: translateY(60px); opacity: 0;} /* 이미지 위치 */ ._creative .s1 .imgArea .box .imgBx.n1 div{transform: translate(-680%,-222%);} ._creative .s1 .imgArea .box .imgBx.n2 div{transform: translate(-330%,-154%);} ._creative .s1 .imgArea .box .imgBx.n3 div{transform: translate(-424%,-112%);} ._creative .s1 .imgArea .box .imgBx.n4 div{transform: translate(-208%,-79%);} ._creative .s1 .imgArea .box .imgBx.n5 div{transform: translate(-421%,-75%);} ._creative .s1 .imgArea .box .imgBx.n6 div{transform: translate(-241%,11%);} ._creative .s1 .imgArea .box .imgBx.n7 div{transform: translate(-997%,-40%);} ._creative .s1 .imgArea .box .imgBx.n8 div{transform: translate(-794%,24%);} ._creative .s1 .imgArea .box .imgBx.n9 div{transform: translate(-173%,33%);} ._creative .s1 .imgArea .box .imgBx.n10 div{transform: translate(-371%,64%);} ._creative .s1 .imgArea .box .imgBx.n11 div{transform: translate(-282%,99%);} ._creative .s1 .imgArea .box .imgBx.n12 div{transform: translate(-580%,146%);} ._creative .s1 .imgArea .box .imgBx.n13 div{transform: translate(-76%,80%);} ._creative .s1 .imgArea .box .imgBx.n14 div{transform: translate(311%,-90%);} ._creative .s1 .imgArea .box .imgBx.n15 div{transform: translate(445%,-206%);} ._creative .s1 .imgArea .box .imgBx.n16 div{transform: translate(262%,-49%);} ._creative .s1 .imgArea .box .imgBx.n17 div{transform: translate(460%,-220%);} ._creative .s1 .imgArea .box .imgBx.n18 div{transform: translate(216%,-70%);} ._creative .s1 .imgArea .box .imgBx.n19 div{transform: translate(308%,-16%);} ._creative .s1 .imgArea .box .imgBx.n20 div{transform: translate(370%,7%);} ._creative .s1 .imgArea .box .imgBx.n21 div{transform: translate(400%,50%);} ._creative .s1 .imgArea .box .imgBx.n22 div{transform: translate(370%,94%);} ._creative .s1 .imgArea .box .imgBx.n23 div{transform: translate(824%,200%);} ._creative .s1 .imgArea .box .imgBx.n24 div{transform: translate(387%,151%);} ._creative .s1 .imgArea .box .imgBx.n25 div{transform: translate(461%,130%);} ._creative .s1 .imgArea .box .imgBx.n26 div{transform: translate(0%,0%);} /* 이미지 크기 */ ._creative .s1 .imgArea .box .imgBx.n1 img{width: 90em;} ._creative .s1 .imgArea .box .imgBx.n2 img{width: 110em;} ._creative .s1 .imgArea .box .imgBx.n3 img{width: 130em;} ._creative .s1 .imgArea .box .imgBx.n4 img{width: 130em;} ._creative .s1 .imgArea .box .imgBx.n5 img{width: 117em;} ._creative .s1 .imgArea .box .imgBx.n6 img{width: 163em;} ._creative .s1 .imgArea .box .imgBx.n7 img{width: 60em;} ._creative .s1 .imgArea .box .imgBx.n8 img{width: 83em;} ._creative .s1 .imgArea .box .imgBx.n9 img{width: 120em;} ._creative .s1 .imgArea .box .imgBx.n10 img{width: 140em;} ._creative .s1 .imgArea .box .imgBx.n11 img{width: 110em;} ._creative .s1 .imgArea .box .imgBx.n12 img{width: 100em;} ._creative .s1 .imgArea .box .imgBx.n13 img{width: 156em;} ._creative .s1 .imgArea .box .imgBx.n14 img{width: 173em;} ._creative .s1 .imgArea .box .imgBx.n15 img{width: 80em;} ._creative .s1 .imgArea .box .imgBx.n16 img{width: 163em;} ._creative .s1 .imgArea .box .imgBx.n17 img{width: 55em;} ._creative .s1 .imgArea .box .imgBx.n18 img{width: 100em;} ._creative .s1 .imgArea .box .imgBx.n19 img{width: 180em;} ._creative .s1 .imgArea .box .imgBx.n20 img{width: 94em;} ._creative .s1 .imgArea .box .imgBx.n21 img{width: 160em;} ._creative .s1 .imgArea .box .imgBx.n22 img{width: 86em;} ._creative .s1 .imgArea .box .imgBx.n23 img{width: 54em;} ._creative .s1 .imgArea .box .imgBx.n24 img{width: 100em;} ._creative .s1 .imgArea .box .imgBx.n25 img{width: 120em;} ._creative .s1 .imgArea .box .imgBx.n26 img{width: 200em;} /* 흐림 처리 */ ._creative .s1 .imgArea .box .imgBx.blur1{filter: blur(1px);} ._creative .s1 .imgArea .box .imgBx.blur2{filter: blur(1.5px);} ._creative .s1 .imgArea .box .imgBx.blur3{filter: blur(2px);} ._creative .s1 .imgArea .box .imgBx.blur4{filter: blur(2.5px);} @media screen and (max-width:1920px) { ._creative .s1 .cont{font-size: calc(1/1920*100vw);} } @media screen and (max-width:1600px) { ._creative .s1{margin-bottom: 180px;} } @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) {} @media screen and (max-width:820px) { ._creative .s1{margin-bottom: 100px; height: auto; min-height: 100vh; padding-top: calc(var(--headerH) + 20px);} ._creative .s1 .cont{font-size: calc(0.8/820*100vw);} } @media screen and (max-width:500px) { /* 흐림 처리 */ ._creative .s1 .imgArea .box .imgBx.blur1{filter: blur(0.5px);} ._creative .s1 .imgArea .box .imgBx.blur2{filter: blur(1px);} ._creative .s1 .imgArea .box .imgBx.blur3{filter: blur(1.5px);} ._creative .s1 .imgArea .box .imgBx.blur4{filter: blur(2px);} } @media screen and (max-width:320px) {} /* 세로가 길경우 */ @media (orientation: Portrait) and (max-width:1024px) { ._creative .s1{display: flex; align-items: center; padding-top: 0; margin-bottom: 10px;} ._creative .s1::after { content: ''; position: absolute; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 63%); pointer-events: none; height: 130%; width: 120%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10; } ._creative .s1 .imgArea::after{display: none;} ._creative .s1 .imgArea .box .imgBx.n22{display: none;} /* 이미지 위치 */ ._creative .s1 .imgArea .box .imgBx.n1 div{transform: translate(-680%,-222%);} ._creative .s1 .imgArea .box .imgBx.n2 div{transform: translate(-330%,-214%);} ._creative .s1 .imgArea .box .imgBx.n3 div{transform: translate(-364%,-52%);} ._creative .s1 .imgArea .box .imgBx.n4 div{transform: translate(-208%,-79%);} ._creative .s1 .imgArea .box .imgBx.n5 div{transform: translate(-351%,-125%);} ._creative .s1 .imgArea .box .imgBx.n6 div{transform: translate(-201%,51%);} ._creative .s1 .imgArea .box .imgBx.n7 div{transform: translate(-997%,-40%);} ._creative .s1 .imgArea .box .imgBx.n8 div{transform: translate(-794%,24%);} ._creative .s1 .imgArea .box .imgBx.n9 div{transform: translate(-173%,33%);} ._creative .s1 .imgArea .box .imgBx.n10 div{transform: translate(-371%,64%);} ._creative .s1 .imgArea .box .imgBx.n11 div{transform: translate(-282%,219%);} ._creative .s1 .imgArea .box .imgBx.n12 div{transform: translate(-580%,146%);} ._creative .s1 .imgArea .box .imgBx.n13 div{transform: translate(-76%,120%);} ._creative .s1 .imgArea .box .imgBx.n14 div{transform: translate(311%,-120%);} ._creative .s1 .imgArea .box .imgBx.n15 div{transform: translate(445%,-366%);} ._creative .s1 .imgArea .box .imgBx.n16 div{transform: translate(232%,-49%);} ._creative .s1 .imgArea .box .imgBx.n17 div{transform: translate(460%,-310%);} ._creative .s1 .imgArea .box .imgBx.n18 div{transform: translate(216%,-70%);} ._creative .s1 .imgArea .box .imgBx.n19 div{transform: translate(308%,-16%);} ._creative .s1 .imgArea .box .imgBx.n20 div{transform: translate(390%,77%);} ._creative .s1 .imgArea .box .imgBx.n21 div{transform: translate(400%,50%);} ._creative .s1 .imgArea .box .imgBx.n22 div{transform: translate(300%,334%);} ._creative .s1 .imgArea .box .imgBx.n23 div{transform: translate(824%,200%);} ._creative .s1 .imgArea .box .imgBx.n24 div{transform: translate(387%,231%);} ._creative .s1 .imgArea .box .imgBx.n25 div{transform: translate(461%,130%);} ._creative .s1 .imgArea .box .imgBx.n26 div{transform: translate(0%,0%);} } @media (orientation: Portrait) and (max-width:500px){ ._creative .s1 .cont{font-size: calc(0.7/500*100vw);} /* 이미지 위치 */ ._creative .s1 .imgArea .box .imgBx.n1 div{transform: translate(-208%,-332%);} ._creative .s1 .imgArea .box .imgBx.n2 div{transform: translate(-420%,-204%);} ._creative .s1 .imgArea .box .imgBx.n3 div{transform: translate(-364%,-52%);} ._creative .s1 .imgArea .box .imgBx.n4 div{transform: translate(-188%,-109%);} ._creative .s1 .imgArea .box .imgBx.n5 div{transform: translate(-351%,-125%);} ._creative .s1 .imgArea .box .imgBx.n6 div{transform: translate(-291%,51%);} ._creative .s1 .imgArea .box .imgBx.n7 div{transform: translate(-997%,-40%);} ._creative .s1 .imgArea .box .imgBx.n8 div{transform: translate(-794%,24%);} ._creative .s1 .imgArea .box .imgBx.n9 div{transform: translate(-163%,-37%);} ._creative .s1 .imgArea .box .imgBx.n10 div{transform: translate(-371%,64%);} ._creative .s1 .imgArea .box .imgBx.n11 div{transform: translate(-112%,129%);} ._creative .s1 .imgArea .box .imgBx.n12 div{transform: translate(-580%,146%);} ._creative .s1 .imgArea .box .imgBx.n13 div{transform: translate(-156%,50%);} ._creative .s1 .imgArea .box .imgBx.n14 div{transform: translate(311%,-120%);} ._creative .s1 .imgArea .box .imgBx.n15 div{transform: translate(285%,-316%);} ._creative .s1 .imgArea .box .imgBx.n16 div{transform: translate(122%,-49%);} ._creative .s1 .imgArea .box .imgBx.n17 div{transform: translate(220%,-310%);} ._creative .s1 .imgArea .box .imgBx.n18 div{transform: translate(96%,-290%);} ._creative .s1 .imgArea .box .imgBx.n19 div{transform: translate(308%,-16%);} ._creative .s1 .imgArea .box .imgBx.n20 div{transform: translate(270%,77%);} ._creative .s1 .imgArea .box .imgBx.n21 div{transform: translate(310%,100%);} ._creative .s1 .imgArea .box .imgBx.n22 div{transform: translate(140%,269%);} ._creative .s1 .imgArea .box .imgBx.n23 div{transform: translate(824%,200%);} ._creative .s1 .imgArea .box .imgBx.n24 div{transform: translate(387%,231%);} ._creative .s1 .imgArea .box .imgBx.n25 div{transform: translate(461%,130%);} ._creative .s1 .imgArea .box .imgBx.n26 div{transform: translate(0%,0%);} } ._creative .s2{margin-bottom: 150px; position: relative; z-index: 20;} ._creative .s2 .title{text-align: center; margin: 0 auto; margin-bottom: 300px; max-width: 90%;} ._creative .s2 .title h3{ font-size: 92px; letter-spacing: -0.02em; font-weight: 700; line-height: 1.304; margin-bottom: 60px; } ._creative .s2 .title h3 div{overflow: hidden;} ._creative .s2 .title h3 div p{} ._creative .s2 .title h3 span{color: var(--green);} ._creative .s2 .title > p{ font-size: 20px; line-height: 1.6; font-weight: 500; } ._creative .s2 .title small{ display: inline; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; } ._creative .s2 .list{ max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 70px; } ._creative .s2 .list .row{ display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; width: 100%; } ._creative .s2 .list .row:nth-child(2){z-index: 3;} ._creative .s2 .list .row:nth-child(2n){ flex-direction: row-reverse; } ._creative .s2 .list .row .txtBx{} ._creative .s2 .list .row .txtBx h4{ font-size: 48px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.375; } ._creative .s2 .list .row .txtBx .category{ display: flex; gap: 5px; margin-top: 34px; margin-bottom: 34px; } ._creative .s2 .list .row .txtBx .category p{ font-size: 20px; color: var(--green); border: 1px solid var(--green); box-sizing: border-box; padding: 9px 15px; border-radius: 100px; font-weight: 500; letter-spacing: -0.025em; } ._creative .s2 .list .row .txtBx > p{ font-size: 20px; letter-spacing: -0.025em; line-height: 1.6; color: #7c7c7c; } /* 오브젝트 */ ._creative .s2 .list .row .obj{position: absolute; filter: brightness(0.5) blur(2px); z-index: -1;} ._creative .s2 .list .row .obj > div{} ._creative .s2 .list .row .obj > div > div{animation: floating20 forwards infinite 5s;} ._creative .s2 .list .row .obj img{animation: scale90 forwards infinite 8s;} ._creative .s2 .list .row:nth-child(1) .obj{width: 237px;right: 110%;top: -10%;} ._creative .s2 .list .row:nth-child(3) .obj{width: 250px;left: 110%;top: -21%;transform: rotateY(180deg);} ._creative .s2 .list .row:nth-child(4) .obj{width: 70px;right: 115%;top: 80%;} ._creative .s2 .list .row:nth-child(4) .obj div:nth-child(1){} ._creative .s2 .list .row:nth-child(4) .obj > div > div > div{transform: rotate(25deg);} ._creative .s2 .list .row:nth-child(4) .obj div:nth-child(2){ width: calc(42 / 70 * 100%); position: absolute; right: 48%; top: -10%; } @media screen and (max-width:1800px) { ._creative .s2 .list .row:nth-child(1) .obj{right: 100%;} ._creative .s2 .list .row:nth-child(3) .obj{left: 100%;} } @media screen and (max-width:1440px) { ._creative .s2 .title h3{font-size: max(calc(92/1440*100vw),40px);} ._creative .s2 .list .row:nth-child(1) .obj{width: 180px;} ._creative .s2 .list .row:nth-child(3) .obj{width: 200px;} ._creative .s2 .list .row:nth-child(4) .obj{width: 50px;} ._creative .s2 .list .row:nth-child(1) .obj{right: 80%;} ._creative .s2 .list .row:nth-child(3) .obj{left: 80%;} ._creative .s2 .list .row:nth-child(4) .obj{right: 80%; top: 110%;} } @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { ._creative .s2 .list .row{flex-direction: column-reverse !important; gap: 40px;} ._creative .s2 .list .row .txtBx{text-align: center;} ._creative .s2 .list .row .txtBx h4{font-size: 40px;} ._creative .s2 .list .row .txtBx .category{margin: 30px 0; justify-content: center;} ._creative .s2 .list .row .txtBx .category p{font-size: 18px;} ._creative .s2 .list .row .txtBx > p{font-size: 18px;} ._creative .s2 .list .row .phone{font-size: 0.8px;} ._creative .s2 .list .row:nth-child(1) .obj{right: unset; left: 2%;} ._creative .s2 .list .row:nth-child(3) .obj{left: unset; right: 2%; top: -90px;} ._creative .s2 .list .row:nth-child(4) .obj{right: unset; left: 2%; top: 100%;} ._creative .s2 .list .row:nth-child(1) .obj{width: 120px;} ._creative .s2 .list .row:nth-child(3) .obj{width: 140px;} ._creative .s2 .list .row:nth-child(4) .obj{width: 40px;} } @media screen and (max-width:820px) { ._creative .s2{margin-bottom: 120px;} ._creative .s2 .title{margin-bottom: 120px;} ._creative .s2 .title > p{font-size: 18px;} ._creative .s2 .list{gap: 80px;} ._creative .s2 .list .row .txtBx h4{font-size: 30px;} ._creative .s2 .list .row .txtBx .category{margin: 20px 0;} ._creative .s2 .list .row .txtBx .category p{font-size: 16px; padding: 10px 12px;} ._creative .s2 .list .row .txtBx > p{font-size: 16px;} ._creative .s2 .list .row .video_in_phone{font-size: 1px;} } @media screen and (max-width:500px) { ._creative .s2 .title h3{font-size: clamp(28px,calc(40/500*100vw),40px); margin-bottom: 30px;} ._creative .s2 .title > p{font-size: 14px;} ._creative .s2 .list .row{gap: 20px;} ._creative .s2 .list .row .txtBx h4{font-size: 26px;} ._creative .s2 .list .row .txtBx .category p{font-size: 14px;} ._creative .s2 .list .row .txtBx > p{font-size: 14px; max-width: 300px; color: #fff;} ._creative .s2 .list .row .txtBx > p br{display: none;} ._creative .s2 .list .row .video_in_phone{font-size: 0.9px;} ._creative .s2 .list .row:nth-child(1) .obj{width: 80px;} ._creative .s2 .list .row:nth-child(3) .obj{width: 80px;} ._creative .s2 .list .row:nth-child(4) .obj{width: 30px;} } @media screen and (max-width:320px) { ._creative .s2 .list .row .video_in_phone{font-size: 0.8px;} }