@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.5s; }
.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.5s; }
.platform__list.aos-animate > li:nth-child(3) { transition-delay: 1s; }

.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%);  }
}

@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; }
    .sec-text > br { display: none; }
    .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) {
    .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: 16px; }
    .platform-swiper .swiper-slide .text-box { margin-top: 30px; }
    .platform-swiper .swiper-slide .title > br { display: none; }
    .platform-swiper .swiper-btn { width: 40px; height: 40px; }
    .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: 16px; }
    .platform__list > li .hover .tag-box .tag { font-size: 15px; }
    .solution__area .solution-text { width: 40%; }
    .solution-text { font-size: 18px; }
    .solution-text .text-box .desc > li { font-size: 16px; }
    .solution-text .solution-btn__list { margin-top: 60px; }
    .solution-text .solution-btn { height: 90px; }
    .solution-text .solution-btn .text > span { font-size: 22px; }
    .wide-layout { --swiper-pd: 30px; }
    .wide-layout .swiper-btn { width: 60px; height: 60px; }
    .case-swiper .text-box { padding: 30px 40px; }
    .case-swiper .title-box .title { gap: 51px; }
    .case-swiper .title-box .title > span { font-size: 42px; }
    .case-swiper .title-box .title > span::before { left: -26px; }
    .case-swiper .info dl { font-size: 16px; }
    .case-swiper .comment { font-size: 16px; }
    .case-swiper .comment .profile > img { width: 32px; }
    .news-swiper .swiper-slide > a { padding: 30px; }
    .news-swiper .text-box { margin-top: 25px; }
    .news-swiper .text-box .tag { font-size: 13px; }
    .news-swiper .text-box .title { font-size: 18px; }
    .news-swiper .text-box .text { font-size: 16px; }
    .news-swiper .text-box .arrow { margin-top: 30px; width: 40px; height: 19px; }
    .m-sec-contact .sec-text { margin-top: 20px; font-size: 18px; }
}
@media (max-width: 1200px) {
    .main-page { --sec-pd: 120px; }

    .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__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; }
    .platform__list > li { --pd: 20px; width: 100%; height: 300px; }
    .platform__list > li::after { height: 100%; }
    .platform__list > li .title { font-size: 26px; }
    .platform__list > li .hover { font-size: 15px; transform: none; opacity: 1; background-color: rgba(0, 0, 0, 0.7); }
    .platform__list > li .hover .tag-box .tag { font-size: 13px; }
    .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: 2em; }
    .solution-text .text-box .desc { margin-top: 20px; }
    .solution-text .text-box .desc > li { font-size: 15px; }
    .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: 41px; }
    .case-swiper .title-box .title > span { font-size: 36px; }
    .case-swiper .title-box .title > span::before { left: -21px; }
    .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; }
    .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 { height: 280px; }
    .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: 31px; }
    .case-swiper .title-box .title > span { font-size: 28px; }
    .case-swiper .title-box .title > span::before { left: -16px; }
    .case-swiper .info dl { font-size: 14px; }
    .case-swiper .comment { padding-top: 20px; margin-top: 20px; }
    .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; }
}