@charset "utf-8";
.solution .sec:not(:last-child) {margin-bottom: clamp(40px, calc( 110 / var(--inner) * 100vw ), 110px);}
.solution-info {gap: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.solution-info-media {width: 48.57145%;}
.media-wrapper {position: relative; width: 100%; padding-bottom: 56.17647%; overflow: hidden;}
.media-wrapper video {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.solution-tag {width: fit-content; margin-left: -25px; padding-right: 5px; background: var(--gradient-color); background-clicp: text; -webkit-background-clip: text; color: transparent; font-weight: 500; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-style: italic;}
.solution-info-txt h2 {margin: clamp(12px, calc( 25 / var(--inner) * 100vw ), 25px) 0 clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.solution-gallery h3 {margin-bottom: clamp(20px, calc( 27 / var(--inner) * 100vw ), 27px);}
.solution-gallery ul {display: flex; flex-wrap: wrap; margin: -10px;}
.solution-gallery li {width: 25%; padding: 10px;}
.solution-gallery-item {position: relative; width: 100%; padding-bottom: 58.50746%; overflow: hidden;}
.solution-gallery-item img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}

.sec-process-welcome {margin-bottom: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px);}
.row {display: flex;}
.col {flex: 1; cursor: pointer;}
.full-process-tit {padding: 0 10px; margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.full-process-tit h3 {margin-bottom:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.full-process-arrow {position: relative; width: 250px; height: 2px; background: #dfdfdf; margin: 0 auto; transition: 1.5s .2s;}
.full-process-arrow:before,
.full-process-arrow:after {content:""; position:absolute; top:50%;  right: 0; transform:translateY(-50%); width:15px; height:25px; background:url("/images/sub/full-process-arrow.png") 50% 50% no-repeat;}
.full-process-arrow:before {right: auto; left:0;transform: translateY(-50%) rotate(180deg);}
.aos-animate .full-process-arrow {width: 100%;}
.full-process-item {margin: 0 -10px;}
.full-process-circle {position:relative; padding-bottom:100%; margin-bottom: var(--container-space);}
.full-process-circle .wrap {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-radius:100%; background:#f8f8f8; border: 1px solid #eee; box-shadow:4px 4px 28px rgba(0,0,0,.06); transition: .4s;}
.full-process-item .wrap .icon {transition: .3s;}
.full-process-item:hover .full-process-circle .wrap {background: #121212; border-color: #121212; color: #fff;}
.full-process-item:hover .wrap .icon {filter: grayscale(1) brightness(30);}
.full-process-step {margin-bottom: 8px; color: #ccc;}
.full-process-txt .item-tit {padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px dashed #ddd;}

.sec-process-detail .group {position:relative; padding:clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px) 0;}
.sec-process-detail .group .contain {display:flex; align-items:center; justify-content:space-between; flex-direction:row-reverse; position:relative;}
.sec-process-detail .group.bg-group {padding:clamp(70px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}
.sec-process-detail .group.bg-group:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);}
.sec-process-detail #processTarget1:before {background: url('/images/sub/bg-process-target01.jpg') no-repeat center center; background-size:cover;}
.sec-process-detail #processTarget3:before {background: url('/images/sub/bg-process-target03.jpg') no-repeat center center; background-size:cover;}
.sec-process-detail #processTarget5:before {background: url('/images/sub/bg-process-target05.jpg') no-repeat center center; background-size:cover;}
.sec-process-detail .group.bg-group .contain {flex-direction:row;}
.sec-process-detail .group.bg-group .right .circle-2 span:before {top:50%; left:0;}
.sec-process-detail .group.bg-group .left {color: #fff;}
.sec-process-detail .left {width:43.643%;}
.sec-process-detail .left .wrap {display:flex;}
.sec-process-detail .left .ico {width:120px;}
.sec-process-detail .bg-group .left .ico {filter: grayscale(1) brightness(30);}
.sec-process-detail .left .cnt {flex:1 1 auto; min-width:0; width:1%; padding-left: clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px);}
.sec-process-detail .left .tit-area {position: relative; padding-bottom:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); margin-bottom:clamp(25px, calc( 35 / var(--inner) * 100vw ), 35px); border-bottom: 1px solid #ddd;}
.sec-process-detail .bg-group .left .tit-area { border-bottom:1px solid rgba(255,255,255,.24);}
.sec-process-detail .left .tit-area p {position: absolute; left: calc(clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px) * -1); top: 50%; padding-bottom:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); transform: translateY(-50%);  color:#a8a8a8; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.5em; font-weight:500; }
.sec-process-detail .bg-group .left .tit-area p {color: #fff;opacity: .5;}
.sec-process-detail .left h3 {font-size: clamp(24px, calc( 48 / var(--inner) * 100vw ), 48px); line-height: 1.2em; font-weight: 600; color: var(--dark-color);}
.sec-process-detail .bg-group .left h3 {color: #fff;}
.sec-process-detail .btn-more {padding: 11px 28px; margin-top: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 28px; border: 1px solid rgba(255,255,255,.24);  background: rgba(255,255,255,.048); color: #fff;}
.sec-process-detail .btn-more:hover {background: var(--primary-color); border-color: var(--primary-color);}
.sec-process-detail .right {width:50%; position:relative;}
.sec-process-detail .right .circle-wrap {position:relative; width:82.2%; }
.sec-process-detail .right .circle-wrap.gray-circles {filter: grayscale(1) brightness(1.8);}
.sec-process-detail .bg-group .right .circle-wrap {opacity: .12; filter: grayscale(1);}
.sec-process-detail .right .circle-1 {padding-bottom:calc(100% - 2px); border:1px dashed #eee; border-radius:100%;}
.sec-process-detail .right .circle-2 {position:absolute; top:34px; left:34px; right:34px; bottom:34px; border-radius:100%;}
.sec-process-detail .right .circle-2 span {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ff6363; border-radius:100%; animation:10s circle_rotate linear infinite;}
.sec-process-detail .right .circle-2 span:before {content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:#ff6363; width:13px; height:13px; border-radius:100%;}
.sec-process-detail .right .circle-3 {position:absolute; top:75px; left:75px; right:75px; bottom:75px; background:#ff6363; border-radius:100%;}
.sec-process-detail .right .box-wrap {position:absolute; top:50%; right:0; transform:translateY(-47%); width:86%;}
.sec-process-detail .right .box-wrap .box {width:90%; min-width: max-content; border-radius:clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); box-shadow:0px 18px 26px 0px rgba(0,0,0,.12); opacity:0; transition-property:opacity,transform; transition-duration:1s; transition-timing-function:cubic-bezier(.175,.885,.32,1.275); overflow: hidden;}
.sec-process-detail .right .box-wrap .box.cs {margin-bottom:15px; transform:translate3d(100px,0,0);}
.sec-process-detail .right .box-wrap .box.cs .icon img{filter: brightness(30);}
.sec-process-detail .right .box-wrap .box.sb {margin-left:16.8%; transform:translate3d(-100px,0,0);}
.sec-process-detail .box-tit {display: flex; align-items: center; gap: 12px; padding: 8px var(--container-space); background: #aaa; color: #fff; font-weight: 600;}
.sec-process-detail .box-tit span {font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #7b0e0e; font-weight: 400;}
.sec-process-detail .sb .box-tit {background: #f5dede; color: var(--dark-color);}
.sec-process-detail .box-txt {padding: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px) var(--container-space); background: #fff;}
.sec-process-detail .right .box-wrap.aos-animate .box.cs {opacity:1; transform:translate3d(0,0,0); transition-delay:.2s;}
.sec-process-detail .right .box-wrap.aos-animate .box.sb {opacity:1; transform:translate3d(0,0,0); transition-delay:.3s;}

@keyframes circle_rotate{
	0% {transform:rotate(0);}
	100% {transform:rotate(360deg);}
}
.why .sec {padding:clamp(40px, calc( 160 / var(--inner) * 100vw ), 160px) 0;}
.why .sec.bg-sec {position: relative; padding:0 0 clamp(70px, calc( 220 / var(--inner) * 100vw ), 220px);}
.why .sec.bg-sec:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; clip-path: polygon(0 0, 100% 7%, 100% 94%, 0% 100%); z-index: -1;}
.why .sec01.bg-sec:before {background: url('/images/sub/bg-why-sec01.jpg') no-repeat bottom center; background-size: cover;}
.why .sec03.bg-sec:before {background: url('/images/sub/bg-why-sec03_1.png') no-repeat bottom center; background-size: cover;}
.why .sec-why-welcome {padding-top: 0; margin-bottom:clamp(40px, calc( 160 / var(--inner) * 100vw ), 160px);}
.why-welcome-questions {gap:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.why-welcome-question {display: flex; flex-direction: column; gap: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); background: #f9f4f4; border-radius: 0 0 clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px) clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px);}
.why-welcome-question:nth-child(even) {background: #f4f4f4;}
.why-welcome-circle {position: relative; z-index: 1;}
.why-welcome-circle:before {position: absolute; content: ''; top: 0; left: 0; right: 0; height: 50%; background: #fff; z-index: -1;}
.why-welcome-question h3 {margin-bottom: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.why-welcome-question h3:before {display: block; content: ''; width: 12px; height: 12px; background: var(--primary-color); border-radius: 100%; margin: 0 auto clamp(8px, calc( 15 / var(--inner) * 100vw ), 15px);}
.why-welcome-question:nth-child(even) h3:before {background: var(--dark-color);}
.why-welcome-question li:not(:last-child) {margin-bottom: 8px;}
.why-welcome-txt {padding: 0 15px clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}

.group:not(:last-child) {margin-bottom: clamp(40px, calc( 135 / var(--inner) * 100vw ), 135px);}
.group-num {margin-bottom: clamp(30px, calc( 75 / var(--inner) * 100vw ), 75px);}
.group-num span {display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 auto; border-radius: 100%; background: url('/images/sub/group-number.png') no-repeat center center; background-size: contain; font-size: clamp(26px, calc( 56 / var(--inner) * 100vw ), 56px); line-height: 1em; font-weight: 700; color: #333;}
.why .sec-tit {margin-bottom: clamp(25px, calc( 90 / var(--inner) * 100vw ), 90px); text-align: center;}
.why .sec-tit h2 {font-size: clamp(24px, calc( 42 / var(--inner) * 100vw ), 42px); font-weight: 600; line-height: 1.38em;}
.why .sec-tit p {margin-top: var(--container-space); line-height: 1.889em;}



.flex-items {display: flex; gap: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.circle-benefit {position: relative;}
.circle-benefit:before {display: block;content:'';width: 100%; padding-bottom: 100%; background: url('/images/sub/bg-circle-benefit01.png') no-repeat center center; background-size:contain;}
.circle-benefit:nth-child(2):before {background-image: url('/images/sub/bg-circle-benefit02.png');}
.circle-benefit:nth-child(3):before {background-image: url('/images/sub/bg-circle-benefit03.png');}
.circle-benefit:nth-child(4):before {background-image: url('/images/sub/bg-circle-benefit04.png');}
.circle-benefit .wrap {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: clamp(8px, calc( 15 / var(--inner) * 100vw ), 15px); position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.certi-slider {position: relative; padding:0 clamp(50px, calc( 90 / var(--inner) * 100vw ), 90px); margin: 0 calc(clamp(50px, calc( 90 / var(--inner) * 100vw ), 90px) * -1) clamp(30px, calc( 160 / var(--inner) * 100vw ), 160px);}
.certi-slider .swiper {position: unset; margin: 0 calc(clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px) * -1);}
.cert-item {padding: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.cert-tit {margin-top: 15px; padding: clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px) 10px; background: #2c2c2c; border: 1px solid #505050; border-radius:clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px);  color: #fff; text-align: center; font-weight: 500;}
.cert-arrow {right: 0; width: 48px; height: 48px; background: url('/images/sub/cert-arrow.png') no-repeat center center; background-size :contain; overflow: hidden; text-indent: -9999em; filter: grayscale(1); z-index: 2;}
.cert-arrow:hover {filter: none;}
.cert-arrow.swiper-button-prev {right: auto; left: 0; transform: rotate(180deg);}

.zigzag-process-item {position: relative; display: flex; align-items: center; gap: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px); position: relative;}
.zigzag-process-item:not(:last-child):before {position: absolute; content: ''; top: 50%; bottom: -50%; left: 50%; width: 1px; border: 1px dashed #ddd;}
.zigzag-process-item:nth-child(even) {flex-direction: row-reverse;}
.zigzag-process-item:not(:last-child) {padding-bottom:40px;}
.zigzag-img, .zigzag-txt {flex:1;}
.zigzag-num span {position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 12px solid #eee; border-radius: 100%; background: var(--dark-color); color: #fff; font-weight: 600;}
.zigzag-num span:before {position: absolute; content:''; top: -24px; right: -24px; bottom: -24px; left: -24px; background: #fafafa; border-radius: 100%; z-index: -1;}
.zigzag-process-item:nth-child(even) .zigzag-txt .wrap {padding-left:clamp(0px, calc( 50 / var(--inner) * 100vw ), 50px);}
.zigzag-process-item h3 {margin-bottom:clamp(12px, calc( 22 / var(--inner) * 100vw ), 22px);font-size:clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px); line-height: 1em; color: var(--dark-color);}

.solution-provider-item {position: relative; display: flex; justify-content: space-between;}
.solution-provider-item:nth-child(even) {flex-direction: row-reverse;}
.solution-provider-item:not(:last-child) {margin-bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px);}
.provider-txt {display: flex; justify-content: space-between; width: 580px; height: fit-content; padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px); background: #2c2c2c; border-radius: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px);}
.provider-txt h3 {margin-bottom:clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px);font-size:clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px); line-height: 1em;}
.provider-txt li {text-indent: -10px; padding-left: 10px; color: #e7e7e7;}
.provider-txt li:not(:last-child) {margin-bottom: 8px;}
.software-item .provider-txt {padding-right: 0;}
.provider-img {width: 50%; text-align: center;}
.hardware-item .provider-img {padding-bottom: clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px);}
.provider-img .bg {position: absolute; right: 0; bottom: 0; z-index: -1; width: 71.429%;}
.provider-img .bg span {position: absolute; left: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500;}
.software-item .provider-img .bg {right: auto; bottom: auto; top: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); left: 0;}
.contact-system {gap: 20px 7px;}

.company-tit {margin-bottom: clamp(20px, calc( 65 / var(--inner) * 100vw ), 65px);}
.company-tit h2 {line-height: 1.3928em;}
.company-tit p {padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0;}
.page-company h3 {padding-bottom: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px); font-size: clamp(22px, calc( 28 / var(--inner) * 100vw ), 28px); line-height: 1.3em; font-weight: 600;}
.page-company .sec-cnt {border-top: 1px solid #dfdfdf; padding-top: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px);}
.gradient-txt {width: fit-content; background: var(--gradient-color); background-clicp: text; -webkit-background-clip: text; color: transparent;}
.company-cnt {display: flex; gap: 40px clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.company-cnt .sec {flex: 1;}
.direction-info {margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.direction-shortcuts {gap: 10px 30px; margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.direction-shortcut {display: flex; align-items: center; gap: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.page-company .job-cnt {display: flex; align-items: center;border-top: 1px solid #fff;}
.page-company .job-cnt .wrap {width: 100%; padding-bottom: 21.5%;}
.page-company .job-cnt .wrap p:before {content:''; display: block; width: 12px; height: 12px; margin-right: 12px; border-radius: 100%; background:#ccc;}
.page-company .org-cnt {padding-top:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border-top: 1px solid var(--dark-color); text-align: center;}
.job-shortcuts {gap: 10px; margin-top: var(--container-space);}
.job-shortcut {flex:1; display: flex; align-items: center; justify-content: space-between; padding: var(--container-space); background: #f4f4f4; font-weight: 600; color: var(--dark-color);}
.job-shortcut:hover {background: var(--primary-color); color: #fff;}
.page-company .group:not(:last-child) {margin-bottom:clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px);}
.page-company.page-contact .sec-cnt {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.contact-items {display: flex; flex-wrap: wrap; gap: 20px 30px;}
.contact-item {display: flex; align-items: center; gap: 12px;}
.map iframe {width: 100% !important;}