/* 시안에 -0.04em 이 아닌것도 있음 확인 필요, 대부분 -0.04em */ main { letter-spacing: -0.04em; } /* 커서 */ ._cursor{ width: 102px; height: 102px; border-radius: 50%; background-color: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; position: fixed; z-index: 99999; transform: translate(-50%,-50%) scale(0.5); opacity: 0; transition: transform 0.5s,opacity 0.5s; pointer-events: none; } html.mo ._cursor{display: none;} ._cursor.on{ opacity: 1; transform: translate(-50%,-50%) scale(1); } ._cursor .ico{ display: flex; align-items: center; justify-content: center; } ._cursor .ico i{ margin: 0 -0.3em; animation: opacity20 forwards infinite 3s; } ._cursor .ico i.n1{} ._cursor .ico i.n2{animation-delay: 0.2s;} ._cursor .ico i.n3{animation-delay: 0.4s;} ._cursor .ico i.n4{animation-delay: 0.6s;} ._cursor p{ font-family: 'Mona Sans'; font-size: 14px; font-weight: 600; margin: 0 10px; } /* ------ intro ------ */ html{overflow: hidden;} .intro{ position: fixed; width: 100%; height: 100%; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999999; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: #242424; letter-spacing: -0.01em; font-family: 'Mona Sans'; } .intro .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #242424; z-index: 2; } .intro .top{} .intro .top .big{margin-top: -0.05em;} .intro .bottom{} .intro .bottom .small{ padding-left: calc(50/1920*100vw); box-sizing: border-box; font-size: max(calc(14/1920*100vw),12px); line-height: calc(20/14); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1.2em; margin-bottom: 1.5em; } .intro .bottom .small > div{} .intro .bottom .small > div:nth-child(1){ display: inline-flex; align-items: flex-start; width: 100%; max-width: calc(650/14*1em); flex-wrap: wrap; gap: 1.2em; justify-content: space-between; } .intro .bottom .small > div:nth-child(2){padding-right: calc(150/1920*100vw); padding-bottom: 1em;} .intro .bottom .small span{ -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; } .intro .bigBx{display: flex; white-space: nowrap; justify-content: center;} .intro .big{ font-size: calc(217/1920*100vw); font-weight: 700; display: flex; overflow: hidden; } .intro .bigBx .big:nth-child(1){margin-right: 0.25em;} /* 모션 셋팅 */ .intro .top .big p{transform: translateY(-110%);} .intro .bottom .big p{transform: translateY(110%);} /* 세로가 길경우 */ @media (orientation: Portrait){ .intro .top .big{font-size: calc(406/1920*100vw);} .intro .bigBx{flex-direction: column;} .intro .big{font-size: calc(357/1920*100vw); } } /* ------ 비디오 팝업 ------ */ .videoPopup{ position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s; } .videoPopup.on{opacity: 1; pointer-events: auto;} .videoPopup .scrollBx{ width: 100%; height: 100%; overflow: auto; } .videoPopup .flexBx{width: 100%;min-height: 100%;display: flex;align-items: center;justify-content: center;padding: 20px 0; padding-top: 10px; box-sizing: border-box;} .videoPopup .paddingBx{width: 100%;text-align: center;} .videoPopup i{ display: block; color: #fff; font-size: 30px; margin-bottom: 18px; cursor: pointer; } .videoPopup .videoBx{ width: 95%; max-width: 1200px; position: relative; margin: 0 auto; } .videoPopup .videoBx::before { content:''; display: block; padding-bottom: calc(9/16*100%); } .videoPopup iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; } /* ------ s_visual ------ */ .s_visual { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: calc(var(--vh100) * 2); transition: background-color 1s;} .s_visual.black{background-color: #353535;} .s_visual .pinBx { position: absolute; width: 100%; height: var(--vh100); display: flex; align-items: center; justify-content: center; } html.mo .s_visual .pinBx{height: calc((var(--vh100) + 60px));} html.kakaoWeb .s_visual .pinBx{height: calc((var(--vh100) + 120px));} html.safariWeb .s_visual .pinBx{height: calc((var(--vh100) + 120px));} .s_visual .bg{ transform-style: preserve-3d; perspective: 800px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .s_visual .bg > div{ position: relative; width: 100%; height: 100%; overflow: hidden; } .s_visual .bg > div > div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; backface-visibility: hidden; background-position: center center; } /* n1 */ .s_visual .wrap.n1 { position: relative; display: flex; height: var(--vh100); flex-direction: column; align-items: flex-end; justify-content: center; z-index: 3; transition: opacity 1s,transform 1s;} .s_visual .wrap.n1.hide{opacity: 0;} .s_visual .contents { display: flex; flex-direction: column; align-items: flex-end; gap: 19px; } .s_visual .contents>* { border-radius: 15px; overflow: hidden; position: relative; } .s_visual .contents .swiperBx { width: 640px; } .s_visual .contents .swiperBx .swiper { } .s_visual .contents .swiperBx .swiper-wrapper { } .s_visual .contents .swiperBx .swiper-slide { } .s_visual .contents .swiperBx .swiper-slide a { } .s_visual .contents .swiperBx .swiper-slide a ._imgBx { border-radius: 15px; overflow: hidden; } .s_visual .contents .swiperBx .swiper-slide a ._imgBx::before { padding-bottom: calc(425/750*100%); } .s_visual .contents .swiperBx .swiper-slide a ._imgBx img { } .s_visual .contents .swiperBx .bottom { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; height: 47px; display: flex; align-items: center; } .s_visual .contents .swiperBx .bottom .titleBx { width: 100%; height: 100%; font-size: 14px; background-color: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: flex-start; position: relative; } .s_visual .contents .swiperBx .bottom .titleBx .title { opacity: 0; pointer-events: none; transition: opacity 0.5s; position: absolute; left: 20px; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; max-width: calc(100% - 40px); white-space: nowrap;} .s_visual .contents .swiperBx .bottom .titleBx .title.on { opacity: 1; pointer-events: auto; } .s_visual .contents .swiperBx .bottom .titleBx .title p { display: inline-block; } .s_visual .contents .swiperBx .bottom .titleBx .title.on.over p { animation: overTxt forwards infinite 20s linear; } .s_visual .contents .swiperBx .bottom .titleBx .title br{display: none;} @keyframes overTxt { 0% { transform: translateX(0%); } 5% { transform: translateX(0%) } 100% { transform: translateX(-100%); } } .s_visual .contents .swiperBx .bottom .titleBx .title p { } .s_visual .contents .swiperBx .bottom .control { min-width: 120px; background-color: #000; display: flex; align-items: center; justify-content: center; color: #fff; gap: 10px; height: 100%; font-weight: 500; } .s_visual .contents .swiperBx .bottom .control .num { display: flex; align-items: center; justify-content: center; font-size: 14px; } .s_visual .contents .swiperBx .bottom .control .num>* { min-width: 1.2em; text-align: center; } .s_visual .contents .swiperBx .bottom .control .num .now { } .s_visual .contents .swiperBx .bottom .control .num .all { } .s_visual .contents .swiperBx .bottom .control .btn { cursor: pointer; } .s_visual .contents .swiperBx .bottom .control .btn i { } .s_visual .contents .swiperBx .bottom .control .btn i:nth-child(1) { } .s_visual .contents .swiperBx .bottom .control .btn i:nth-child(2) { display: none; } .s_visual .contents .swiperBx .bottom .control .btn.on i:nth-child(1) { display: none; } .s_visual .contents .swiperBx .bottom .control .btn.on i:nth-child(2) { display: block; } .s_visual .contents .videoBx { width: 100%; cursor: pointer; position: relative;} .s_visual .contents .videoBx .play_btn{ font-size: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 70em; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; background-color: rgba(0,0,0,0.5); } .s_visual .contents .videoBx .play_btn i{ color: #fff; font-size: 50em; line-height: 0.8; } .s_visual .contents .videoBx ._imgBx { } .s_visual .contents .videoBx ._imgBx::before { padding-bottom: calc(9/16*100%); } .s_visual .contents .videoBx ._imgBx img { } .s_visual .wrap.n1 .txtBx { width: 100%; color: #fff; position: absolute; left: 0; bottom: 30px; pointer-events: none; padding-bottom: 10px;} .s_visual .wrap.n1 .txtBx h1 { font-size: 20px; font-weight: 500; line-height: 1.3; margin-bottom: 13px; } .s_visual .wrap.n1 .txtBx h1 br{display: none;} .s_visual .wrap.n1 .txtBx h2 { font-family: 'Mona Sans'; font-size: 130px; font-weight: 500; letter-spacing: -0.04em; line-height: calc(140 / 130); } .s_visual .wrap.n1 .txtBx h2 div { overflow: hidden; } /* 모션 셋팅 */ .s_visual .bg>div>div>div { transform: scale(1.5); filter: blur(10px); } .s_visual .wrap.n1 .txtBx h1 div { opacity: 0; transform: rotateX(180deg) translateX(5em) translateY(-2em) scale(0.5); } .s_visual .wrap.n1 .txtBx h2 p { transform: translateY(110%); } .s_visual .contents>* { transform: translateX(120px); opacity: 0; } @media screen and (max-width:1800px){ .s_visual .wrap.n1 .txtBx h2 {font-size: max(min(calc(100/1920*100vw),calc(100/920*100vh),100px),50px);} .s_visual .contents .swiperBx{width: min(calc(720/1800*100vw),calc(720/800*var(--vh100)));} } @media screen and (max-width:1600px) { .s_visual .contents{gap: 10px;} .s_visual .contents>*{border-radius: 6px;} .s_visual .contents .swiperBx .swiper-slide a ._imgBx{border-radius: 6px;} .s_visual .contents .swiperBx .bottom .titleBx .title{max-width: calc(100% - 20px); left: 10px;} .s_visual .wrap.n1 .txtBx h1{font-size: 18px; } } @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) {} @media screen and (max-width:820px) {} @media screen and (max-width:500px) {} @media screen and (max-width:320px) {} /* 세로가 길경우 */ @media (orientation: Portrait){ .s_visual .wrap.n1{flex-direction: column-reverse; justify-content: flex-start; padding-bottom: 5vw; box-sizing: border-box; gap: 40px;} .s_visual .wrap.n1 .txtBx{position: unset;} .s_visual .contents{flex-direction: row; width: 100%;} .s_visual .contents .swiperBx{width: auto; flex: 1;} .s_visual .contents .swiperBx .swiper-slide a ._imgBx::before{padding-bottom: calc(9/16*100%);} .s_visual .contents .videoBx{width: auto; flex: 1;} .s_visual .wrap.n1 .txtBx h1{font-size: max(calc(40/1600*100vw),12px); line-height: 1.5; margin-bottom: 20px;} .s_visual .wrap.n1 .txtBx h1 br{display: block;} .s_visual .wrap.n1 .txtBx h2{flex-wrap: wrap; font-size: calc(180/1600*100vw); } } @media (orientation: Portrait) and (max-width:1600px) {} @media (orientation: Portrait) and (max-width:1440px) {} @media (orientation: Portrait) and (max-width:1280px) {} @media (orientation: Portrait) and (max-width:1024px) { .s_visual .contents .videoBx .play_btn{font-size: 0.8px; } } @media (orientation: Portrait) and (max-width:820px) {} @media (orientation: Portrait) and (max-width:500px) { /* .s_visual .wrap.n1{justify-content: center; padding-bottom: 0; padding-top: calc(var(--vh) * 20);} */ .s_visual .wrap.n1{padding-bottom: 50px;} .s_visual .wrap.n1{gap: 30px;} .s_visual .wrap.n1 .txtBx h1{font-weight: 300;} .s_visual .contents{flex-direction: column;} .s_visual .contents .swiperBx{width: 100%; flex: unset;} .s_visual .contents .swiperBx .bottom{height: 36px;} .s_visual .contents .swiperBx .bottom .titleBx .title{font-size: 12px; } .s_visual .contents .swiperBx .bottom .control{min-width: 90px;} .s_visual .contents .videoBx{flex: unset; width: 100%;} .s_visual .contents .videoBx .play_btn{font-size: 0.6px; } } @media (orientation: Portrait) and (max-width:320px) {} /* n2 */ .s_visual .wrap.n2 { height: 100%; position: relative; display: flex; justify-content: center; box-sizing: border-box; } .s_visual .wrap.n2 .inner { font-size: 500px; /* border: 1px solid tomato; */ height: 0.78em; display: flex; flex-direction: column; justify-content: flex-end; position: absolute; bottom: 50%; transform: translateY(50%); padding-bottom: 0; transition-property: font-size, bottom, transform, padding-bottom; transition-duration: 0.8s; } .s_visual .wrap.n2 .inner.on { font-size: 303px; padding-bottom: 80px; bottom: 0%; transform: translateY(0%); } .s_visual .wrap.n2 .txtBx { color: #242424; opacity: 0; transform: translateY(40px); transition: opacity 0.8s, transform 0.8s; position: relative; } .s_visual .wrap.n2 .inner.on .txtBx {opacity: 1; transform: translateY(0); transition-delay: 0.8s;} .s_visual .wrap.n2 .txtBx.n1 { text-align: right; } .s_visual .wrap.n2 .txtBx.n2 { margin-right: auto; } .s_visual .wrap.n2 .txtBx.n1 em { font-family: 'Mona Sans'; display: block; font-size: 20px; font-weight: 700; margin-bottom: 26px; } .s_visual .wrap.n2 .txtBx.n1 div{ font-size: 16px; font-weight: 500; line-height: calc(24/16); } .s_visual .wrap.n2 .txtBx.n2 { margin-bottom: 20px; margin-top: 50px; font-family: 'Mona Sans'; line-height: calc(25/20); font-size: 20px; font-weight: 500; } .s_visual .wrap.n2 .txtBx.n2 div { } .s_visual .wrap.n2 h3 { font-family: 'Mona Sans'; font-weight: 700; display: flex; justify-content: center; color: #f1f1f1; line-height: 0.78; box-sizing: border-box; /* border: 1px solid dodgerblue; */ } .s_visual .wrap.n2 h3 div { display: flex; } .s_visual .wrap.n2 h3 div p { } .s_visual .wrap.n2 h3 div p:last-child { width: 0.725em; } @media screen and (max-width:1800px) { .s_visual .wrap.n2 .inner{font-size: calc(500/1800*100vw); } .s_visual .wrap.n2 .inner.on{font-size: calc(303/1800*100vw);} } @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) {} @media screen and (max-width:820px) { .s_visual .wrap.n2 .txtBx.n2{font-size: 18px; } .s_visual .wrap.n2 .txtBx.n1 em{font-size: 18px; margin-bottom: 16px;} .s_visual .wrap.n2 .txtBx.n1 div{font-size: 16px; } } @media screen and (max-width:500px) { .s_visual .wrap.n2 .txtBx.n2{font-size: 14px; font-weight: 400;} .s_visual .wrap.n2 .txtBx.n1 em{font-size: 14px; margin-bottom: 12px; font-weight: 500;} .s_visual .wrap.n2 .txtBx.n1 div{font-size: 12px; font-weight: 400;} } @media screen and (max-width:320px) {} /* 세로가 길경우 */ @media (orientation: Portrait){ .s_visual .wrap.n2{z-index: 2;} .s_visual .wrap.n2 .inner.on{padding-bottom: 0; bottom: 50%; transform: translateY(50%);} .s_visual .wrap.n2 .txtBx{color: #fff;} .s_visual .wrap.n2 .txtBx.n1{position: absolute; top: 100%; right: 0; margin-top: 20px;} .s_visual .wrap.n2 .txtBx.n2{margin-top: 0;} } /* ------ s_cards ------ */ .s_cards{ width: 100%; position: relative; padding-top: 150px; padding-bottom: 300px; background-color: #fff; z-index: 1; margin-top: calc(var(--vh100) * -1); } .s_cards .wrap dl dt{ font-size: 20px; letter-spacing: -0.04em; font-weight: 500; font-family: 'Mona Sans'; color: #ff4800; margin-bottom: 20px; } .s_cards .wrap dl dd{ font-size: 44px; letter-spacing: -0.04em; font-weight: 600; line-height: calc(64 / 44); overflow: hidden; } .s_cards .wrap .cardbx{ width: 100%; margin-top: 130px; } .s_cards .wrap .cardbx > ul{ width: 100%; display: flex; justify-content: space-between; } .s_cards .wrap .cardbx > ul li{ width: calc(360 / 1820 * 100%); } .s_cards .wrap .cardbx > ul li > div{ border-radius: 20px; overflow: hidden; transition-duration: 0.2s; } .s_cards .wrap .cardbx > ul li img{ width: 100%; height: 100%; object-fit: cover; } .s_cards .wrap .cardbx > ul li:nth-of-type(1){ position: relative; z-index: 1; } .s_cards .wrap .cardbx > ul li:nth-of-type(2){ position: relative; z-index: 0; } .s_cards .wrap .cardbx > ul li:nth-of-type(3){ position: relative; z-index: 1; } .s_cards .wrap .cardbx > ul li:nth-of-type(4){ position: relative; z-index: 0; } .s_cards .wrap .cardbx > ul li:nth-of-type(5){ position: relative; z-index: 1; } .s_cards .wrap .cardbx > ul li:nth-of-type(1) > div{ } .s_cards .wrap .cardbx > ul li:nth-of-type(2) > div{ transform: translate(-20%, 15%) rotate(-7deg); } .s_cards .wrap .cardbx > ul li:nth-of-type(3) > div{ transform: translate(-23%, -10%) rotate(5deg); } .s_cards .wrap .cardbx > ul li:nth-of-type(4) > div{ transform: translate(5%, 10%); } .s_cards .wrap .cardbx > ul li:nth-of-type(5) > div{ transform: translate(-8%, 15%) rotate(-7deg); } @media screen and (min-width: 821px){ .s_cards .wrap .cardbx > ul li:hover{ z-index: 10; } .s_cards .wrap .cardbx > ul li:nth-of-type(2):hover > div{ transform: translate(-20%, 15%) rotate(0deg); } .s_cards .wrap .cardbx > ul li:nth-of-type(3):hover > div{ transform: translate(-23%, -10%) rotate(0deg); } .s_cards .wrap .cardbx > ul li:nth-of-type(4):hover > div{ transform: translate(5%, 10%); } .s_cards .wrap .cardbx > ul li:nth-of-type(5):hover > div{ transform: translate(-8%, 15%) rotate(0deg); } } @media screen and (max-width: 1280px){ .s_cards{ min-height: var(--vh100); display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 200px; box-sizing: border-box; } .s_cards .wrap dl dt{ font-size: 18px; } .s_cards .wrap dl dd{ font-size: 35px; } .s_cards .wrap .cardbx{ margin-top: 90px; } .s_cards .wrap .cardbx > ul li > div{ border-radius: 16px; } } @media screen and (max-width: 820px){ .s_cards{ min-height: unset; padding-top: 100px; padding-bottom: 150px; } .s_cards .wrap dl dt{ font-size: 16px; } .s_cards .wrap dl dd{ font-size: 3.8458vw; } .s_cards .wrap .cardbx{ margin-top: 70px; } .s_cards .wrap .cardbx > ul li{ width: calc(370 / 1820 * 100%); } .s_cards .wrap .cardbx > ul li > div{ border-radius: 12px; } } @media screen and (max-width: 500px){ .s_cards{ padding-top: 70px; padding-bottom: 100px; } .s_cards .wrap dl dt{ font-size: 14px; margin-bottom: 10px; } .s_cards .wrap dl dd{ font-size: 5.8458vw; } .s_cards .wrap .cardbx{ margin-top: 50px; } .s_cards .wrap .cardbx > ul li > div{ border-radius: 6px; } } /* ------ s_product ------ */ .s_product { width: 100%; height: var(--vh100); overflow: hidden; } /* transition: background-color 1s; */ html.mo .s_product{height: calc((var(--vh100) + 60px));} html.kakaoWeb .s_product{height: calc((var(--vh100) + 120px));} html.safariWeb .s_product{height: calc((var(--vh100) + 120px));} .s_product{background-color: #f5f4f2;} /* .s_product[data-bg="0"]{background-color: #f5f4f2;} */ /* .s_product[data-bg="1"]{background-color: #d9e2e2;} */ /* .s_product[data-bg="2"]{background-color: #c5c7cc;} */ /* .s_product[data-bg="3"]{background-color: #d3d6da;} */ /* .s_product[data-bg="4"]{background-color: #d3d5da;} */ /* .s_product[data-bg="5"]{background-color: #cfc6c6;} */ /* .s_product[data-bg="6"]{background-color: #dddfe2;} */ /* .s_product[data-bg="7"]{background-color: #ebebeb;} */ /* .s_product[data-bg="8"]{background-color: #e7e6e2;} */ .s_product .wrap { height: 100%; display: flex; align-items: center; } .s_product .wrap .imgArea { width: 100%; position: relative; height: 100%; display: flex; align-items: center; z-index: 0;} .s_product .wrap .imgArea .box { position: absolute; bottom: 0; color: #000; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: calc(140/920*var(--vh100)); padding-bottom: calc(var(--vh) * 20); box-sizing: border-box; pointer-events: none; } .s_product .wrap .imgArea .box.on { pointer-events: auto; } .s_product .wrap .imgArea .box .logo { margin-bottom: 30px; } .s_product .wrap .imgArea .box .logo img { max-height: 50px; filter: brightness(0); max-width: 160px;} .s_product .wrap .imgArea .box .item { font-size: 1px; top: 50%; position: absolute; left: 620em; z-index: -1; display: flex; align-items: center; justify-content: center; } .s_product .wrap .imgArea .box .item .imgBx {width: 100%; filter: drop-shadow(0 0 20px rgba(0,0,0,0.05));} .s_product .wrap .imgArea .box .item .imgBx img {width: 100%;} /* .s_product .wrap .imgArea::before{ content:''; display: block; position: absolute; width: 472px; height: 703px; border: 1px solid tomato; left: 708px; top: 206px; z-index: 5; } */ /* 제품 이미지 위치 */ .s_product .wrap .imgArea .box:nth-child(1) .item{ transform: translateY(-29%); left: 730em; width: 490em; } .s_product .wrap .imgArea .box:nth-child(2) .item{ transform: translateY(-27%); left: 712em; width: 540em; } .s_product .wrap .imgArea .box:nth-child(3) .item{ transform: translateY(-27%); left: 720em; width: 521em; } .s_product .wrap .imgArea .box:nth-child(4) .item{ transform: translateY(-46%); left: 783em; width: 403em; } .s_product .wrap .imgArea .box:nth-child(5) .item{ transform: translateY(-47%); left: 846em; width: 380em; } .s_product .wrap .imgArea .box:nth-child(6) .item{ transform: translateY(-45%); left: 869em; width: 370em; } .s_product .wrap .imgArea .box:nth-child(7) .item{ transform: translateY(-43%); left: 847em; width: 410em; } .s_product .wrap .imgArea .box:nth-child(8) .item{ transform: translateY(-44%); left: 896em; width: 340em; } .s_product .wrap .imgArea .box:nth-child(9) .item{ transform: translateY(-32%); left: 768em; width: 420em; } /* .s_product .wrap .imgArea .box.on .logo {pointer-events: none;} .s_product .wrap .imgArea .box.on>p {pointer-events: none;} .s_product .wrap .imgArea .box.on h3 p {pointer-events: none;} .s_product .wrap .imgArea .box.on a {pointer-events: none;} .s_product .wrap .imgArea .box .item{z-index: 3;} */ /* 해시태그? 위치 .s_product .wrap .imgArea .box .item .tag { position: absolute; } .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n1 {left: -10%;top: -3%;} .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n2 {right: -6%;top: -6%;} .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n3 {right: -9%;top: 56%;} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n1 {left: -2%;top:0%;} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n2 {right: -10%;top: 13%;} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n3 {left: 0%; top:0%;} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n1 {left: -22%;top: -2%;} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n2 {right: -16%;top: 11%;} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n3 {right: -13%;top: 47%;} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n1 {left: -22%;top: 45%;} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n2 {right: -11%;top: 50%;} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n3 {left: 70%;top: 70%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n1 {left: -20%;top: 35%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n2 {right: -9%;top: 40%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n3 {right: 13%;top: 73%;} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n1 {left: -12%;top: 28%;} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n2 {right: 2%;top: 31%;} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n3 {right: 0%;top: 69%;} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n1 {left: -22%;top: 22%;} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n2 {right: -20%;top: 30%;} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n3 {right: -3%;top: 10%;} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n1 {left: -20%;top: 40%;} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n2 {right: -20%;top: 46%;} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n3 {right: 0%;top: 70%;} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n1 {left: -22%;top: 9%;} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n2 {right: -35%;top: 17%;} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n3 {right: -20%;top: 47%;} */ .s_product .wrap .imgArea .box .item .tag div { font-size: max(20em,12px); color: var(--orange); animation: floating20 forwards infinite 3s; padding: 9px 27px; border-radius: 100px; background-color: rgba(255, 255, 255, 0.2); white-space: nowrap; } .s_product .wrap .imgArea .box .item .tag.n2 div { animation-delay: 0.3s; } .s_product .wrap .imgArea .box .item .tag.n3 div { animation-delay: 0.6s; } .s_product .wrap .imgArea .box>p { font-size: 24px; line-height: 1.6; letter-spacing: -0.04em; color: #444444; } .s_product .wrap .imgArea .box h3 { font-size: 180px; font-family: 'Mona Sans'; font-weight: 500; text-transform: uppercase; overflow: hidden; transform: translateX(-2%); font-size: 160px; } .s_product .wrap .imgArea .box h3.small p{font-size: 0.8em; } .s_product .wrap .imgArea .box .tagBx{ gap: 10px; flex-wrap: wrap; margin-top: 20px; display: flex; } .s_product .wrap .imgArea .box .tagBx .tag{ align-items: center; justify-content: center; border-radius: 100px; padding: 12px 20px; font-size: 16px; letter-spacing: -0.04em; font-weight: 500; color: #fff; background-color: var(--orange); } .s_product .wrap .imgArea .box .tagBx .tag div{} .s_product .wrap .imgArea .box a { font-size: 20px; font-family: 'Mona Sans'; font-weight: 600; display: flex; align-items: center; justify-content: space-between; width: calc(187/20*1em); box-sizing: border-box; height: calc(40/20*1em); padding: 0 0 calc(18/20*1em) 0; position: relative; overflow: hidden; margin-top: 70px;} .s_product .wrap .imgArea .box a::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; transition-property: height, background-color; transition-duration: 0.4s; } .s_product .wrap .imgArea .box a:hover { color: #fff; border-radius: 6px; padding: 0 10px; } .s_product .wrap .imgArea .box a:hover::after { height: 100%; background-color: var(--orange); } .s_product .wrap .imgArea .box a p { position: relative; z-index: 2; transform: translateY(-12%); line-height: 0.8;} .s_product .wrap .imgArea .box a i { position: relative; z-index: 2; } html.mo .s_product .wrap .imgArea .box a { color: #fff; border-radius: 6px; padding: 0 10px; } html.mo .s_product .wrap .imgArea .box a::after { height: 100%; background-color: #353535; } /* 모션 시작 */ .s_product .wrap .imgArea .box .logo { transition: transform 0.4s, opacity 0.4s; opacity: 0; transform: translateY(40px); } .s_product .wrap .imgArea .box>p { transition: transform 0.4s, opacity 0.4s; opacity: 0; transform: translateY(40px); } .s_product .wrap .imgArea .box h3 p { transition: transform 0.4s; transform: translateY(110%); } .s_product .wrap .imgArea .box .tagBx{transition: opacity 0.4s,transform 0.4s; opacity: 0; transform: translateY(40px);} .s_product .wrap .imgArea .box a { transition: transform 0.4s, opacity 0.4s, color 0.5s, border-radius 0.5s, padding 0.5s; opacity: 0; transform: translateY(40px); } .s_product .wrap .imgArea .box .item .imgBx { transition: transform .6s, opacity .6s; opacity: 0; transform: translateY(120px); } .s_product .wrap .imgArea .box .item .tag { transition: opacity 0.4s, transform 0.4s; opacity: 0; transform: translateY(40px); } .s_product .wrap .imgArea .box.on .logo { opacity: 1; transform: translateY(0); } .s_product .wrap .imgArea .box.on>p { opacity: 1; transform: translateY(0); transition-delay: 0.15s; margin-bottom: 8px; color: #444444;} .s_product .wrap .imgArea .box.on h3 p { transform: translateY(0); transition-delay: 0.3s; } .s_product .wrap .imgArea .box.on .tagBx { transform: translateY(0); transition-delay: 0.45s; opacity: 1; } .s_product .wrap .imgArea .box.on a { opacity: 1; transform: translateY(0); transition: transform 0.4s 0.4s, opacity 0.4s 0.4s, color 0.5s, border-radius 0.3s, padding 0.3s; } .s_product .wrap .imgArea .box.on .item .imgBx { opacity: 1; transform: translateY(0);} .s_product .wrap .imgArea .box.on .item .tag { opacity: 1; transform: translateY(0); } .s_product .wrap .imgArea .box .item .tag.n1 { transition-delay: 0.5s; } .s_product .wrap .imgArea .box .item .tag.n2 { transition-delay: 0.7s; } .s_product .wrap .imgArea .box .item .tag.n3 { transition-delay: 0.9s; } .s_product.none .wrap .imgArea .box.on .logo { opacity: 0; transform: translateY(40px); } .s_product.none .wrap .imgArea .box.on > p { opacity: 0; transform: translateY(40px); } .s_product.none .wrap .imgArea .box.on h3 p { transform: translateY(110%); } .s_product.none .wrap .imgArea .box.on .tagBx{opacity: 0; transform: translateY(40px);} .s_product.none .wrap .imgArea .box.on a { opacity: 0; transform: translateY(40px); } .s_product.none .wrap .imgArea .box.on .item .imgBx { opacity: 0; transform: translateY(120px); } .s_product.none .wrap .imgArea .box.on .item .tag { opacity: 0; transform: translateY(40px); } /* 모션 종료 */ .s_product.none .wrap .swiperArea { opacity: 0; transform: translateX(100px);} .s_product .wrap .swiperArea{opacity: 1; transform: translateX(0); transition: opacity 0.6s,transform 0.6s;} .s_product .wrap .swiperArea .swiper { height: var(--vh100); } .s_product .wrap .swiperArea .swiper-wrapper { } .s_product .wrap .swiperArea .swiper-slide { height: 205px; width: 205px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .s_product .wrap .swiperArea .swiper-slide::before, .s_product .wrap .swiperArea .swiper-slide::after{ content:''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 15px; } .s_product .wrap .swiperArea .swiper-slide::before { background-color: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s; z-index: 2; } .s_product .wrap .swiperArea .swiper-slide::after{background-color: #fff; z-index: -1;} html.pc .s_product .wrap .swiperArea .swiper-slide:hover::before { opacity: 0.6; } .s_product .wrap .swiperArea .swiper-slide .imgBx { position: absolute; width: 90%; height: 90%; } .s_product .wrap .swiperArea .swiper-slide .imgBx img { object-fit: contain; object-position: center top; width: 100%; height: 100%;} .s_product .wrap .swiperArea .swiper-slide .logo { position: absolute; z-index: 3; max-width: 80%; opacity: 0; transform: translateY(40px); transition: opacity 0.5s, transform 0.5s; } html.pc .s_product .wrap .swiperArea .swiper-slide:hover .logo { opacity: 1; transform: translateY(0); } .s_product .wrap .swiperArea .swiper-slide .logo img { max-height: 50px; object-fit: contain; filter: brightness(0) invert(1);} .s_product .wrap .swiperArea .swiper-slide-active::before { opacity: 0.6; } .s_product .wrap .swiperArea .swiper-slide-active .logo { opacity: 1; transform: translateY(0); } @media screen and (max-width:1800px) { .s_product .wrap .imgArea .box h3{font-size: calc(200/1800*100vw);} .s_product .wrap .imgArea .box .item{font-size: max(calc(1/1800*100vw),0.5px);} } @media screen and (max-width:1600px) { .s_product .wrap .imgArea .box>p{font-size: 20px;} } @media screen and (max-width:1440px) { .s_product{height: auto; margin-top: 0; padding: 150px 0; padding-bottom: 60px;} .s_product .wrap{flex-direction: column;} .s_product .wrap .imgArea{height: auto; transition: height 0.8s; margin-bottom: 80px;} .s_product .wrap .imgArea .box{padding-bottom: 0; justify-content: center; height: auto; width: 100%;} .s_product .wrap .imgArea .box>p{margin-bottom: 10px;} .s_product .wrap .imgArea .box .item{left: unset !important;} .s_product .wrap .swiperArea{width: 100%;} .s_product .wrap .swiperArea .swiper{height: auto; overflow: visible;} .s_product .wrap .swiperArea .swiper-slide{height: 180px; width: 180px;} /* .s_product .wrap .imgArea::before{ content:''; display: block; position: absolute; width: 376px; height: 703px; border: 1px solid tomato; left: 827px; top: -11px; z-index: 5;} */ .s_product .wrap .imgArea .box:nth-child(1) .item{right: 5%;width: 712em;top: 93%;} .s_product .wrap .imgArea .box:nth-child(2) .item{right: 5%;} .s_product .wrap .imgArea .box:nth-child(3) .item{right: 10%;} .s_product .wrap .imgArea .box:nth-child(4) .item{right: 12%;} .s_product .wrap .imgArea .box:nth-child(5) .item{right: 12%;} .s_product .wrap .imgArea .box:nth-child(6) .item{right: 12%;} .s_product .wrap .imgArea .box:nth-child(7) .item{right: 13%;} .s_product .wrap .imgArea .box:nth-child(8) .item{right: 12%;} .s_product .wrap .imgArea .box:nth-child(9) .item{right: 12%;} .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(1) .item .tag.n3 {top: 14%;} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(2) .item .tag.n3 {} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(3) .item .tag.n3 {} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(4) .item .tag.n3 {top: 67%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n1 {top: 17%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n2 {top: 29%;} .s_product .wrap .imgArea .box:nth-child(5) .item .tag.n3 {top: 63%;} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(6) .item .tag.n3 {top: 58%;} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(7) .item .tag.n3 {} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n1 {top: 32%;} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n2 {top: 25%;} .s_product .wrap .imgArea .box:nth-child(8) .item .tag.n3 {top: 40%;} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n1 {} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n2 {} .s_product .wrap .imgArea .box:nth-child(9) .item .tag.n3 {top: 0%;} } @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { .s_product .wrap .imgArea .box .logo img{max-height: 30px; max-width: 100px;} .s_product .wrap .imgArea .box>p{font-size: 14px; } .s_product .wrap .imgArea .box h3{font-size: calc(100/1024*100vw);} .s_product .wrap .imgArea .box a{font-size: 18px; width: 6em; border-radius: 4px !important; margin-top: 30px; padding: 0 0 calc(15/20*1em) 0;} .s_product .wrap .swiperArea .swiper-slide{height: 140px; width: 140px;} .s_product .wrap .swiperArea .swiper-slide::before, .s_product .wrap .swiperArea .swiper-slide::after{border-radius: 6px;} } @media screen and (max-width:820px) { .s_product{padding: 0;} .s_product .wrap{height: 100%; height: var(--vh100); justify-content: center;} .s_product .wrap .imgArea{height: 100% !important; margin-bottom: 0;} .s_product .wrap .imgArea .box{height: 100%;} .s_product .wrap .imgArea .box h3{transform: unset;} .s_product .wrap .imgArea .box .tagBx{display: flex;} .s_product .wrap .imgArea .box .tagBx .tag{ padding: 10px 20px; font-size: 14px; } .s_product .wrap .imgArea .box.on .item .tag{display: none;} .s_product .wrap .imgArea .box:nth-child(1) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(2) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(3) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(4) .item{transform: translateY(-8%) !important;max-height: calc(var(--vh) * 120);height: calc(var(--vh) * 120);} .s_product .wrap .imgArea .box:nth-child(5) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(6) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(7) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(8) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box:nth-child(9) .item{transform: translateY(0%);} .s_product .wrap .imgArea .box .item{top: unset !important; left: 0 !important; right: 0 !important; margin: 0 auto; max-height: calc(var(--vh) * 90); height: var(--vh100); width: 80% !important; text-align: center; transform: translateY(5%) !important;} .s_product .wrap .imgArea .box .item .imgBx{margin: 0 auto; filter: opacity(0.5) brightness(0.8); height: 100%; max-width: 100%; max-height: 100%;} .s_product .wrap .imgArea .box .item .imgBx img{height: 100%; object-fit: contain;} .s_product .wrap .imgArea .box a p{font-size: 14px; } .s_product .wrap .swiperArea{position: absolute; bottom: 60px;} } @media screen and (max-width:500px) { .s_product .wrap .swiperArea .swiper-slide{height: 100px; width: 100px;} .s_product .wrap .imgArea .box .tagBx{ gap: 5px; } .s_product .wrap .imgArea .box .tagBx .tag{ padding: 7px 10px; font-size: 12px; } } @media screen and (max-width:320px) {} /* ------ s_growth ------ */ .s_growth{ background-color: #fff; overflow: hidden; position: relative; z-index: 5; margin-top: var(--vh100); padding: 200px 0; box-sizing: border-box; } .s_growth dl dt{ font-size: 20px; letter-spacing: -0.04em; color: var(--orange); font-family: 'Mona Sans'; font-weight: 500; overflow: hidden; } .s_growth dl dd{ font-size: 80px; letter-spacing: -0.04em; margin-top: 20px; font-weight: 600; } .s_growth .counterbx{ margin-top: 80px; } .s_growth .counterbx li{ border-bottom: 1px solid #000; box-sizing: border-box; padding: 45px 0; display: flex; justify-content: space-between; align-items: flex-start; } .s_growth .counterbx li > p{ font-size: 20px; letter-spacing: -0.04em; line-height: calc(32 / 20); font-weight: 500; } .s_growth .counterbx .count{ display: flex; font-family: 'Mona Sans'; justify-content: flex-end; color: var(--orange); font-size: 150px; letter-spacing: -0.04em; font-weight: 500; } .s_growth .counterbx .count .number{ display: flex; align-items: center; position: relative; } .s_growth .counterbx .count .number .digit-con{ overflow: hidden; height: 1em; vertical-align: top; display: inline-block; margin-left: -3px; } .s_growth .counterbx .count .number .digit-con > span{ display: block; position: relative; letter-spacing: -0.05em; text-align: right; padding-right: 3px; } .s_growth .counterbx .count > p{ margin-left: 0.1em; } @media screen and (max-width: 1440px){ .s_growth{ margin-top: 0; } } @media screen and (max-width: 1280px){ .s_growth{ padding: 120px 0; } .s_growth .wrap dl dt{ font-size: 18px; } .s_growth .wrap dl dd{ font-size: 35px; margin-top: 15px; } .s_growth .counterbx{ margin-top: 40px; } .s_growth .counterbx li{ padding: 25px 0; } .s_growth .counterbx li > p{ font-size: 16px; } .s_growth .counterbx .count{ font-size: 10vw; } } @media screen and (max-width: 820px){ .s_growth{ padding: 100px 0; } .s_growth .wrap dl dt{ font-size: 16px; } .s_growth .wrap dl dd{ font-size: 3.8458vw; } .s_growth .counterbx{ margin-top: 30px; } .s_growth .counterbx li{ padding: 20px 0; } .s_growth .counterbx li > p{ font-size: 14px; } .s_growth .counterbx .count{ font-size: 8vw; } } @media screen and (max-width: 500px){ .s_growth{ padding: 70px 0; } .s_growth .wrap dl dt{ font-size: 14px; } .s_growth .wrap dl dd{ font-size: 5.8458vw; margin-top: 10px; } .s_growth .counterbx{ margin-top: 20px; } .s_growth .counterbx li{ padding: 15px 0; } .s_growth .counterbx .count{ font-size: 30px; } } /* ------ s_box ------ */ .s_box{background-color: #fff; overflow: hidden; margin-top: calc(-1 * var(--vh100));} .s_box .wrap{ min-height: var(--vh100); display: flex; align-items: center; justify-content: center; position: relative; } html.mo .s_box .wrap{height: calc((var(--vh100) + 60px));} html.kakaoWeb .s_box .wrap{height: calc((var(--vh100) + 120px));} html.safariWeb .s_box .wrap{height: calc((var(--vh100) + 120px));} .s_box .wrap .imgArea{ font-size: 1px; position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 700em; } .s_box .wrap .imgArea::before { width: 100%; content:''; display: block; padding-bottom: calc(var(--vh100)/100vw*100%); } .s_box .wrap .imgArea > div{ position: absolute; } /* .s_box .wrap .imgArea > div:nth-child(1){transform: translate(-480em,-240em); left: 0; top: 0;} .s_box .wrap .imgArea > div:nth-child(2){transform: translate(-650em,230em); left: 0; bottom: 0;} .s_box .wrap .imgArea > div:nth-child(3){transform: translate(540em,-250em); right: 0; top: 0;} .s_box .wrap .imgArea > div:nth-child(4){transform: translate(650em,190em); right: 0; bottom: 0;} */ .s_box .wrap .imgArea > div:nth-child(1){transform: translate(-430em,-210em);left: 0;top: 0;} .s_box .wrap .imgArea > div:nth-child(2){transform: translate(-370em,170em);left: 0;bottom: 0;} .s_box .wrap .imgArea > div:nth-child(3){transform: translate(370em,-170em);right: 0;top: 0;} .s_box .wrap .imgArea > div:nth-child(4){transform: translate(480em,190em);right: 0;bottom: 0;} .s_box .wrap .imgArea .txt{ display: flex; align-items: flex-start; gap: 20em; } .s_box .wrap .imgArea .txt ._imgBx{} .s_box .wrap .imgArea .txt ._imgBx img{} .s_box .wrap .imgArea .txt p{ padding: calc(20/16*1em) 0; box-sizing: border-box; font-size: max(16em,12px); font-family: 'Mona Sans'; font-weight: 500; line-height: calc(24/16); color: #242424; white-space: nowrap; } .s_box .wrap .imgArea ._imgBx{border-radius: 15px; overflow: hidden;} .s_box .wrap .imgArea ._imgBx.n1{width: 300em;} .s_box .wrap .imgArea ._imgBx.n2{width: 212em;} .s_box .wrap .imgArea ._imgBx.n3{width: 212em;} .s_box .wrap .imgArea ._imgBx.n4{width: 257em;} .s_box .wrap .imgArea ._imgBx.n1::before{padding-bottom: calc(310/300*100%);} .s_box .wrap .imgArea ._imgBx.n2::before{padding-bottom: calc(226/212*100%);} .s_box .wrap .imgArea ._imgBx.n3::before{padding-bottom: calc(226/212*100%);} .s_box .wrap .imgArea ._imgBx.n4::before{padding-bottom: calc(344/257*100%);} .s_box .wrap .txtBx{ text-align: center; } .s_box .wrap .txtBx small{ font-family: 'Mona Sans'; display: block; margin-bottom: 26px; font-size: 30px; font-weight: 700; color: #242424; } .s_box .wrap .txtBx h3{ font-size: 55px; font-weight: 600; line-height: calc(80/55); } .s_box .wrap .txtBx h3 span{ -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; } @media screen and (max-width:1800px) { .s_box .wrap .imgArea{font-size: max(min(calc(1/1800*100vw),calc(1/720*100vh)),0.4px); } } @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) { .s_box{margin-top: 0;} .s_box .wrap .txtBx small{font-size: max(min(calc(26/1440*100vw),calc(26/700*100vh)),14px); } .s_box .wrap .txtBx h3{font-size: min(calc(55/1440*100vw),calc(55/700*100vh)); } } @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) {} @media screen and (max-width:820px) {} @media screen and (max-width:500px) { .s_box .wrap .imgArea ._imgBx{border-radius: 10px;} .s_box .wrap .imgArea .txt p{padding-top: 6px;} } @media screen and (max-width:320px) {} /* 세로가 길경우 */ @media (orientation: Portrait) { .s_box .wrap .txtBx h3{font-size: calc(25/500*100vw); } .s_box .wrap .txtBx small{font-size: calc(26/500*100vw); } .s_box .wrap .imgArea{box-sizing: border-box; width: 100%; height: 400em;} .s_box .wrap .imgArea{font-size: calc(0.4/500*100vw); } .s_box .wrap .imgArea .txt{align-items: center;} .s_box .wrap .imgArea ._imgBx.n1{width: 360em;} .s_box .wrap .imgArea ._imgBx.n2{width: 300em;} .s_box .wrap .imgArea ._imgBx.n3{width: 300em;} .s_box .wrap .imgArea ._imgBx.n4{width: 320em;} .s_box .wrap .imgArea > div:nth-child(1){transform: translate(0%,-160%);left: 0;top: 0;} .s_box .wrap .imgArea > div:nth-child(2){transform: translate(-23%,140%);left: 0;bottom: 0;} .s_box .wrap .imgArea > div:nth-child(3){transform: translate(44%,-90%);right: 0;top: 0;} .s_box .wrap .imgArea > div:nth-child(4){transform: translate(0%,170%);right: 0;bottom: 0;} } @media (orientation: Portrait) and (max-width:1440px) {} @media (orientation: Portrait) and (max-width:1280px) {} @media (orientation: Portrait) and (max-width:1024px) {} @media (orientation: Portrait) and (max-width:820px) {} @media (orientation: Portrait) and (max-width:500px) {} @media (orientation: Portrait) and (max-width:320px) {} /* ------ s_graph ------ */ .s_graph{background-color: #f5f5f5; padding: 150px 0; margin-top: calc(var(--vh100) * 2);} .s_graph .wrap{} .s_graph .wrap small{ display: block; overflow: hidden; font-size: 24px; font-weight: 500; margin-bottom: 12px; } .s_graph .wrap h2{ font-family: 'Mona Sans'; overflow: hidden; color: #242424; font-size: 80px; font-weight: 700; } .s_graph .wrap h2 p{} .s_graph .cont{ max-width: 1920px; width: 100%; margin: 0 auto; display: flex; align-items: flex-end; gap: 3px; color: #fff; padding: 0 3px; box-sizing: border-box; height:632px; } .s_graph .cont .box{ flex: 1; position: relative; z-index: 1; padding: 70px 50px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .s_graph .cont .box:nth-child(1){height: 78%;} .s_graph .cont .box:nth-child(2){height: 86%;} .s_graph .cont .box:nth-child(3){height: 100%;} .s_graph .cont .box .bg{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; border-radius: 15px; } .s_graph .cont .box:nth-child(1) .bg{background-color: #c5c5c5;} .s_graph .cont .box:nth-child(2) .bg{background-color: #949494;} .s_graph .cont .box:nth-child(3) .bg{background-color: var(--orange);} .s_graph .cont .box small{ display: block; margin-bottom: 24px; font-size: 20px; font-weight: 500; line-height: 1.4; } .s_graph .cont .box small span{display: inline-block;} .s_graph .cont .box .count{ display: flex; align-items: flex-end; } .s_graph .cont .box .count .odometer{ font-family: 'Mona Sans'; font-size: 200px; font-weight: 500; } /* 옆에랑 위치 안맞는거 맞추기 */ .s_graph .cont .box .count *{line-height: 1;} .s_graph .cont .box .count .odometer{ height: 0.8em; margin-bottom: -0.115em; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* 카운팅 시간 */ .odometer * {transition: transform 2.5s !important;} .s_graph .cont .box .count p{font-size: 40px; font-weight: 500; transform: translateY(10px); line-height: 0.9;} .s_graph .cont .box .count p.big{font-family: 'Mona Sans'; font-size: 150px; font-weight: 500; line-height: 0.75; margin-left: -0.05em;} /* 숫자 카운팅 끝나면 한번 덜컹거리는거 이걸로 잡음 .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {position: absolute; left: 0%; transform: unset;} .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value{text-align: left;} */ @media screen and (max-width:1600px) { .s_graph .wrap{margin-bottom: 40px;} .s_graph .cont .box{padding: calc(70/1600*100vw) calc(50/1600*100vw);} .s_graph .cont .box .count .odometer{font-size: calc(200/1600*100vw); } .s_graph .cont .box .count p{font-size: max(calc(40/1600*100vw),24px); } .s_graph .cont .box .count p.big{font-size: calc(150/1600*100vw); } .s_graph .cont {height: max(calc(632/1600*100vw),360px);} } @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) { .s_graph{padding: 100px 0;} .s_graph .wrap small{font-size: 20px; } .s_graph .wrap h2{font-size: calc(80/1280*100vw); } } @media screen and (max-width:1024px) {} @media screen and (max-width:820px) { .s_graph .cont .box small{font-size: 14px; } .s_graph .cont .box .count p{transform: translateY(4px); margin-left: 2px;} } @media screen and (max-width:500px) { .s_graph{padding: 80px 0;} .s_graph .wrap small{font-size: 11px; margin-bottom: 12px;} .s_graph .cont .box small{font-size: 12px; } .s_graph .cont .box small span{display: inline;} .s_graph .cont{height: 300px;} .s_graph .cont .box .bg{border-radius: 8px;} } @media screen and (max-width:320px) { .s_graph .cont .box small{font-size: 10px; } } /* ------ s_horizon ------ */ .s_horizon{ background-color: #fff; position: relative; z-index: 4; } .s_horizon .wrap{ height: var(--vh100); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .s_horizon .wrap h2{ font-size: 20px; font-weight: 500; line-height: calc(30/20); text-align: right; margin-left: auto; margin-bottom: 2em; } .s_horizon .horizon{ display: flex; font-size: min(calc(1/920*var(--vh100)),1px); gap: 60em; } .s_horizon .cont{ display: flex; gap: 30em; } .s_horizon .cont > .txtBx{ display: flex; flex-direction: column; justify-content: space-between; } .s_horizon .cont > .txtBx .top{ font-family: 'Mona Sans'; font-size: 60em; font-weight: 500; color: #e3e3e3; display: flex; flex-direction: column; gap: 4px; text-transform: uppercase; transition: color 0.8s; } .s_horizon .cont > .txtBx .top div{overflow: hidden;} .s_horizon .cont > .txtBx .top p{} .s_horizon .cont > .txtBx .bottom{ font-size: max(20em,14px); font-weight: 600; line-height: calc(30/20); } .s_horizon .cont ._imgBx{ width: 480em; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; box-sizing: border-box; position: relative; } .s_horizon .cont ._imgBx::before { padding-bottom: calc(674/510*100%); } .s_horizon .cont ._imgBx img{} .s_horizon .cont ._imgBx .txtBx{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 60em 32em; box-sizing: border-box; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; } .s_horizon .cont ._imgBx .txtBx small{ font-size: max(20em,14px); line-height: 1.3; display: block; margin-bottom: 4px; } .s_horizon .cont ._imgBx .txtBx h3{ font-family: 'Mona Sans'; font-size: max(25em,16px); font-weight: 600; line-height: 1.3; text-transform: uppercase; } .s_horizon .cont ._imgBx .txtBx .bottom{display: none;} /* 모션 */ .s_horizon .cont{transition: opacity .4s,transform .4s; opacity: 0; transform: translateY(80px);} .s_horizon .cont > .txtBx .top p{transition: color 0.4s,transform .4s; transform: translateY(110%);} .s_horizon .cont ._imgBx img{transition: transform 1.2s,filter 1.2s; transform: scale(1.5); filter: blur(10px);} .s_horizon .cont.on{opacity: 1; transform: translateY(0);} .s_horizon .cont.on > .txtBx .top div p{transform: translateY(0); transition: color 0.4s 1s,transform .4s;} .s_horizon .cont:nth-child(1).on > .txtBx .top div:nth-child(1) p{color: #000; } .s_horizon .cont:nth-child(2).on > .txtBx .top div:nth-child(2) p{color: #000; } .s_horizon .cont:nth-child(3).on > .txtBx .top div:nth-child(3) p{color: #000; } .s_horizon .cont.on ._imgBx img{transform: scale(1); filter: blur(0); transition-delay: 0.2s;} @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1100px) { .s_horizon .horizon{font-size: calc(1/1100*100vw); } } @media screen and (max-width:1024px) {} @media screen and (max-width:820px) { .s_horizon .wrap h2{font-size: 18px; } .s_horizon .horizon{font-size: calc(0.7/820*100vw); } } @media screen and (max-width:500px) { .s_horizon {padding: 80px 0;} .s_horizon .wrap{height: auto;} .s_horizon .wrap h2{font-size: 16px; } .s_horizon .horizon{flex-direction: column; gap: 5vw; width: 100%; font-size: max(calc(1.2/500*100vw),1px);} .s_horizon .cont > .txtBx{display: none;} .s_horizon .cont ._imgBx{width: 100%;} .s_horizon .cont ._imgBx img{filter: blur(10px) brightness(0.5);} .s_horizon .cont.on ._imgBx img{filter: blur(0) brightness(0.5);} .s_horizon .cont ._imgBx .txtBx{padding: 30px 20px;} .s_horizon .cont ._imgBx .txtBx .bottom{ display: block; font-size: max(14em,12px); line-height: 1.3; margin-top: 10px; } } @media screen and (max-width:320px) { .s_horizon .horizon{font-size: 0.8px; } } /* 세로가 길경우 */ @media (orientation: Portrait){} @media (orientation: Portrait) and (max-width:1600px) {} @media (orientation: Portrait) and (max-width:1440px) {} @media (orientation: Portrait) and (max-width:1280px) {} @media (orientation: Portrait) and (max-width:1024px) {} @media (orientation: Portrait) and (max-width:820px) {} @media (orientation: Portrait) and (max-width:500px) {} @media (orientation: Portrait) and (max-width:320px) {} /* ------ s_news ------ */ .s_news { padding: 150px 0; } .s_news .wrap { } .s_news .flx{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 35px; } .s_news h2 { font-family: 'Mona Sans'; overflow: hidden; color: #242424; font-size: 80px; font-weight: 500; } .s_news h2 p { } .s_news .flx .control{ display: flex; justify-content: flex-end; align-items: center; } .s_news .flx .control > div{ padding: 5px; transition-duration: 0.2s; font-size: 30px; cursor: pointer; } .s_news .swiper { width: 100%; overflow: visible; margin: 0; } .s_news .swiper-wrapper { align-items: stretch; } .s_news .swiper-slide { cursor: none; height: auto;} .s_news .swiper-slide *{cursor: none;} .s_news .swiper-slide a { padding: 20px; box-sizing: border-box; border-radius: 15px; background-color: #f5f4f2; box-sizing: border-box; display: flex; flex-direction: column; gap: 90px; justify-content: space-between; height: 100%; } .s_news .swiper-slide a .top { display: flex; justify-content: space-between; } .s_news .swiper-slide a .top p { } .s_news .swiper-slide a .top p:nth-child(1) { font-family: 'Mona Sans'; font-weight: 600; text-transform: uppercase; } .s_news .swiper-slide a .top p:nth-child(2) { font-weight: 500; } .s_news .swiper-slide a .bottom { } .s_news .swiper-slide a .bottom .txtBx { margin-bottom: 22px; } .s_news .swiper-slide a .bottom .txtBx h3 { font-size: 20px; line-height: 1.3; } .s_news .swiper-slide a .bottom .txtBx p { font-family: 'Mona Sans'; color: #787878; margin-top: 12px; } .s_news .swiper-slide a .bottom ._imgBx { } .s_news .swiper-slide a .bottom ._imgBx::before { content: ''; display: block; padding-bottom: calc(9/16*100%); } .s_news .swiper-slide a .bottom ._imgBx img { } /* hover */ .s_news .swiper-slide a { transition-property: background-color, border-color; transition-duration: 0.2s; } .s_news .swiper-slide a:hover { background-color: #d0ccc5; } .s_news .swiper-slide a .bottom .txtBx p { transition-property: color; transition-duration: 0.2s; } .s_news .swiper-slide a .top p:nth-child(2) { transition-property: color; transition-duration: 0.2s; } .s_news .more { font-size: 20px; font-family: 'Mona Sans'; font-weight: 600; display: flex; align-items: center; justify-content: space-between; width: calc(187/20*1em); box-sizing: border-box; height: calc(40/20*1em); padding: 0 0 calc(18/20*1em) 0; position: relative; overflow: hidden; transition: transform 0.4s, opacity 0.4s, color 0.5s, border-radius 0.5s, padding 0.5s; margin: 0 auto; margin-top: 65px; } .s_news .more::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; transition-property: height, background-color; transition-duration: 0.4s; } .s_news .more:hover { color: #fff; border-radius: 6px; padding: 0 10px; } .s_news .more:hover::after { height: 100%; background-color: var(--orange); } .s_news .more p { position: relative; z-index: 2; transform: translateY(-12%); line-height: 0.8;} .s_news .more i { position: relative; z-index: 2; } @media screen and (min-width: 821px){ .s_news .flx .control > div:hover{ color: var(--orange); } } @media screen and (max-width:1600px) { .s_news .flx{margin-bottom: 20px;} } @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) { .s_news{padding: 100px 0;} .s_news h2{font-size: calc(80/1280*100vw); } } @media screen and (max-width:1024px) { .s_news .more{ font-size: 18px; width: 6em; border-radius: 4px !important; margin-top: 30px; padding: 0 0 calc(15/20*1em) 0; } .s_news .flx .control > div{ font-size: 22px; margin-bottom: -7px; } } @media screen and (max-width:820px) { .s_news .swiper-slide a{gap: 50px;} .s_news .more p{ font-size: 14px; } } @media screen and (max-width:500px) { .s_news{padding: 80px 0;} .s_news .swiper{width: 100%;} .s_news .swiper-slide a{padding: 20px 14px; border-radius: 10px;} .s_news .swiper-slide a .top{font-size: 14px; } .s_news .swiper-slide a .bottom .txtBx h3{font-size: 14px; } .s_news .swiper-slide a .bottom .txtBx p{font-size: 14px; } } @media screen and (max-width:320px) {}