@charset "utf-8";

.main-page { --sec-pd: 160px; }
.visual-swiper .swiper-slide { overflow: hidden; position: relative; height: 100svh; }
.visual-swiper .swiper-slide::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 2; }
.visual-swiper .swiper-slide .bg-video { position: absolute; top: 50%; left: 50%; width: 101%; min-height: 101%; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none; }
.visual-swiper .swiper-slide .inner { position: absolute; left: 50%; top: 0; display: flex; align-items: center; height: 100%; transform: translateX(-50%); color: #fff; z-index: 5; }
.visual-swiper .swiper-slide .visual-title { font-size: 66px; font-weight: 700; }
.visual-swiper .swiper-slide .visual-title > span { display: block; font-family: var(--engFont); }
.visual-swiper .swiper-slide .visual-title > span + span { margin-top: 0.15em; }
.visual-swiper .swiper-slide .visual-text { margin-top: 1.81em; font-size: 22px; font-weight: 700; }
.visual-swiper .swiper-slide .btn-link { margin-top: 60px; }
.visual-swiper .swiper-opt__area { position: absolute; bottom: 60px; left: 50%; display: flex; align-items: center; gap: 40px; transform: translateX(-50%); color: #fff; z-index: 5; }
.visual-swiper .swiper-pagination { position: static; display: flex; justify-content: center; align-items: center; gap: 10px; width: fit-content; }
.visual-swiper .swiper-pagination span { width: 12px; font-family: var(--font-FiraSans); font-size: 18px; font-weight: 700; }
.visual-swiper .swiper-pagination .swiper-pagination-total { opacity: 0.5; }
.visual-swiper .swiper-pagination .swiper-pagination-current { opacity: 1; }
.visual-swiper .swiper-pagination .dot { width: 4px; height: 4px; border-radius: 50%; background-color: #D9D9D9; }
.visual-swiper .swiper-opt__area .swiper-btn { width: 20px; height: 20px; background: no-repeat center center/contain; }
.visual-swiper .swiper-opt__area .swiper-button-prev { background-image: url("/img/main/visual_swiper_prev.svg"); }
.visual-swiper .swiper-opt__area .swiper-button-next { background-image: url("/img/main/visual_swiper_next.svg"); }

.sec-title__top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px; }
.sec-title { font-family: var(--engFont); font-size: 60px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.sec-text { margin-top: 20px; font-size: 22px; font-weight: 500; line-height: 1.7; color: #333; }
.sec-title__top .title-box { width: calc(100% - 300px); }

.m-sec-about { padding-top: calc(var(--sec-pd) / 2); padding-bottom: var(--sec-pd); background: url("/img/main/sec_about_bg.jpg") no-repeat center center/cover; isolation: isolate; }
.marquee-banner { overflow-x: hidden;  padding-bottom: var(--sec-pd); }
.marquee-banner .marquee-box { position: relative; display: flex; align-items: center; gap: 20px; width: max-content; mix-blend-mode: multiply; animation: marquee 80s linear infinite; }
.marquee-banner .marquee-inner { display: flex; align-items: center; gap: 20px; }
.marquee-banner .marquee-item { overflow: hidden; width: 240px; }
.platform-cont { display: flex; justify-content: space-between; align-items: center; }
.platform-cont .platform-diagram { width: 53.125%; padding-top: 10px; }
.platform-cont .platform-swiper { width: 40.625%; }
.platform-diagram { --border-r: 10px; --pd-left: 210px; --total-h: 51px; padding-left: var(--pd-left); }
.platform-diagram .box { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.platform-diagram .row-top { position: relative; width: fit-content; margin: 0 auto; }
.platform-diagram .row-top .box { position: relative; width: 235px; height: 100px; border: 1px solid #F89A13; border-radius: 100px; font-size: 18px; line-height: 1.5; font-weight: 500; color: #F89A13; background-color: #FFFBF5; z-index: 3; }
.platform-diagram .row-top::before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: calc(100% + 20px); height: calc(100% + 20px); background: url("/img/main/diagram_dashed_line.svg") no-repeat center center/contain; transform: translate(-50%, -50%); box-sizing: border-box; }
.platform-diagram .row-top b { font-size: 1.22em; font-weight: 700; line-height: inherit; }
.platform-diagram .row-1 { --box-h: 120px; position: relative; margin-top: 60px; }
.platform-diagram .row-1::before { content: ""; position: absolute; left: 50%; top: -10px; display: block; width: calc(100% - ((100% - 40px) / 3) + 28px); height: 15px; border: 1px solid #F89A13; border-radius: 10px 10px 0 0; border-bottom: none; transform: translate(-50%, -100%); }
.platform-diagram .row-1 .row-list { display: flex; justify-content: space-between; gap: 20px; }
.platform-diagram .row-1 .row-list > li { position: relative; width: calc((100% - 40px) / 3); }
.platform-diagram .row-1 .row-list > li::before { content: ""; position: absolute; left: 50%; top: -10px; display: inline-block; width: 2px; height: 30px; border-left: 1px solid #F89A13; transform: translate(-50%, -100%); }
.platform-diagram .row-1 .row-list > li:first-child::before,
.platform-diagram .row-1 .row-list > li:last-child::before { display: none; }
.platform-diagram .row-1 .row-list > li::after { content: ""; position: absolute; top: calc(100% + 10px); left: 50%; width: 6px; height: 25px; background: url("/img/main/diagram_arrow.svg") no-repeat center center/contain; transform: translateX(-50%); }
.platform-diagram .row-1 .row-list .box { height: var(--box-h); padding: 5px; border: 1px solid #F89A13; border-radius: var(--border-r); font-size: 18px; background-color: #fff; }
.platform-diagram .row-1 .row-list .box > span { display: inline-block; margin-top: 15px; color: #F89A13; }
.platform-diagram .row-1 .row-list .box.label { position: relative; }
.platform-diagram .row-1 .row-list .box.label::after { content: ""; position: absolute; top: calc(var(--box-h) / 2); right: calc(100% + 10px); display: block; width: 34px; height: 34px; border-radius: 50%; background: url("/img/main/icon_recurring.svg") no-repeat center center/contain; transform: translate(50%, -50%); }
.platform-diagram .row-1 .row-list li:first-child .box.label::after { display: none; }
.platform-diagram .row-1 .row-list .box.desc { height: calc(100% - 130px); min-height: 120px; margin-top: 10px; color: #fff; background: linear-gradient(124deg, #EC6232 29.78%, #FB9333 101.52%); box-shadow: 0 0 20px 0 rgba(236, 98, 50, 0.24); }
.platform-diagram .row-1 .row-list .box.desc dl dt { font-family: var(--font-FiraSans); font-size: 1.11em; font-weight: 600; }
.platform-diagram .row-1 .row-list .box.desc dl dd { margin-top: 10px; font-size: 0.83em; line-height: 1.6; }
.platform-diagram .row-1 .total-box { margin-top: 45px; padding: 15px 30px; border-radius: var(--border-r); font-size: 16px; font-weight: 600; color: #fff; text-align: center; background: linear-gradient(90deg, #EE5B00 0%, #F04949 100%); box-shadow: 0 0 10px 0 rgba(236, 98, 50, 0.40); }
.platform-diagram .row-1 .total-box p { font-size: 1.25em; }
.platform-diagram .row-1 .total-box .w-box { margin-top: 15px; padding: 15px; color: #FA4D3C; line-height: 1.6; border-radius: 5px; background-color: #fff; }
.platform-diagram .row-1 .side-box { position: absolute; left: calc(var(--pd-left) * -1); bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(var(--pd-left) - 30px); height: calc(100% - var(--box-h) - 10px); padding: 21px; border: 1px solid var(--main-color); border-radius: var(--border-r); font-size: 14px; font-weight: 500; text-align: center; color: var(--main-color); background-color: #fff; box-shadow: 0 0 20px 0 rgba(236, 98, 50, 0.24); }
.platform-diagram .row-1 .side-box dt { font-family: var(--font-FiraSans); font-size: 1.43em; font-weight: 600; line-height: 1.5; }
.platform-diagram .row-1 .side-box dd { margin-top: 10px; line-height: 1.6; }
.platform-diagram .row-1 .side-box::before, .platform-diagram .row-1 .side-box::after { content: ""; position: absolute; left: calc(100% + 5px); top: 50%; width: 20px; height: calc(100% - 122px); border: 1px dashed var(--main-color); border-left: none; border-right: none; transform: translateY(-50%); }
.platform-diagram .row-2 { position: relative; margin-top: 30px; z-index: 3; }
.platform-diagram .row-2 .box { height: var(--total-h); border:1px solid transparent; background-image:linear-gradient(#fff, #fff),linear-gradient(0deg, #999999 0%, #EC6232 100%); background-origin: border-box; background-clip: content-box, border-box; border-radius: var(--border-r); font-size: 16px; font-weight: 500; color: #444; text-align: center; background-color: #fff; }
.platform-diagram .row-2 .box p { padding: 10px; }
.platform-diagram .row-2 .box p > br { display: none; }
.platform-diagram .row-3 { margin-top: 30px; }
.platform-diagram .row-3 .box { flex-wrap: wrap; flex-direction: row; gap: 15px; padding: 20px 30px; border-radius: var(--border-r); background-color: #F1F1F1; }
.platform-diagram .row-3 .box .item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc((100% - 75px) / 6); aspect-ratio: 1/1; border-radius: 50%; font-family: var(--engFont); font-size: 12px; font-weight: 500; line-height: 1.4; color: #666; background-color: #fff; }
.platform-diagram .row-3 .box .item::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 29px); display: inline-block; width: 2px; height: calc(var(--total-h) + 41px); border-left: 1px dashed #999; }
.platform-swiper { margin: 0; }
.platform-swiper .swiper-slide { font-size: 18px; }
.platform-swiper .swiper-slide * { letter-spacing: -0.01em; }
.platform-swiper .swiper-slide .img-box { overflow: hidden; border-radius: 10px; }
.platform-swiper .swiper-slide .img-box > img { width: 100%; }
.platform-swiper .swiper-slide .text-box { margin-top: 40px; }
.platform-swiper .swiper-slide .num { font-family: var(--font-Poppins); font-size: 1.33em; font-weight: 700; color: var(--main-color); }
.platform-swiper .swiper-slide .title { margin-top: 20px; font-size: 1.44em; font-weight: 700; }
.platform-swiper .swiper-slide .text { margin-top: 20px; line-height: 1.7; color: #333; }
.platform-swiper .swiper-opt__area { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.platform-swiper .swiper-btn { width: 50px; height: 50px; border: 1px solid #DDDDDD; border-radius: 50%; background: no-repeat center center/contain; }
.platform-swiper .swiper-btn::after { content: ""; display: block; width: 100%; height: 100%; background: no-repeat center center/34%; }
.platform-swiper .swiper-button-prev::after { background-image: url("/img/main/platform_swiper_prev.svg"); }
.platform-swiper .swiper-button-next::after { background-image: url("/img/main/platform_swiper_next.svg"); }
.platform-swiper .swiper-btn:hover { border-color: var(--main-color); background-color: var(--main-color); }
.platform-swiper .swiper-btn:hover::after { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.platform-swiper .swiper-pagination { position: static; width: fit-content; display: flex; justify-content: center; align-items: center; gap: 10px; }
.platform-swiper .swiper-pagination .swiper-pagination-bullet { width: 10px;height: 10px; margin: 0; background-color: #AAAAAA; opacity: 1; }
.platform-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--main-color); }
.platform__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-top: 90px; }
.platform__list > li { --pd: 40px; overflow: hidden; position: relative; width: calc((100% - 60px) / 3); height: 482px; border-radius: 10px; opacity: 0; transition: opacity 0.3s; }
.platform__list > li .bg { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.platform__list > li::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 71.8%; background: linear-gradient(173deg, #EC6232 -10%, rgba(255, 187, 0, 35%) 50%, rgba(255, 187, 0, 0) 80%); z-index: 3; }
.platform__list > li .title { position: absolute; left: var(--pd); top: var(--pd); width: calc(100% - (var(--pd) * 2)); font-family: var(--engFont); font-size: 38px; font-weight: 700; line-height: 1.4; color: #fff; z-index: 10; }
.platform__list > li .hover { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: var(--pd); font-size: 20px; color: #fff; background-color: var(--main-color); z-index: 5; opacity: 0; transform: scaleY(0); transform-origin: center 0%; transition: 0.4s; }
.platform__list > li .hover dt { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; } 
.platform__list > li .hover dd { margin-top: 15px; font-weight: 500; line-height: 1.7; letter-spacing: -0.01em; }
.platform__list > li .hover .tag-box { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.platform__list > li .hover .tag-box .tag { padding: 3px 15px; border-radius: 80px; font-size: 16px; font-weight: 700; line-height: 1.6; background: linear-gradient(97deg, #EA5825 25.98%, #FB0 142.13%); }
.platform__list > li:hover .hover { opacity: 1; transform: scaleY(1); } 

/* ani */
.platform__area .fade { opacity: 0; opacity: 0; transition: 0.6s; transition-property: opacity; }
.platform__area .fade-down { transform: translateY(-100px); opacity: 0; transition: 0.6s; transition-property: transform, opacity; }
.platform__area .desc.fade-down { transition-delay: 0.1s; }
.platform__area .side-box.fade-down { transition-delay: 0.2s; }
.platform__area .total-box.fade-down { transition-delay: 0.2s; }
.platform-diagram .row-1::before { transform: translate(-50%, calc(-100% - 100px)); opacity: 0; transition: 0.6s; transition-property: transform, opacity; }
.platform-diagram .row-1 .row-list > li::after { transform: translateY(-100px); opacity: 0; transition: 0.6s 0.2s; transition-property: transform, opacity; }
.platform__area .row-2.fade-down { transition-delay: 0.3s; }
.platform__area .row-3.fade-down { transition-delay: 0.4s; }
.platform__area .platform-swiper.fade { transition-delay: 1.4s; }
.platform__area .aos-animate .fade { opacity: 1; }
.platform__area .aos-animate .fade-down { transform: translateY(0); opacity: 1; }
.platform__area .aos-animate .row-1::before { transform: translate(-50%, -100%); opacity: 1; }
.platform__area .aos-animate .row-1 .row-list > li::after { transform: translateY(0); opacity: 1; }
.platform__list.aos-animate > li { opacity: 1; }
.platform__list.aos-animate > li:nth-child(2) { transition-delay: 0.33s; }
.platform__list.aos-animate > li:nth-child(3) { transition-delay: 0.67s; }

.solution__area { margin-top: calc(var(--sec-pd) - 10px); }
.solution__area .inner.w-100 { width: 100%; max-width: 1920px; }
.solution__area .solution-cont { display: flex;justify-content: space-between; align-items: center; margin-right: calc(50% - 800px); }
.solution__area .video-box { overflow: hidden; position: relative; width: 54.54%; border-radius: 0 10px 10px 0; }
.solution__area .video-box .item { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: 0.3s; }
.solution__area .video-box .item::before { content: ""; display: block; padding-top: 56.25%; }
.solution__area .video-box .item.on { position: relative; left: 0; top: 0; opacity: 1; }
.solution__area .video-box video { position: absolute; left: 50%; top: 50%; width: 101%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.solution__area .solution-text { width: 39.77%; font-size: 20px; }
.solution-text .title-box .title { font-family: var(--engFont); font-size: 2.6em; font-weight: 700; color: var(--main-color); }
.solution-text .title-box .sub-title { margin-top: 10px; font-family: var(--engFont); font-size: 1.3em; font-weight: 600; color: var(--main-color); }
.solution-text .text-box .item { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: 0.3s; }
.solution-text .text-box .item.on { position: relative; left: 0; top: 0; opacity: 1; }
.solution-text .text-box .info .text { margin-top: 1em; font-weight: 500; line-height: 1.7; color: #333; }
.solution-text .text-box .desc { margin-top: 30px; }
.solution-text .text-box .desc > li { position: relative; padding-left: 0.78em; font-size: 18px; font-weight: 500; color: #666; }
.solution-text .text-box .desc > li::before { content: ""; position: absolute; left: 0; top: 0.55em; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--main-color); }
.solution-text .text-box .desc > li + li { margin-top: 10px; }
.solution-text .solution-btn__list { margin-top: 30px; display: flex; gap: 20px; margin-top: 80px; }
.solution-text .solution-btn { overflow: hidden; position: relative; width: calc((100% - 40px) / 3); height: 124px; border-radius: 10px; }
.solution-text .solution-btn .bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.solution-text .solution-btn .text { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 2px solid transparent; background-color: rgba(34, 34, 34, 0.8); }
.solution-text .solution-btn .text > span { font-family: var(--engFont); font-size: 26px; font-weight: 700; color: #A9A9A9; }
.solution-text .solution-btn .btn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; background-color: transparent; z-index: 3; }
.solution-text .solution-btn.on .text { border: 2px solid var(--main-color); background-color: rgba(var(--main-color-rgb), 0.8); }
.solution-text .solution-btn.on .text > span { color: #fff; }

.m-sec-case { padding: var(--sec-pd) 0; color: #fff; background: url("/img/main/sec_case_bg.jpg") no-repeat center center/cover; }
.m-sec-case .sec-text { color: #fff; }
.case-swiper__block { position: relative; }
.case-swiper .swiper-slide { display: flex; gap: 30px; height: auto; }
.case-swiper .img-box { overflow: hidden; flex-shrink: 0; width: 50%; border-radius: 10px; }
.case-swiper .text-box { overflow: hidden; width: 100%; border-radius: 10px; padding: 50px 60px; background-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.case-swiper .title-box .title { display: flex; align-items: center; gap: 61px; }
.case-swiper .title-box .title > span { position: relative; font-size: 52px; font-weight: 700; letter-spacing: -0.01em; }
.case-swiper .title-box .title > span.name { font-family: var(--engFont); }
.case-swiper .title-box .title > span::before { content: ""; position: absolute; left: -31px; top: 50%; display: inline-block; width: 1px; height: 0.77em; background-color: #fff; opacity: 0.6; transform: translateY(-50%); }
.case-swiper .title-box .title > span:first-child::before { display: none; }
.case-swiper .info { margin-top: 30px; }
.case-swiper .info dl { font-size: 18px; }
.case-swiper .info dl + dl { margin-top: 20px; }
.case-swiper .info dt { font-family: var(--engFont); font-size: 1.1em; font-weight: 600; color: var(--main-color); }
.case-swiper .info dd { margin-top: 10px; font-weight: 500; line-height: 1.7; }
.case-swiper .comment { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 18px; }
.case-swiper .comment .profile { display: flex; align-items: center; gap: 10px; }
.case-swiper .comment .profile > span { font-size: 1.1em; font-weight: 600; color: var(--main-color); }
.case-swiper .comment .text { margin-top: 10px; font-weight: 500; line-height: 1.7; }
.case-swiper .img-box { position: relative; }
.case-swiper .img-box > img { position: absolute; left: 50%; top: 50%; width: 101%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.case-swiper__block .swiper-btn { position: absolute; top: 50%; width: 75px; height: 75px; border-radius: 50%; background-color: #222; transform: translateY(-50%); z-index: 5; }
.case-swiper__block .swiper-btn::before { content: ""; display: block; width: 100%; height: 100%; background: no-repeat center center/33%; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.case-swiper__block .swiper-button-prev { left: 0; transform: translateY(-50%) translateX(-50%); }
.case-swiper__block .swiper-button-prev::before { background-image: url("/img/main/case_swiper_prev.svg"); }
.case-swiper__block .swiper-button-next { right: 0; transform: translateY(-50%) translateX(50%); }
.case-swiper__block .swiper-button-next::before { background-image: url("/img/main/case_swiper_next.svg"); }
.case-swiper__block .swiper-btn:hover { background-color: #fff; }
.case-swiper__block .swiper-btn:hover::before { -webkit-filter: none; filter: none; }

.m-sec-news { padding: calc((var(--sec-pd)/4)*3) 0 var(--sec-pd); background-color: #F9F9F9; }
.news-swiper__block { position: relative; }
.news-swiper .swiper-slide { overflow: hidden; border-radius: 10px; }
.news-swiper .swiper-slide > a { display: block; padding: 40px; background-color: #fff; transition: background-color 0.3s ease-in; }
.news-swiper .img-box { overflow: hidden; position: relative; border-radius: 10px; }
.news-swiper .img-box::before { content: ""; display: block; padding-top: 73%; }
.news-swiper .img-box > img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.news-swiper .text-box { margin-top: 30px; }
.news-swiper .text-box .tag { display: inline-block; padding: 5px 10px; border-radius: 5px; font-size: 14px; font-weight: 700; color: #fff; background-color: var(--main-color); transition: 0.3s ease-in; }
.news-swiper .text-box .title { overflow: hidden; margin-top: 1em; font-size: 20px; font-weight: 700; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease-in; }
.news-swiper .text-box .text { overflow: hidden; margin-top: 0.55em; font-size: 18px; font-weight: 500; line-height: 1.6; color: #666; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease-in; }
.news-swiper .text-box .arrow { display: block; margin-top: 40px; width: 45px; height: 22px; background: url("/img/main/news_link_arrow.svg") no-repeat center center/contain; transition: 0.3s ease-in; }
.news-swiper__block .swiper-btn { position: absolute; top: 50%; width: 75px; height: 75px; border-radius: 50%; background-color: #fff; box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.05); transform: translateY(-50%); z-index: 5; }
.news-swiper__block .swiper-btn::before { content: ""; display: block; width: 100%; height: 100%; background: no-repeat center center/33%; }
.news-swiper__block .swiper-button-prev { left: 0; transform: translateY(-50%) translateX(-50%); }
.news-swiper__block .swiper-button-prev::before { background-image: url("/img/main/news_swiper_prev.svg"); }
.news-swiper__block .swiper-button-next { right: 0; transform: translateY(-50%) translateX(50%); }
.news-swiper__block .swiper-button-next::before { background-image: url("/img/main/news_swiper_next.svg"); }
.news-swiper__block .swiper-btn:hover { background-color: var(--main-color); }
.news-swiper__block .swiper-btn:hover::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.news-swiper .swiper-slide > a:hover { background-color: var(--main-color); }
.news-swiper .swiper-slide > a:hover .text-box .tag { color: var(--main-color); background-color: #fff; }
.news-swiper .swiper-slide > a:hover .text-box .title, .news-swiper .swiper-slide > a:hover .text-box .text { color: #fff; }
.news-swiper .swiper-slide > a:hover .text-box .arrow { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.m-sec-contact { position: relative; padding: calc(var(--sec-pd) + 5px) 0; color: #fff; background: url("/img/main/sec_contact_bg.jpg") no-repeat center bottom/cover; }
.m-sec-contact::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 49.52%, #111 100%); }
.m-sec-contact .sec-title__top { position: relative; display: block; margin-bottom: 0; z-index: 5; }
.m-sec-contact .sec-text { margin-top: 30px; font-size: 22px; font-weight: 500; line-height: 1.7; color: #fff; }
.m-sec-contact .sec-title__top .btn-link { margin-top: 60px; }

@supports not (height: 100svh) {
    .visual-swiper .swiper-slide { height: 100vh; }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%);  }
}

/* 260702 */
.h_swiper_tit{
    color: #EC6232;
    font-family: Poppins;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 39px */
    letter-spacing: -0.03em;
    padding-bottom: 20px;
}

@media (max-width: 1700px) {
    .wide-layout { --swiper-pd: 40px; padding: 0 var(--swiper-pd); }
    .wide-layout .swiper-button-prev { left: var(--swiper-pd); }
    .wide-layout .swiper-button-next { right: var(--swiper-pd); }
}
@media (max-width: 1640px) {
    .visual-swiper .swiper-slide .visual-title { font-size: 4vw; }
    .sec-title { font-size: 3.65vw; }
    .h_swiper_tit { font-size: 1.83vw; }
    .platform-diagram .row-3 .box .item { font-size: 10px; }
    .platform-swiper .swiper-slide .text > br { display: none; }
    .solution__area .solution-cont { padding-right: 20px; margin-right: 0; }
    .platform__list > li .title > br { display: none; }
    .platform__list > li .hover dd > br { display: none; }
    .solution-text .text-box .info .text > br { display: none; }
}
@media (max-width: 1400px) {
    .main-page { --sec-pd: 145px; }
    .sec-title__top { margin-bottom: 72px; }
    .sec-text { font-size: 20px; }
    .visual-swiper .swiper-slide .visual-text { font-size: 20px; }
    .marquee-banner .marquee-item { width: 200px; }
    .platform-diagram { --total-h: 70px; }
    .platform-diagram .row-1 .row-list .box.desc dl dd > br { display: none; }
    .platform-diagram .row-2 .box p > br { display: inline; }
    .platform-diagram .row-3 .box .item { width: calc((100% - 30px) / 3); font-size: 12px; }
    .platform-diagram .row-3 .box .item:nth-last-child(-n+3)::before { display: none; }
    .platform-swiper .swiper-slide { font-size: 17px; }
    .platform-swiper .swiper-slide .text-box { margin-top: 30px; }
    .platform-swiper .swiper-slide .title > br { display: none; }
    .platform-swiper .swiper-btn { width: 45px; height: 45px; }
    .platform-swiper .swiper-opt__area { gap: 8px; }
    .platform-swiper .swiper-pagination { gap: 8px; }
    .platform-swiper .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
    .platform__list { gap: 20px; }
    .platform__list > li { --pd: 30px; width: calc((100% - 40px)/3); }
    .platform__list > li .title { font-size: 32px; }
    .platform__list > li .hover { font-size: 18px; }
    .platform__list > li .hover .tag-box .tag { font-size: 15px; }
    .solution__area .solution-text { width: 40%; }
    .solution-text { font-size: 19px; }
    .solution-text .text-box .desc > li { font-size: 16px; }
    .solution-text .solution-btn__list { margin-top: 70px; }
    .solution-text .solution-btn { height: 105px; }
    .solution-text .solution-btn .text > span { font-size: 23px; }
    .wide-layout { --swiper-pd: 35px; }
    .wide-layout .swiper-btn { width: 68px; height: 68px; }
    .case-swiper .text-box { padding: 42px 52px; }
    .case-swiper .title-box .title { gap: 48px; }
    .case-swiper .title-box .title > span { font-size: 42px; }
    .case-swiper .title-box .title > span::before { left: -25px; }
    .case-swiper .info dl { font-size: 17px; }
    .case-swiper .comment { font-size: 17px; }
    .case-swiper .comment .profile > img { width: 32px; }
    .news-swiper .swiper-slide > a { padding: 35px; }
    .news-swiper .text-box { margin-top: 25px; }
    .news-swiper .text-box .tag { font-size: 13px; }
    .news-swiper .text-box .title { font-size: 19px; }
    .news-swiper .text-box .text { font-size: 16px; }
    .news-swiper .text-box .arrow { margin-top: 35px; width: 42px; height: 20px; }
    .m-sec-contact .sec-text { margin-top: 25px; font-size: 20px; }
    .solution-text .title-box .title {
        font-size: 38px;
    }
    .case-swiper .title-box .title > span {
        font-size: 38px;
    }
}
@media (max-width: 1200px) {
    .main-page { --sec-pd: 100px; }
    .sec-title { font-size: 34px; }
    .sec-text > br { display: none; }
    .platform-diagram { --pd-left: 180px; }
    .platform-diagram .row-top .box { font-size: 16px; }
    .platform-diagram .row-1 .row-list .box { font-size: 16px; }
    .platform-diagram .row-1 .row-list .box > img { width: 36px; }
    .platform-diagram .row-1 .total-box, .platform-diagram .row-2 .box { font-size: 15px; } 
}
@media (max-width: 1024px) {
    .sec-title { font-size: 30px; }
    .sec-title__top { margin-bottom: 60px; }
    .sec-title__top .title-box {  width: calc(100% - 200px); }
    .sec-text { font-size: 18px; }
    .visual-swiper .swiper-slide .visual-text { font-size: 18px; }
    .visual-swiper .swiper-slide .btn-link { margin-top: 40px; }
    .visual-swiper .swiper-opt__area { gap: 20px; bottom: 30px; }
    .visual-swiper .swiper-opt__area .swiper-btn { width: 16px; height: 16px; }
    .visual-swiper .swiper-pagination { gap: 8px; }
    .visual-swiper .swiper-pagination span { width: 10px; font-size: 15px; }
    .visual-swiper .swiper-pagination .dot { width: 3px; height: 3px; }
    .marquee-banner .marquee-item { width: 160px; }
    .platform-cont { flex-direction: column; }
    .platform-cont .platform-diagram, .platform-cont .platform-swiper { width: 100%; }
    .platform-diagram { --total-h: 51px; }
    .platform-diagram .row-2 .box p > br { display: none; }
    .platform-diagram .row-3 .box .item { width: calc((100% - 75px) / 6); }
    .platform-diagram .row-3 .box .item:nth-last-child(-n+3)::before { display: inline-block; }
    .platform-cont .platform-swiper { margin-top: 40px; }
    .platform__list { margin-top: 60px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .platform__list::-webkit-scrollbar { display: none; }
    .platform__list > li { --pd: 20px; flex: 0 0 85%; width: 85%; height: auto; display: flex; flex-direction: column; scroll-snap-align: start; }
    .platform__list > li .bg { position: static; height: 220px; transform: none; }
    .platform__list > li::after { height: 220px; }
    .platform__list > li .title { font-size: 26px; }
    .platform__list > li .hover { position: static; display: block; flex: 1; font-size: 15px; opacity: 1; transform: none; padding: 20px; color: #333; background-color: #F7F7F7; }
    .platform__list > li .hover dt { color: #222; }
    .platform__list > li .hover dd { color: #555; }
    .platform__list > li .hover .tag-box .tag { font-size: 13px; color: #fff; }
    .platform__list > li .hover .tag-box { margin-top: 20px; }
    .solution__area .solution-cont { flex-direction: column; align-items: flex-start; gap: 30px; padding-right: 0; }
    .solution__area .video-box { width: 80%; }
    .solution__area .solution-text { width: 100%; padding: 0 20px; font-size: 16px; }
    .solution-text .title-box .title { font-size: 28px; }
    .solution-text .title-box .sub-title { font-size: 16px; }
    .solution-text .text-box .desc { margin-top: 20px; }
    .solution-text .text-box .desc > li { font-size: 14px; }
    .solution-text .solution-btn__list { gap: 10px; margin-top: 40px; }
    .solution-text .solution-btn { width: calc((100% - 20px)/3); height: 60px; }
    .solution-text .solution-btn .text > span { font-size: 18px; }
    .case-swiper .swiper-slide { flex-direction: column-reverse; gap: 0px; }
    .case-swiper .img-box { width: 100%; height: 300px; border-radius: 10px 10px 0 0; }
    .case-swiper .text-box { height: calc(100% - 300px); border-radius: 0 0 10px 10px; }
    .case-swiper .title-box .title { gap: 33px; }
    .case-swiper .title-box .title > span { font-size: 27px; }
    .case-swiper .title-box .title > span::before { left: -17px; }
    .case-swiper .info { margin-top: 20px; }
    .case-swiper .info dl { font-size: 15px; }
    .case-swiper .info dl + dl { margin-top: 15px; }
    .case-swiper .info dd { margin-top: 5px; }
    .case-swiper .comment { padding-top: 20px; margin-top: 20px; font-size: 15px; }
    .case-swiper .comment .profile > img { width: 28px; }
}
@media (max-width: 768px) {
    .main-page { --sec-pd: 60px; }
    .sec-title__top { flex-direction: column; justify-content: left; align-items: flex-start; gap: 25px; margin-bottom: 40px; }
    .sec-title__top .title-box { width: 100%; }
    .sec-title { font-size: 24px; }
    .sec-text { margin-top: 15px; font-size: 16px; }
    .visual-swiper .swiper-slide .visual-title { font-size: 30px; }
    .visual-swiper .swiper-slide .visual-text { font-size: 16px; }
    .marquee-banner .marquee-item { width: 130px; }
    .platform-diagram { --pd-left: 0; --total-h: 60px; }
    .platform-diagram .row-top .box { width: 188px; height: 80px; font-size: 15px; }
    .platform-diagram .row-1 { --box-h: 100px; margin-top: 40px; }
    .platform-diagram .row-1::before { top: -8px; width: 1px; height: 16px; border: none; border-radius: 0; border-left: 1px solid #F89A13; }
    .platform-diagram .row-1 .row-list .box { font-size: 15px; }
    .platform-diagram .row-1 .row-list .box > img { width: 28px; }
    .platform-diagram .row-1 .total-box, .platform-diagram .row-2 .box { font-size: 14px; } 
    .platform-diagram .row-1 .row-list { gap: 10px; }
    .platform-diagram .row-1 .row-list > li { width: calc((100% - 20px) / 3); }
    .platform-diagram .row-1 .row-list > li::before { display: none; }
    .platform-diagram .row-1 .row-list > li:not(:nth-last-child)::after { display: none; }
    .platform-diagram .row-1 .row-list .box.desc { margin-top: 5px; height: calc(100% - 105px); }
    .platform-diagram .row-1 .row-list .box.label::after { right: calc(100% + 5px); width: 26px; height: 26px; }
    .platform-diagram .row-1 .row-list .box.desc dl dd { margin-top: 5px; }
    .platform-diagram .row-1 .side-box { position: static; width: 100%; margin-bottom: 20px; }
    .platform-diagram .row-1 .side-box dt > br { display: none; }
    .platform-diagram .row-1 .side-box dd > br { display: none; }
    .platform-diagram .row-1 .side-box::before, .platform-diagram .row-1 .side-box::after { display: none; }
    .platform-diagram .row-2 .box p > br { display: inline; }
    .platform-diagram .row-3 .box .item { width: calc((100% - 30px) / 3); }
    .platform-diagram .row-3 .box .item:nth-last-child(-n+3)::before { display: none; }
    .platform__area .side-box.fade-down { transition-delay: 0s; }
    .platform-diagram .row-1 .row-list .box { transition-delay: 0.1s; }

    .platform-swiper .swiper-slide { font-size: 14px; }
    .h_swiper_tit { font-size: 20px; padding-bottom: 12px; }
    .platform-swiper .swiper-slide .text-box { margin-top: 20px; }
    .platform-swiper .swiper-slide .title, .platform-swiper .swiper-slide .text { margin-top: 15px; }
    .platform-swiper .swiper-opt__area { margin-top: 20px; }
    .platform__list > li .bg, .platform__list > li::after { height: 200px; }
    .platform__list > li .title { font-size: 24px; }
    .platform__list > li .hover { font-size: 14px; }
    .solution__area .video-box { width: calc(100% - 20px); }
    .wide-layout { --swiper-pd: 10px; }
    .wide-layout .swiper-btn { width: 40px; height: 40px; }
    .case-swiper .img-box { height: 250px; }
    .case-swiper .text-box { padding: 20px 30px; height: calc(100% - 250px); }
    .case-swiper .title-box .title { gap: 28px; }
    .case-swiper .title-box .title > span { font-size: 24px; }
    .case-swiper .title-box .title > span::before { left: -14px; }
    .case-swiper .info dl { font-size: 14px; }
    .case-swiper .comment { padding-top: 20px; margin-top: 20px; font-size: 14px; }
    .case-swiper .comment .profile > img { width: 24px; }
    .m-sec-contact { background-position: 70% bottom; }
    .m-sec-contact::before { background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 10%, #111 100%); }
    .m-sec-contact .sec-text { margin-top: 15px; font-size: 16px; }
    .m-sec-contact .sec-text > br { display: inline; }
    .m-sec-contact .sec-title__top .btn-link { margin-top: 25px; }
}

.platform__list{margin-top: 0;}

.platform__list_box{margin-top: 50px;}


/* 2260702 */
@media(max-width:1521px){
    .platform-diagram .row-1 .row-list .box.desc dl dd {
        font-size: 0.73em;
    }
}

@media(max-width:1408px){
    .platform-diagram .row-1 .row-list .box.desc dl dd {
        font-size: 0.63em;
    }
}

@media(max-width:1294px){
    .platform-diagram .row-1 .row-list .box.desc dl dd {
        font-size: 0.60em;
    }
}

@media(max-width:1260px){
    .platform-diagram .row-1 .row-list .box.desc dl dd {
        font-size: 0.50em;
    }
}

@media(max-width:1024px){
    .platform-diagram .row-1 .row-list .box.desc dl dd {
        font-size: 0.83em;
    }
}

.platform-diagram .row-1 .row-list .box.desc{justify-content: flex-start;}

@media screen and (max-width: 1880px) {
    .float-link__list > .btn {
        width: 70px;
        height: 70px;
    }

    .inner {
        width: calc(100% - 200px);
        max-width: 1600px;
        margin: 0 auto;
    }

    .footer__inner {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 100px);
        max-width: 1760px;
        margin: 0 auto;
    }
}


@media screen and (max-width: 768px) {

    .inner {
        width: calc(100% - 40px);
        max-width: 1600px;
        margin: 0 auto;
    }

    .footer__inner {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 40px);
        max-width: 1760px;
        margin: 0 auto;
    }
}




@media (max-width: 1880px) {
    .solution__area .solution-cont {
        padding-right: 100px;
        margin-right: 0;
    }
}

.marquee-banner .marquee-item {
    overflow: hidden;
    width: fit-content;
}

.marquee-banner .marquee-inner {
    display: flex;
    align-items: center;
    gap: 120px;
}


@media (max-width: 768px) {
    .solution__area .solution-cont {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding-right: 0;
    }
}

.platform-diagram .row{display: none;}
.platform-diagram{padding: 0;}

@media(max-width:1024px){
    .platform-diagram .row{display: block;}
    .platform-diagram img{display: none;}
    .platform-diagram{padding: 0;}
}

@media (max-width: 1640px) {
    .platform__list > li .title {
        font-size: 1.8vw;
    }

    .platform__list > li .hover dt {
        font-size: 1.1em;
        font-weight: 700;
        letter-spacing: -0.01em;
    }
}

/* 260706 platform-diagram pc 이미지 / mobile 상세 row 교체 */
.platform-diagram > img { display: block; width: 100%; }

@media(max-width:1024px){
    .platform-diagram > img { display: none; }
    .platform-diagram { padding-left: var(--pd-left); }
}

@media (min-width: 1025px) {
    .platform__list > li { height: auto; aspect-ratio: 513.3 / 482; }
}

@media (min-width: 1025px) and (max-width: 1640px) {
    .platform__list > li .hover { font-size: 1.22vw; }
    .platform__list > li .hover .tag-box .tag { font-size: 0.98vw; }

    .news-swiper .swiper-slide > a { padding: 2.44vw; }
    .news-swiper .text-box { margin-top: 1.83vw; }
    .news-swiper .text-box .tag { font-size: 0.85vw; }
    .news-swiper .text-box .title { font-size: 1.22vw; }
    .news-swiper .text-box .text { font-size: 1.1vw; }
    .news-swiper .text-box .arrow { margin-top: 2.44vw; width: 2.74vw; height: 1.34vw; }
}

.marquee-banner .marquee-box{gap: 120px;}

/* 260708 marquee-banner 모바일 반응형 */
.marquee-banner .marquee-item img { display: block; height: 100px; width: auto; }

@media (max-width: 1024px) {
    .marquee-banner .marquee-item img { height: 70px; }
    .marquee-banner .marquee-inner, .marquee-banner .marquee-box { gap: 70px; }
}

@media (max-width: 768px) {
    .marquee-banner .marquee-item img { height: 65px; }
    .marquee-banner .marquee-inner, .marquee-banner .marquee-box { gap: 40px; }
}

@media (max-width: 480px) {
    .marquee-banner .marquee-item img { height: 65px; }
    .marquee-banner .marquee-inner, .marquee-banner .marquee-box { gap: 40px; }
}


/* 260708 platform__list (Technology Capabilities) 모바일 슬라이드 전환 */
/* 260720 JS 전환 기준(1024px)과 불일치해 769~1024px 구간에서 테두리/인디케이터 누락되던 문제 수정 */
@media (max-width: 1024px) {
    .platform-list-swiper.swiper { overflow: hidden; }
    .platform-list-swiper .platform__list.swiper-wrapper {
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
        gap: 0;
    }
    .platform-list-swiper .platform__list.swiper-wrapper > li.swiper-slide {
        flex: 0 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
    }
    .platform-list-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }
    .platform-list-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0;
        background-color: #AAAAAA;
        opacity: 1;
    }
    .platform-list-pagination .swiper-pagination-bullet-active {
        background-color: var(--main-color);
    }
}

@media(max-width:768px){
    .platform-diagram .row-1 .row-list .box > span {
        margin-top: 0px;
    }
    .platform__list > li .title {
        font-size: 4.8vw;
    }
}


/* 팝업창 강제 위치 조정 */
#element_to_pop_up1{background: none !important; border: none !important;  box-shadow: transparent 0px 0px 0px 0px !important;
    left: 50% !important; transform: translateX(-50%) !important; max-width: 550px !important;
    min-height: 0 !important;
}
@media (max-width: 480px) {
    #element_to_pop_up1 {
        min-width: 0 !important;
        width: calc(100vw - 32px) !important;
    }
}

.pop-today {
    position: absolute; /* overlay */
    bottom: clamp(0px, 1.5vw, 8px);
    left: clamp(10px, 4vw, 18px);
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 6px);
    padding: clamp(5px, 2vw, 8px) 0;
    font-size: clamp(11px, 3.2vw, 14px);
    color: #333;
    cursor: pointer;
    padding-left: clamp(3px, 1.2vw, 5px);
}
.pop-today input {
    appearance: none;
    -webkit-appearance: none;
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
    margin: 0;
    flex-shrink: 0;
    border: 1px solid #fff;
    border-radius: 3px;
    background: transparent;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: relative; /* popup */
}
.pop-today input:checked::after {
    content: "";
    position: absolute; /* popup */
    left: 50%;
    top: 42%;
    width: 28%;
    height: 50%;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}



 /* 영문 레이아웃 */

@media(max-width:1680px){
    html[lang="en"] .platform__list > li {--pd: 20px;}
    html[lang="en"] .platform__list > li .hover dd {margin-top: 0px;}
    html[lang="en"] .float-link__list > .btn {width: 70px !important;height: 70px !important;}
    html[lang="en"] .float-link__list > .btn .text {padding: 0 5px;}

}

@media(max-width:1540px){
    html[lang="en"] .platform__list > li {--pd: 20px;}
    html[lang="en"] .platform__list > li .hover .tag-box {margin-top: 10px;}
    html[lang="en"] .case-swiper .text-box {padding: 30px;}
    html[lang="en"] .case-swiper .title-box .title > span {font-size: 32px;}
    html[lang="en"] .wide-layout {--swiper-pd: 0px;}
    html[lang="en"] .sec-title__top {margin-bottom: 40px;}
}

@media(max-width:1200px){
    html[lang="en"] .platform__list > li .hover dd {line-height: 1.3;}
    html[lang="en"] .platform__list > li .hover .tag-box .tag {padding: 3px 5px;}
    html[lang="en"] .case-swiper .title-box .title > span {font-size: 28px;}
    html[lang="en"] .case-swiper .title-box .title > span::before {left: -16px;}
    html[lang="en"] .case-swiper .title-box .title {gap: 32px;}
    html[lang="en"] .case-swiper .info {margin-top: 10px;}
    html[lang="en"] .float-link__list > .btn .text { margin-top: 5px;font-size: 10px;}
}

@media(max-width:768px){
    html[lang="en"] .visual-swiper .swiper-slide .visual-title > span br{display: none;}
    html[lang="en"] .visual-swiper .swiper-slide .visual-text br{display: none;}
    html[lang="en"] .m-sec-contact .sec-text br{display: none;}
    html[lang="en"] .case-swiper .title-box .title > span {font-size: 24px;}
    html[lang="en"] .platform__list > li .hover  .text-box{height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
}


@media(max-width:450px){
    html[lang="en"] .platform__list > li .hover .tag-box {flex-direction: column;}
    html[lang="en"] .platform__list > li .hover .tag-box .tag {width: fit-content;}
}