._hidden_title{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================= intro ========================= */ html{overflow: hidden;} ._intro{position: fixed; z-index: 99999; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;} ._intro .bg{position: absolute; right: 0; top: 0; width: 100vw; min-width: 100vw; height: 100%; } ._intro .bg div{width: 100%; height: 100%; background-size: cover; background-position: center center;} ._intro .inner{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;} ._intro .inner .logo{display: flex; align-items: center; justify-content: center;} ._intro .inner .logo svg{width: min(700px,calc(700/1920*100vw));} ._intro .inner .logo svg * {fill: transparent;} @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { ._intro .inner .logo svg{width: min(600px,calc(800/1024*100vw));} } @media screen and (max-width:820px) {} @media screen and (max-width:500px) {} @media screen and (max-width:320px) {} /* ========================= s_visual 팝업 ========================= */ ._visual_popup{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.8); cursor: pointer; backdrop-filter: blur(10px); overflow: auto; pointer-events: none; opacity: 0; transition: opacity 0.5s; } ._visual_popup.on{opacity: 1; pointer-events: auto;} ._visual_popup::-webkit-scrollbar {width: 8px;} ._visual_popup::-webkit-scrollbar-thumb {background-color: #2f3542; border-radius: 10px;} ._visual_popup .inner{ width: 100%; max-width: min(95%,700px); position: relative; padding: 60px 0; box-sizing: border-box; margin: auto; } ._visual_popup .inner .cancel{pointer-events: none; color: #fff; font-size: 30px; text-align: right; margin-bottom: 10px; padding-right: 4px;} ._visual_popup .inner .swiperBx{position: relative; display: flex; align-items: center; justify-content: center;} ._visual_popup .inner .swiper-wrapper{align-items: stretch;} ._visual_popup .inner .swiper{width: 100%;} ._visual_popup .inner .swiper-slide{ background-color: #fff; border-radius: 20px; padding: 20px; padding-bottom: 40px; box-sizing: border-box; cursor: auto; height: auto; } ._visual_popup .inner .swiperBx .control{} ._visual_popup .inner .swiperBx .control > div{ position: absolute; color: #fff; font-size: 50px; border-radius: 4px; background-color: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; } ._visual_popup .inner .swiperBx .control > div:hover{background-color: #fff; color: #000;} ._visual_popup .inner .swiperBx .control > div::before { content:''; display: block; position: absolute; width: 100%; height: 100%; padding: 20px; } ._visual_popup .inner .swiperBx .control > div.prev{right: 100%; margin-right: 40px;} ._visual_popup .inner .swiperBx .control > div.next{left: 100%; margin-left: 40px;} ._visual_popup .swiper-pagination{font-size: 18px;color: #fff;bottom: unset;bottom: 100%;text-align: left;margin-bottom: 10px;padding-left: 10px;box-sizing: border-box; width: auto;} ._visual_popup .inner .imgBx{ width: 100%; position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } ._visual_popup .inner .imgBx{ width: 100%; position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } ._visual_popup .inner .imgBx::before { content:''; display: block; padding-bottom: calc(324/518*100%); } ._visual_popup .inner .imgBx img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} ._visual_popup .inner .txtBx{} ._visual_popup .inner .txtBx h3{ font-size: 24px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } ._visual_popup .inner .txtBx h3 br{display: none;} ._visual_popup .inner .txtBx .circleBx{ display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin-bottom: 20px; } ._visual_popup .inner .txtBx .circleBx div{ font-size: 14px; font-weight: 500; background-color: #444; color: #fff; border-radius: 4px; padding: calc(6/14*1em) calc(18/14*1em); box-sizing: border-box; } ._visual_popup .inner .txtBx .txt{ font-size: 18px; font-weight: 500; line-height: 1.3; margin-bottom: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } ._visual_popup .inner .txtBx .txt br{display: none;} ._visual_popup .inner .txtBx .btn{} ._visual_popup .inner .txtBx .btn a{ display: inline-flex; border-radius: 100px; background-color: #000; color: #fff; padding: calc(12/14*1em) calc(30/14*1em); font-size: 14px; font-weight: 500; transition: background-color 0.1s; gap: 1em; } html.pc ._visual_popup .inner .txtBx .btn a:hover{background-color: var(--blue);} ._visual_popup .inner .txtBx .btn a p{} ._visual_popup .inner .txtBx .btn a i{} @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { ._visual_popup .inner .txtBx h3{font-size: 20px; } ._visual_popup .inner .swiperBx{flex-direction: column;} ._visual_popup .inner .swiperBx .swiper{width: 100%;} ._visual_popup .inner .swiperBx .control{display: flex; gap: 100px; padding-top: 10px;} ._visual_popup .inner .swiperBx .control > div{font-size: 34px; position: relative; margin: 0 !important; left: unset !important; right: unset !important;} ._visual_popup .inner .swiperBx .control > div::before{padding: 10px;} } @media screen and (max-width:820px) {} @media screen and (max-width:500px) { ._visual_popup .inner{border-radius: 10px;} ._visual_popup .inner .swiper{border-radius: 10px;} ._visual_popup .inner .swiper-slide{border-radius: 10px;} ._visual_popup .inner .txtBx h3{font-size: 18px; } ._visual_popup .inner .txtBx .circleBx div{font-size: 12px; } ._visual_popup .inner .txtBx .txt{font-size: 14px; } ._visual_popup .inner .txtBx .btn a{font-size: 12px; } ._visual_popup .inner .cancel{font-size: 18px; } } @media screen and (max-width:320px) {} /* ========================= s_visual ========================= */ .s_visual{ filter: grayscale(0) brightness(1); width: 100%; height: calc(var(--vh) * 100); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; /* background-color: #003CDC; */ overflow: hidden; background-size: cover; background-position: center center; background-image: url('/asset/img/main/intro_bg.jpg'); } .s_visual .cont{ font-size: calc(1/1920*100vw); width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; } /* 카드들 */ .s_visual .cardArea { position: absolute; width: 90%; height: 90%; display: flex; align-items: center; justify-content: center; z-index: 2;} .s_visual .cardArea li { width: 140em; position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;} .s_visual .cardArea li .border{position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); border: 1px dashed #b1d65f; left: -5px; top: -5px; transition: transform 0.5s,opacity 0.5s; transform: scale(0); opacity: 0; pointer-events: none;} .s_visual .cardArea li .border div{width: 5%; background-color: #b1d65f; position: absolute; margin: -2.5%;} .s_visual .cardArea li .border div::before {content:''; display: block; padding-bottom: 100%;} .s_visual .cardArea li .border div:nth-child(1){left: 0; top: 0;} .s_visual .cardArea li .border div:nth-child(2){right: 0; top: 0;} .s_visual .cardArea li .border div:nth-child(3){left: 0; bottom: 0;} .s_visual .cardArea li .border div:nth-child(4){right: 0; bottom: 0;} .s_visual .cardArea li .imgBx {width: 100%; flex-shrink: 0;} .s_visual .cardArea li .imgBx .img{width: 100%;} .s_visual .cardArea li .imgBx .img .bx{ position: relative; width: 100%; transform: scale(0); opacity: 0; display: flex; align-items: center; justify-content: center; } .s_visual .cardArea li .imgBx .img .bx::before { content:''; display: block; padding-bottom: calc(10/16*100%); } .s_visual .cardArea li .imgBx .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px; } .s_visual .cardArea{pointer-events: none; transform: translateY(10px);} .s_visual .cardArea.on{pointer-events: auto;} /* 애니메이션 */ @keyframes zindex { 0%{z-index: 1;} 50%{z-index: 3;} 100%{z-index: 1;} } .s_visual .cardArea li{animation: zindex forwards infinite var(--duration) var(--delay);} .s_visual .cardArea li .imgBx{animation: scale130 forwards infinite var(--duration) var(--delay);} .s_visual .cardArea li .imgBx .img{animation: floating20 forwards infinite var(--duration) var(--delay);} .s_visual .cardArea li._border{z-index: 50 !important;} .s_visual .cardArea li._border .imgBx .img .bx .border{transform: scale(1); opacity: 1;} /* 호버시 */ .s_visual .cardArea li{transition: filter 0.5s,transform 1s var(--delay2),width 0.5s var(--delay2);} .s_visual .cardArea li.hover{z-index: 60 !important;} .s_visual .cardArea li.gray{filter: brightness(0.7) blur(4em);} .s_visual .cardArea li .imgBx .img .bx img{transition: transform 0.5s;} .s_visual .cardArea li.hover .imgBx .img .bx img{transform: scale(1.5);} .s_visual .cardArea li.hover .imgBx .img .bx .border{transform: scale(1.5); opacity: 1;} /* 말풍선 */ .s_visual .cardArea li .info{ position: absolute; font-size: max(16em,10px); display: flex; align-items: center; animation: scale90 forwards infinite 3s; pointer-events: none; } .s_visual .cardArea li .info div{display: flex; align-items: center; justify-content: center; position: absolute; gap: 0.5em; opacity: 0; transform: scale(0); pointer-events: none; transition: opacity 0.5s,transform 0.5s;} .s_visual .cardArea li._border .info div{opacity: 1; pointer-events: auto; transform: scale(1);} .s_visual .cardArea li.hover .info div{opacity: 1; pointer-events: auto; transform: scale(1);} .s_visual .cardArea li .info div p{ background-color: var(--blue); color: #fff; border-radius: 100px; padding: calc(8/15*1em) calc(16/15*1em); box-sizing: border-box; letter-spacing: -0.04em; white-space: nowrap; } .s_visual .cardArea li .info div::before, .s_visual .cardArea li .info div::after{ content:''; display: block; width: calc(10/15*1em); height: calc(10/15*1em); border-radius: 50%; background-color: var(--blue); } .s_visual .cardArea li:nth-child(n+21) .info{justify-content: flex-end;} .s_visual .cardArea li:nth-child(-n+20) .info div::after {display: none;} .s_visual .cardArea li:nth-child(n+21) .info div::before {display: none;} /* .s_visual .cardArea li:nth-child(odd) .info div p::before{content:'Click to explore'; display: block;} .s_visual .cardArea li:nth-child(even) .info div p::before{content:'클릭해서 솔루션 더 알아보기'; display: block;} */ /* .s_visual .cardArea li.n1 {transform: translate(-42vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n2 {transform: translate(-42vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n3 {transform: translate(-42vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n4 {transform: translate(-42vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n5 {transform: translate(-42vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n6 {transform: translate(-30vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n7 {transform: translate(-30vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n8 {transform: translate(-31.5vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n9 {transform: translate(-31.5vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n10 {transform: translate(-30vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n11 {transform: translate(-18vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n12 {transform: translate(-18vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n13 {transform: translate(-22vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n14 {transform: translate(-21vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n15 {transform: translate(-18vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n16 {transform: translate(-6vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n17 {transform: translate(-6vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n18 {transform: translate(-10.5vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n19 {transform: translate(-6vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n20 {transform: translate(0,calc(var(--vh) * 21));} .s_visual .cardArea li.n21 {transform: translate(6vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n22 {transform: translate(6vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n23 {transform: translate(10.5vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n24 {transform: translate(6vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n25 {transform: translate(18vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n26 {transform: translate(18vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n27 {transform: translate(22vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n28 {transform: translate(21vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n29 {transform: translate(18vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n30 {transform: translate(30vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n31 {transform: translate(30vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n32 {transform: translate(31.5vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n33 {transform: translate(31.5vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n34 {transform: translate(30vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n35 {transform: translate(42vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n36 {transform: translate(42vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n37 {transform: translate(42vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n38 {transform: translate(42vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n39 {transform: translate(42vw,calc(var(--vh) * 35));} */ .s_visual .cardArea li.n1 {transform: translate(-42vw,calc(var(--vh) * -33));} .s_visual .cardArea li.n2 {transform: translate(-41vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n3 {transform: translate(-42vw,calc(var(--vh) * -2));} .s_visual .cardArea li.n4 {transform: translate(-43vw,calc(var(--vh) * 17));} .s_visual .cardArea li.n5 {transform: translate(-42vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n6 {transform: translate(-30vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n7 {transform: translate(-30vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n8 {transform: translate(-31.5vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n9 {transform: translate(-32.5vw,calc(var(--vh) * 19));} .s_visual .cardArea li.n10 {transform: translate(-30vw,calc(var(--vh) * 35));} .s_visual .cardArea li.n11 {transform: translate(-19vw,calc(var(--vh) * -37));} .s_visual .cardArea li.n12 {transform: translate(-18vw,calc(var(--vh) * -22));} .s_visual .cardArea li.n13 {transform: translate(-22vw,calc(var(--vh) * 3));} .s_visual .cardArea li.n14 {transform: translate(-21vw,calc(var(--vh) * 19));} .s_visual .cardArea li.n15 {transform: translate(-18vw,calc(var(--vh) * 38));} .s_visual .cardArea li.n16 {transform: translate(-6vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n17 {transform: translate(-6vw,calc(var(--vh) * -20));} .s_visual .cardArea li.n18 {transform: translate(-10.5vw,calc(var(--vh) * 25));} .s_visual .cardArea li.n19 {transform: translate(-6vw,calc(var(--vh) * 39));} .s_visual .cardArea li.n20 {transform: translate(0,calc(var(--vh) * 27));} .s_visual .cardArea li.n21 {transform: translate(6vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n22 {transform: translate(6vw,calc(var(--vh) * -22));} .s_visual .cardArea li.n23 {transform: translate(13.5vw,calc(var(--vh) * 25));} .s_visual .cardArea li.n24 {transform: translate(6vw,calc(var(--vh) * 38));} .s_visual .cardArea li.n25 {transform: translate(18vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n26 {transform: translate(18vw,calc(var(--vh) * -21));} .s_visual .cardArea li.n27 {transform: translate(22vw,calc(var(--vh) * 3));} .s_visual .cardArea li.n28 {transform: translate(21vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n29 {transform: translate(20vw,calc(var(--vh) * 39));} .s_visual .cardArea li.n30 {transform: translate(30vw,calc(var(--vh) * -36));} .s_visual .cardArea li.n31 {transform: translate(30vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n32 {transform: translate(32.5vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n33 {transform: translate(31.5vw,calc(var(--vh) * 21));} .s_visual .cardArea li.n34 {transform: translate(32vw,calc(var(--vh) * 39));} .s_visual .cardArea li.n35 {transform: translate(42vw,calc(var(--vh) * -34));} .s_visual .cardArea li.n36 {transform: translate(42vw,calc(var(--vh) * -18));} .s_visual .cardArea li.n37 {transform: translate(42vw,calc(var(--vh) * 0));} .s_visual .cardArea li.n38 {transform: translate(42vw,calc(var(--vh) * 14));} .s_visual .cardArea li.n39 {transform: translate(42vw,calc(var(--vh) * 28));} /* 가운데 텍스트 */ .s_visual .txtArea{ letter-spacing: -0.04em; text-align: center; position: absolute; } .s_visual .txtArea .logo{overflow: hidden; display: flex; align-items: stretch; justify-content: center; gap: 20em;} .s_visual .txtArea .logo svg{width: 500em;} .s_visual .txtArea .logo svg *{fill: #000;} .s_visual .txtArea .logo p{font-size: 50em; font-weight: 600;} .s_visual .txtArea .txt{ font-size: 34em; letter-spacing: -0.04em; line-height: 1.5; font-weight: 600; padding-top: 1.2em; } .s_visual .txtArea .txt > div{overflow: hidden;} .s_visual .txtArea .mid{font-size: 60em; font-size: 40em; font-weight: 300; margin: 0.6em 0; line-height: 1.3;} .s_visual .txtArea .mid .row{overflow: hidden; white-space: nowrap;} .s_visual .txtArea .mid .row:nth-child(2) > div{ display: flex; align-items: center; justify-content: center; gap: 0.2em; } .s_visual .txtArea .mid .swiper{font-weight: 600; width: calc(260/60*1em); margin: unset;} .s_visual .txtArea .mid .swiper-wrapper{} .s_visual .txtArea .mid .swiper-slide{text-align: right;} .s_visual .txtArea .bottom{ display: block; font-size: max(18em,14px); font-weight: 300; line-height: 1.5; } .s_visual .txtArea .bottom .hidden{overflow: hidden;} .s_visual .txtArea .bottom .bold{font-weight: 600;} /* 아래 글자 + 스크롤 아이콘 */ .s_visual .bottomArea{ position: absolute; bottom: 20px; letter-spacing: -0.04em; font-size: 14px; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; padding: 0 2.5vw; box-sizing: border-box; } .s_visual .bottomArea > div{} .s_visual .bottomArea .left{ font-family: "Inter", sans-serif; color: #878787; display: flex; align-items: center; justify-content: flex-start; gap: 0.5em; } .s_visual .bottomArea .left .ico{width: calc(32/14*1em); height: calc(32/14*1em); animation: rotate forwards infinite 3s; background-image: url(/asset/img/main/s_visual_ico.png); background-size: cover;} .s_visual .bottomArea .left p{} .s_visual .bottomArea .right{} .s_visual .bottomArea .right p{ font-size: 14px; text-align: center; margin-bottom: 10px; letter-spacing: -0.025em; font-weight: 500; } .s_visual .bottomArea .right .circle{ width: calc(59/14*1em); height: calc(59/14*1em); background-color: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .s_visual .bottomArea .right .bar{ height: calc(26/14*1em); width: 3px; background-color: rgba(255,255,255,0.5); border-radius: 10px; } .s_visual .bottomArea .right .white{background-color: #fff; width: 100%; height: 100%; animation: bar forwards infinite 4s;} @keyframes bar { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* 모션 셋팅 */ header{opacity: 0;} .s_visual .bottomArea{opacity: 0;} .s_visual .txtArea .logo{opacity: 0;} .s_visual .txtArea .txt > div p{transform: translateY(120%);} .s_visual .txtArea .mid .row > *{transform: translateY(120%);} .s_visual .txtArea .bottom p{transform: translateY(120%);} @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) {} @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { .s_visual{position: unset;} .s_visual .bottomArea{font-size: 12px; } .s_visual .bottomArea .right{font-size: 0.8em; } } @media screen and (max-width:820px) {} @media screen and (max-width:500px) { .s_visual .cardArea li .info{font-size: 8px; animation: unset; justify-content: center !important; top: 50%; align-items: flex-start; margin-top: 10px;} .s_visual .cardArea li .info div{width: 10em; text-align: center; line-height: 1.3;} .s_visual .cardArea li .info div p{white-space: unset; font-weight: 200; } .s_visual .cardArea li .info div::before{position: absolute; bottom: 100%; margin-bottom: 4px; display: block !important;} .s_visual .cardArea li .info div::after{display: none !important;} .s_visual .cardArea{transform: translateY(5px);} .s_visual .cardArea li .imgBx{animation: scale110 forwards infinite var(--duration) var(--delay);} .s_visual .cardArea li .imgBx .img{animation: floating10 forwards infinite var(--duration) var(--delay);} } @media screen and (max-width:320px) {} /* 세로가 길경우 */ @media (orientation: Portrait){ .s_visual .txtArea{font-size: calc(0.7/500*100vw); } .s_visual .cardArea{font-size: calc(0.45/500*100vw); } .s_visual .cardArea li.n1 {transform: translate(-33vw,-24vw);} .s_visual .cardArea li.n2 {transform: translate(-11vw,-23vw);} .s_visual .cardArea li.n3 {transform: translate(10vw,-25vw);} .s_visual .cardArea li.n4 {transform: translate(31vw,-23vw);} .s_visual .cardArea li.n5 {transform: translate(-29vw,calc(-17vw - var(--vh) * 9));} .s_visual .cardArea li.n6 {transform: translate(-10vw,calc(-18vw - var(--vh) * 9));} .s_visual .cardArea li.n7 {transform: translate(13vw,calc(-16vw - var(--vh) * 9));} .s_visual .cardArea li.n8 {transform: translate(33vw,calc(-17vw - var(--vh) * 9));} .s_visual .cardArea li.n9 {transform: translate(-34vw,calc(-12vw - var(--vh) * 18));} .s_visual .cardArea li.n10 {transform: translate(-11vw,calc(-11vw - var(--vh) * 18));} .s_visual .cardArea li.n11 {transform: translate(9vw,calc(-13vw - var(--vh) * 18));} .s_visual .cardArea li.n12 {transform: translate(32vw,calc(-12vw - var(--vh) * 18));} .s_visual .cardArea li.n13 {transform: translate(-31vw,calc(-6vw - var(--vh) * 27));} .s_visual .cardArea li.n14 {transform: translate(-8vw,calc(-7vw - var(--vh) * 27));} .s_visual .cardArea li.n15 {transform: translate(11vw,calc(-5vw - var(--vh) * 27));} .s_visual .cardArea li.n16 {transform: translate(33vw,calc(-6vw - var(--vh) * 27));} .s_visual .cardArea li.n17 {transform: translate(-32vw,calc(var(--vh) * -36));} .s_visual .cardArea li.n18 {transform: translate(-12vw,calc(1vw - var(--vh) * 36));} .s_visual .cardArea li.n19 {transform: translate(11vw,calc(var(--vh) * -36));} .s_visual .cardArea li.n20 {transform: translate(32vw,calc(1vw - var(--vh) * 36));} .s_visual .cardArea li.n21 {transform: translate(-31vw,24vw);} .s_visual .cardArea li.n22 {transform: translate(-10vw,25vw);} .s_visual .cardArea li.n23 {transform: translate(11vw,24vw);} .s_visual .cardArea li.n24 {transform: translate(33vw,23vw);} .s_visual .cardArea li.n25 {transform: translate(-33vw,calc(17vw + var(--vh) * 9));} .s_visual .cardArea li.n26 {transform: translate(-11vw,calc(16vw + var(--vh) * 9));} .s_visual .cardArea li.n27 {transform: translate(10vw,calc(18vw + var(--vh) * 9));} .s_visual .cardArea li.n28 {transform: translate(32vw,calc(17vw + var(--vh) * 9));} .s_visual .cardArea li.n29 {transform: translate(-30vw,calc(12vw + var(--vh) * 18));} .s_visual .cardArea li.n30 {transform: translate(-8vw,calc(13vw + var(--vh) * 18));} .s_visual .cardArea li.n31 {transform: translate(12vw,calc(11vw + var(--vh) * 18));} .s_visual .cardArea li.n32 {transform: translate(33vw,calc(12vw + var(--vh) * 18));} .s_visual .cardArea li.n33 {transform: translate(-34vw,calc(6vw + var(--vh) * 27));} .s_visual .cardArea li.n34 {transform: translate(-11vw,calc(5vw + var(--vh) * 27));} .s_visual .cardArea li.n35 {transform: translate(11vw,calc(7vw + var(--vh) * 27));} .s_visual .cardArea li.n36 {transform: translate(31vw,calc(6vw + var(--vh) * 27));} .s_visual .cardArea li.n37 {transform: translate(-23vw,calc(var(--vh) * 36 - 1vw));} .s_visual .cardArea li.n38 {transform: translate(1vw,calc(var(--vh) * 36));} .s_visual .cardArea li.n39 {transform: translate(21vw,calc(var(--vh) * 36 - 1vw));} } @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_txt ========================= */ .s_txt{ letter-spacing: -0.04em; color: #fff; pointer-events: none; position: relative; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } .s_txt.on{pointer-events: auto;} .s_txt .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #003CDC; } .s_txt .wrap{ height: var(--vh100); position: relative; display: flex; align-items: center; justify-content: center; } .s_txt .con{} .s_txt .hidden{overflow: hidden;} .s_txt .hidden > *{transform: translateY(110%);} .s_txt .con.n1{ position: absolute; padding-top: 20px; box-sizing: border-box; font-size: 1px; height: 80%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .s_txt .con.n1 > div{position: relative;} .s_txt .con.n1 .top{ font-size: 60em; font-weight: 600; line-height: calc(84/60); transform: translateX(-1em); } .s_txt .con.n1 .top span{border-bottom: 2px solid #fff; box-sizing: border-box;} .s_txt .con.n1 .bottom{ font-size: 95em; font-family: "Miranda Sans"; font-weight: 700; text-align: right; color: transparent; -webkit-text-stroke: 1px #fff; } .s_txt .con.n1 .bottom p{} .s_txt .con.n1 .bottom p.n2{transform: translateX(-0.95em);} .s_txt .con.n1 .block{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; } .s_txt .con.n1 .block > div{flex: 1; height: 100%;} .s_txt .con.n1 .block > div > div{height: 100%;} .s_txt .con.n2{ position: absolute; width: 100%; max-width: 1340px; font-size: 1px; display: flex; align-items: flex-start; justify-content: space-between; } .s_txt .con.n2 > div{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;} .s_txt .con.n2 .left{} .s_txt .con.n2 .right{} .s_txt .con.n2 .odometer{font-size: 130em; font-weight: 500; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";} /* .s_txt .con.n2 .odometer *{transition: 10s;} */ .s_txt .con.n2 .left .odometer{} .s_txt .con.n2 .left .odometer-digit:nth-child(2){margin-left: -0.28em; margin-right: -0.2em;} .s_txt .con.n2 .left .odometer-digit{padding-right: 0.15em;} /* .s_txt .con.n2 .odometer *{transition-duration: 10s;} */ /* .s_txt .con.n2 .left .odometer .odometer-digit:nth-child(1) {width: 0.5em !important;} */ /* .s_txt .con.n2 .left .odometer .odometer-digit:nth-child(2) {width: 0.6em !important;} */ /* .s_txt .con.n2 .left .odometer .odometer-digit:nth-child(1) .odometer-digit-spacer{width: 0.5em !important;} */ /* .odometer .odometer-digit, .odometer .odometer-digit-spacer { width: 0.6em; } */ .s_txt .con.n2 .txt{ font-size: max(28em,14px); font-weight: 500; color: #9e9b9b; display: flex; align-items: center; justify-content: center; white-space: nowrap; gap: 0.2em; } .s_txt .con.n2 .txt b{font-weight: 700; color: var(--green);} .s_txt .con.n3{position: absolute; right: 0; transform: translateX(0%) scale(0.8); transform-origin: right center;} .s_txt .con.n3 .swiperBx{position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(100px);} .s_txt .con.n3 .swiperBx::before { content:''; display: block; width: 100%; height: 100%; background-color: var(--green); position: absolute; transform: translate(20px,20px); transition: background-color 0.5s, transform 0.5s; } .s_txt .con.n3 .swiperBx .arrow{position: absolute; font-size: 1px; z-index: 2;} .s_txt .con.n3 .swiperBx .arrow.prev{right: calc(100% + 50em);} .s_txt .con.n3 .swiperBx .arrow.next{left: calc(100% + 50em);} .s_txt .con.n3 .swiperBx .arrow div{ width: calc(38/34*1em); height: calc(58/34*1em); border-radius: max(calc(5/34*1em),2px); background-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 34em; cursor: pointer; transition: background-color 0.2s,color 0.2s; } html.pc .s_txt .con.n3 .swiperBx .arrow div:hover{background-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8);} .s_txt .con.n3 .swiperBx .arrow div i{} .s_txt .con.n3 .swiper{width: 367px; width: 500px;} .s_txt .con.n3 .swiper-wrapper{} .s_txt .con.n3 .swiper-slide{position: relative;} .s_txt .con.n3 .swiper-slide::before { content:''; display: block; padding-bottom: calc(488/367*100%); padding-bottom: calc(9/16*100%); } .s_txt .con.n3 .swiper-slide *{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .s_txt .con.n3 .swiper-slide.video{cursor: pointer;} .s_txt .con.n3 .swiper-slide iframe{ height: calc(100% + 100px); top: -50px; pointer-events: none; } .s_txt .con.n4{} .s_txt .con.n4{ position: absolute; left: 0%; bottom: 50%; transform: translate(0%,50%); font-size: 30px; white-space: nowrap; line-height: 1.6; display: flex; align-items: center; justify-content: center; } .s_txt .con.n4 div{} .s_txt .con.n4 div.n1{font-weight: 500;} .s_txt .con.n4 div.n2{position: absolute; top: max(120%,80px); font-weight: 300; opacity: 0; text-align: center;} .s_txt .con.n4 div.n1 p{transform: translateY(100px); opacity: 0;} .s_txt .con.n4 div b{font-weight: 600;} /* 모션을 클래스로 조절 */ .s_txt .con.n2{transition: opacity 0.8s,transform 0.8s; pointer-events: none; opacity: 0; transform: translateY(60px);} .s_txt.step01 .con.n2{opacity: 1; transform: translateY(0); transition-delay: 0.6s;} .s_txt .con.n3{transition: right 0.8s,transform 0.8s,filter 0.8s;} .s_txt .con.n3 .swiperBx::before{transition: background-color 0.6s,transform 0.6s;} .s_txt.step01 .con.n3{right: 50%; transform: translateX(50%) scale(1); filter: brightness(0.2);} .s_txt.step03 .con.n3{filter: brightness(1); transition-delay: 0.2s;} .s_txt.step03 .con.n3 .swiperBx::before{background-color: #013ddc; transform: translate(0,0) rotate(-6deg); transition-delay: 0.4s;} .s_txt .con.n3 .swiperBx .arrow.prev{transform: translateX(80px);} .s_txt .con.n3 .swiperBx .arrow.next{transform: translateX(-80px);} .s_txt .con.n3 .swiperBx .arrow{transition: opacity 0.8s,transform 0.8s; opacity: 0; pointer-events: none;} .s_txt.step03 .con.n3 .swiperBx .arrow{opacity: 1; transform: translateX(0); pointer-events: auto; transition-delay: 0.4s;} .s_txt .con.n4{transition: transform 0.8s,left 0.8s,bottom 0.8s,font-size 0.8s;} .s_txt .con.n4 > div{transition: transform 0.8s,opacity 0.8s,top 0.8s,text-indent 0.3s;} .s_txt.step01 .con.n4{left: 50%; transform: translate(-50%,50%); font-size: 34px;} .s_txt.step01 .con.n4 .n1{text-indent: calc(26/34*1em);} .s_txt.step02 .con.n4 .n1{transform: translateY(min(-120%,-80px)); opacity: 0;} .s_txt.step02 .con.n4 .n2{top: 0; opacity: 1;} .s_txt.step03 .con.n4{bottom: 60px; transform: translate(-50%,0%);} /* 영상 팝업 */ ._videoPop{ position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; background-color: rgba(0,0,0,0.8); pointer-events: none; opacity: 0; transition: opacity 0.5s; } ._videoPop.on{pointer-events: auto; opacity: 1;} ._videoPop .grayBg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); cursor: pointer; } ._videoPop .inner{max-width: 1200px; width: 95%; position: relative; padding: 60px 0; margin: auto;} ._videoPop .cancel{color: #fff; font-size: 30px; cursor: pointer; text-align: center; margin-bottom: 10px;} ._videoPop .cancel i{} ._videoPop .videoBx{position: relative;} ._videoPop .videoBx::before { content:''; display: block; padding-bottom: calc(9/16*100%); } ._videoPop .inner iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} /* 하단 작은 텍스트 */ .s_txt .bottomTxt{ position: absolute; width: 100%; bottom: 20px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,0.35); letter-spacing: -0.04em; font-weight: 500; transition: opacity 0.8s; } .s_txt .bottomTxt > div{} .s_txt .bottomTxt > div p{} .s_txt.step01 .bottomTxt{opacity: 0; pointer-events: none;} @media screen and (max-width:1800px) { .s_txt .con.n1{font-size: calc(1/1800*100vw); padding: 20px 0;} .s_txt .con.n2{font-size: calc(1/1800*100vw); } .s_txt .con.n3{transform: translateX(0%) scale(0.6);} .s_txt .con.n3 .swiper{width: max(calc(500/1800*100vw),420px);} .s_txt .con.n3 .swiperBx .arrow{font-size: max(calc(1/1800*100vw),0.7px); } .s_txt .con.n4{font-size: calc(30/1800*100vw); } .s_txt.step01 .con.n4{font-size: calc(34/1800*100vw); } } @media screen and (max-width:1440px) { .s_txt .bottomTxt{font-size: 14px; } } @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { .s_txt{background-color: #000; clip-path: unset; pointer-events: auto;} .s_txt .bg{display: none;} .s_txt .wrap{height: auto; flex-direction: column;} .s_txt .wrap > div{position: unset !important;} .s_txt .con.n1{flex-direction: row; font-size: min(calc(1/1024*100vw),0.7px); height: auto; gap: 40em; padding: 0;} .s_txt .con.n1 .top{text-align: right; transform: unset;} /* .s_txt .con.n1 .block{display: none;} */ .s_txt .con.n1 .block > div > div{background-color: #000;} .s_txt .con.n1 .bottom{text-align: left; font-size: 80em; } .s_txt .con.n1 .bottom p.n2{transform: unset;} .s_txt .con.n2{opacity: 1; pointer-events: auto; max-width: 500px; gap: 40px; font-size: 0.7px; transform: unset;} /* .s_txt .con.n2 > div{flex: 1;} */ .s_txt .con.n3{transform: unset; transition: unset; width: 100%;} .s_txt .con.n3 .swiperBx{opacity: 1; transform: unset; width: 90%; max-width: 800px; margin: 0 auto;} .s_txt .con.n3 .swiper{width: 100%;} .s_txt .con.n3.on .swiperBx::before{background-color: #013ddc; transform: translate(0,0) rotate(-6deg); transition-delay: 0.8s;} .s_txt .con.n3 .swiperBx .arrow{opacity: 1; transform: translateX(0) !important; pointer-events: auto; transition-delay: 1.2s; font-size: 1px; } .s_txt .con.n3 .swiperBx .arrow.prev{right: calc(100% - 10px);} .s_txt .con.n3 .swiperBx .arrow.next{left: calc(100% - 10px);} .s_txt .con.n3 .swiperBx .arrow div{width: 60px; height: 60px; border-radius: 50%; font-size: 40px; } .s_txt .con.n4{transform: unset; flex-direction: column; font-size: 24px; gap: 0.8em;} .s_txt .con.n4 > div{opacity: 1 !important; position: unset !important; transition: unset;} .s_txt .con.n4 div.n1 p{opacity: 1; transform: unset;} .s_txt .bottomTxt{display: none;} /* 간격 */ .s_txt{padding: 120px 0;} .s_txt .con.n1{margin-bottom: 120px;} .s_txt .con.n2{margin-bottom: 120px;} .s_txt .con.n3{margin-bottom: 60px;} } @media screen and (max-width:820px) { .s_txt .con.n2{font-size: min(calc(1.2/820*100vw),0.7px); justify-content: center;} .s_txt .con.n2 > div{gap: 10px;} /* .s_txt .con.n3 .swiperBx .arrow div{font-size: 20px; width: 40px; height: 40px;} */ .s_txt .con.n3 .swiperBx .arrow.prev{right: unset; left: -40px;} .s_txt .con.n3 .swiperBx .arrow.next{left: unset; right: -40px;} .s_txt .con.n4{font-size: min(calc(38/820*100vw),24px); } /* 간격 */ .s_txt .con.n1{margin-bottom: 80px;} .s_txt .con.n2{margin-bottom: 80px;} .s_txt .con.n3{margin-bottom: 40px;} } @media screen and (max-width:500px) { .s_txt .con.n1 .top span{border-bottom: 1px solid #fff;} .s_txt .con.n2{gap: 20px;} .s_txt .con.n3 .swiperBx .arrow div{font-size: 20px; width: 40px; height: 40px;} .s_txt .con.n3 .swiperBx .arrow.prev{left: -30px;} .s_txt .con.n3 .swiperBx .arrow.next{right: -30px;} } @media screen and (max-width:320px) {} /* ========================= s_card ========================= */ .s_card{ padding: 140px 0; position: relative; } .s_card .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/asset/img/main/dot_bg.png); background-size: cover; background-position: center; background-color: #ecedef; -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 80%, transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 80%, transparent 100% ); z-index: -1; } .s_card .tit{text-align: center; margin-bottom: 100px;} .s_card .tit small{ display: block; font-size: 22px; letter-spacing: -0.04em; margin-bottom: calc(26/22*1em); } .s_card .tit h3{font-size: 58px; font-weight: 600; letter-spacing: -0.04em;} .s_card .tit h3 div{overflow: hidden;} .s_card .tit h3 div p{} .s_card .cardArea{letter-spacing: -0.04em; } .s_card .cardArea .pin{margin-bottom: 60px; perspective: 300px; } .s_card .cardArea .pin.last{margin-bottom: 0;} .s_card .cardArea .card{ display: flex; align-items: center; justify-content: center; position: relative; filter: brightness(1); overflow: hidden; } .s_card .cardArea .card > div:not(.ico){flex: 1;} .s_card .cardArea .card .left{ position: relative; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.2); padding-left: 70px; padding-right: 40px; padding-top: 60px; padding-bottom: 30px; } .s_card .cardArea .card .left h3{ font-size: 44px; font-weight: 600; line-height: calc(60/44); margin-bottom: 50px; min-height: calc(120/44*1em); } .s_card .cardArea .card .left h4{font-size: 22px; line-height: calc(33/22);} .s_card .cardArea .card .left a{ border-radius: 100px; background-color: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; padding: calc(12/17*1em) calc(20/17*1em); gap: calc(10/17*1em); margin-top: 24px; margin-bottom: 55px; transition: background-color 0.1s,color 0.1s; } .s_card .cardArea .card .left a p{} .s_card .cardArea .card .left a i{transform: translateY(-0.1em);} .s_card .cardArea .card .left .scroll{ color: rgba(0,0,0,0.5); font-weight: 500; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding-left: 4px; } .s_card .cardArea .card .left .scroll p{} .s_card .cardArea .card .left .scroll div{animation: floating10 forwards infinite 3s;} .s_card .cardArea .card .left .scroll i{display: block; transform: translateY(2.5px);} .s_card .cardArea .card .left .num{position: absolute; top: 30px; right: 50px; font-size: 206px; font-weight: 300; color: rgba(0,0,0,0.1);} .s_card .cardArea .card .right{ box-sizing: border-box; position: relative; display: flex; align-items: flex-start; justify-content: flex-start; gap: 40px; padding-left: 40px; padding-right: 80px; padding-top: 60px; padding-bottom: 30px; } .s_card .cardArea .card .right .txtBx{white-space: nowrap; font-weight: 500; letter-spacing: -0.04em; line-height: calc(25/16);} .s_card .cardArea .card .right .txtBx b{} .s_card .cardArea .card .right .txtBx p{opacity: 0.3;} .s_card .cardArea .card .right .swiperBx{ position: relative; width: 100%; clip-path: polygon(0% 7%,28% 7%,28% 14%,50% 14%,50% 0%,100% 0%,100% 85%,50% 85%,50% 100%,0% 100%); /* 556 310 */ } .s_card .cardArea .card .right .swiperBx::before {content:''; display: block; padding-bottom: calc(310/556*100%);} .s_card .cardArea .card .right .swiper{position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .s_card .cardArea .card .right .swiper-wrapper{} .s_card .cardArea .card .right .swiper-slide{} .s_card .cardArea .card .right .swiper-slide img{width: 100%; height: 100%; object-fit: cover;} .s_card .cardArea .card .ico{position: absolute; right: 18px; bottom: 18px; font-size: 1px; } .s_card .cardArea .card .ico::before { content:''; display: block; animation: rotate3 forwards infinite 5s; background-position: center; background-size: cover; } .s_card .cardArea .card.n1 .ico::before{background-image: url(/asset/img/main/s_card_ico01.png); width: 35em; height: 35em;} .s_card .cardArea .card.n2 .ico::before{background-image: url(/asset/img/main/s_card_ico02.png); width: 32em; height: 32em;} .s_card .cardArea .card.n3 .ico::before{background-image: url(/asset/img/main/s_card_ico03.png); width: 40em; height: 40em;} /* 색상 별도 */ .s_card .cardArea .card.n1{background-color: #fff;} .s_card .cardArea .card.n2{background-color: #013ddc; color: #fff;} .s_card .cardArea .card.n3{background-color: var(--green);} .s_card .cardArea .card.n2 .left .scroll{color: rgba(255,255,255,0.4);} .s_card .cardArea .card.n1 .left{border-color: rgba(0,0,0,0.1);} html.pc .s_card .cardArea .card.n1 .left a:hover{background-color: #013ddc;} html.pc .s_card .cardArea .card.n2 .left a:hover{background-color: var(--green); color: #000;} html.pc .s_card .cardArea .card.n3 .left a:hover{background-color: #fff; color: #000;} @media screen and (max-width:1800px) { .s_card .cardArea .card .left{flex: 0.8 !important;} .s_card .cardArea .card .left h3{font-size: 40px; } .s_card .cardArea .card .left h4{font-size: 20px; } .s_card .cardArea .card .left a{font-size: 16px; } .s_card .cardArea .card .left .scroll{font-size: 14px; } .s_card .cardArea .card .left .num{font-size: 180px; } } @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) { .s_card .tit h3{font-size: max(calc(60/1440*100vw),30px); } .s_card .cardArea .card > div:not(.ico){padding: 60px 40px !important;} .s_card .cardArea .card .left h3{font-size: max(calc(40/1440*100vw),30px); } .s_card .cardArea .card .left h4{font-size: 18px; } .s_card .cardArea .card .left a{font-size: 14px; } .s_card .cardArea .card .left .scroll{font-size: 12px; } .s_card .cardArea .card .left .num{font-size: 140px; } .s_card .cardArea .card .right{flex-direction: column; gap: 0;} } @media screen and (max-width:1280px) {} @media screen and (max-width:1024px) { .s_card{padding: 120px 0;} .s_card .tit{margin-bottom: 60px;} .s_card .cardArea .pin{margin-bottom: 40px;} .s_card .cardArea .card{padding: 30px 20px; gap: 20px;} .s_card .cardArea .card > div:not(.ico){padding: 0 !important;} .s_card .cardArea .card .left{border: 0;} .s_card .cardArea .card .left h3{font-size: 26px; margin-bottom: 30px;} .s_card .cardArea .card .left h4{font-size: 16px; } .s_card .cardArea .card .left a{font-size: 12px; } .s_card .cardArea .card .left .num{right: 0; top: 0;} .s_card .cardArea .card .ico{font-size: 0.7px; } } @media screen and (max-width:820px) { .s_card .cardArea .card{flex-direction: column; gap: 0;} .s_card .cardArea .card .left{width: 100%;} .s_card .cardArea .card .right{width: 100%;} .s_card .cardArea .card .left .scroll{display: none;} } @media screen and (max-width:500px) { .s_card .tit{margin-bottom: 40px;} .s_card .tit small{font-size: 14px; } .s_card .tit h3{font-size: max(calc(30/500*100vw),20px); } .s_card .cardArea .card{padding: 30px 14px;} .s_card .cardArea .card .left h3{font-size: max(calc(26/500*100vw),20px); } .s_card .cardArea .card .left h4{font-size: 14px; } .s_card .cardArea .card .left .num{font-size: calc(140/500*100vw); } .s_card .cardArea .card .ico{font-size: 0.5px; position: unset; margin-left: auto;} .s_card .cardArea .card .right .txtBx{font-size: 12px; } } @media screen and (max-width:320px) {} /* ========================= s_slide ========================= */ .s_slide {padding-top: 180px; padding-bottom: 80px; } .s_slide .wrap { text-align: center; } .s_slide .wrap .tit { margin-bottom: 180px; } .s_slide .wrap .tit .small {display: flex; align-items: center; justify-content: center; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 500; color: var(--blue); margin-bottom: 16px; letter-spacing: 0.46em; } .s_slide .wrap .tit h3 {font-size: 60px; letter-spacing: -0.04em; line-height: calc(86/60); } .s_slide .wrap .tit h3 div { overflow: hidden; } .s_slide .wrap .tit h3 div p { } .s_slide .wrap .tit h3 div:nth-child(2) { font-weight: 600; } .s_slide .wrap .swiperBx { } .s_slide .wrap .swiper { overflow: visible; } .s_slide .wrap .swiper-wrapper { } .s_slide .wrap .swiper-slide { position: relative; } .s_slide .wrap .swiper-slide::before {content:''; display: block; padding-bottom: calc(570/426*100%); } .s_slide .wrap .swiper-slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;transition: transform 0.5s; } html.pc .s_slide .wrap .swiper-slide img:hover { transform: translateY(-100px); } @media screen and (max-width:1600px) {} @media screen and (max-width:1440px) { .s_slide .wrap .tit{margin-bottom: max(calc(180/1440*100vw),100px);} .s_slide .wrap .tit h3{font-size: max(calc(60/1440*100vw),30px); } html.pc .s_slide .wrap .swiper-slide img:hover { transform: unset; } } @media screen and (max-width:1280px) { .s_slide{padding-top: 40px;} } @media screen and (max-width:1024px) {} @media screen and (max-width:820px) {} @media screen and (max-width:500px) { .s_slide .wrap .tit{margin-bottom: 60px;} .s_slide .wrap .tit .small{font-size: 14px; } .s_slide .wrap .tit h3{font-size: max(calc(30/500*100vw),20px); } } @media screen and (max-width:320px) {}