@charset "utf-8"; #app-drawing-line {position:relative; z-index:1500; height:0;} #app-drawing-line > svg {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1; pointer-events:none;} #app-drawing-line > svg:nth-child(2) {z-index:-1;} #app-drawing-line > svg #drawing-polyline {fill:none; stroke:#de234a; stroke-width:2;} #app-drawing-line > svg #pointer-circle {fill:#de234a;} #app-drawing-line > svg .marker-circs .txt-drag {display:none;} #app-drawing-line > svg .marker-circs.drag .txt-drag {display:block;} #app-drawing-line > svg .marker-circs .bg-circs__fill {r:0px; fill:#de234a; transition:r 200ms cubic-bezier(0.22, 0.61, 0.36, 1);} #app-drawing-line > svg .marker-circs.drag .bg-circs__fill {r:48px;} #app-drawing-line > svg .marker-circs.drag.press .bg-circs__fill {r:32px;} #app-drawing-line > svg .marker-circs .arr-left, #app-drawing-line > svg .marker-circs .arr-right {fill:#de234a; stroke:#de234a; stroke-width:5; stroke-linejoin:round; stroke-linecap:round; opacity:0; transition:opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);} #app-drawing-line > svg .marker-circs.drag .arr-left, #app-drawing-line > svg .marker-circs.drag .arr-right {opacity:1;} #app-drawing-line > svg .marker-circs .txt-click {display:none;} #app-drawing-line > svg .marker-circs.click .txt-click {display:block;} #app-drawing-line > svg .marker-circs.click .bg-circs__fill {r:48px; fill:#0c0c0d;} #app-drawing-line > svg .marker-circs.click.press .bg-circs__fill {r:32px; fill:#0c0c0d;} #app-drawing-line.click > svg #drawing-polyline, #app-drawing-line.click > svg #pointer-circle {display:none;} #app-drawing-line.link, #app-drawing-line.ripple {mix-blend-mode:difference;} #app-drawing-line.link .marker-circs text, #app-drawing-line.ripple .marker-circs text {display:none;} #app-drawing-line.link .marker-circs .bg-circs__fill {r:24px;} #app-drawing-line.ripple .marker-circs .bg-circs__fill {r:0px;} #app-drawing-line.drag > svg #drawing-polyline, #app-drawing-line.drag > svg #pointer-circle {display:none;} @supports (-webkit-hyphens:none) { #app-drawing-line.link, #app-drawing-line.ripple {mix-blend-mode:unset;} #app-drawing-line.link .marker-circs .bg-circs__fill {opacity:0.8;} #app-drawing-line.link > svg #pointer-circle {display:none;} } @media (min-width:1025px){ .s--custom-cursor, .s--custom-cursor a, .s--custom-cursor button {cursor:none;} } .title_cursor.cursor.pc {position:fixed; left:0; top:0; pointer-events:none; z-index:9998; will-change:transform;} .title_cursor .com_btn {display:flex; justify-content:space-between; align-items:center; width:210px; height:63px; background:#DE234A; color:#fff; border-radius:40px; transform:translate(-50%, -50%) scale(0); transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); padding:0 20px;} .title_cursor.is-show .com_btn {transform:translate(-50%, -50%) scale(1);} .title_cursor .btn_txt {position:relative; height:1.4em; overflow:hidden;} .title_cursor .txt_box {font-size:1.375em; font-family:'Poppins', sans-serif; line-height:1.4em; position:relative;} .title_cursor .txt_box span {display:block; transform:translateY(100%); transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);} .title_cursor .txt_box:after {content:attr(data-title); display:block; position:absolute; left:0; top:0; width:100%; transform:translateY(0); transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);} .title_cursor.is-show .txt_box span {transform:translateY(0); transition-delay:0.3s;} .title_cursor.is-show .txt_box:after {transform:translateY(-100%); transition-delay:0.3s;} .title_cursor .btn_ico {width:24px; height:24px; position:relative; transform:translateY(10px); opacity:0; transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;} .title_cursor .btn_ico:before {content:'\f061'; font-family:'Font Awesome 6 Pro'; font-weight:400; font-size:1.5em; color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .title_cursor.is-show .btn_ico {transform:translateY(0); opacity:1; transition-delay:0.4s;} @media screen and (max-width:1024px){ #app-drawing-line {display:none;} .title_cursor.cursor.pc {display:none;} } #app-drawing-line.btn-show > svg #drawing-polyline, #app-drawing-line.btn-show > svg #pointer-circle {display:none;} @media (min-width:1025px){ body {cursor:none;} body a, body button, body [role="button"], body input[type="button"], body input[type="submit"] {cursor:none;} body input:not([type="button"]):not([type="submit"]), body textarea, body select {cursor:text;} } /* intro */ #intro {width:100%; height:100vh; background:#de234a; position:fixed; left:0; top:0; z-index:9999;} .intro_txt {display:flex; justify-content:center; align-items:center; gap:1px; width:100%; height:100%; position:absolute; left:0; top:0;} .intro_txt p {opacity:0; transform:translateY(30.5px); animation:fontUp 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards} .intro_txt p img {height:50px;} .intro_txt p:nth-child(1) {animation-delay:0.5s;} .intro_txt p:nth-child(2) {animation-delay:0.55s;} .intro_txt p:nth-child(3) {animation-delay:0.6s;} .intro_txt p:nth-child(4) {animation-delay:0.65s;} .intro_txt p:nth-child(5) {animation-delay:0.7s;} .intro_txt p:nth-child(6) {animation-delay:0.75s;} .intro_txt p:nth-child(7) {animation-delay:0.8s;} .intro_txt p:nth-child(8) {animation-delay:0.85s;} .intro_txt p:nth-child(9) {animation-delay:0.9s;} .intro_txt p:nth-child(10) {animation-delay:0.95s;} @keyframes fontUp { 40% {transform: translateY(0); opacity: 1;} 70% {transform: translateY(0); opacity: 1;} 100% {transform: translateY(-30.5px); opacity: 0;} } @media screen and (max-width:767px){ .intro_txt p img {height:38px;} } /* header */ #designluny_header {display:flex; justify-content:space-between; align-items:center; width:100%; height:120px; position:fixed; left:0; top:0; z-index:300; padding:0 40px; transition:transform 0.3s ease-in-out 0.3s, background 0.5s, backdrop-filter 0.5s, height 0.5s;} #designluny_header > div {display:flex; align-items:center;} #designluny_logo {width:194px; height:40px; background:url(../images/logo.svg) no-repeat center center; background-size:contain;} #designluny_logo a {display:block; width:100%; height:100%;} #designluny_gnb > ul {display:flex; align-items:center; gap:64px;} #designluny_gnb > ul > li {position:relative;} #designluny_gnb > ul > li > a {display:block; font-size:1.375em; font-weight:600; font-family:'Poppins', 'Asta Sans'; position:relative;} #designluny_gnb > ul > li > a:before {content:''; display:block; width:0; height:3px; background:#0c0c0d; position:absolute; left:0; bottom:-3px; transition:width 0.2s ease-out;} #designluny_gnb > ul > li .tip {display:flex; align-items:center; height:24px; background:#0c0c0d; border-radius:30px; font-size:0.9375em; color:#fff; padding:0 12px; position:absolute; right:-20px; top:-25px; opacity:0; transition:opacity 0.2s ease-out; pointer-events:none;} #designluny_gnb > ul > li:hover > a:before {width:100%;} #designluny_gnb > ul > li:hover .tip {opacity:1;} #all_gnb {width:0; height:100vh; background:#000; position:fixed; right:0; top:0; z-index:50; transition:width 0.8s; overflow:hidden;} #all_gnb > div {display:flex; justify-content:center; align-items:center; width:100vw; height:100vh; position:absolute; right:0; top:0;} #all_gnb > div > div {width:100%; padding:5vw 17vw; position:relative; z-index:10;} #all_gnb .box1 {display:flex; justify-content:space-between; align-items:end; margin-bottom:max(3em, 2.5vw)} #all_gnb .box1 > ul > li {margin-bottom:30px; overflow:hidden;} #all_gnb .box1 > ul > li:last-child {margin-bottom:0;} #all_gnb .box1 > ul > li > a {display:inline-block; font-size:max(4em, 4.2vw); color:#fff; line-height:1.3em; font-weight:600; transform:translateY(100%); transition:transform 0s ease-out; transition-delay:0.5s; font-family:'Poppins'} #all_gnb .box1 > ul > li > a span {-webkit-text-stroke-width: 0px; transition:-webkit-text-stroke-width 300ms, -webkit-text-stroke-color 300ms, -webkit-text-fill-color 300ms; will-change: -webkit-text-stroke-width, -webkit-text-stroke-color, -webkit-text-fill-color;} #all_gnb .box1 > ul > li > a:hover span {-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; -webkit-text-fill-color: transparent;} #all_gnb .box1 .info {width:25%; transform:translateX(100px); opacity:0; transition:transform 0s ease-out, opacity 0s ease-out; transition-delay:0.5s;} #all_gnb .box1 .info dl {margin-bottom:max(1.5em, 1.8750vw);} #all_gnb .box1 .info dl:last-child {margin-bottom:0;} #all_gnb .box1 .info dl dt {font-size:0.9375em; color:#666; margin-bottom:0.5em; font-family:'Poppins', 'Asta Sans';} #all_gnb .box1 .info dl dd {font-size:0.9375em; color:#fff; line-height:1.45em; font-family:'Poppins', 'Asta Sans'; } #all_gnb .box1 .info dl dd a {display:inline-block; color:#fff; overflow:hidden;} #all_gnb .box1 .info dl dd a span {display:block; position:relative; transition:transform 300ms} #all_gnb .box1 .info dl dd a span:after {content:attr(data-label); position:absolute; left:0; top:100%;} #all_gnb .box1 .info dl dd a:hover span {transform:translateY(-100%)} #all_gnb .box2 {display:flex; justify-content:space-between; align-items:end;} #all_gnb .box2 .down_btn {display:flex; justify-content:center; align-items:center; height:3.375em; border:1px solid rgba(255,255,255,0.5); border-radius:1.875em; font-size:max(1em, 0.9375vw); color:#fff; padding:0 1.875em; transform:translateX(100px); opacity:0; transition:transform 0s ease-out, opacity 0s ease-out, background 0.4s, border 0.4s; transition-delay:0.5s, 0.5s, 0s, 0s;} #all_gnb .box2 .down_btn span {display:flex; justify-content:center; align-items:center; position:relative; z-index:5; transition:transform 0.4s ease-out;} #all_gnb .box2 .down_btn span:after {content:'\e094'; font-size:1em; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; left:100%; top:50%; transform:translateY(-50%); opacity:0; transition:all 0.4s ease-out; transition-property:margin-left, opacity;} #all_gnb .box2 .down_btn:hover {background:#de234a; border-color:#de234a;} #all_gnb .box2 .down_btn:hover span {transform:translateX(-10px);} #all_gnb .box2 .down_btn:hover span:after {margin-left:10px; opacity:1;} #all_gnb .box2 .sns {display:flex; gap:2.25em; width:25%; transform:translateX(200px); opacity:0; transition:transform 0s ease-out, opacity 0s ease-out; transition-delay:0.5s;} #all_gnb .box2 .sns li a {font-size:1.25em; color:#fff; opacity:0.5; transition:opacity 0.2s ease-out} #all_gnb .box2 .sns li a img {height:24px;} #all_gnb .box2 .sns li a:hover {opacity:1;} #menuToggle {display:block; width:22px; height:22px; position:relative; margin-left:80px; z-index:60;} #menuToggle:before, #menuToggle:after {content:''; display:block; width:100%; height:2px; background:#0c0c0d; position:absolute; right:0; top:50%; transition:transform 360ms cubic-bezier(0.86, 0, 0.07, 1), width 360ms cubic-bezier(0.86, 0, 0.07, 1), background-color 150ms;} #menuToggle:before {transform:translate(0, -3px)} #menuToggle:after {width:calc(100% - 10px); transform:translate(0, 3px)} #menuToggle:hover:after {width:100%;} #designluny_header.scroll_on {background:rgba(255,255,255,0.6); backdrop-filter:blur(30px);} #designluny_header.white #designluny_logo {background-image:url(../images/logo_w.svg)} #designluny_header.white #designluny_gnb > ul > li > a {color:#fff;} #designluny_header.white #menuToggle:before, #designluny_header.white #menuToggle:after {background:#fff;} #designluny_header.on {transform:translateY(0)} #designluny_header.on #all_gnb {width:100%;} #designluny_header.on #all_gnb .box1 > ul > li > a {transform:translateY(0); transition:transform 0.4s ease-out;} #designluny_header.on #all_gnb .box1 > ul > li:nth-child(1) > a {transition-delay:0.5s;} #designluny_header.on #all_gnb .box1 > ul > li:nth-child(2) > a {transition-delay:0.65s;} #designluny_header.on #all_gnb .box1 > ul > li:nth-child(3) > a {transition-delay:0.8s;} #designluny_header.on #all_gnb .box1 > ul > li:nth-child(4) > a {transition-delay:0.95s;} #designluny_header.on #all_gnb .box1 .info {transform:translateX(0); opacity:1; transition:transform 0.4s ease-out, opacity 0.4s ease-out; transition-delay:0.5s;} #designluny_header.on #all_gnb .box2 .down_btn {transform:translateX(0); opacity:1; transition:transform 0.4s ease-out, opacity 0.4s ease-out; transition-delay:0.5s, 0.5s, 0s, 0s;} #designluny_header.on #all_gnb .box2 .sns {transform:translateX(0); opacity:1; transition:transform 0.4s ease-out, opacity 0.4s ease-out; transition-delay:0.5s;} #designluny_header.on #menuToggle:before, #designluny_header.on #menuToggle:after {background:#fff; width:calc(100% + 2px);} #designluny_header.on #menuToggle:before {transform:translate(0, -50%) rotate(-45deg)} #designluny_header.on #menuToggle:after {transform:translate(0, -50%) rotate(45deg)} @media screen and (min-width:1025px){ #designluny_header.scroll_on {height:100px;} } @media screen and (max-width:1240px){ #designluny_header {padding:0 6%;} #designluny_gnb > ul {gap:40px;} #menuToggle {margin-left:50px;} } @media screen and (max-width:1024px){ #designluny_header {height:50px;} #designluny_logo {width:160px; height:33px;} #designluny_gnb {display:none;} #all_gnb > div {display:block; padding-top:100px;} #all_gnb > div > div {padding:5vw 6vw;} #all_gnb .box1 .info {display:none;} #all_gnb .box2 {flex-direction:column; justify-content:start; align-items:start;} #all_gnb .box2 .down_btn {height:2.5em; padding:1.5em;} #all_gnb .box2 .down_btn:hover span {transform:translateX(-5px);} #all_gnb .box2 .down_btn:hover span:after {margin-left:5px;} #all_gnb .box2 .sns {margin-top:6%; gap:20px;} #all_gnb .box2 .sns li a img {height:20px;} } @media screen and (max-width:500px){ #all_gnb .box1 > ul > li > a {font-size:10vw;} } .floating_banner {width:100px; position:fixed; right:40px; top:50%; transform:translateY(-50%); z-index:200; overflow:hidden; pointer-events:none;} .floating_banner p {margin-bottom:16px; transition:transform 0.3s ease-in-out 0.3s;} .floating_banner p:last-child {margin-bottom:0;} .floating_banner p img {width:100%;} .floating_banner.scroll_on p {transform:translateX(100%)} @media screen and (max-width:1240px){ .floating_banner {right:6%;} } @media screen and (max-width:1024px){ .floating_banner {width:70px; display:none;} .floating_banner p {margin-bottom:10px;} } @media screen and (max-width:767px){ .floating_banner {width:50px;} } /* footer */ #designluny_footer {width:100%; background:#0c0c0d; padding:80px 0; overflow:hidden;} #designluny_footer > div {position:relative;} #designluny_footer .f_logo {width:100%; height:40px; margin-bottom:24px;} #designluny_footer .f_logo img {height:100%;} #designluny_footer .box1 {display:flex; justify-content:space-between; align-items:start; flex-direction:row-reverse; flex-wrap:wrap; width:100%; opacity:0; transform:translateY(50px); transition:opacity 0.5s, transform 0.5s;} #designluny_footer .f_info li {display:inline-block; font-size:1.125em; color:#ceced3; line-height:1.55em; margin:0 16px 4px 0;} #designluny_footer .f_info li strong {color:#fff; font-weight:700; margin-right:5px;} #designluny_footer .f_info li a {color:#ceced3;} #designluny_footer .f_util {display:flex; align-items:center; gap:48px;} #designluny_footer .f_util li a {display:block; font-size:1.25em; color:#fff; font-weight:600; font-family:'Poppins', 'Asta Sans'} #designluny_footer .box2 {margin-top:55px;} #designluny_footer .box2 p {display:flex; font-size:1.875em; color:#fff; font-weight:800; margin-bottom:24px;} #designluny_footer .box2 p span {display:block; opacity:0; transform:translateY(100%);} #designluny_footer .box2 p span.space {margin-right:7px;} #designluny_footer .box2 a {display:inline-block; font-size:9.375em; color:#de234a; font-weight:600; font-family:'Poppins'; line-height:1.2em; position:relative; white-space:nowrap; padding-bottom:20px; opacity:0; transform:translateY(50px); transition:opacity 0.5s, transform 0.5s;} #designluny_footer .box2 a:after {content:''; display:block; width:100%; height:6px; background:#de234a; position:absolute; left:0; bottom:0; transform:scaleX(0); transform-origin:100% 0; transition:transform 0.5s;} #designluny_footer .box2 a:hover:after {transform:scaleX(100%); transform-origin:0 0;} #designluny_footer .copy {font-size:1.125em; color:#ed234a; font-weight:700; margin-top:45px; opacity:0; transform:translateY(50px); transition:opacity 0.5s, transform 0.5s;} #designluny_footer .go_top {display:block; width:79px; height:79px; background:none; font-size:1em; position:absolute; right:0; bottom:55px;} #designluny_footer .go_top i {display:flex; justify-content:center; align-items:center; width:100%; height:100%; border:1px solid #de234a; border-radius:50%; font-size:1.875em; color:#de234a; border:1px solid #de234a; border-radius:50%; font-size:1.875em; color:#de234a;} #designluny_footer .box1.active {opacity:1; transform:translateY(0);} #designluny_footer .box2.active p span {animation:mVisuTxt 0.4s ease-in-out forwards;} #designluny_footer .box2.active p span:nth-child(2) {animation-delay:0.1s;} #designluny_footer .box2.active p span:nth-child(3) {animation-delay:0.2s;} #designluny_footer .box2.active p span:nth-child(4) {animation-delay:0.3s;} #designluny_footer .box2.active p span:nth-child(5) {animation-delay:0.4s;} #designluny_footer .box2.active p span:nth-child(6) {animation-delay:0.5s;} #designluny_footer .box2.active p span:nth-child(7) {animation-delay:0.6s;} #designluny_footer .box2.active p span:nth-child(8) {animation-delay:0.7s;} #designluny_footer .box2.active p span:nth-child(9) {animation-delay:0.8s;} #designluny_footer .box2.active p span:nth-child(10) {animation-delay:0.9s;} #designluny_footer .box2.active p span:nth-child(11) {animation-delay:1s;} #designluny_footer .box2.active p span:nth-child(12) {animation-delay:1.1s;} #designluny_footer .box2.active p span:nth-child(13) {animation-delay:1.2s;} #designluny_footer .box2.active p span:nth-child(14) {animation-delay:1.3s;} #designluny_footer .box2.active p span:nth-child(15) {animation-delay:1.4s;} #designluny_footer .box2.active p span:nth-child(16) {animation-delay:1.5s;} #designluny_footer .box2.active p span:nth-child(17) {animation-delay:1.6s;} #designluny_footer .box2.active p span:nth-child(18) {animation-delay:1.7s;} #designluny_footer .box2.active a {opacity:1; transform:translateY(0); transition-delay:0.3s;} #designluny_footer .go_top.active + .copy {opacity:1; transform:translateY(0);} #designluny_footer .go_top.active i {animation:goTop 1s ease-in-out forwards;} @keyframes goTop { 0% {transform:translateY(200px)} 40% {transform:translateY(-15px)} 55% {transform:translateY(15px)} 70% {transform:translateY(-15px)} 85% {transform:translateY(15px)} 100% {transform:translateY(0)} } @media screen and (max-width:1599px){ #designluny_footer .f_util {gap:30px;} #designluny_footer .box2 a {font-size:9vw;} #designluny_footer .go_top {bottom:0;} } @media screen and (max-width:1260px){ #designluny_footer .box1 {display:block;} #designluny_footer .f_util {margin-bottom:15px;} } @media screen and (max-width:1024px){ #designluny_footer {padding:8% 0 13%;} #designluny_footer > div {display:flex; flex-direction:column-reverse; padding-bottom:30px;} #designluny_footer .f_logo {height:30px; margin-bottom:2%;} #designluny_footer .f_info li {font-size:1em; margin-right:12px;} #designluny_footer .f_util {display:none; margin-bottom:2%; gap:20px;} #designluny_footer .f_util li a {font-size:1.125em;} #designluny_footer .box1 {margin-top:0;} #designluny_footer .box2 {margin-top:0; display:none;} #designluny_footer .box2 p {font-size:1.5em; margin-bottom:2%;} #designluny_footer .box2 p span.space {margin-right:5px;} #designluny_footer .box2 a {font-size:7vw; padding-bottom:15px;} #designluny_footer .box2 a:after {height:4px;} #designluny_footer .copy {font-size:1em; margin-top:0; position:absolute; left:0; bottom:0;} #designluny_footer .go_top {width:60px; height:60px;} #designluny_footer .go_top i {font-size:1.5em;} } @media screen and (max-width:767px){ #designluny_footer .f_logo {height:26px; margin-bottom:4%;} #designluny_footer .f_info br {display:none;} #designluny_footer .f_info li {margin-right:10px;} #designluny_footer .f_util {gap:12px;} #designluny_footer .f_util li a {font-size:1em;} #designluny_footer .box2 p {font-size:1.125em;} #designluny_footer .box2 p span.space {margin-right:3px;} #designluny_footer .box2 a {font-size:6.5vw; padding-bottom:10px;} #designluny_footer .box2 a:after {height:2px;} #designluny_footer .go_top {width:35px; height:35px;} #designluny_footer .go_top i {font-size:1.125em;} } /* main */ #mVisu {display:flex; justify-content:center; align-items:center; width:100%; height:calc(100vh - 130px); position:relative; padding-top:120px;} #mVisu .txt {display:none;} #mVisu .txt_box p {display:flex; font-size:9.375em; line-height:1em; font-weight:600; font-family:'Poppins', 'Asta Sans'; letter-spacing:-0.04em;} #mVisu .txt_box p:last-child {color:#de234a;} #mVisu .txt_box p span {display:block; opacity:0; transform:translateY(100%); animation:mVisuTxt 1s ease-in-out forwards;} #mVisu .txt_box p .space {margin-right:20px;} #mVisu .txt_box p:nth-child(1) span:nth-child(1) {animation-delay:3.3s;} #mVisu .txt_box p:nth-child(1) span:nth-child(2) {animation-delay:3.35s;} #mVisu .txt_box p:nth-child(1) span:nth-child(3) {animation-delay:3.4s;} #mVisu .txt_box p:nth-child(1) span:nth-child(4) {animation-delay:3.45s;} #mVisu .txt_box p:nth-child(1) span:nth-child(5) {animation-delay:3.5s;} #mVisu .txt_box p:nth-child(2) span:nth-child(1) {animation-delay:4s;} #mVisu .txt_box p:nth-child(2) span:nth-child(2) {animation-delay:4.05s;} #mVisu .txt_box p:nth-child(2) span:nth-child(3) {animation-delay:4.1s;} #mVisu .txt_box p:nth-child(2) span:nth-child(4) {animation-delay:4.15s;} #mVisu .txt_box p:nth-child(2) span:nth-child(5) {animation-delay:4.2s;} #mVisu .txt_box p:nth-child(2) span:nth-child(6) {animation-delay:4.25s;} #mVisu .txt_box p:nth-child(2) span:nth-child(7) {animation-delay:4.3s;} #mVisu .txt_box p:nth-child(2) span:nth-child(8) {animation-delay:4.35s;} #mVisu .txt_box p:nth-child(2) span:nth-child(9) {animation-delay:4.4s;} #mVisu .txt_box p:nth-child(2) span:nth-child(10) {animation-delay:4.45s;} #mVisu .txt_box p:nth-child(2) span:nth-child(11) {animation-delay:4.5s;} @keyframes mVisuTxt { 0% {opacity:0; transform:translateY(100%)} 100% {opacity:1; transform:translateY(0)} } @media screen and (max-width:1024px){ #mVisu {height:100vh; padding-top:50px;} #mVisu .txt {display:block; font-size:1.125em; line-height:1.33em; font-weight:500; margin-top:3%; opacity:0; transform:translateY(100%); animation:mVisuTxt 1s ease-in-out forwards 5s;} #mVisu .txt_box p {font-size:6em;} #mVisu .txt_box p .space {margin-right:10px;} } @media screen and (max-width:767px){ #mVisu .txt_box p {font-size:12vw;} } .main_title .t1 {font-size:1.875em; color:#de234a; line-height:1.2em; font-weight:700; margin-bottom:24px; overflow:hidden;} .main_title .t1 span {display:block; transform:translateY(100%); transition:transform 0.5s 0.3s;} .main_title .t2 {font-size:5.625em; line-height:1.11em; font-weight:800;} .main_title .t2 span {display:block; width:0; transition:width 0.6s; white-space:nowrap; overflow:hidden;} .main_title.active .t1 span {transform:translateY(0)} .main_title.active .t2 span {width:100%;} @media screen and (max-width:1024px){ .main_title .t1 {font-size:1.5em; margin-bottom:2%;} .main_title .t2 {font-size:3.7em;} } @media screen and (max-width:747px){ .main_title .t1 {font-size:1.3em;} .main_title .t2 {font-size:2.6em;} } #mCompany {width:100%; height:150vh; position:relative;} #mCompany > div {width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;} #mCompany .bg {display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; z-index:0;} #mCompany .bg svg {width:100%; height:auto;} #mCompany .bg svg text {font-size:100px; fill:#0c0c0d; font-weight:600; font-family:'Poppins';} #mCompany .box {display:flex; justify-content:center; align-items:center; width:100%; position:absolute; left:50%; top:50%; z-index:5; transform:translate(-50%, -50%)} #mCompany .box .txt_box {width:100%; height:100%; position:absolute; left:0; top:0; z-index:5;} #mCompany .box .txt_box .tit_box {position:absolute; left:50%; top:23%; transform:translateX(-50%); font-size:min(1.875em, 1.55vw); line-height:1.33em; font-weight:700; text-align:center; white-space:nowrap;} #mCompany .box .txt_box .txt {font-size:min(6.25em, 5vw); color:#de234a; font-weight:600; font-family:'Poppins'; position:absolute;} #mCompany .box .txt_box .txt_left {right:73%; top:63%; transform:translateY(-50%)} #mCompany .box .txt_box .txt_right {left:73%; top:45%; transform:translateY(-50%)} #mCompany .box .video_box {width:100%; background:#000; padding-bottom:56.25%; position:relative; transform:scale(0.4, 0.4); margin-top:4vw;} #mCompany .box .video_box:before {content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:5} #mCompany .box .video_box iframe {width:100%; height:100%; position:absolute; left:0; top:0; z-index:0;} @media screen and (max-width:1024px){ #mCompany {display:none; height:auto; margin-bottom:15%;} #mCompany > div {height:auto; position:relative;} #mCompany .bg {display:none;} #mCompany .box {display:block; position:relative; left:0; top:0; transform:translate(0, 0)} #mCompany .box .txt_box {position:relative;} #mCompany .box .txt_box .tit_box {font-size:1.5em; position:relative; left:0; top:0; transform:translateX(0);} #mCompany .box .txt_box .txt {display:none;} #mCompany .box .video_box {width:88%; transform:scale(1); margin:5% auto 0;} } #mSection1 {position:relative;} #mSection1 .bg {display:flex; justify-content:center; align-items:center; width:100%; height:0; position:sticky; left:0; top:0; z-index:5;} #mSection1 .bg > div {width:100%; height:100vh; margin-top:100vh; overflow:hidden; position:relative;} #mSection1 .bg > div > div {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:absolute; left:0; top:0;} #mSection1 .bg > div svg {display:block; width:500px; height:auto;} #mSection1 .box {width:100%; background:#de234a; position:relative;} #ring-group path {transform-box: view-box; transform-origin: 50% 50%; animation: ring-spin linear infinite; animation-play-state: paused;} #mSection1.ring-active #ring-group path { animation-play-state: running; } #ring-group path:nth-child(1) { animation-duration: 8s; } #ring-group path:nth-child(2) { animation-duration: 9s; } #ring-group path:nth-child(3) { animation-duration: 10s; } #ring-group path:nth-child(4) { animation-duration: 11s; } #ring-group path:nth-child(5) { animation-duration: 12s; } #ring-group path:nth-child(6) { animation-duration: 13s; } #ring-group path:nth-child(7) { animation-duration: 14s; } #ring-group path:nth-child(8) { animation-duration: 15s; } #ring-group path:nth-child(9) { animation-duration: 16s; } #ring-group path:nth-child(10) { animation-duration: 17s; } #ring-group path:nth-child(11) { animation-duration: 18s; } #ring-group path:nth-child(12) { animation-duration: 19s; } #ring-group path:nth-child(13) { animation-duration: 20s; } #ring-group path:nth-child(14) { animation-duration: 21s; } #ring-group path:nth-child(15) { animation-duration: 22s; } #ring-group path:nth-child(16) { animation-duration: 23s; } #ring-group path:nth-child(17) { animation-duration: 24s; } #ring-group path:nth-child(18) { animation-duration: 25s; } #ring-group path:nth-child(19) { animation-duration: 26s; } #ring-group path:nth-child(20) { animation-duration: 27s; } #ring-group path:nth-child(21) { animation-duration: 28s; } #section2 {width:100%; background:#0c0c0d; position:relative; z-index:30;} @keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media screen and (max-width:767px){ #mSection1 .bg > div svg {width:270px;} } #mNeeds {width:100%; height:100%; position:absolute; left:0; top:0;} #mNeeds .txt_box {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;} #mNeeds .txt_box p {font-size:9.375em; color:#fff; font-weight:800; line-height:1.2em; white-space:nowrap; position:absolute; right:110%; top:50%; transform:translate(200%, -50%)} @media screen and (max-width:1024px){ #mNeeds .txt_box p {font-size:6em;} } @media screen and (max-width:767px){ #mNeeds .txt_box p {font-size:3.5em;} } #mPortfolio {width:100%; padding-top:350vh;} #mPortfolio > div {width:100%; background:#fff; position:relative; overflow:hidden; padding:200px 0;} #mPortfolio .tit_box {display:flex; justify-content:space-between; align-items:end; position:relative; z-index:20;} #mPortfolio .tit_box div p {font-size:1.875em; color:#de234a; line-height:1.2em; font-weight:600; font-family:'Poppins', 'Asta Sans'; margin-bottom:15px; overflow:hidden;} #mPortfolio .tit_box div p span {display:block; transform:translateY(100%); transition:transform 0.5s 0.3s;} #mPortfolio .tit_box div h2 {font-size:6.25em; line-height:1.2em; font-weight:600; font-family:'Poppins', 'Asta Sans';} #mPortfolio .tit_box div h2 span {display:block; width:0; transition:width 0.6s; white-space:nowrap; overflow:hidden;} #mPortfolio .tit_box div.active p span {transform:translateY(0)} #mPortfolio .tit_box div.active h2 span {width:100%;} #mPortfolio .tit_box .txt {font-size:1.5em; line-height:1.45em;} .mPortfolio_slide {width:100%; margin-top:135px; position:relative; z-index:20;} .mPortfolio_slide .swiper-slide {width:100%; padding:5px 34px 0 39px;} .mPortfolio_slide .swiper-slide:after {content:''; display:block; width:100%; height:882px; background:url(../images/mPortfolioBG.png) no-repeat center center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5; pointer-events:none; opacity:0;} .mPortfolio_slide a {display:block; width:100%; height:100%; border-radius:29px; position:relative; overflow:hidden;} .mPortfolio_slide a:before {content:''; display:block; width:100%; height:50%; background-image:linear-gradient(to top, #0c0c0d 0%, rgba(12,12,13,0) 100%); position:absolute; left:0; bottom:0; z-index:2; opacity:0.6;} .mPortfolio_slide .img img {width:100%;} .mPortfolio_slide .img img:nth-child(2) {display:none;} .mPortfolio_slide .txt_box {width:100%; padding:0 80px 85px; position:absolute; left:0; bottom:0; z-index:5;} .mPortfolio_slide .txt_box .tit {font-size:5em; color:#fff; line-height:1.125em; font-weight:800;} .mPortfolio_slide .txt_box .txt {font-size:1.5em; color:#fff; line-height:1.45em; font-weight:600; margin-top:20px;} .mPortfolio_slide .btn_box {display:flex; justify-content:center; align-items:center; width:100%; margin-top:90px;} .mPortfolio_slide .btn_box .play_btn {display:block; width:60px; height:60px; background:#f5f5f6; border-radius:50%; font-size:1.875em; color:#0c0c0d; margin-right:8px;} .mPortfolio_slide .btn_box .play_btn:before {content:'\f04c'; font-size:1em; font-weight:900; font-family:'Font Awesome 6 Pro'} .mPortfolio_slide .btn_box .play_btn.stop:before {content:'\f04b'} .mPortfolio_slide .swiper-pagination {display:flex; justify-content:center; align-items:center; gap:16px; width:fit-content !important; height:60px; border-radius:30px; background:#f5f5f6; position:relative; padding:32px; top:0 !important;} .mPortfolio_slide .swiper-pagination-bullet {width:12px; height:12px; background:#ceced3; border-radius:50%; opacity:1; cursor:none !important;} .mPortfolio_slide .swiper-pagination-bullet-active {background:#3b3b3e;} .mPortfolio_slide .swiper-slide-active:after {opacity:1;} .mPortfolio_slide .swiper-slide-active a {border-radius:0;} @media screen and (max-width:1260px){ .mPortfolio_slide .swiper-slide {padding:3px 28px 0 32px;} .mPortfolio_slide .swiper-slide:after {height:60vw; background-size:contain;} } @media screen and (max-width:1024px){ #mPortfolio {padding-top:250vh;} #mPortfolio > div {padding:17% 0;} #mPortfolio .tit_box {display:block;} #mPortfolio .tit_box div p {font-size:1.5em; margin-bottom:0;} #mPortfolio .tit_box div h2 {font-size:4em;} #mPortfolio .tit_box .txt {font-size:1.25em; margin-top:1.5%;} .mPortfolio_slide {margin-top:8%;} .mPortfolio_slide .swiper-slide {padding:1% 3% 0 4%;} .mPortfolio_slide .txt_box {padding:0 45px 45px;} .mPortfolio_slide .txt_box .tit {font-size:3em;} .mPortfolio_slide .txt_box .txt {font-size:1.25em; margin-top:10px;} .mPortfolio_slide .btn_box {margin-top:5%;} .mPortfolio_slide .btn_box .play_btn {width:44px; height:44px; font-size:1.5em; margin-right:5px;} .mPortfolio_slide .swiper-pagination {gap:10px; height:44px; padding:0 22px;} .mPortfolio_slide .swiper-pagination-bullet {width:9px; height:9px;} } @media screen and (max-width:767px){ #mPortfolio .tit_box div p {font-size:1.3em; margin-bottom:1%;} #mPortfolio .tit_box div h2 {font-size:3em;} #mPortfolio .tit_box .txt {font-size:1em;} .mPortfolio_slide {margin-top:8%;} .mPortfolio_slide .swiper-slide {padding:0; height:120vw;} .mPortfolio_slide .swiper-slide:after {width:120vw; height:88vw; position:relative; left:0; top:0; transform:translate(87vw, 0) rotate(90deg); transform-origin:left top;} .mPortfolio_slide a {width:calc(100% - 6.5vw); height:114vw; margin:3vw 0 0 3vw; position:absolute; left:0; top:0;} .mPortfolio_slide .img {width:100%; height:100%; position:absolute; left:0; top:0; border-radius:15px; overflow:hidden;} .mPortfolio_slide .img img {width:103%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} .mPortfolio_slide .img img:nth-child(1) {display:none;} .mPortfolio_slide .img img:nth-child(2) {display:block;} .mPortfolio_slide .txt_box {padding:0 20px 20px;} .mPortfolio_slide .txt_box .tit {font-size:1.5em;} .mPortfolio_slide .txt_box .txt {font-size:1em;} .mPortfolio_slide .btn_box .play_btn {width:32px; height:32px; font-size:1.125em; margin-right:3px;} .mPortfolio_slide .swiper-pagination {gap:8px; height:32px; padding:0 13px;} .mPortfolio_slide .swiper-pagination-bullet {width:7px; height:7px; margin:0 !important;} } #mResult {padding-top:200px;} #mResult .box {display:flex; align-items:center; width:1560px; margin:80px auto 0; padding:24px 24px 24px 0; position:relative;} #mResult .box:before {content:''; display:block; width:0; height:100%; background:#181819; border-radius:30px; position:absolute; left:0; top:0; z-index:0; opacity:0; transition:all 1.6s ease-in-out; transition-property:width, opacity;} #mResult .box ul {display:flex; justify-content:space-between; align-items:start; width:75%; padding:0 96px; position:relative; z-index:5;} #mResult .box ul li {color:#fff; opacity:0; transform:translateX(-30px); transition:all 0.8s ease-in-out; transition-property:opacity, transform;} #mResult .box ul li > p {font-size:1.125em; font-weight:700; margin-bottom:8px;} #mResult .box ul li .number {display:flex; align-items:start;} #mResult .box ul li .number .count {font-size:6.25em; font-weight:500; line-height:1em;} #mResult .box ul li .number .icon {font-size:2em; font-weight:500;} #mResult .box .view_btn {display:block; width:25%; background:#de234a; border-radius:30px; color:#fff; padding:32px 40px; position:relative; z-index:5; opacity:0; transform:translateX(-30px); transition:all 0.8s ease-in-out; transition-property:opacity, transform;} #mResult .box .view_btn dl dt {font-size:1.125em; font-weight:700; margin-bottom:8px;} #mResult .box .view_btn dl dd {font-size:4.375em; font-weight:500; line-height:1.1em;} #mResult .box .view_btn p {display:flex; justify-content:end; align-items:center; font-size:1.5em; font-weight:700; line-height:1.2em; margin-top:30px;} #mResult .box .view_btn p i {display:flex; justify-content:center; align-items:center; width:24px; height:24px; background:#fff; border-radius:50%; font-size:13px; color:#de234a; margin-right:8px;} #mResult .count {display:inline-flex; line-height:1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum";} #mResult .count .slot-column {display:inline-block; height:1em; overflow:hidden; vertical-align:top; text-align:center;} #mResult .count .slot-strip {display:block;} #mResult .count .slot-strip span {display:block; height:1em; line-height:1em;} #mResult .year-count {display:inline-flex; line-height:1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum";} #mResult .year-count .slot-column {display:inline-block; height:1em; overflow:hidden; vertical-align:top; text-align:center;} #mResult .year-count .slot-strip {display:block;} @media screen and (min-width:1025px){ #mResult .count .slot-strip, #mResult .year-count .slot-strip {will-change:transform;} } #mResult .year-count .slot-strip span {display:block; height:1em; line-height:1em;} #mResult.animated .box:before {width:100%; opacity:1;} #mResult.animated .box ul li {opacity:1; transform:translateX(0)} #mResult.animated .box ul li:nth-child(2) {transition-delay:0.2s} #mResult.animated .box ul li:nth-child(3) {transition-delay:0.4s} #mResult.animated .box ul li:nth-child(4) {transition-delay:0.6s} #mResult.animated .box .view_btn {opacity:1; transform:translateX(0); transition-delay:0.8s;} @media screen and (max-width:1599px){ #mResult .box {width:calc(100% - 100px)} #mResult .box ul {padding:0 50px;} } @media screen and (max-width:1260px){ #mResult .box {width:88%;} #mResult .box ul li .number .count {font-size:6vw;} #mResult .box .view_btn {padding:24px 30px;} #mResult .box .view_btn dl dd {font-size:4vw;} } @media screen and (max-width:1024px){ #mResult {padding-top:17%;} #mResult .box {margin-top:7%; padding:15px 15px 15px 0;} #mResult .box:before {border-radius:20px;} #mResult .box ul {padding:0 30px;} #mResult .box ul li > p {font-size:1em; margin-bottom:5px;} #mResult .box ul li .number .icon {font-size:1.5em;} #mResult .box .view_btn {padding:20px; border-radius:15px;} #mResult .box .view_btn dl dt {font-size:1em; margin-bottom:5px;} #mResult .box .view_btn p {font-size:1.125em;} #mResult .box .view_btn p i {width:20px; height:20px; font-size:10px; margin-right:5px;} } @media screen and (max-width:767px){ #mResult .box {display:block; padding:4% 5%;} #mResult .box ul {display:block; width:100%; padding:0;} #mResult .box ul li {display:flex; justify-content:space-between; align-items:center; margin-bottom:6%;} #mResult .box ul li .number .count {font-size:3em;} #mResult .box .view_btn {width:100%; border-radius:10px;} #mResult .box .view_btn dl dd {font-size:3em;} #mResult .box .view_btn p {margin-top:10px;} #mResult .box .view_btn p i {width:18px; height:18px;} } #mService {margin-top:160px;} #mService ul {display:flex; justify-content:space-between; align-items:start; width:100%; counter-reset:counter;} #mService ul li {width:360px;} #mService ul li:nth-child(even) {margin-top:80px;} #mService ul li:before {content:counter(counter, decimal-leading-zero); counter-increment:counter; display:block; font-size:6.25em; color:rgba(255,255,255,0.05); font-weight:700; margin-bottom:30px;} #mService ul li a {display:block; position:relative;} #mService ul li .file_back {width:calc(100% - 54px); margin:0 auto;} #mService ul li .file_back svg {display:block; width:100%; height:auto;} #mService ul li .img_box {width:calc(100% - 102px); position:absolute; left:50%; transform:translateX(-50%); top:55px; transition:all 0.5s;} #mService ul li .img_box img {display:block; border-radius:10px; transition:all 0.5s} #mService ul li .img_box img:nth-child(1) {width:258px; position:absolute; left:0;} #mService ul li .img_box img:nth-child(2) {width:202px; position:absolute; right:0; top:0; opacity:0;} #mService ul li .file_front {width:100%; position:absolute; left:0; bottom:66px; z-index:3; transition:transform 0.5s ease; backdrop-filter:blur(30px) saturate(2.2) brightness(1.05); -webkit-backdrop-filter:blur(30px) saturate(2.2) brightness(1.05);} #mService ul li .file_front svg {display:block; width:100%; height:auto;} #mService ul li .file_front svg path {fill:rgba(54, 17, 25, 0.35); transition:fill 0.4s;} #mService ul li .txt {font-size:1.875em; color:#fff; font-weight:800; text-align:center; margin-top:30px;} #mService ul li a:hover .img_box {width:100%; top:-30px;} #mService ul li a:hover .img_box img:nth-child(1) {transform:rotate(-12.13deg)} #mService ul li a:hover .img_box img:nth-child(2) {opacity:1; transform:rotate(12.13deg)} @media screen and (max-width:1260px){ #mService ul li {width:calc(33.33% - 20px)} #mService ul li .file_back {width:calc(100% - 40px)} #mService ul li .img_box {width:calc(100% - 80px); top:13%;} #mService ul li .img_box img:nth-child(1) {width:100%;} #mService ul li .img_box img:nth-child(2) {width:80%;} #mService ul li a:hover .img_box img:nth-child(1) {width:calc(100% - 80px)} #mService ul li a:hover .img_box img:nth-child(2) {width:calc(80% - 80px)} } @media screen and (max-width:1024px){ #mService {margin-top:15%;} #mService ul li:before {font-size:5em; margin-bottom:20px;} #mService ul li a .img_box {width:100%; top:-20px; left:50%; transform:translateX(-50%)} #mService ul li a .img_box img:nth-child(1) {width:calc(100% - 80px); transform:rotate(-12.13deg)} #mService ul li a .img_box img:nth-child(2) {width:calc(80% - 80px); opacity:1; transform:rotate(12.13deg)} #mService ul li .file_front {bottom:41px;} #mService ul li .txt {font-size:1.5em; margin-top:15px;} } @media screen and (max-width:767px){ #mService ul {justify-content:center; align-items:center; flex-direction:column; gap:30px;} #mService ul li {width:250px;} #mService ul li:nth-child(2) {margin-top:0;} #mService ul li:before {font-size:4em; margin-bottom:10px;} #mService ul li a {width:calc(100% - 40px); margin:0 auto;} #mService ul li a .img_box {top:0 !important;} #mService ul li a .img_box img:nth-child(1) {width:calc(100% - 50px) !important} #mService ul li a .img_box img:nth-child(2) {width:calc(80% - 50px) !important;} #mService ul li .file_front {bottom:29px;} #mService ul li .txt {font-size:1.25em; margin-top:10px;} } #mCore {width:1560px; margin:0 auto; position:relative;} #mCore:after {content:''; display:block; width:100%; height:100vh; position:sticky; top:0;} #mCore > div {width:1008px; height:100vh; padding-top:160px; position:sticky; top:0;} #mCore > div:nth-child(even) {margin:0 0 0 auto;} #mCore > div:nth-child(2) {top:10vh;} #mCore > div:nth-child(3) {top:20vh;} #mCore > div a {display:block; width:100%; background:#181819; border-radius:20px; position:relative; padding:38px 24px 24px;} #mCore > div .dot {display:flex; align-items:center; gap:8px; height:38px; position:absolute; right:24px; top:0;} #mCore > div .dot span {display:block; width:6px; height:6px; background:#fff; border-radius:6px;} #mCore > div .img_box {width:100%; border-radius:10px; overflow:hidden; position:relative;} #mCore > div .img_box:before {content:''; display:block; width:100%; height:50%; background-image:linear-gradient(to top, #0c0c0d 0%, rgba(12,12,13,0) 100%); position:absolute; left:0; bottom:0; z-index:1; opacity:0.5;} #mCore > div .img_box:after {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(30px); transition:all 0.5s; position:absolute; left:0; top:0; z-index:3; opacity:0;} #mCore > div .img_box img {width:100%;} #mCore > div .txt_box {width:100%; padding:0 80px 80px; position:absolute; left:0; bottom:0; z-index:5;} #mCore > div .txt_box .tit {font-size:3.125em; color:#fff; line-height:1.2em; font-weight:600; font-family:'Poppins';} #mCore > div .txt_box .txt {max-height:0; font-size:1.5em; color:#fff; line-height:1.45em; opacity:0; overflow:hidden; transition:max-height 0.5s, opacity 0.5s, margin 0.5s;} @media screen and (min-width:1025px){ #mCore > div a:hover .img_box:after, #mCore > div.on a .img_box:after {opacity:1;} #mCore > div a:hover .txt_box .txt, #mCore > div.on a .txt_box .txt {max-height:2.9em; opacity:1; margin-top:16px;} } @media screen and (max-width:1599px){ #mCore {width:calc(100% - 100px)} } @media screen and (max-width:1240px){ #mCore {width:88%;} #mCore > div {width:80%;} } @media screen and (max-width:1024px){ #mCore > div {padding-top:20%;} #mCore > div a {border-radius:15px; padding:30px 15px 15px;} #mCore > div .dot {height:30px; right:15px; gap:6px;} #mCore > div .dot span {width:4px; height:4px;} #mCore > div .txt_box {padding:0 35px 35px;} #mCore > div .txt_box .tit {font-size:2.2em;} #mCore > div .txt_box .txt {font-size:1.2em; max-height:100%; opacity:1; margin-top:10px;} } @media screen and (max-width:767px){ #mCore {padding:17% 0;} #mCore:after {display:none;} #mCore > div {width:100%; height:auto; padding-top:0; position:relative; margin-bottom:2% !important;} #mCore > div:last-child {margin-bottom:0 !important;} #mCore > div:nth-child(2) {top:0;} #mCore > div:nth-child(3) {top:0;} #mCore > div a {border-radius:10px; padding:20px 10px 10px;} #mCore > div .dot {height:20px; right:10px;} #mCore > div .dot span {width:3px; height:3px;} #mCore > div .img_box {border-radius:5px;} #mCore > div .txt_box {padding:5% 0; position:relative;} #mCore > div .txt_box .tit {font-size:1.5em;} #mCore > div .txt_box .txt {font-size:1em; line-height:1.55em;} #mCore > div .txt_box .txt br {display:none} } #mPartner {width:100%; padding:200px 0;} #mPartner .box {width:100%; margin-top:120px; border-top:1px solid #ceced3;} #mPartner .box > div {width:100%; border-bottom:1px solid #ceced3; overflow:hidden; padding:80px 0;} #mPartner .box > div > div {display:flex; align-items:center; flex-shrink:0; width:max-content;} #mPartner .box > div > div > * {margin-right:80px; flex-shrink:0;} #mPartner .box > div img {display:block; height:70px;} #mPartner .box > div p {font-size:3.125em; color:#3b3b3e; white-space:nowrap;} #mPartner .box > div p.fw_700 {color:#0c0c0d;} #mPartner .view_btn {display:flex; justify-content:center; align-items:center; width:235px; height:83px; border-radius:50px; margin:80px auto 0; position:relative; overflow:hidden; will-change:transform;} #mPartner .view_btn:before {content:''; display:block; width:100%; height:100%; border-radius:50px; border:1px solid #ceced3; position:absolute; left:0; top:0; right:0; bottom:0;} #mPartner .view_btn .txt {display:block; position:relative; z-index:2; overflow:hidden;} #mPartner .view_btn .txt span {display:block; font-size:1.5em; font-family:'Poppins'; text-align:center; transform-origin:left top; transition:color 0.2s, transform 0.4s;} #mPartner .view_btn .txt span:after {content:attr(data-text); display:block; color:#fff; position:absolute; left:0; top:150%; transform:skewY(5deg); transform-origin:left top; transition:transform 0.4s;} #mPartner .view_btn .ripple {display:block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; overflow:hidden; transform:translateZ(0); border-radius:inherit;} #mPartner .view_btn .ripple span {display:block; width:100%; height:100%; background:#de234a; border-radius:50%; transform:translateY(105%); transition:transform 0.5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1)} #mPartner .view_btn:hover .txt span {color:#fff; transform:translateY(-150%) skewY(-7deg)} #mPartner .view_btn:hover .txt span:after {transform:skewY(7deg)} #mPartner .view_btn:hover .ripple span {border-radius:0; transform:translateY(0); transition-duration:0s, 0s; animation:mPartner_ripple 0.5s cubic-bezier(0.4, 0, 0, 1);} @keyframes mPartner_ripple { 0% { border-radius: 100%; transform: translateY(-105%) translateZ(0); } 100% { border-radius: 0; transform: translateY(0) translateZ(0); } } @media screen and (max-width:1024px){ #mPartner {padding:17% 0;} #mPartner .box {margin-top:8%;} #mPartner .box > div {padding:7% 0;} #mPartner .box > div > div > * {margin-right:50px;} #mPartner .box > div img {height:50px;} #mPartner .box > div p {font-size:2.4em;} #mPartner .view_btn {width:180px; height:65px; margin-top:50px;} #mPartner .view_btn .txt span {font-size:1.3em;} } @media screen and (max-width:767px){ #mPartner .box > div {padding:6% 0;} #mPartner .box > div > div > * {margin-right:30px;} #mPartner .box > div img {height:28px;} #mPartner .box > div p {font-size:1.4em;} #mPartner .view_btn {width:135px; height:45px; margin-top:30px;} #mPartner .view_btn .txt span {font-size:1.125em;} } #mMerit {width:100%; height:300vh; background:#de234a; position:relative} #mMerit > div {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;} #mMerit > div > div {width:1560px; position:relative; padding-left:474px;} #mMerit > div > div .tit_box {width:474px; padding-top:30px; position:absolute; left:0; top:0;} #mMerit > div > div .tit_box .tit {font-size:3.125em; color:#fff; line-height:1.2em; font-family:'Poppins'} #mMerit > div > div .tit_box .txt {font-size:1.5em; color:#fff; line-height:1.45em; font-weight:800; margin-top:40px;} #mMerit > div > div .txt_box {position:absolute; right:30px; bottom:40px;} #mMerit > div > div .txt_box .txt {font-size:1.5em; color:#fff; line-height:1.45em; font-weight:800;} #mMerit > div > div .txt_box .tit {font-size:3.125em; color:#fff; line-height:1.2em; font-family:'Poppins'; margin-top:40px;} .mMerit_slide {width:fit-content; position:relative; z-index:30;} .mMerit_slide .swiper-wrapper {align-items:end;} .mMerit_slide .swiper-slide {width:520px; margin-right:40px; transition:transform 0.5s;} .mMerit_slide a {display:block; width:100%; background:#fff; border-radius:30px; padding:56px; transition:transform 0.5s; overflow:hidden;} .mMerit_slide a:after {content:'\f061'; display:flex; justify-content:center; align-items:center; width:80px; height:80px; background:#de234a; border-radius:50%; font-size:1.875em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; margin-top:40px;} .mMerit_slide a:hover:after {animation:mMerit_arrow 0.7s;} .mMerit_slide .icon {display:block; width:calc(100% - 25px); height:140px; background-repeat:no-repeat; background-position:right center; background-size:auto 100%; margin-bottom:95px;} .mMerit_slide dl dt {font-size:2.5em; font-weight:800; line-height:1.2em;} .mMerit_slide dl dd {font-size:1.5em; color:#3b3b3e; line-height:1.45em; margin-top:15px} .mMerit_slide .icon1 {background-image:url(../images/mMerit_icon1.png)} .mMerit_slide .icon2 {background-image:url(../images/mMerit_icon2.png)} .mMerit_slide .icon3 {background-image:url(../images/mMerit_icon3.png)} .mMerit_slide .icon4 {background-image:url(../images/mMerit_icon4.png)} .mMerit_slide .icon5 {background-image:url(../images/mMerit_icon5.png)} .mMerit_slide .icon6 {background-image:url(../images/mMerit_icon6.png)} @keyframes mMerit_arrow { 0% {transform:translateX(0); animation-timing-function:ease-in;} 45% {transform:translateX(450px); animation-timing-function:step-start;} 46% {transform:translateX(-120px); animation-timing-function:ease-out;} 100% {transform:translateX(0);} } @media screen and (min-width:1025px){ .mMerit_slide .swiper-slide:nth-child(2) {transform:translate(0, -4.6%) rotate(4.5deg)} .mMerit_slide .swiper-slide:nth-child(3) {transform:translate(0, 3.6%) rotate(-7.3deg)} .mMerit_slide .swiper-slide:nth-child(4) {transform:translate(0, -10%) rotate(10deg)} .mMerit_slide .swiper-slide:nth-child(5) {transform:translate(0, 5%) rotate(-10deg)} .mMerit_slide .swiper-slide:nth-child(6) {transform:translate(0, -10%) rotate(10deg)} .mMerit_slide .swiper-slide:hover {transform:translate(0) rotate(0) !important} .mMerit_slide .swiper-slide.prev_on a {transform:translateX(-20px)} .mMerit_slide .swiper-slide.next_on a {transform:translateX(20px)} } @media screen and (max-width:1599px){ #mMerit > div > div {width:calc(100% - 100px)} } @media screen and (max-width:1240px){ #mMerit > div > div {width:88%} } @media screen and (max-width:1024px){ #mMerit {height:auto; padding:17% 0;} #mMerit > div {height:auto; position:relative;} #mMerit > div > div {padding-left:0;} #mMerit > div > div .tit_box {width:100%; padding-top:0; position:relative; margin-bottom:5%;} #mMerit > div > div .tit_box .tit {font-size:2.6em;} #mMerit > div > div .tit_box .txt {font-size:1.3em; margin-top:2%;} #mMerit > div > div .tit_box .txt br {display:none;} #mMerit > div > div .txt_box {display:none;} .mMerit_slide {width:430px;} .mMerit_slide a {border-radius:15px; padding:35px;} .mMerit_slide a:after {width:55px; height:55px; font-size:1.5em; margin-top:25px;} .mMerit_slide .icon {width:100%; height:90px; margin-bottom:50px;} .mMerit_slide dl dt {font-size:2em;} .mMerit_slide dl dd {font-size:1.3em; margin-top:10px;} } @media screen and (max-width:767px){ #mMerit > div > div .tit_box .tit {font-size:2.2em;} #mMerit > div > div .tit_box .txt {font-size:1.125em; font-weight:400;} #mMerit > div > div .tit_box .txt br {display:none;} .mMerit_slide {width:290px;} .mMerit_slide a {border-radius:10px; padding:20px;} .mMerit_slide a:after {width:32px; height:32px; font-size:1.125em; margin-top:20px;} .mMerit_slide .icon {height:55px; margin-bottom:30px;} .mMerit_slide dl dt {font-size:1.3em;} .mMerit_slide dl dd {font-size:1em; margin-top:5px;} } #mSolution {width:100%; overflow:hidden; padding:200px 0;} .mSolution_slide {display:block; width:1560px; margin:80px auto 0;} .mSolution_slide .box {display:flex; justify-content:space-between; align-items:center; flex-direction:column; width:100%; height:600px; background:#fff; border:2px solid #ceced3; border-radius:20px; overflow:hidden; padding:56px 35px;} .mSolution_slide .top_box {display:none; width:100%;} .mSolution_slide .top_box .tit {font-size:1.25em; font-weight:600; font-family:'Poppins'} .mSolution_slide .top_box .num {font-size:6.25em; font-weight:500; line-height:1.1em; opacity:0.2;} .mSolution_slide .txt_box {width:100%; opacity:0; animation:mSolutionTxt2 0.8s 0.4s forwards;} .mSolution_slide .txt_box .tit {width:100%; font-size:2.1875em; line-height:1.2em; font-weight:800; white-space:nowrap;} .mSolution_slide .txt_box .tit span {display:block; font-size:0.57em; color:#ed234a; font-weight:600; line-height:1.2em; font-family:'Poppins';} .mSolution_slide .txt_box .txt {font-size:1.5em; line-height:1.45em; margin-top:16px;} .mSolution_slide .btm_box {flex-shrink:0; max-height:50px; opacity:0; animation:mSolutionTxt2 0.8s 0.4s forwards;} .mSolution_slide .btm_box img {height:100%;} @keyframes mSolutionTxt { 0% {opacity:0; transform:translateX(-10%)} 100% {opacity:1; transform:translateX(0%)} } @keyframes mSolutionTxt2 { 0% {opacity:0;} 100% {opacity:1;} } @media screen and (min-width:1025px){ .mSolution_slide .swiper-wrapper {display:flex; gap:16px; transform:none !important;} .mSolution_slide .swiper-slide {flex:1; min-width:0; width:auto; transition:flex 0.4s cubic-bezier(0.4, 0, 0, 1);} .mSolution_slide .swiper-slide:not(.on) .txt_box {flex:1;} .mSolution_slide .top_box .tit {color:#fff;} .mSolution_slide .top_box .num {color:#fff;} .mSolution_slide .txt_box .tit {transform:rotate(90deg)} .mSolution_slide .txt_box .txt {display:none; color:#fff;} .mSolution_slide .swiper-slide.on {flex:3;} .mSolution_slide .swiper-slide.on .box {background:#de234a; border-color:#de234a; padding:56px;} .mSolution_slide .swiper-slide.on .top_box {display:flex; justify-content:space-between; align-items:start; opacity:0; animation:mSolutionTxt 0.3s 0.4s forwards;} .mSolution_slide .swiper-slide.on .txt_box {opacity:0; animation:mSolutionTxt 0.3s 0.4s forwards;} .mSolution_slide .swiper-slide.on .txt_box .tit {transform:rotate(0); font-size:2.5em; color:#fff;} .mSolution_slide .swiper-slide.on .txt_box .tit span {display:none;} .mSolution_slide .swiper-slide.on .txt_box .txt {display:block;} .mSolution_slide .swiper-slide.on .btm_box {display:none;} } @media screen and (min-width: 1025px) and (max-width: 1240px){ .mSolution_slide .swiper-wrapper {gap:10px;} .mSolution_slide .box {height:450px; padding:30px;} .mSolution_slide .top_box .tit {font-size:1.125em;} .mSolution_slide .top_box .num {font-size:5em;} .mSolution_slide .txt_box .tit {font-size:1.7em;} .mSolution_slide .txt_box .txt {font-size:1.125em; margin-top:10px;} .mSolution_slide .btm_box {max-height:40px;} .mSolution_slide .swiper-slide.on a {padding:30px;} .mSolution_slide .swiper-slide.on .txt_box .tit {font-size:2em;} } @media screen and (max-width:1599px){ .mSolution_slide {width:calc(100% - 100px)} } @media screen and (max-width:1240px){ .mSolution_slide {width:88%} } @media screen and (max-width:1024px){ #mSolution {padding:17% 0;} .mSolution_slide {width:500px; margin-top:7%} .mSolution_slide .swiper-slide {border-radius:15px; overflow:hidden;} .mSolution_slide .box {height:350px; border-radius:15px; padding:30px;} .mSolution_slide .top_box {display:flex; justify-content:space-between; align-items:start;} .mSolution_slide .top_box .tit {font-size:1.125em; color:#fff;} .mSolution_slide .top_box .num {font-size:4em; color:#fff;} .mSolution_slide .txt_box {opacity:1; animation:none;} .mSolution_slide .txt_box .tit {font-size:1.7em; color:#fff;} .mSolution_slide .txt_box .tit span {display:none;} .mSolution_slide .txt_box .txt {font-size:1.125em; color:#fff; margin-top:10px;} .mSolution_slide .btm_box {display:none;} .mSolution_slide .swiper-slide-shadow {display:none;} .mSolution_slide .swiper-slide-active .box {background:#de234a; border-color:#de234a;} } @media screen and (max-width:767px){ #mSolution .main_title .t2 {font-size:2.2em;} .mSolution_slide {width:70%; max-width:270px;} .mSolution_slide .box {height:300px; padding:20px;} .mSolution_slide .txt_box .tit {font-size:1.5em;} .mSolution_slide .txt_box .txt {font-size:1em; margin-top:5px;} } /* sub */ .sub_title h2 {font-size:1.875em; color:#de234a; line-height:1.2em; font-weight:600; font-family:'Poppins', 'Asta Sans'; margin-bottom:20px;} .sub_title .tit {font-size:5.625em; line-height:1.11em; font-weight:800;} .s_tit1 {font-size:3.125em; line-height:1.2em; font-weight:800;} .s_tit1.case2 {font-weight:600; font-family:'Poppins', 'Asta Sans';} .s_txt1 {font-size:1.875em; line-height:1.33em;} .s_txt2 {font-size:1.5em; color:#3b3b3e; line-height:1.45em;} @media screen and (max-width:1024px){ .sub_title h2 {font-size:1.5em; margin-bottom:2%;} .sub_title .tit {font-size:4em;} .s_tit1 {font-size:2.7em;} .s_txt1 {font-size:1.5em;} .s_txt2 {font-size:1.3em;} } @media screen and (max-width:767px){ .sub_title h2 {font-size:1.3em;} .sub_title .tit {font-size:2.2em;} .s_tit1 {font-size:2em;} .s_txt1 {font-size:1.125em; line-height:1.5em;} .s_txt2 {font-size:1em; line-height:1.5em;} } .colorful-transition {position:fixed; left:0; top:0; width:100%; height:100%; z-index:99999; pointer-events:none;} .colorful-transition canvas {display:block; width:100%; height:100%;} .scroll_box {display:none;} @keyframes moveScrollAni { 0%, 10% { left: 0; margin-left: 0px; } 50% { left: 100%; margin-left: -20px; } 100% { left: 0; margin-left: 0px; } } @media screen and (max-width:767px){ .scroll_box {display:flex; justify-content:end; margin-bottom:2%;} .scroll_box p {font-size:0.875em; color:#666; margin-right:10px;} .scroll_box div {width:50px; position:relative; margin-top:2px;} .scroll_box div:before {content:''; display:block; width:100%; height:3px; background:#ccc; border-radius:5px; position:absolute; left:4px; right:0;} .scroll_box div i {display:block; width:25px; font-size:1.5em; color:#aaa; text-align:center; position:relative; margin-top:-1px; padding-top:10px; animation:moveScrollAni 3s both infinite;} .scroll_box div i:after {content:''; display:block; width:100%; height:5px; background:rgba(0,0,0,0.7); border-radius:5px; position:absolute; left:0; top:0;} } .sCompany_case1 {width:100%; height:250vh; background:#0c0c0d; position:relative;} .sCompany_case1 > div {width:100%; height:100vh; position:sticky; left:0; top:0;} .sCompany_case1 > div .txt_box {display:flex; align-items:flex-end; font-size:9.375em; color:#fff; font-weight:600; font-family:'Poppins'; line-height:1.2em; position:absolute; top:50%; left:50%; transform:translateY(-50%); z-index:1; margin-left:-780px;} .sCompany_case1 > div .txt_box p {overflow:hidden;} .sCompany_case1 > div .txt_box p span {display:block; transform:translateY(100px); opacity:0; animation:sCompanyTopTxt 0.7s forwards;} .sCompany_case1 > div .txt_box p:last-of-type {position:absolute; left:100%; margin-left:167px; transform:translateX(30%)} .sCompany_case1 > div .img_box {width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden; will-change:width, height, top, left, transform; opacity:0; animation:sCompanyTopImg 0.7s 2s forwards;} .sCompany_case1 > div .img_box:before {content:''; display:block; width:100%; height:100%; background:url(../images/sCompany_top.jpg) no-repeat center center; background-size:cover;} .sCompany_case1 > div .txt_box p:nth-child(1) span:nth-child(1) {animation-delay:2.2s;} .sCompany_case1 > div .txt_box p:nth-child(1) span:nth-child(2) {animation-delay:2.4s;} .sCompany_case1 > div .txt_box p:nth-child(2) span:nth-child(1) {animation-delay:2.6s;} .sCompany_case2 {margin-top:240px;} .sCompany_case3 {width:100%; height:350vh; position:relative;} .sCompany_case3 > div {width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;} .sCompany_case3 .intro {display:flex; justify-content:center; align-items:center; width:100%; height:100%;} .sCompany_case3 .intro > div > div {display:block; width:fit-content; margin:0 auto; position:relative;} .sCompany_case3 .intro p {font-size:3.125em; line-height:1.4em; font-weight:800; text-align:center;} .sCompany_case3 .intro p:first-child {color:rgba(2, 2, 2, 0.3)} .sCompany_case3 .intro p:last-child {position:absolute; left:0; top:0; width:0; overflow:hidden; white-space:nowrap;} .sCompany_case3 .core {display:flex; width:100%; height:100%; background:#fff; position:absolute; left:0; top:0; transform:translateY(100%); opacity:0; transition:transform 0.5s, opacity 0.5s;} .sCompany_case3 .core > div {width:33.33%; height:100%; transition:transform 0.5s, opacity 0.5s; position:relative;} .sCompany_case3 .core > div:nth-child(1) ~ div {transform:translateY(100%); opacity:0;} .sCompany_case3 .core > div .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; z-index:0;} .sCompany_case3 .core > div .img_box:before {content:''; display:block; width:100%; height:100%; background-image:linear-gradient(to top, #0c0c0d 0%, rgba(12,12,13,0) 100%); opacity:0.7;} .sCompany_case3 .core > div .txt_box {display:flex; justify-content:center; align-items:center; color:#fff; text-align:center; width:100%; height:100%; position:relative; z-index:3; padding:0 20px;} .sCompany_case3 .core > div .txt_box .tit {font-size:3.125em; line-height:1.2em; font-weight:600; font-family:'Poppins'} .sCompany_case3 .core > div .txt_box .txt {width:100%; font-size:1.5em; line-height:1.45em; font-weight:600; position:absolute; left:0; bottom:160px;} .sCompany_case3 .intro.active p:last-child {width:100%; transition:width 0.7s linear;} .sCompany_case3 .intro.active > div > div:nth-child(2) p:last-child {transition-delay:0.7s;} .sCompany_case3 .intro.active > div > div:nth-child(3) p:last-child {transition-delay:1.4s;} .sCompany_case3 .intro.active > div > div:nth-child(4) p:last-child {transition-delay:2.1s;} .sCompany_case3 .core.on {transform:translateY(0); opacity:1;} .sCompany_case3 .core > div.on {transform:translateY(0) !important; opacity:1 !important;} .sCompany_case4 {display:flex; justify-content:space-between; align-items:start; padding-top:240px;} .sCompany_case4 > div {width:723px;} .sCompany_case4 > div > div {margin-bottom:55px;} .sCompany_case4 > div > div:last-child {margin-bottom:0;} .sCompany_case4 > div > div button {display:flex; justify-content:space-between; align-items:center; width:100%; border-bottom:1px solid #ceced3; font-size:3.125em; font-weight:800; padding-bottom:23px; padding-right:24px;} .sCompany_case4 > div > div button:after {content:'\f107'; font-size:0.6em; color:#3b3b3e; font-weight:400; font-family:'Font Awesome 6 Pro'} .sCompany_case4 > div > div button.on:after {content:'\f106'} .sCompany_case4 > div > div > div {display:none;} .sCompany_case4 > div > div > div ul {width:100%; padding:24px 0;} .sCompany_case4 > div > div > div ul li {font-size:1.5em; color:#3b3b3e; line-height:1.4em; padding-left:37px; position:relative; margin-bottom:13px;} .sCompany_case4 > div > div > div ul li:last-child {margin-bottom:0;} .sCompany_case4 > div > div > div ul li:before {content:''; width:6px; height:6px; background:#3b3b3e; border-radius:50%; position:absolute; left:15px; top:13px;} .sCompany_case5 {width:100%; padding-top:240px; overflow:hidden;} .sCompany_case5 .tit_box {position:relative;} .sCompany_case5 .tit_box .img_box {display:flex; gap:40px; position:absolute; right:0; top:0;} .sCompany_case5 .tit_box .img_box p {width:200px;} .sCompany_case5 .tit_box .img_box p img {width:100%;} .sCompany_case6 {padding-top:240px;} .sCompany_case6 .tit_box {position:relative; padding-right:210px;} .sCompany_case6 .s_txt2 {display:flex; flex-wrap:wrap; gap:5px 24px;} .sCompany_case6 .s_txt2 b {color:#0c0c0d; font-weight:800; margin-right:12px;} .sCompany_case6 .more_btn {display:block; width:fit-content; background:#de234a; border-radius:50px; font-size:1.5em; color:#fff; font-weight:700; padding:24px 40px; transition:background 0.5s; position:absolute; right:0; bottom:0;} .sCompany_case6 .more_btn:hover {background:#0c0c0d;} .sCompany_case6 .map_cont {width:100%; height:640px; background:#000; margin-top:80px;} #map {width: 100%; height: 100%; background: #000 !important;} .sCompany_case6 .map_cont img {filter: grayscale(100%) invert(100%) contrast(1.2) brightness(0.7) hue-rotate(180deg) !important; -webkit-filter: grayscale(100%) invert(100%) contrast(1.2) brightness(0.7) hue-rotate(180deg) !important;} .sCompany_case6 .map_cont img[src*="marker.png"] {filter: none !important; -webkit-filter: none !important;} .sCompany_case6 .map_cont .custom_typecontrol, .sCompany_case6 .map_cont .custom_zoomcontrol {filter: none !important;} .sCompany_slide1 {margin-top:80px;} .sCompany_slide1 img {width:100%; border:1px solid #ceced3;} .sCompany_slide1 p {font-size:1.25em; color:#3b3b3e; line-height:1.5em; text-align:center; margin-top:20px;} @keyframes sCompanyTopTxt { 0% {transform:translateY(100px); opacity:0;} 100% {transform:translateY(0); opacity:1;} } @keyframes sCompanyTopImg { 0% {opacity:0;} 100% {opacity:1;} } @media screen and (max-width:1599px){ .sCompany_case1 > div .txt_box {font-size:6em; left:50px; margin-left:0;} .sCompany_case1 > div .txt_box p:last-of-type {margin-left:140px;} } @media screen and (max-width:1240px){ .sCompany_case5 .tit_box .img_box {gap:30px;} .sCompany_case5 .tit_box .img_box p {width:150px;} } @media screen and (max-width:1024px){ .sCompany_case1 > div .txt_box {width:88%; left:6%;} .sCompany_case1 > div .txt_box {display:block; font-size:5em;} .sCompany_case1 > div .txt_box p {display:block; width:fit-content} .sCompany_case1 > div .txt_box p:last-child {position:relative; left:0; margin-left:0;} .sCompany_case1 > div .img_box {animation-delay:0s;} .sCompany_case1 > div .txt_box p:nth-child(1) span:nth-child(1) {animation-delay:0.2s;} .sCompany_case1 > div .txt_box p:nth-child(1) span:nth-child(2) {animation-delay:0.4s;} .sCompany_case1 > div .txt_box p:nth-child(2) span:nth-child(1) {animation-delay:0.6s;} .sCompany_case2 {margin-top:17%;} .sCompany_case3 .intro p {font-size:2.7em;} .sCompany_case3 .core {display:block; width:100%;} .sCompany_case3 .core > div {width:100%;} .sCompany_case3 .core > div:nth-child(1) ~ div {position:absolute; left:0; top:0; z-index:5;} .sCompany_case3 .core > div .txt_box .tit {font-size:2.7em;} .sCompany_case3 .core > div .txt_box .txt {font-size:1.25em; padding:0 20px; bottom:100px;} .sCompany_case4 {padding-top:17%;} .sCompany_case4 > div {width:calc(100% - 150px)} .sCompany_case4 > div > div {margin-bottom:6%;} .sCompany_case4 > div > div button {font-size:2.7em; padding-bottom:10px; padding-right:10px;} .sCompany_case4 > div > div > div ul {padding:15px 0;} .sCompany_case4 > div > div > div ul li {font-size:1.25em; padding-left:25px; margin-bottom:10px;} .sCompany_case4 > div > div > div ul li:before {width:4px; height:4px; left:10px; top:10px;} .sCompany_case5 {padding-top:17%;} .sCompany_case5 .tit_box .img_box {display:none;} .sCompany_case6 {padding-top:17%;} .sCompany_case6 .tit_box {padding-right:170px;} .sCompany_case6 .more_btn {font-size:1.3em; padding:18px 30px;} .sCompany_case6 .map_cont {height:500px; margin-top:5%;} .sCompany_slide1 {margin-top:5%;} .sCompany_slide1 p {font-size:1.125em; margin-top:10px;} } @media screen and (max-width:767px){ .sCompany_case1 > div .txt_box {font-size:4em;} .sCompany_case1 > div .txt_box p {display:block; width:fit-content} .sCompany_case1 > div .img_box {width:calc(88% - 140px); height:50px; left:calc(6% + 140px); top:50%; transform:translate(0, -50%)} .sCompany_case3 .intro p {font-size:1.7em;} .sCompany_case3 .core > div .txt_box {flex-direction:column;} .sCompany_case3 .core > div .txt_box .tit {font-size:2.2em;} .sCompany_case3 .core > div .txt_box .txt {font-size:1.125em; position:relative; bottom:0; margin-top:3%; padding:0;} .sCompany_case4 {display:block;} .sCompany_case4 > div {width:100%; margin-top:4%;} .sCompany_case4 > div > div {margin-bottom:4%;} .sCompany_case4 > div > div button {font-size:1.5em; padding-bottom:7px; padding-right:7px;} .sCompany_case4 > div > div > div ul li {font-size:1em; padding-left:15px; margin-bottom:7px;} .sCompany_case4 > div > div > div ul li:before {width:3px; height:3px; left:6px; top:7px;} .sCompany_case6 .tit_box {padding-right:0;} .sCompany_case6 .s_txt2 {gap:3px 15px;} .sCompany_case6 .s_txt2 b {margin-right:7px;} .sCompany_case6 .more_btn {font-size:1em; padding:12px 15px; position:relative; margin-top:15px;} .sCompany_case6 .map_cont {height:220px;} .sCompany_slide1 p {font-size:1.125em;} } .sBusiness_top {width:100%; background:#0c0c0d; padding:320px 0 240px; overflow:hidden; animation:sBusinessTopBG 0.4s forwards 2s} .sBusiness_top > div {position:relative; padding-top:360px;} .sBusiness_top .tit {font-size:9.375em; color:#fff; line-height:1.1em; font-family:'Poppins'; text-align:center; position:absolute; top:0; right:50%; margin-right:-620px;} .sBusiness_top .tit p:nth-child(1) {transform:translateY(-200px); opacity:0; animation:sBusinessTopDown 0.8s forwards 2.2s} .sBusiness_top .tit p:nth-child(2) {transform:translateX(-200px); opacity:0; animation:sBusinessTopLeft 0.8s forwards 2.2s} .sBusiness_top .tit p:nth-child(3) {transform:translateX(200px); opacity:0; animation:sBusinessTopRight 0.8s forwards 2.2s} .sBusiness_top .tit p:nth-child(4) {transform:translateY(200px); opacity:0; animation:sBusinessTopUp 0.8s forwards 2.2s} .sBusiness_top .txt_box {transform:translateY(200px); opacity:0; animation:sBusinessTopUp 1.2s forwards 2.2s} .sBusiness_top .txt_box p {color:#fff;} .sBusiness_top .txt_box .s_tit1 {margin-bottom:40px;} @keyframes sBusinessTopBG { 0% {background:#0c0c0d;} 100% {background:#de234a;} } @keyframes sBusinessTopDown { 0% {transform:translateY(-200px); opacity:0;} 100% {transform:translateY(0); opacity:1;} } @keyframes sBusinessTopUp { 0% {transform:translateY(200px); opacity:0;} 100% {transform:translateY(0); opacity:1;} } @keyframes sBusinessTopLeft { 0% {transform:translateX(-200px); opacity:0;} 100% {transform:translateX(0); opacity:1;} } @keyframes sBusinessTopRight { 0% {transform:translateX(200px); opacity:0;} 100% {transform:translateX(0); opacity:1;} } @media screen and (max-width:1599px){ .sBusiness_top .tit {font-size:8em; right:50px; margin-right:0;} .sBusiness_top .txt_box {width:45%} .sBusiness_top .txt_box .s_txt1 .mo_br {display:none;} } @media screen and (max-width:1240px){ .sBusiness_top {padding:270px 0 240px;} .sBusiness_top > div {padding-top:300px;} .sBusiness_top .tit {font-size:7em; right:6%;} } @media screen and (max-width:1024px){ .sBusiness_top {padding:150px 0 17%; animation-delay:0s;} .sBusiness_top > div {padding-top:350px;} .sBusiness_top .tit {font-size:6em;} .sBusiness_top .tit p {animation-delay:0.2s !important;} .sBusiness_top .txt_box {width:60%; animation-delay:0.4s} .sBusiness_top .txt_box .s_tit1 {margin-bottom:20px;} } @media screen and (max-width:767px){ .sBusiness_top {padding-top:25%;} .sBusiness_top > div {padding-top:0;} .sBusiness_top .tit {font-size:11vw; position:relative; right:0;} .sBusiness_top .txt_box {width:100%; margin-top:15%;} } .sBusiness_case1 {padding-top:160px;} .sBusiness_case1 ul {display:flex; gap:40px; flex-wrap:wrap; width:100%;} .sBusiness_case1 ul li {width:calc(20% - 32px)} .sBusiness_case1 ul li .icon {display:block; width:100%; height:0; padding-bottom:100%; background-color:#f5f5f6; background-repeat:no-repeat; background-position:center center; background-size:104px auto; border-radius:30px;} .sBusiness_case1 ul li p {font-size:1.5em; color:#3b3b3e; line-height:1.4em; text-align:center; margin-top:15px;} .sBusiness_case1 ul li .icon1 {background-image:url(../images/sBusiness_img1_1.png)} .sBusiness_case1 ul li .icon2 {background-image:url(../images/sBusiness_img1_2.png)} .sBusiness_case1 ul li .icon3 {background-image:url(../images/sBusiness_img1_3.png)} .sBusiness_case1 ul li .icon4 {background-image:url(../images/sBusiness_img1_4.png)} .sBusiness_case1 ul li .icon5 {background-image:url(../images/sBusiness_img1_5.png)} .sBusiness_case1 ul li .icon6 {background-image:url(../images/sBusiness_img1_6.png)} .sBusiness_case1 ul li .icon7 {background-image:url(../images/sBusiness_img1_7.png)} .sBusiness_case1 ul li .icon8 {background-image:url(../images/sBusiness_img1_8.png)} .sBusiness_case1 ul li .icon9 {background-image:url(../images/sBusiness_img1_9.png)} .sBusiness_case1 ul li .icon10 {background-image:url(../images/sBusiness_img1_10.png)} .sBusiness_case1 ul li .icon11 {background-image:url(../images/sBusiness_img1_11.png)} .sBusiness_case1 ul li .icon12 {background-image:url(../images/sBusiness_img1_12.png)} .sBusiness_case1 ul li .icon13 {background-image:url(../images/sBusiness_img1_13.png)} .sBusiness_case1 ul li .icon14 {background-image:url(../images/sBusiness_img1_14.png)} .sBusiness_case1 ul li .icon15 {background-image:url(../images/sBusiness_img1_15.png)} .sBusiness_case1 ul li .icon16 {background-image:url(../images/sBusiness_img1_16.png)} .sBusiness_case1 ul li .icon17 {background-image:url(../images/sBusiness_img1_17.png)} .sBusiness_case1 ul li .icon18 {background-image:url(../images/sBusiness_img1_18.png)} .sBusiness_case1 ul li .icon19 {background-image:url(../images/sBusiness_img1_19.png)} .sBusiness_case1 ul li .icon20 {background-image:url(../images/sBusiness_img1_20.png)} .sBusiness_case2 {padding-top:160px; overflow:hidden;} .sBusiness_case3 {width:100%; padding-top:240px; overflow:hidden;} .sBusiness_case3 .box {width:100%; margin-top:160px; position:relative;} .sBusiness_case3 .box .tit {display:flex; align-items:center; width:100%; height:182px; font-size:3.125em; color:#fff; font-weight:800; position:absolute; left:0; top:0; transition:top 0.5s;} .sBusiness_case3 .box .tit:before {content:''; display:block; width:100vw; height:100%; background:#de234a; position:absolute; left:50%; top:0; transform:translateX(-50%)} .sBusiness_case3 .box .tit span {position:relative; z-index:5;} .sBusiness_case3 .box > div {padding-left:675px; position:relative; z-index:10;} .sBusiness_case3 .box > div > div {width:100%; height:182px;} .sBusiness_case3 .box > div > div dl {display:flex; justify-content:center; align-items:center; width:100%; height:100%; border-bottom:1px solid #ceced3;} .sBusiness_case3 .box > div > div dl dt {width:410px; font-size:3.125em; font-weight:800; transition:color 0.5s;} .sBusiness_case3 .box > div > div dl dd {width:calc(100% - 410px); font-size:1.5em; color:#3b3b3e; line-height:1.45em; transition:color 0.5s;} .sBusiness_case3 .box > div > div dl dd.view_txt {display:none;} .sBusiness_case4 {padding-top:240px;} .sBusiness_case4 ul {display:flex; flex-wrap:wrap; gap:16px; width:100%; margin-top:80px;} .sBusiness_case4 ul li {width:calc(33.33% - 10.66px); text-align:center;} .sBusiness_case4 ul li img {max-width:80%;} @media screen and (min-width:1025px){ .sBusiness_case3 .box > div > div.on dl dt, .sBusiness_case3 .box > div > div.on dl dd {color:#fff;} } @media screen and (max-width:1599px){ .sBusiness_case3 .box > div {padding-left:350px;} .sBusiness_case3 .box > div > div dl dd br {display:none;} } @media screen and (max-width:1260px){ .sBusiness_case1 ul {gap:30px;} .sBusiness_case1 ul li {width:calc(20% - 24px)} .sBusiness_case3 .box > div {padding-left:300px;} .sBusiness_case3 .box > div > div dl dt {width:360px;} .sBusiness_case3 .box > div > div dl dd {width:calc(100% - 360px)} .sBusiness_case4 ul li img {height:9vw} } @media screen and (max-width:1024px){ .sBusiness_case1 {padding-top:16%;} .sBusiness_case1 ul {gap:20px;} .sBusiness_case1 ul li {width:calc(25% - 15px);} .sBusiness_case1 ul li .icon {background-size:55% auto;} .sBusiness_case1 ul li p {font-size:1.3em; margin-top:10px;} .sBusiness_case2 {padding-top:20%;} .sBusiness_case3 {padding-top:22%;} .sBusiness_case3 .box {margin-top:7%;} .sBusiness_case3 .box .tit {display:none;} .sBusiness_case3 .box > div {padding-left:0;} .sBusiness_case3 .box > div > div {height:auto;} .sBusiness_case3 .box > div > div dl {padding:5% 0;} .sBusiness_case3 .box > div > div dl dt {width:300px; font-size:2.7em} .sBusiness_case3 .box > div > div dl dd {width:calc(100% - 300px); font-size:1.3em;} .sBusiness_case4 {padding-top:17%;} .sBusiness_case4 ul {gap:10px; margin-top:5%;} .sBusiness_case4 ul li {width:calc(33.33% - 6.66px)} } @media screen and (max-width:767px){ .sBusiness_case1 ul {gap:20px 10px;} .sBusiness_case1 ul li {width:calc(33.33% - 6.66px);} .sBusiness_case1 ul li .icon {border-radius:10px;} .sBusiness_case1 ul li p {font-size:1em; margin-top:5px;} .sBusiness_case3 .box > div > div dl {display:block;} .sBusiness_case3 .box > div > div dl dt {width:100%; font-size:1.8em; margin-bottom:1.5%;} .sBusiness_case3 .box > div > div dl dd {width:100%; font-size:1.125em;} .sBusiness_case3 .box > div > div dl dd.view_txt {display:block; width:fit-content; background:#de234a; border-radius:4px; font-size:1em; color:#fff; font-weight:500; font-family:'Poppins'; margin-top:1.5%; padding:5px 12px;} .sBusiness_case4 ul {gap:10px; display:none;} .sBusiness_case4 ul li {width:calc(50% - 5px)} } @media screen and (min-width: 1025px) { .sBusiness_case1 ul li.animated:nth-child(5n+1) { animation-delay: 0s; } .sBusiness_case1 ul li.animated:nth-child(5n+2) { animation-delay: 0.1s; } .sBusiness_case1 ul li.animated:nth-child(5n+3) { animation-delay: 0.2s; } .sBusiness_case1 ul li.animated:nth-child(5n+4) { animation-delay: 0.3s; } .sBusiness_case1 ul li.animated:nth-child(5n+5) { animation-delay: 0.4s; } } @media screen and (max-width: 1024px) and (min-width: 768px) { .sBusiness_case1 ul li.animated:nth-child(4n+1) { animation-delay: 0s; } .sBusiness_case1 ul li.animated:nth-child(4n+2) { animation-delay: 0.1s; } .sBusiness_case1 ul li.animated:nth-child(4n+3) { animation-delay: 0.2s; } .sBusiness_case1 ul li.animated:nth-child(4n+4) { animation-delay: 0.3s; } } @media screen and (max-width: 767px) { .sBusiness_case1 ul li.animated:nth-child(3n+1) { animation-delay: 0s; } .sBusiness_case1 ul li.animated:nth-child(3n+2) { animation-delay: 0.1s; } .sBusiness_case1 ul li.animated:nth-child(3n+3) { animation-delay: 0.2s; } } .sBusiness_slide1_wrap {margin-top:80px; position:relative;} .sBusiness_slide1_wrap:before {content:''; display:block; width:100vw; height:1px; background:#ceced3; position:absolute; left:50%; top:7px; transform:translateX(-50%)} .sBusiness_slide1 {width:300px;} .sBusiness_slide1 .swiper-slide {width:fit-content; text-align:center;} .sBusiness_slide1 .swiper-slide:before {content:''; display:block; width:16px; height:16px; background:#fff; border:2px solid #0c0c0d; border-radius:50%; margin:0 auto 80px; position:relative; z-index:5;} .sBusiness_slide1 .swiper-slide:after {content:''; display:block; width:16px; height:16px; background:#ceced3; border-radius:50%; position:absolute; left:50%; top:0; transform:translateX(-50%)} .sBusiness_slide1 p {font-size:1.875em;} .sBusiness_slide1 .empty {min-width:100px;} .sBusiness_slide1 .empty:before, .sBusiness_slide1 .empty:after {display:none;} .sBusiness_slide1 .swiper-slide-active:before {background:#0c0c0d;} .sBusiness_slide1 .swiper-slide-active:after {animation:sBusinessSlide1 1.1s infinite ease-in-out} .sBusiness_slide1 .swiper-slide-active p {font-weight:800;} @keyframes sBusinessSlide1 { 0% {transform:translateX(-50%) scale(1); opacity:1;} 20% {opacity:1;} 100% {transform:translateX(-50%) scale(3.5); opacity:0;} } .sBusiness_slide2_wrap {width:100%; overflow:hidden; padding:80px 0 240px;} .sBusiness_slide2 {position:relative;} .sBusiness_slide2 a {display:block; background:#f5f5f6; border-radius:30px; padding:80px 60px; position:relative; transition:background 0.5s;} .sBusiness_slide2 a .icon {display:flex; justify-content:center; align-items:center; width:80px; height:80px; background:#fff; border-radius:50%; font-size:1.875em; color:#de234a; position:absolute; right:40px; top:40px; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility; font-style:normal; overflow:hidden;} .sBusiness_slide2 a .icon:before {content:'\e09f'; font-size:1em; font-weight:400; font-family:'Font Awesome 6 Pro';} .sBusiness_slide2 .tit {font-size:2.5em; line-height:1.3em; font-weight:800; margin-bottom:24px; transition:color 0.5s;} .sBusiness_slide2 ul li {font-size:1.5em; color:#3b3b3e; line-height:1.4em; padding-left:37px; position:relative; margin-bottom:13px; transition:color 0.5s} .sBusiness_slide2 ul li:last-child {margin-bottom:0;} .sBusiness_slide2 ul li:before {content:''; width:6px; height:6px; background:#3b3b3e; border-radius:50%; position:absolute; left:15px; top:13px; transition:background 0.5s;} .sBusiness_slide2 a:hover {background:#de234a;} .sBusiness_slide2 a:hover .icon {opacity:1; visibility:visible;} .sBusiness_slide2 a:hover .icon:before {animation:sBusiness_arrowSlide 1s ease-in-out infinite;} .sBusiness_slide2 a:hover .tit {color:#fff;} .sBusiness_slide2 a:hover ul li {color:#fff;} .sBusiness_slide2 a:hover ul li:before {background:#fff;} @keyframes sBusiness_arrowSlide { 0% {transform:translate(0, 0); opacity:1;} 35% {transform:translate(130%, -130%); opacity:0;} 36% {transform:translate(-130%, 130%); opacity:0;} 70% {transform:translate(0, 0); opacity:1;} 100% {transform:translate(0, 0); opacity:1;} } .sBusiness_slide3 {display:none;} @media screen and (max-width:1260px){ .sBusiness_slide2 a {padding:60px 40px;} } @media screen and (max-width:1024px){ .sBusiness_slide1_wrap {margin-top:7%;} .sBusiness_slide1 {width:150px;} .sBusiness_slide1:before {top:5px;} .sBusiness_slide1 .swiper-slide:before {width:12px; height:12px; margin-bottom:35px;} .sBusiness_slide1 .swiper-slide:after {width:12px; height:12px;} .sBusiness_slide1 p {font-size:1.5em;} .sBusiness_slide2_wrap {padding:10% 0 17%;} .sBusiness_slide2 a {padding:40px 30px; border-radius:15px;} .sBusiness_slide2 a .icon {width:55px; height:55px; font-size:1.5em; right:20px; top:20px;} .sBusiness_slide2 .tit {font-size:2em; margin-bottom:15px;} .sBusiness_slide2 ul li {font-size:1.25em; padding-left:25px; margin-bottom:10px;} .sBusiness_slide2 ul li:before {width:4px; height:4px; left:10px; top:10px;} } @media screen and (max-width:767px){ .sBusiness_slide1:before {top:5px;} .sBusiness_slide1 .swiper-slide:before {width:10px; height:10px; margin-bottom:20px;} .sBusiness_slide1 .swiper-slide:after {width:10px; height:10px;} .sBusiness_slide1 p {font-size:1.25em;} .sBusiness_slide2 .swiper-slide {width:270px;} .sBusiness_slide2 a {padding:20px; border-radius:10px;} .sBusiness_slide2 a .icon {width:32px; height:32px; font-size:1.25em; right:15px; top:15px;} .sBusiness_slide2 .tit {font-size:1.6em; margin-bottom:10px;} .sBusiness_slide2 ul li {font-size:1em; padding-left:15px; margin-bottom:7px;} .sBusiness_slide2 ul li:before {width:3px; height:3px; left:6px; top:7px;} .sBusiness_slide3 {width:100%; display:block; overflow:hidden; margin:0 auto;} .sBusiness_slide3 .swiper-slide {width:fit-content;} .sBusiness_slide3 img {height:90px;} } .sBusiness_popup {display:flex; justify-content:end; width:100%; background:rgba(12,12,13,0.9); position:fixed; left:0; top:0; z-index:500; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility; transition-delay:0.8s;} .sBusiness_popup .close_btn {display:block; font-size:3.75em; color:#3b3b3e; position:absolute; right:48px; top:40px; z-index:30;} .sBusiness_popup > div {display:flex; width:calc(100% - 240px); max-width:1680px; transform:translateX(100%); transition:transform 0.8s;} .sBusiness_popup > div > div {height:100vh;} .sBusiness_popup .box1 {display:flex; align-items:end; width:33.33%; background:#0c0c0d url(../images/sBusiness_img2.png) no-repeat center center; background-size:cover; padding:80px 20px; transform:translateX(80%); transition:transform 0.8s;} .sBusiness_popup .box1 .btn_box {display:flex; justify-content:center; align-items:center; gap:8px; width:100%;} .sBusiness_popup .box1 .btn_box a {display:block; font-size:1.5em; color:#fff; font-weight:700; padding:24px 40px; border-radius:40px; position:relative; overflow:hidden;} .sBusiness_popup .box1 .btn_box a:before {content:''; display:block; width:100%; height:100%; border-radius:40px; position:absolute; left:0; top:0; z-index:0;} .sBusiness_popup .box1 .btn_box a:after {content:''; display:block; width:100%; height:100%; border-radius:50%; transform:translateY(105%); transition:transform 0.5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1); animation:none; position:absolute; left:0; top:0;} .sBusiness_popup .box1 .btn_box a span {display:block; text-align:center; transform-origin:left top; transition:color 0.2s, transform 0.4s; position:relative; z-index:5;} .sBusiness_popup .box1 .btn_box a span:after {content:attr(data-text); display:block; position:absolute; left:0; top:200%; transform:skewY(5deg); transform-origin:left top; transition:transform 0.4s;} .sBusiness_popup .box1 .btn_box a.case1:before {background:#de234a;} .sBusiness_popup .box1 .btn_box a.case2:before {border:2px solid #fff;} .sBusiness_popup .box1 .btn_box a.case1:after {background:#0c0c0d;} .sBusiness_popup .box1 .btn_box a.case2:after {background:#0c0c0d;} .sBusiness_popup .box1 .btn_box a:hover:after {border-radius:0; transform:translateY(0); transition-duration:0s, 0s; animation:sBusinessPopup 0.5s cubic-bezier(0.4, 0, 0, 1);} .sBusiness_popup .box1 .btn_box a:hover span {transform:translateY(-200%) skewY(-7deg)} .sBusiness_popup .box1 .btn_box a:hover span:after {transform:skewY(7deg)} .sBusiness_popup .box2 {width:66.66%; background:#fff; position:relative; overflow-y:auto; padding:120px;} .sBusiness_popup .box2 .t1 {font-size:1.875em; color:#de234a; font-weight:600; font-family:'Poppins'} .sBusiness_popup .box2 h4 {font-size:5.625em; font-weight:800; margin:24px 0;} .sBusiness_popup .box2 .tit1 {font-size:1.875em; line-height:1.4em; font-weight:800; margin:80px 0 15px;} .sBusiness_popup .box2 .list1 {width:100%;} .sBusiness_popup .box2 .list1 li {font-size:1.5em; color:#3b3b3e; line-height:1.4em; padding-left:37px; position:relative; margin-bottom:13px;} .sBusiness_popup .box2 .list1 li:last-child {margin-bottom:0;} .sBusiness_popup .box2 .list1 li:before {content:''; width:6px; height:6px; background:#3b3b3e; border-radius:50%; position:absolute; left:15px; top:13px;} .sBusiness_popup .box2 .list2 > div {display:flex; align-items:center; flex-wrap:wrap; width:100%; background:#f5f5f6; border-radius:30px; padding:40px 0; margin-bottom:16px;} .sBusiness_popup .box2 .list2 > div:last-child {margin-bottom:0;} .sBusiness_popup .box2 .list2 > div .tit {width:50%; font-size:2.5em; font-weight:800; padding-left:96px;} .sBusiness_popup .box2 .list2 > div .tit span {display:block; font-size:0.6em; color:#3b3b3e; font-weight:400; line-height:1.2em; margin-top:5px;} .sBusiness_popup .box2 .list2 > div .tit span strong {font-size:1.25em; color:#de234a; font-weight:800; margin-right:2px} .sBusiness_popup .box2 .list2 > div ul {width:50%; padding-right:20px;} .sBusiness_popup .box2 .list2 > div ul li {font-size:1.5em; color:#3b3b3e; line-height:1.45em; margin-bottom:10px; padding-left:34px; position:relative;} .sBusiness_popup .box2 .list2 > div ul li:last-child {margin-bottom:0;} .sBusiness_popup .box2 .list2 > div ul li:before {content:'\f058'; font-size:0.75em; color:#de234a; font-weight:900; font-family:'Font Awesome 6 Pro'; position:absolute; left:0; top:0;} .sBusiness_popup.active {opacity:1; visibility:visible; transition-delay:0s;} .sBusiness_popup.active > div {transform:translateX(0); transition-delay:0.5s;} .sBusiness_popup.active .box1 {transform:translateX(0); transition-delay:0.5s;} @keyframes sBusinessPopup { 0% {border-radius: 100%; transform: translateY(-105%) translateZ(0);} 100% {border-radius: 0; transform: translateY(0) translateZ(0);} } @media screen and (max-width:1699px){ .sBusiness_popup > div {width:90%; max-width:100%;} .sBusiness_popup .box1 .btn_box a {font-size:1.5vw; padding:1.2vw 2vw;} .sBusiness_popup .box2 {padding:70px;} .sBusiness_popup .box2 .list2 > div .tit {padding-left:40px;} } @media screen and (max-width:1260px){ .sBusiness_popup > div {width:95%;} .sBusiness_popup .box2 {padding:40px;} .sBusiness_popup .box2 h4 {font-size:4.5em;} .sBusiness_popup .box2 .list2 > div {padding:30px;} .sBusiness_popup .box2 .list2 > div .tit {width:100%; padding-left:0; margin-bottom:20px;} .sBusiness_popup .box2 .list2 > div ul {width:100%; padding-right:0;} } @media screen and (max-width:1024px){ .sBusiness_popup {height:100vh; overflow-y:auto; overflow-x:hidden;} .sBusiness_popup .close_btn {font-size:2.5em; color:#fff; top:20px; right:6%;} .sBusiness_popup > div {display:block; width:100%;} .sBusiness_popup > div > div {height:auto;} .sBusiness_popup .box1 {width:100%; height:70vh; padding:0 6% 6%; transform:translateX(0)} .sBusiness_popup .box1 .btn_box {justify-content:start;} .sBusiness_popup .box1 .btn_box a {font-size:1.125em; padding:13px 20px;} .sBusiness_popup .box2 {width:100%; padding:7% 6%;} .sBusiness_popup .box2 .t1 {font-size:1.5em;} .sBusiness_popup .box2 h4 {font-size:3.5em; margin:2% 0;} .sBusiness_popup .box2 .tit1 {font-size:1.5em; margin:8% 0 1.5%;} .sBusiness_popup .box2 .list1 li {font-size:1.25em; padding-left:25px; margin-bottom:10px;} .sBusiness_popup .box2 .list1 li:before {width:4px; height:4px; left:10px; top:10px;} .sBusiness_popup .box2 .list2 > div {padding:8%; border-radius:15px; margin-bottom:1.5%;} .sBusiness_popup .box2 .list2 > div .tit {font-size:2em; margin-bottom:4%;} .sBusiness_popup .box2 .list2 > div ul li {font-size:1.3em; padding-left:25px; margin-bottom:1%;} } @media screen and (max-width:767px){ .sBusiness_popup .box2 .t1 {font-size:1.3em;} .sBusiness_popup .box2 h4 {font-size:2.7em;} .sBusiness_popup .box2 .tit {font-size:1.3em;} .sBusiness_popup .box2 .list1 li {font-size:1em; padding-left:15px; margin-bottom:7px;} .sBusiness_popup .box2 .list1 li:before {width:3px; height:3px; left:6px; top:7px;} .sBusiness_popup .box2 .list2 > div {border-radius:10px;} .sBusiness_popup .box2 .list2 > div .tit {font-size:1.5em;} .sBusiness_popup .box2 .list2 > div ul li {font-size:1em; padding-left:15px;} } .sPortfolio_top {padding:240px 0 125px; overflow:hidden; opacity:0; animation:sPortfolio 0.4s forwards 2s;} .sPortfolio_top.motion2 {animation:sPortfolio 0.4s forwards 0.1s;} .sPortfolio_top.case2 > div {padding-bottom:150px;} .sPortfolio_top .en {font-size:18.75em; color:#f5f5f6; line-height:1.1em; font-weight:600; font-family:'Poppins'; line-height:1.2em; position:absolute; left:0; bottom:0; z-index:-1; transform:translateY(20%)} .sPortfolio_top .btn_box {display:flex; justify-content:end; padding-right:160px; margin-top:60px;} .sPortfolio_top .view_btn {display:block; width:fit-content; background:#de234a; border-radius:50px; font-size:1.5em; color:#fff; font-weight:700; padding:24px 40px; transition:background 0.5s;} .sPortfolio_top .view_btn i {margin-left:8px;} .sPortfolio_top .view_btn:hover {background:#0c0c0d;} .sPortfolio_list {display:flex; flex-wrap:wrap; gap:56px 16px; margin-bottom:80px; opacity:0; animation:sPortfolio 0.4s forwards 2s;} .sPortfolio_list > div {width:calc(33.33% - 10.66px);} .sPortfolio_list > div .img_box {position:relative; overflow:hidden; z-index:10;} .sPortfolio_list > div .img_box:after {content:'\f061'; display:flex; justify-content:center; align-items:center; width:58px; height:58px; background:#de234a; border-radius:50%; font-size:1em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:0; bottom:0; transform:translateX(100%); transition:transform 0.6s} .sPortfolio_list > div .img_box dl {position:absolute; left:0; top:10px; z-index:20; opacity:0; visibility:hidden;} .sPortfolio_list > div .img_box dl dt {font-size:1.125em; font-weight:700;} .sPortfolio_list > div .img_box dl dd {font-size:0.875em; color:#111; margin-top:8px;} .sPortfolio_list > div .img_box img {width:100%; transition:border-radius 0.6s;} .sPortfolio_list > div .subject {font-size:1.5em; font-weight:700; margin-top:24px; text-align:center; transition:all 0.6s; transition-property:top, transform; position:relative; top:0;} .sPortfolio_list > div a:hover .img_box:after {transform:translateX(0)} .sPortfolio_list > div a:hover .img_box dl {opacity:1; visibility:visible;} .sPortfolio_list > div a:hover .img_box img {border-radius:70px 0 70px 0;} .sPortfolio_list > div a:hover .subject {top:-24px; transform:translateY(-100%)} .sPortfolio_btn_wrap {display:flex; justify-content:center; padding-bottom:200px;} .sPortfolio_btn_wrap .view_btn {display:flex; justify-content:center; align-items:center; width:235px; height:83px; background:#fff; border-radius:50px; position:relative; overflow:hidden; will-change:transform;} .sPortfolio_btn_wrap .view_btn:before {content:''; display:block; width:100%; height:100%; border-radius:50px; border:1px solid #ceced3; position:absolute; left:0; top:0; right:0; bottom:0;} .sPortfolio_btn_wrap .view_btn .txt {display:block; position:relative; z-index:2; overflow:hidden;} .sPortfolio_btn_wrap .view_btn .txt span {display:block; font-size:1.5em; font-family:'Poppins'; text-align:center; transform-origin:left top; transition:color 0.2s, transform 0.4s;} .sPortfolio_btn_wrap .view_btn .txt span:after {content:attr(data-text); display:block; color:#fff; position:absolute; left:0; top:150%; transform:skewY(5deg); transform-origin:left top; transition:transform 0.4s;} .sPortfolio_btn_wrap .view_btn .ripple {display:block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; overflow:hidden; transform:translateZ(0); border-radius:inherit;} .sPortfolio_btn_wrap .view_btn .ripple span {display:block; width:100%; height:100%; background:#de234a; border-radius:50%; transform:translateY(105%); transition:transform 0.5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1)} .sPortfolio_btn_wrap .view_btn:hover .txt span {color:#fff; transform:translateY(-150%) skewY(-7deg)} .sPortfolio_btn_wrap .view_btn:hover .txt span:after {transform:skewY(7deg)} .sPortfolio_btn_wrap .view_btn:hover .ripple span {border-radius:0; transform:translateY(0); transition-duration:0s, 0s; animation:mPartner_ripple 0.5s cubic-bezier(0.4, 0, 0, 1);} .sPortfolio_view_top {display:flex; align-items:end; flex-wrap:wrap; padding:320px 0 120px;} .sPortfolio_view_top h3 {width:50%; font-size:6.25em; line-height:1.1em; font-weight:800;} .sPortfolio_view_top .info {display:flex; justify-content:end; flex-wrap:wrap; gap:20px 60px; width:50%;} .sPortfolio_view_top .info dl dt {font-size:1.5em; font-weight:700;} .sPortfolio_view_top .info dl dd {font-size:1.5em; color:#3b3b3e; margin-top:8px;} .sPortfolio_view_content {width:100%; background:#fafafa; padding-top:160px;} .sPortfolio_view_content .img_box {text-align:center; margin-bottom:80px;} .sPortfolio_view_content .img_box img {display:block; max-width:100%; margin-bottom:120px;} .sPortfolio_view_content .img_box img:last-child {margin-bottom:0;} @keyframes sPortfolio { 0% {opacity:0;} 100% {opacity:1;} } @media screen and (max-width:1699px){ .sPortfolio_top .btn_box {padding-right:0;} } @media screen and (max-width:1260px){ .sPortfolio_view_top {display:block;} .sPortfolio_view_top h3 {width:100%;} .sPortfolio_view_top .info {width:100%; margin-top:20px;} } @media screen and (max-width:1024px){ .sPortfolio_top {padding:150px 0 10%; animation-delay:0s;} .sPortfolio_top.case2 > div {padding-bottom:110px;} .sPortfolio_top .en {font-size:10em;} .sPortfolio_top .btn_box {margin-top:6%;} .sPortfolio_top .view_btn {font-size:1.3em; padding:18px 30px;} .sPortfolio_list {gap:40px 10px; margin-bottom:8%; animation-delay:0s;} .sPortfolio_list > div {width:calc(33.33% - 6.66px)} .sPortfolio_list > div .img_box:after {width:48px; height:48px;} .sPortfolio_list > div .subject {font-size:1.3em; margin-top:15px;} .sPortfolio_list > div a:hover .subject {top:-15px;} .sPortfolio_btn_wrap {padding-bottom:17%;} .sPortfolio_btn_wrap .view_btn {width:180px; height:65px;} .sPortfolio_btn_wrap .view_btn .txt span {font-size:1.3em;} .sPortfolio_view_top {padding:150px 0 10%;} .sPortfolio_view_top h3 {font-size:4em;} .sPortfolio_view_top .info {justify-content:start; gap:15px 25px; margin-top:3%;} .sPortfolio_view_top .info dl dt {font-size:1.3em;} .sPortfolio_view_top .info dl dd {font-size:1.3em; margin-top:5px;} .sPortfolio_view_content {padding-top:10%;} .sPortfolio_view_content .img_box {margin-bottom:8%;} .sPortfolio_view_content .img_box img {margin-bottom:10%;} } @media screen and (max-width:767px){ .sPortfolio_top {padding-top:100px;} .sPortfolio_top.case2 > div {padding-bottom:65px;} .sPortfolio_top .en {font-size:5.5em;} .sPortfolio_top .btn_box {margin-top:6%;} .sPortfolio_top .view_btn {font-size:1em; padding:12px 15px;} .sPortfolio_top .view_btn i {margin-left:5px;} .sPortfolio_list {gap:30px 10px;} .sPortfolio_list > div {width:100%} .sPortfolio_list > div .img_box:after {width:48px; height:48px;} .sPortfolio_list > div .subject {font-size:1.3em; margin-top:10px;} .sPortfolio_list > div a:hover .subject {top:-10px;} .sPortfolio_btn_wrap .view_btn {width:135px; height:45px;} .sPortfolio_btn_wrap .view_btn .txt span {font-size:1.125em;} .sPortfolio_view_top {padding-top:100px;} .sPortfolio_view_top h3 {font-size:2.5em;} .sPortfolio_view_top .info {gap:15px 20px;} .sPortfolio_view_top .info dl dt {font-size:1.125em;} .sPortfolio_view_top .info dl dd {font-size:1.125em;} } .sGraphic_slide {width:100%; position:relative; overflow:hidden; padding-top:160px; margin-bottom:80px; opacity:0; animation:sPortfolio 0.4s forwards 2s;} .sGraphic_slide .swiper-slide {width:350px;} .sGraphic_slide .swiper-slide a {display:block; width:100%; max-height:880px; overflow:hidden; position:relative;} .sGraphic_slide .swiper-slide a:after {content:''; display:block; width:100%; height:100px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); position:absolute; left:0; bottom:0;} .sGraphic_slide .swiper-slide img {width:100%;} .sGraphic_slide .swiper-button-prev, .sGraphic_slide .swiper-button-next {display:flex; justify-content:center; align-items:center; width:80px; height:80px; border:1px solid #ceced3; border-radius:50%; font-size:1.875em; color:#3b3b3e; top:0; margin-top:0; transition:all 0.5s; transition-property:background, border, color;} .sGraphic_slide .swiper-button-prev {right:50%; left:auto; margin-right:4px;} .sGraphic_slide .swiper-button-next {left:50%; right:auto; margin-left:4px;} .sGraphic_slide .swiper-button-prev:after, .sGraphic_slide .swiper-button-next:after {font-size:1em; font-weight:400; font-family:'Font Awesome 6 Pro'} .sGraphic_slide .swiper-button-prev:after {content:'\f060'} .sGraphic_slide .swiper-button-next:after {content:'\f061'} .sGraphic_slide .swiper-button-prev:hover, .sGraphic_slide .swiper-button-next:hover {background:#de234a; border-color:#de234a; color:#fff;} @media screen and (max-width:1024px){ .sGraphic_slide {padding-top:0; margin-bottom:8%;} .sGraphic_slide .swiper-slide {width:300px;} .sGraphic_slide .swiper-slide a {max-height:600px;} .sGraphic_slide .swiper-button-prev, .sGraphic_slide .swiper-button-next {display:none;} } @media screen and (max-width:767px){ .sGraphic_slide .swiper-slide {width:270px;} .sGraphic_slide .swiper-slide a {max-height:400px;} } .sContact_top {width:100%; height:300vh; position:relative;} .sContact_top > div {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;} .sContact_top .sub_title h2 {transform:translateY(60px); opacity:0; transition:all 0.7s; transition-property:transform, opacity;} .sContact_top .sub_title .tit {font-size:7.5em; position:relative;} .sContact_top .sub_title .tit p {width:fit-content; position:relative; /*left:50%; transform:translateX(-50%);*/ overflow:hidden;} .sContact_top .sub_title .tit p span {display:inline-block; opacity:0; transform:translateY(100%); animation:sContactTop 1s ease-in-out forwards} .sContact_top .s_txt1 p {overflow:hidden;} .sContact_top .s_txt1 p span {display:block; transform:translateY(100%); opacity:0; transition:all 0.7s; transition-property:transform, opacity;} .sContact_top .sub_title h2.on {transform:translateY(0); opacity:1;} .sContact_top .s_txt1.on p span {transform:translateY(0); opacity:1;} .sContact_top .s_txt1.on p:nth-child(2) span {transition-delay:0.2s} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(1) {animation-delay:2s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(2) {animation-delay:2.1s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(3) {animation-delay:2.2s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(4) {animation-delay:2.3s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(5) {animation-delay:2.4s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(6) {animation-delay:2.5s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(1) {animation-delay:2.6s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(2) {animation-delay:2.7s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(3) {animation-delay:2.8s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(4) {animation-delay:2.9s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(1) {animation-delay:3.0s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(2) {animation-delay:3.1s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(3) {animation-delay:3.2s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(4) {animation-delay:3.3s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(5) {animation-delay:3.4s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(6) {animation-delay:3.5s;} @keyframes sContactTop { 0% {opacity:0; transform:translateY(100%)} 100% {opacity:1; transform:translateY(0)} } @media screen and (max-width:1024px){ .sContact_top .sub_title .tit {font-size:5.5em;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(1) {animation-delay:0s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(2) {animation-delay:0.1s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(3) {animation-delay:0.2s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(4) {animation-delay:0.3s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(5) {animation-delay:0.4s;} .sContact_top .sub_title .tit p:nth-child(1) span:nth-child(6) {animation-delay:0.5s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(1) {animation-delay:0.6s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(2) {animation-delay:0.7s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(3) {animation-delay:0.8s;} .sContact_top .sub_title .tit p:nth-child(2) span:nth-child(4) {animation-delay:0.9s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(1) {animation-delay:1.0s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(2) {animation-delay:1.1s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(3) {animation-delay:1.2s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(4) {animation-delay:1.3s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(5) {animation-delay:1.4s;} .sContact_top .sub_title .tit p:nth-child(3) span:nth-child(6) {animation-delay:1.5s;} } @media screen and (max-width:767px){ .sContact_top .sub_title .tit {font-size:3em;} } .sContact_wrap {display:flex; align-items:end; flex-direction:column; padding-bottom:200px;} .sContact_wrap > div {width:100%; max-width:900px;} .sContact_case1 > div {margin-bottom:40px;} .sContact_case1 > div:last-child {margin-bottom:0;} .sContact_case1 > div.line {border-bottom:3px solid #0c0c0d; padding-bottom:80px; margin-bottom:80px;} .sContact_case1 > div > label {display:block; font-size:2.1875em; line-height:1.2em; font-weight:800; margin-bottom:24px;} .sContact_case1 > div > label span {font-size:0.85em; font-weight:400;} .sContact_case1 > div > label span.t2 {font-size:0.68em; margin-left:15px;} .sContact_case1 > div .form_txt {display:block; width:100%; height:104px; background:#fff; border:2px solid #ceced3; border-radius:20px; font-size:1.875em; color:#3b3b3e; padding:0 30px;} .sContact_case1 > div .form_txt::placeholder {color:#3b3b3e;} .sContact_case1 > div .form_txt::-webkit-input-placeholder {color:#3b3b3e;} .sContact_case1 > div .form_txt:-ms-input-placeholder {color:#3b3b3e;} .sContact_case1 > div .form_txt.read {background:#f5f5f6} .sContact_case1 > div .form_txt:focus {outline:none; border-color:#de234a;} .sContact_case1 > div .form_textarea {display:block; width:100%; height:400px; background:#fff; border:2px solid #ceced3; border-radius:20px; font-size:1.875em; color:#3b3b3e; padding:30px; resize:none;} .sContact_case1 > div .form_textarea::placeholder {color:#3b3b3e;} .sContact_case1 > div .form_textarea::-webkit-input-placeholder {color:#3b3b3e;} .sContact_case1 > div .form_textarea:-ms-input-placeholder {color:#3b3b3e;} .sContact_case1 > div .form_textarea:focus {outline:none; border-color:#de234a;} .sContact_case1 > div .select_box {width:100%; position:relative;} .sContact_case1 > div .select_box:after {content:'\f107'; font-size:1.875em; color:#3b3b3e; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:28px; top:50%; transform:translateY(-50%); pointer-events:none; transition:transform 0.5s} .sContact_case1 > div .select_box input {width:100%; cursor:none;} .sContact_case1 > div .select_box ul {display:none; width:100%; background:#fff; border:2px solid #ceced3; border-radius:20px; position:absolute; left:0; top:100%; z-index:30; overflow:hidden; overflow-y:auto; max-height:400px;} .sContact_case1 > div .select_box ul li {width:100%; font-size:1.5em; color:#3b3b3e; padding:15px 30px;} .sContact_case1 > div .select_box ul li:hover {background:#f8f8f8} .sContact_case1 > div .select_box.on:after {transform:translateY(-50%) rotate(180deg)} .sContact_case1 > div .select_box.on ul {display:block;} .sContact_case1 > div .check_list {display:flex; flex-wrap:wrap; gap:8px;} .sContact_case1 > div .check_list li {width:calc(33.33% - 5.33px); position:relative;} .sContact_case1 > div .check_list li input {display:block; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0;} .sContact_case1 > div .check_list li label {display:flex; justify-content:center; align-items:center; width:100%; height:104px; border:2px solid #ceced3; border-radius:20px; font-size:1.875em; color:#3b3b3e; text-align:center;} .sContact_case1 > div .check_list li input:checked + label {background:#0c0c0d; border-color:#0c0c0d; color:#fff; font-weight:700;} .sContact_case1 > div .check_list li input:checked + label:before {content:'\f00c'; font-size:0.8em; font-weight:400; font-family:'Font Awesome 6 Pro'; margin-right:15px;} .sContact_case1 > div .phone_box {display:flex; align-items:center; width:100%;} .sContact_case1 > div .phone_box .form_txt {width:calc(33.33% - 19.33px)} .sContact_case1 > div .phone_box span {display:block; width:29px; font-size:1.875em; color:#3b3b3e; text-align:center;} .sContact_case1 > div .email_box {display:flex; align-items:center; flex-wrap:wrap; width:100%;} .sContact_case1 > div .email_box > .form_txt {width:calc(33.33% - 17.33px)} .sContact_case1 > div .email_box .select_box {width:calc(33.33% - 17.33px); margin-left:8px;} .sContact_case1 > div .email_box span {display:block; width:44px; font-size:1.875em; color:#3b3b3e; text-align:center;} .sContact_case1 > div .price_box {display:flex; justify-content:space-between;} .sContact_case1 > div .price_box > .form_txt {width:calc(50% - 4px)} .sContact_case1 > div .price_box .select_box {width:calc(50% - 4px)} .sContact_case1 > div .file_box {display:flex; justify-content:space-between; position:relative;} .sContact_case1 > div .file_box .form_txt {width:calc(100% - 127px);} .sContact_case1 > div .file_box button {display:block; width:119px; height:104px; background:#0c0c0d; border-radius:20px; font-size:1.875em; color:#fff;} .sContact_case1 > div .file_box .frm_file {width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; cursor:none;} .sContact_case1 > div .spam_box {display:flex; align-items:center;} .sContact_case1 > div .spam_box .tit {font-size:1.875em; font-weight:800; margin-right:24px;} .sContact_case1 > div .spam_box .number {display:flex; justify-content:center; align-items:center; width:130px; height:72px; border:2px solid #ceced3; border-radius:10px; font-size:1.875em; font-weight:700;} .sContact_case1 > div .spam_box .spam_text {display:block; width:130px; height:72px; border:2px solid #ceced3; border-radius:10px; font-size:1.875em; font-weight:700; text-align:center; margin-left:8px;} .sContact_case2 .privacy_box {display:flex; justify-content:end; margin-top:80px;} .sContact_case2 .privacy_box input {display:none;} .sContact_case2 .privacy_box p {display:flex; align-items:center; font-size:1.5em;} .sContact_case2 .privacy_box p:before {content:''; display:flex; justify-content:center; align-items:center; width:40px; height:40px; background:#f5f5f6; border-radius:10px; margin-right:15px; font-size:0.8em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'} .sContact_case2 .privacy_box p button {font-size:1em; font-weight:700; text-decoration:underline;} .sContact_case2 .privacy_box input:checked + p:before {content:'\f00c'; background:#0c0c0d;} .sContact_case2 .submit_btn {display:block; width:100%; height:104px; background:#de234a; border-radius:20px; font-size:1.875em; color:#fff; font-weight:800; border:0; margin-top:40px; transition:background 0.5s;} .sContact_case2 .submit_btn:hover {background:#0c0c0d;} @media screen and (max-width:1024px){ .sContact_wrap {padding-bottom:17%;} .sContact_case1 > div {margin-bottom:4%;} .sContact_case1 > div.line {margin-bottom:7%; padding-bottom:7%;} .sContact_case1 > div > label {font-size:1.7em; margin-bottom:2%;} .sContact_case1 > div .form_txt {height:85px; border-radius:15px; font-size:1.5em; padding:0 20px;} .sContact_case1 > div .form_textarea {height:300px; border-radius:15px; font-size:1.5em; padding:20px;} .sContact_case1 > div .select_box:after {font-size:1.5em; right:20px;} .sContact_case1 > div .select_box ul {border-radius:15px;} .sContact_case1 > div .select_box ul li {padding:13px 20px; font-size:1.2em;} .sContact_case1 > div .check_list li label {height:85px; border-radius:15px; font-size:1.5em;} .sContact_case1 > div .file_box > .form_txt {width:calc(100% - 108px)} .sContact_case1 > div .file_box button {width:100px; height:85px; font-size:1.5em; border-radius:15px;} .sContact_case1 > div .spam_box .tit {font-size:1.5em; margin-right:20px;} .sContact_case1 > div .spam_box .number {width:120px; height:60px; font-size:1.5em;} .sContact_case1 > div .spam_box .spam_text {width:120px; height:60px; font-size:1.5em;} .sContact_case2 .privacy_box {margin-top:8%;} .sContact_case2 .privacy_box p {font-size:1.3em;} .sContact_case2 .privacy_box p:before {width:35px; height:35px;} .sContact_case2 .submit_btn {height:85px; font-size:1.5em; border-radius:15px; margin-top:5%;} } @media screen and (max-width:767px){ .sContact_case1 > div.line {border-bottom-width:2px;} .sContact_case1 > div > label {font-size:1.2em;} .sContact_case1 > div > label span.t2 {margin-left:10px;} .sContact_case1 > div .form_txt {height:45px; border-radius:8px; font-size:1em; padding:0 10px;} .sContact_case1 > div .form_textarea {height:160px; border-radius:8px; font-size:1em; padding:10px;} .sContact_case1 > div .select_box:after {font-size:1em; right:10px;} .sContact_case1 > div .select_box ul {border-radius:10px;} .sContact_case1 > div .select_box ul li {padding:10px; font-size:1em;} .sContact_case1 > div .check_list {gap:4px;} .sContact_case1 > div .check_list li {width:calc(33.33% - 2.66px)} .sContact_case1 > div .check_list li label {height:45px; border-radius:8px; font-size:1em;} .sContact_case1 > div .check_list li input:checked + label:before {margin-right:4px;} .sContact_case1 > div .phone_box .form_txt {width:calc(33.33% - 10px)} .sContact_case1 > div .phone_box span {width:15px; font-size:1em;} .sContact_case1 > div .email_box > .form_txt {width:calc(50% - 10px)} .sContact_case1 > div .email_box .select_box {width:100%; margin:5px 0 0;} .sContact_case1 > div .email_box span {width:20px; font-size:1em;} .sContact_case1 > div .file_box > .form_txt {width:calc(100% - 55px)} .sContact_case1 > div .file_box button {width:50px; height:45px; font-size:1.125em; border-radius:8px;} .sContact_case1 > div .spam_box .tit {font-size:1em; margin-right:15px;} .sContact_case1 > div .spam_box .number {width:70px; height:40px; font-size:1em; border-radius:8px;} .sContact_case1 > div .spam_box .spam_text {width:70px; height:40px; font-size:1em; margin-left:3px; border-radius:8px;} .sContact_case2 .privacy_box p {font-size:1em;} .sContact_case2 .privacy_box p:before {width:28px; height:28px; border-radius:5px; margin-right:8px;} .sContact_case2 .submit_btn {height:50px; font-size:1.125em; border-radius:8px;} } .privace_popup {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background:rgba(12,12,13,0.5); position:fixed; left:0; top:0; z-index:600; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;} .privace_popup.on {opacity:1; visibility:visible;} .privace_popup .inner_box {width:88%; max-width:550px; background:#fff; border-radius:20px; overflow:hidden;} .privace_popup .inner_box .tit_box {display:flex; justify-content:space-between; align-items:center; background:#de234a; padding:10px 20px;;} .privace_popup .inner_box .tit_box p {font-size:1.25em; color:#fff; font-weight:700;} .privace_popup .inner_box .tit_box .close_btn {font-size:2em; color:#fff;} .privace_popup .inner_box .cont_box {max-height:60vh; padding:25px 20px; overflow-y:auto;} .privace_popup .inner_box .cont_box h4 {font-size:1.125em; font-weight:600; margin:15px 0 5px;} .privace_popup .inner_box .cont_box p {font-size:1em; color:#3b3b3e; line-height:1.55em;} .privace_popup .inner_box .cont_box .bgBox {margin:20px 0; background:#f5f5f6; border-radius:10px; padding:10px;} .privace_popup .inner_box .cont_box .bgBox ul {margin-top:10px;} .privace_popup .inner_box .cont_box .bgBox ul li {font-size:1em; color:#3b3b3e; line-height:1.55em;} #subTitle {margin-bottom:60px;} #subTitle .t1 {font-size:6.25em; letter-spacing:0; line-height:1.1em; font-weight:800; font-family:'Poppins'; -webkit-text-fill-color:transparent; -webkit-text-stroke-width:1px;-webkit-text-stroke-color:#353535; text-transform:uppercase;} #subTitle .t1 span {-webkit-text-fill-color:transparent; -webkit-background-clip:text; background-repeat:no-repeat; background-position:left bottom; transition:background-size 1.2s cubic-bezier(0.67, 0.01, 0.15, 0.98); background-image: linear-gradient(90deg, #353535 0%, #353535 50%, transparent 50.1%); background-size:0% 100%;} #subTitle .t1:hover span {background-size:200% 100%;} #subTitle .t2 {font-size:1.5em; line-height:1.2em; letter-spacing:0; font-weight:800; font-family:'Poppins'; text-transform:uppercase;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #subTitle .t1 span {background:none;} } @media screen and (max-width:1024px){ #subTitle {margin-bottom:6%;} #subTitle .t1 {font-size:5.5em; -webkit-text-stroke-width:1px;} #subTitle .t2 {font-size:1.3em;} } @media screen and (max-width:767px){ #subContent {margin-top:100px} #subTitle .t1 {font-size:4em;} #subTitle .t2 {font-size:1.125em;} } .sWorking_case1 {border-top:1px solid rgba(178,183,199,0.6); padding-top:100px;} .sWorking_case1 .s-tit1 {font-size:3.43em; line-height:1.3em; letter-spacing:-0.065em; font-weight:700; margin-bottom:20px;} .sWorking_case1 .month_box {display:flex; justify-content:center; align-items:center; width:100%; margin:20px 0 50px;} .sWorking_case1 .month_box p {font-size:1.25em; line-height:1.4em; font-weight:500; margin:0 30px;} .sWorking_case1 .month_box .arrow_btn {display:inline-block; font-size:1.5em; padding:5px;} .sWorking_case1 .month_box .arrow_btn:after {font-size:1em; font-weight:300; font-family:'Font Awesome 5 Pro'} .sWorking_case1 .month_box .arrow_prev:after {content:'\f104'} .sWorking_case1 .month_box .arrow_next:after {content:'\f105'} .sWorking_case1 table {width:100%; border-collapse:collapse;} .sWorking_case1 table thead th {width:16.66%; background:#f6f6f6; border:1px solid #eee; font-size:1em; line-height:1.5em; font-weight:500; padding:15px 0;} .sWorking_case1 table tbody th {background:#f8f9fc; border:1px solid #eee; font-size:1em; line-height:1.5em; padding:15px 5px;} .sWorking_case1 table tbody td {border:1px solid #eee; font-size:1em; line-height:1.5em; padding:15px; text-align:center;} .sWorking_case1 table tbody td p {margin:3px 0;} .sWorking_case1 table tbody td a {display:block; width:100%; padding:5px; font-size:0.875em; line-height:1.3em; color:#fff; margin:3px 0;} .sWorking_case1 table tbody td a.case1 {background:#7fc4ff;} .sWorking_case1 table tbody td a.case2 {background:#438de4;} .sWorking_case1 table tbody td a.case3 {background:#ff8f8e;} .sWorking_case1 table tbody td a.case4 {background:#aa9bff;} .sWorking_case1 table tbody td button {display:block; width:100%; padding:5px; font-size:0.875em; line-height:1.3em; color:#fff; margin:3px 0; font-family:'Noto Sans KR';} .sWorking_case1 table tbody td button.case1 {background:#7fc4ff;} .sWorking_case1 table tbody td button.case2 {background:#438de4;} .sWorking_case1 table tbody td button.case3 {background:#ff8f8e;} .sWorking_case1 table tbody td button.case4 {background:#aa9bff;} .sWorking_case1 table tbody .holiday {color:#f00;} @media screen and (max-width:1024px){ .sWorking_case1 {padding-top:10%;} .sWorking_case1 .s-tit1 {font-size:2.7em; margin-bottom:2%;} .sWorking_case1 .month_box {margin:2% 0 5%;} .sWorking_case1 .month_box p {font-size:1.125em; margin:0 15px;} } @media screen and (max-width:767px){ .sWorking_case1 .s-tit1 {font-size:2.2em;} .sWorking_case1 table thead th:first-of-type {width:60px;} .sWorking_case1 table thead th {width:25%; padding:10px 0;} .sWorking_case1 table tbody th {font-size:0.9375em; padding:10px 5px;} .sWorking_case1 table tbody td {font-size:0.9375em; padding:5px;} }