@charset "utf-8";

.fp-scroller { will-change: transform; }
.con-wrap{width: 92%; max-width: 1400px; margin: auto;}
.block-txt{display: block; margin-top: 10px;}
.main-txt .main-title{line-height: 1.2; font-size: 60px; font-weight: 600; color: #303030;}
.main-txt .sub-txt{margin-top: 20px; font-size: 20px; color: #303030;}
.main-visual{position: relative; height: 700px; margin-top: 90px; overflow: hidden;}
.main-visual .con-wrap{position: relative; display: flex; align-items: center; height: 100%; overflow: hidden;}
.main-visual .slide01{background: url(../images/main/main_bn_bg01.webp);}
.main-visual .slide02{background: url(../images/main/main_bn_bg01.webp);}
.main-visual .slide03{background: url(../images/main/main_bn_bg02.webp);}
.main-visual .visual-txt{position: relative; padding-bottom: 60px; z-index: 1;}
.main-visual .visual-txt .tag{display: inline-block; padding: 5px 20px; border-radius: 30px; background-color: #2684FF; font-size: 24px; font-weight: 600; color: #FFF;}
.main-visual .visual-txt .title{margin-top: 15px; line-height: 1.2; font-size: 70px; font-weight: 600; color: #FFF;}
.main-visual .visual-txt .sub-txt{position:absolute; bottom: -20px; font-size: 26px; font-weight: 200; color: #FFF; line-height: 1.2;}
.main-visual .visual-img{position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; height: 100%;}
.main-visual .visual-controls{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 15px; z-index: 5; --bar-w: 160px;}
.main-visual .visual-pagination{display: flex; align-items: center; justify-content: center; gap: 15px; flex: 1 1 auto;}
.main-visual .visual-pagination .swiper-pagination-bullet{display: inline-flex; align-items: center; gap: 15px; width: auto; height: auto; margin: 0; background: none; opacity: .35;}
.main-visual .visual-pagination .swiper-pagination-bullet .num{line-height: 1.0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: #fff;}
.main-visual .visual-pagination .bar{display: none; position: relative; width: var(--bar-w); height: 2px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; direction: ltr;}
.main-visual .visual-pagination .bar > span{position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: 0%; background: #fff; transition: width .12s linear; transform: none !important; transform-origin: left center !important;}
.main-visual .visual-pagination .swiper-pagination-bullet-active{ opacity: 1; }
.main-visual .visual-pagination .swiper-pagination-bullet-active .bar{ display: block; }
.main-visual .autoplay-toggle{position: relative; width: 25px; height: 25px; flex: 0 0 auto; display: inline-grid; place-items: center; border: none; background: transparent; color: #fff; cursor: pointer; box-sizing: border-box;}
.main-visual .autoplay-toggle::before{content: ""; display: block; width: 25px; height: 25px; background: url(../images/main/bn_stop_icon.png) no-repeat center; background-size: 25px auto;}
.main-visual .visual-controls.is-paused .autoplay-toggle::before{content: ""; display: block; width: 25px; height: 25px; background: url(../images/main/bn_play_icon.png) no-repeat center; background-size: 25px auto;}
.main-customer{width: 92%; max-width: 1400px; margin: auto; padding: 120px 0;}
.main-customer .customer-list{display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 30px; margin: 60px auto;}
.main-customer .customer-list li img{width: 100%;}
.main-customer .testimonial-con{position:relative; display: flex; justify-content: space-between; padding: 50px 80px; border-radius: 30px; background: linear-gradient(80deg, rgba(141, 217, 255, 0.2) 0%, rgba(141, 217, 255, 0.2) 50%, rgba(20, 120, 202, 0.2) 100%)}
.main-customer .testimonial-con .logo{width: 180px;}
.main-customer .testimonial-con .logo img{width: 100%;}
.main-customer .testimonial-con .txt-con{display: flex; justify-content: space-between; width: calc(100% - 260px);}
.main-customer .testimonial-con .txt-con p{font-size: 16px; color: #303030;}
.main-customer .testimonial-con .txt-con p em{font-weight: 500;}
.main-customer .testimonial-con .txt-con .txt{width: calc(100% - 200px);}
.main-customer .testimonial-con .txt-con .author{display: flex; gap: 20px; align-items: flex-end; width: 165px;}
.main-customer .testimonial-con .txt-con .author p{position:relative;}
.main-customer .testimonial-con .txt-con .author p:first-child::after{content: ''; position:absolute; top: 6px; right: -11px; display: block; width: 1px; height: 14px; background-color: #b4b4b4;}
.main-customer .testimonial-con .deco{position: absolute; top: -30px; right: -30px; width: 139px;}
.main-customer .testimonial-con .deco img{width: 100%;}
.main-business{display: flex; flex-direction: column; padding: 120px 0; background: url(../images/main/business_bg.webp) center; background-size: cover; background-attachment: fixed;}
.main-business .main-txt{width: 92%; max-width: 1400px; margin: auto;}
.main-business .main-txt .main-title{color: #FFF;}
.main-business .con-wrap{display:flex; justify-content: space-between; align-items: flex-start;}
.main-business .txt-con{display: flex; flex-direction: column; width: calc(100% - 740px); max-width: 480px;}
.main-business .txt-con dl{margin-bottom: 300px; opacity: 0.2; transition: opacity 0.5s; transition: opacity 0.6s ease;}
.main-business .txt-con dl:first-child{margin-top: 250px;}
.main-business .txt-con dl dt{font-size: 30px; font-weight: 600; color: #FFF;}
.main-business .txt-con dl dd{margin-top: 30px; line-height: 1.4; font-size: 20px; color: #FFF;}
.main-business .txt-con dl dd.img-mo{display: none;}
.main-business .txt-con dl.active{opacity: 1; }
.main-business .txt-con dl.active dt{color: #00AAFF;}
.main-business .img-con{display: flex; justify-content: flex-end; width: 50%; height: calc(100vh - 220px);}
.main-business .img-con img{display: none; width: auto; max-height: 696px; height: 100% !important;}
.main-business .img-con img.active{display: block;}
.main-partner{padding: 120px 0; background-color: #F2F8FF;}
.main-partner .partner-list{position: relative; margin-top: 80px;}
.main-partner .partner-slide{position:static; width: calc(100% - 320px); padding: 20px 10px;}
.main-partner .partner-slide .swiper-slide{position: relative; border-radius: 40px; overflow: hidden; transition: 0.3s ease-in;}
.main-partner .partner-slide .swiper-slide:hover, .main-partner .partner-slide .swiper-slide.is-hover{top: -20px; box-shadow: 0px 10px 10px rgba(0,0,0,0.1);}
.main-partner .partner-slide .swiper-slide img{width: 100%;}
.main-partner .partner-slide .swiper-slide .on{position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s ease-in;}
.main-partner .partner-slide .swiper-slide:hover img, .main-partner .partner-slide .swiper-slide.is-hover img{opacity: 0;}
.main-partner .partner-slide .swiper-slide:hover .on, .main-partner .partner-slide .swiper-slide.is-hover .on{opacity: 1;}
.swiper-button-next, .swiper-button-prev{display:block; width: 60px !important; height: 60px !important; background-color: rgba(48,48,48,0.6); border-radius: 30px;}
.swiper-button-next{right: 0 !important;}
.swiper-button-prev{left: 0 !important;}
.swiper-button-next:after, .swiper-button-prev:after{content: '' !important;}
.swiper-button-prev:after{width: 100%; height: 100%; background: url(../images/main/partner_prev_btn.png) no-repeat center; background-size: 30px auto;}
.swiper-button-next:after{width: 100%; height: 100%; background: url(../images/main/partner_next_btn.png) no-repeat center; background-size: 30px auto;}
.main-why{padding: 120px 0; background: linear-gradient(-80deg, rgba(7, 46, 73, 1.0) 0%, rgba(0, 17, 25, 1.0) 100%)}
.main-why .con-wrap{display: flex; justify-content: space-between; align-items: center;}
.main-why .main-txt{width: calc(100% - 920px);}
.main-why .main-txt .main-title, .main-why .main-txt .sub-txt{color: #FFF;}
.main-why .main-txt .sub-txt em{background: linear-gradient(to top, #0088E9 35%, transparent 35%); font-weight: 500;}
.main-why .why-list{display: flex; align-items: center; width: 880px; height: 330px;}
.main-why .why-list li{width: 25%; padding: 40px 0; text-align: center; transition: 0.3s ease-in;}
.main-why .why-list li img{width: 0; height: 0; visibility: hidden; transition: 0.3s ease-in;}
.main-why .why-list li dl{margin-top: 20px; border-right: 1px solid rgba(255,255,255,0.2);}
.main-why .why-list li:last-child dl{border-right: none;}
.main-why .why-list li dt{line-height: 1.0; font-size: 54px; font-weight: 600; color: #FFF;}
.main-why .why-list li dt span{font-size: 20px;}
.main-why .why-list li dd{margin-top: 25px; font-size: 16px; color: #FFF;}
.main-why .why-list li.on, .main-why .why-list li:hover{border-radius: 15px;}
.main-why .why-list li:nth-child(1).on, .main-why .why-list li:nth-child(1):hover, .main-why .why-list li:nth-child(1).on, .main-why .why-list li.is-hover:nth-child(1){background: #3DBBF0;}
.main-why .why-list li:nth-child(2).on, .main-why .why-list li:nth-child(2):hover, .main-why .why-list li:nth-child(2).on, .main-why .why-list li.is-hover:nth-child(2){background: #3B56C2;}
.main-why .why-list li:nth-child(3).on, .main-why .why-list li:nth-child(3):hover, .main-why .why-list li:nth-child(3).on, .main-why .why-list li.is-hover:nth-child(3){background: #504CBA;}
.main-why .why-list li:nth-child(4).on, .main-why .why-list li:nth-child(4):hover, .main-why .why-list li:nth-child(4).on, .main-why .why-list li.is-hover:nth-child(4){background: #6D3BC2;}
.main-why .why-list li.on img, .main-why .why-list li:hover img, .main-why .why-list li.on img, .main-why .why-list li.is-hover img{width: auto; height: 100px; visibility: visible;}
.main-why .why-list li.on dl, .main-why .why-list li:hover dl, .main-why .why-list li.on dl, .main-why .why-list li.is-hover dl{border-right: none;}
.main-inquiry{padding: 160px 0; background: url(../images/main/inquiry_bg.webp) no-repeat center; background-size: cover;}
.main-inquiry .con-wrap{text-align: center;}
.main-inquiry p{font-size: 40px; font-weight: 600; color: #FFF; line-height: 1.4;}
.main-inquiry a{display: inline-block; width: 180px; line-height: 50px; margin-top: 40px; border:1px solid #FFF; border-radius:5px; font-size: 18px; font-weight: 600; color:#FFF; transition: 0.3s ease-in;}
.main-inquiry a:hover{background-color: #FFF; color: #303030;}


@media screen and (max-width:1400px){
.main-txt .main-title{font-size: 50px;}
.main-txt .sub-txt{font-size: 18px;}
.main-visual{height: 500px; margin-top: 60px;}
.main-visual .visual-txt{}
.main-visual .visual-txt .tag{padding: 2px 15px; font-size: 20px;}
.main-visual .visual-txt .title{font-size: 60px;}
.main-visual .visual-txt .sub-txt{bottom: 0; font-size: 22px;}
.main-visual .visual-img img{width: 72%;}
.main-customer{padding: 100px 0;}
.main-customer .customer-list{gap: 20px; margin: 40px auto;}
.main-customer .testimonial-con .logo{width: 160px;}
.main-customer .testimonial-con{padding: 40px 40px;}
.main-customer .testimonial-con .txt-con{width: calc(100% - 200px);}
.main-customer .testimonial-con .txt-con p .pc-br{display: none;}
.main-customer .testimonial-con .deco{width: 120px; right: -10px;}
.main-business{padding: 100px 0;}
.main-business .txt-con{width: calc(50% - 40px);}
.main-business .txt-con dl{margin-bottom: 250px;}
.main-business .txt-con dl:first-child{margin-top: 160px;}
.main-business .txt-con dl dt{font-size: 26px;}
.main-business .txt-con dl dd{margin-top: 10px; font-size: 16px;}
.main-partner{padding: 120px 0 100px;}
.main-partner .partner-slide{width: calc(100% - 200px);}
.main-partner .partner-slide .swiper-slide{border-radius: 30px;}
.main-partner .partner-list{margin-top: 60px;}
.swiper-button-next, .swiper-button-prev{width: 50px !important; height: 50px !important;}
.swiper-button-next:after, .swiper-button-prev:after{background-size: 26px auto;}
.main-why .con-wrap{flex-direction: column; align-items: flex-start; gap: 60px;}
.main-why .main-txt{width: auto;}
.main-why .main-txt .sub-txt .pc-br{display: none;}
.main-why .main-txt .sub-txt .block-txt{margin-top: 0;}
.main-why{padding: 100px 0;}
.main-why .why-list{width: 100%;}
.main-why .why-list li dt{font-size: 48px;}
.main-inquiry{padding: 140px 0;}
}

@media screen and (max-width:1024px){
.main-visual .visual-txt .tag{padding: 0 15px; font-size: 18px;}
.main-visual .visual-txt .title{font-size: 40px;}
.main-visual .visual-txt .sub-txt{font-size: 20px;}
.main-visual .visual-controls{gap: 10px; --bar-w: 120px;}
.main-visual .visual-pagination .swiper-pagination-bullet .num{font-size: 14px;}
.main-visual .autoplay-toggle{width: 22px; height: 22px;}
.main-visual .autoplay-toggle::before{width: 22px; height: 22px; background-size: 22px auto;}
.main-visual .visual-pagination{gap: 10px;}
.main-visual .visual-pagination .swiper-pagination-bullet{gap: 10px;}
.main-visual .visual-controls.is-paused .autoplay-toggle::before{width: 22px; height: 22px; background-size: 22px auto;}
.main-customer{padding: 80px 0;}
.main-txt .main-title{font-size: 34px;}
.main-txt .sub-txt{margin-top: 10px; font-size: 16px;}
.main-customer .testimonial-con{border-radius: 20px;}
.main-customer .testimonial-con .txt-con p{font-size: 14px;}
.main-customer .testimonial-con .txt-con{flex-direction: column; gap: 20px; width: calc(100% - 180px);}
.main-customer .testimonial-con .txt-con .txt{width: auto;}
.main-customer .testimonial-con .deco{top: auto; bottom: -10px; width: 80px;}
.main-customer .testimonial-con .logo{width: 120px;}
.main-business{padding: 80px 0; background-attachment: scroll;}
.main-business .con-wrap{gap: 40px;}
.main-business .txt-con{gap: 60px; width: auto; max-width: none;}
.main-business .txt-con dl{margin-bottom: 0;}
.main-business .txt-con dl:first-child{margin-top: 40px;}
.main-business .txt-con dl dt{font-size: 22px;}
.main-business .txt-con dl dd{font-size: 14px;}
.main-business .txt-con dl dd.img-mo{display: block; max-width: 500px; margin: 40px auto 0;}
.main-business .txt-con dl dd.img-mo img{width: 100%;}
.main-business .img-con{display: none;}
.main-partner{padding: 120px 0 80px;}
.main-partner .partner-slide{width: calc(100% - 160px);}
.main-partner .partner-slide .swiper-slide{border-radius: 20px;}
.swiper-button-next, .swiper-button-prev{width: 40px !important; height: 40px !important;}
.swiper-button-next:after, .swiper-button-prev:after{background-size: 22px auto;}
.main-why{padding: 80px 0;}
.main-why .why-list li dt{font-size: 40px;}
.main-why .why-list li dt span{font-size: 18px;}
.main-why .why-list li dd{margin-top: 15px; font-size: 14px;}
.main-inquiry{padding: 80px 0;}
.main-inquiry p{font-size: 30px;}
.main-inquiry a{width: 140px; line-height: 36px; margin-top: 30px; font-size: 14px;}
}
	
@media (max-width: 768px){
.main-visual{height: calc(100vh - 60px);}
.main-visual .con-wrap{align-items: flex-start;}
.main-visual .visual-txt{padding-top: 60px; padding-bottom: 0;}
.main-visual .visual-txt .title{font-size: 38px;}
.main-visual .visual-txt .title br{display: none;}
.main-visual .visual-txt .sub-txt{position: static; margin-top: 20px; font-size: 18px;}
.main-visual .visual-img{top: auto; bottom: 100px; height: auto;}
.main-visual .visual-img img{width: 120%;}
.main-visual .visual-controls{--bar-w: 50px; }
.main-visual .autoplay-toggle{width: 20px; height: 20px;}
.main-visual .autoplay-toggle::before{width: 20px; height: 20px; background-size: 20px auto;}
.main-customer{padding: 60px 0;}
.main-customer .customer-list{grid-template-columns: repeat(2, 1fr);}
.main-customer .testimonial-con{flex-direction: column; gap: 20px;}
.main-customer .testimonial-con .txt-con{width: auto;}
.main-business{padding: 60px 0;}
.main-business .txt-con{gap: 40px;}
.main-business .txt-con dl dt{font-size: 20px;}
.main-business .txt-con dl dd.img-mo{margin: 20px auto 0;}
.main-partner{padding: 100px 0 60px;}
.main-partner .partner-slide{width: calc(100% - 120px);}
.main-why{padding: 60px 0;}
.main-why .why-list{position: relative; display: grid; grid-template-columns: repeat(2, 1fr); height: auto;}
.main-why .why-list::after{content: ''; position: absolute; left: 0; top: 50%; display: block; width: 100%; height: 1px; background: rgba(255,255,255,0.2);}
.main-why .why-list::before{content: ''; position: absolute; left: 50%; top: 0; display: block; width: 1px; height: 100%; background: rgba(255,255,255,0.2);}
.main-why .why-list li{width: auto; height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0;}
.main-why .why-list li.on img, .main-why .why-list li:hover img, .main-why .why-list li.on img, .main-why .why-list li.is-hover img{width: auto; height: 80px;}
.main-why .why-list li dl{border-right: none;}
.main-inquiry{padding: 60px 0;}
.main-inquiry p{font-size: 28px;}
}