/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: "Lato", sans-serif; overflow-x: hidden; position: relative;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1470px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}
.width-1300 { max-width:1300px;margin:0 auto; text-align:left; }

#content { font-size: 16px; line-height:1.5; color: #000; letter-spacing: 0; font-weight: 400; padding-top: 166px;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}


.demo-section { padding-left: 5%; padding-right: 5%;}

.font-size-18 { font-size: 18px;}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.5vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.3;}
.font-size-44 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-60 { font-size: clamp(28px, 4vw, 60px); line-height: 1.2;}
.font-size-72 { font-size: clamp(32px, 5vw, 72px); line-height: 1.2;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-700 { font-weight: 700;}
.weight-900 { font-weight: 900;}

.color-blue { color: #2e31b8;}
.color-black { color: #3c3c3c;}
.title-type-1 { padding-bottom: calc(20px + 1%); line-height: 1.3;}
.title-type-2 { padding-bottom: calc(10px + 1%); line-height: 1.3;}
.font-uppercase { text-transform: uppercase;}


.banner { position: relative; border-radius: 0 0 145px 0; overflow: hidden;}

.banner-pc, .banner-mobile { position: relative;}
.banner-mobile { display: none !important;}

.banner-pto {  line-height: 0;}
.banner-pto img { width: 100%;}


.banner-slogon { position: absolute; z-index: 3; left: 10%; top:50%; transform: translateY(-50%); max-width: 600px;}

.swiper-slide {text-align: center;font-size: 18px;display: flex;justify-content: center;align-items: center;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.swiper {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.swiper-slide {background-size: cover;background-position: center; padding: 0 0px; position: relative;}
.mySwiper2 {height: 80%;width: 100%; margin-bottom: 25px;}
.swiper-slide .description, .swiper-slide .title , .swiper-slide .banner-btn {display: block;opacity: 0; transform: translateY(-50px);position: relative; text-align: left;}
.swiper-slide .title {font-weight: 900; font-size: clamp(32px, 5vw, 72px);/*-webkit-text-stroke: 2px #fff;*/ line-height: 1.1; padding-bottom: calc(10px + 1%); color: #1b1d79;transition: all 0.5s ease 0.5s; text-transform: uppercase;}
.swiper-slide .title:after {/*content: "";*/ position:absolute; width: 310px; height: 8px; background: #222; left: 0; bottom: 0;}
.swiper-slide .title > span {display: block; font-size: clamp(16px, 1.1vw, 20px); padding-bottom: 15px; line-height: 1.2; font-weight: 500;}
.swiper-slide .description {font-weight:500; font-size: clamp(22px, 3.3vw, 36px); color: #1b1d79 !important;transition: all 0.8s ease 0.8s; padding-bottom: calc(20px + 2%); line-height: 1.3; }
.swiper-slide .banner-btn { transition: transform 1.2s ease 1.2s, opacity 1.2s ease 1.2s, background 0.4s ease-out 0s !important; text-align: center; opacity: 0;}
.swiper-slide .banner-btn:hover { /*background: #3c61ad; color: #fff !important;*/}
.swiper-slide-active .description, .swiper-slide-active .title, .swiper-slide-active .banner-btn {opacity: 1;}
.swiper-slide-active .title, .swiper-slide-active .description { transform:translateY(0px);}
.swiper-slide-active .banner-btn { transform:translateY(0px);}

.swiper-next, .swiper-prev { width: 50px !important; height: 50px !important; border-radius: 100%; background: rgba(51,51,51,.8); position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; bottom:10%;transition: all 0.4s ease-out 0s; }
.swiper-next:hover, .swiper-prev:hover { transform: scale(0.85);}
.swiper-prev { right: calc(60px + 5%);}
.swiper-next { right: 5%;}

.banner .swiper-pagination-horizontal {  text-align: left; padding: 0 15% 2% 15%;}
.banner .swiper-pagination-bullet { width: 13px; height: 13px; background: #fff;  opacity: 1; margin: 0 8px !important;}
.banner .swiper-pagination-bullet-active {  background: #2e31b8;}

.banner-scroll { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 70px; display:flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.banner-scroll:before, .banner-scroll:after { content: ""; position: absolute; width: 166px; height: 40px; border-radius: 50%; border: 1px solid #fff; left: 50%; transform: translateX(-50%);}
.banner-scroll:before {  top:-10px;}
.banner-scroll:after {  top:20px;}
.banner-scroll > div { font-size: 16px; color: #fff; padding-bottom: 15px; line-height:1;}
.banner-scroll > div:after { content: ""; position: absolute; width: 2px; height: 78px; background: #2e31b8; transform:translateX(-50%);left: 50%; top:80px  }
.banner-scroll > span { width: 14px; height: 14px; border-width: 0 3px 3px 0; border-style: solid; border-color: #fff; transform: rotate(45deg);display: inline-block; position: relative;}

.banner-social-tool { position: absolute; z-index: 3; top:0; left: 20px; height: calc(100% - 25px); width: 68px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.banner-social-tool > div:nth-of-type(1) { height: calc(100% - 160px - 95px); width: 68px; background: url("../upload-files/design/banner-social-bg.png") no-repeat 50% 100%;}
.banner-social-tool > div:nth-of-type(2) { height: 160px;display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: space-around; padding:10px 0 5px 0;}
.banner-social-tool > div:nth-of-type(2) > a { width: 38px; height: 38px; border-radius: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;background: #848487;}
.banner-social-tool > div:nth-of-type(2) > a:nth-of-type(1):hover { background: #2bb02e;}
.banner-social-tool > div:nth-of-type(2) > a:nth-of-type(2):hover { background: #dc1d1d;}
.banner-social-tool > div:nth-of-type(2) > a:nth-of-type(3):hover { background: #388fd9;}
.banner-social-tool > div:nth-of-type(2) > a > img { max-width: 20px;}
.banner-social-tool > div:nth-of-type(3) { writing-mode: sideways-lr; height: 95px; color: #848487; font-size: 17px; font-weight: 700;}

.idx-solution-box { background: url("../upload-files/design/idx-solution-bg.png") no-repeat top center; position: relative; padding-top: calc(20px + 6%);}
.idx-solution-box:before { background: rgba(238,238,238,.6); content: ""; position:absolute; z-index: -2 ;left: 0; top: 0; width: 50%; height: 100%; border-top-right-radius: 180px;}
.idx-solution-box-title { position: absolute; z-index: 2; left: 1%; top: 50%; transform: translateY(-50%);color: #fff; font-weight: 900; text-transform: uppercase;writing-mode: vertical-rl; font-size: clamp(45px, 8vw, 170px); line-height: 1;}

.idx-solution-section { z-index: 2; position: relative; padding-left: 5%; padding-right: 5%;}

.loop2 { position: relative; padding-left: 3%; padding-right: 3%;}
.loop2 .owl-dots {  display: none !important;}
.loop2 .owl-item {position: relative; z-index: 2; padding: 0 0px;}
.loop2 .owl-nav { position: absolute; top:50%; left: 0%; width: 100%; z-index: 11; transform: translateY(-50%);}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 60px); background:transparent !important; width: 30px; height: 30px; margin: 0 !important; border-radius: 100% !important; border: 0px solid #ddd !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s; }
.loop2 .owl-prev { left:0px; }
.loop2 .owl-next { right:0px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 18px; height: 18px; background-size: contain; display: inline-block; border-width: 4px 4px 0 0; border-style: solid; border-color: #2e31b8; position: relative; top:-2px;}
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 2px; }
.loop2 .owl-next:before { content: ""; transform: rotate(45deg); right: 3px;}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2; overflow-y: visible !important; padding-bottom: 100px;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: -20px; width: 100%; text-align: center!important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #00b4ab !important; width: 9px !important; height: 9px !important; margin: 5px !important;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { background: #165ea7 !important; }

.idx-solution-top-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 4;}
.idx-solution-top-section > div { width: 44%;}
.idx-solution-top-section > div p { padding: 0; margin: 0 0 35px 0; line-height: 1.5; font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;}
.idx-solution-top-pto { text-align: center;}
.idx-solution-top-title { text-transform: uppercase; padding-bottom: 18px; font-weight: 900; font-size: clamp(20px, 1.9vw, 24px); color: #3d3d3d;}

.idx-solution-top-btn { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-solution-top-btn > a { margin:0 2vw 15px 0}

.title01 { border-left: 3px solid #2e31b8; padding: 2px 0 2px calc(15px + 1%); margin-bottom: calc(20px + 2%); text-transform: uppercase;}
.title01 > span, .title01 > h1 { color: #1b1d79; line-height: 1.2; display: block; margin:0 0 12px 0; padding: 0; font-weight: 900; font-size: clamp(22px, 2.5vw, 30px);font-family: "Lato", sans-serif; }
.title01 > div { color: #3d3d3d; line-height: 1.2;}

.btn01 { display: block; width: 195px; line-height: 50px; border-radius: 25px; text-align: center; text-transform: uppercase; font-size: 16px; color: #fff !important; background: #2e31b8; transition: all 0.4s ease-out 0s !important; position: relative;}
.btn01 > span { display: inline-block; position:relative; z-index: 2;}
.btn01:before, .btn01:after { content: "";position: absolute; width: 20px;; height: 20px; border-radius: 100%; background: #2e31b8; top: 50%; transform: translateY(-50%) scale(0);z-index: 1;transition: all 0.4s ease-out 0s;}
.btn01:hover:before { transform: translateY(-50%) scale(1); left: -10px;}
.btn01:hover:after { transform: translateY(-50%) scale(1); right: -10px;}
.btn01:hover { background: transparent;  box-shadow:inset 0px 0px 0px 2px #1b1d79;  }
.btn01:hover span { color: #1b1d79 }

.idx-solution-bottom-section { background: url("../upload-files/design/idx-solution-bg2.png") no-repeat top center #eaeaea; padding: calc(30px + 4%) 5% calc(10px + 2%) 5%; position: relative; margin-top: -60px;}

.idx-solution-link { position: relative; cursor: pointer; display: block;}
.idx-solution-link-pto  { animation-name:app-circle; animation-duration:25s; animation-iteration-count: infinite; animation-timing-function: linear; width: 100%;}
.idx-solution-link-content { position: absolute; width: calc(100% - 45px); height: calc(100% - 45px); background: #fff; border-radius: 100%; z-index: 0; top:50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; filter: drop-shadow(5px 5px 4px rgba(0,0,0,.2));transition: all 0.4s ease-out 0s;}
.idx-solution-link-content img { width: auto !important;  }
.tab-menu .current .idx-solution-link-content { box-shadow: 0px 0px 0px 5px #2e31b7;}

@keyframes app-circle{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform:  rotate(360deg);
	}
}

.idx-solution-link-name { color: #1b1d79; text-align: center; padding-top: calc(10px + 1%); position: absolute;left: 0; width: 100%; line-height: 1.2;}

.idx-app-box { padding: calc(20px + 5%) 5%; background: url("../upload-files/design/idx-app-bg.png") no-repeat center center #f7f7f7; overflow: hidden;}
.idx-app-section { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-app-section > div { width: 50%;}
.idx-app-section > div:nth-of-type(1) { padding-right: 7%;}
.idx-app-section > div:nth-of-type(1) p { padding: 0; margin: 0 0 calc(25px + 2%) 0; line-height: 1.5; font-weight: 400;}
.idx-app-section > div:nth-of-type(2) .title01 { display: none;}

.idx-app-content { display: none;}
.idx-app-content.current { display: block;}

.idx-app-info { padding-bottom: calc(20px + 2%); display:flex; flex-direction: row; flex-wrap: wrap;}
.idx-app-info > div { width: 33.33%; padding: 0 5% 25px 0; margin-bottom: 25px; position: relative;}
.idx-app-info > div:after { content: ""; position: absolute; background: #b9e6e9; width: 40px; height: 3px; bottom: 0; left: 0; }

.idx-app-pto-box { position: relative;}
.idx-app-pto-bg { animation-name:app-circle; animation-duration:80s; animation-iteration-count: infinite; animation-timing-function: linear; width: 100%;}
.idx-app-image { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: none;}
.idx-app-image.current { display: block;}
.idx-app-control { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; height: 100%; display: none;}
.idx-app-control.current { display: block;}
.idx-app-name {  position: absolute; z-index: 3; cursor: pointer;width: 10%; text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.idx-app-name > div:nth-of-type(1) { }
.idx-app-name > div:nth-of-type(2) {  color: #706f6f; font-size: 1vw; line-height: 1;}
.idx-app-name.current > div:nth-of-type(1) img {  filter: brightness(100);}
.idx-app-name.current > div:nth-of-type(2) {  color: #fff;}
.idx-app-name-1 {  top:13%; left: 47.5%; }
.idx-app-name-2 {  top:22%; right: 22%; }
.idx-app-name-3 {  top:47%; right: 16%; }
.idx-app-name-4 {  top:66%; right: 26%; }
.idx-app-name-5 {  top:72%; right: 48%; }
.idx-app-name-6 {  top:63%; left: 22%; }
.idx-app-name-7 {  top:42%; left: 15%; }
.idx-app-name-8 {  top:20%; left: 26%; }
/*.idx-app-name-1 {  top:47%; right: 16%; }
.idx-app-name-2 {  top:66%; right: 26%; }
.idx-app-name-3 {  top:72%; right: 48%; }
.idx-app-name-4 {  top:63%; left: 22%; }
.idx-app-name-5 {  top:42%; left: 15%; }
.idx-app-name-6 {  top:20%; left: 26%; }
.idx-app-name-7 {  top:13%; left: 47.5%; }
.idx-app-name-8 {  top:22%; right: 22%; }*/


.idx-service-box { background: url("../upload-files/design/idx-service-bg.png") no-repeat center 50px #ffffff; padding: calc(20px + 4%) 0;}
.idx-service-top-section { padding-left: 10%; padding-bottom: calc(20px + 2%);}

.title02 { margin-bottom: calc(20px + 2%);display:flex; flex-direction: row; flex-wrap: wrap;}
.title02 > div { padding-top: 2px; padding-bottom: 2px; font-weight: 900;}
.title02 > div:nth-of-type(1) { padding-right: calc(20px + 1%); margin-right: calc(20px + 1%); border-right: 3px solid #2e31b8;}

.idx-service-top-section-content { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-service-top-section-content > div:nth-of-type(1) { width: 50%; padding-right: 3%;display:flex; flex-direction: row; flex-wrap: wrap;}
.idx-service-top-section-content > div:nth-of-type(1) > div { margin: 0 25px 25px 0; width: calc(50% - 25px); border-radius: 0 25px 0 0; border: 1px solid #e5e5e5; background: #fff;}
.idx-service-top-section-content > div:nth-of-type(2) { width: 50%; }

.idx-service-title-1 { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e5e5e5;}
.idx-service-title-1 > div:nth-of-type(1) { width: 86px; height: 81px; background: #2e31b8; display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.idx-service-title-1 > div:nth-of-type(2) { width: calc(100% - 86px); color: #2e31b8; font-weight: 700; padding: 0 5%;font-size: clamp(18px, 1.5vw, 20px); line-height: 1.3;}
.idx-service-data { padding: 20px;}


.idx-service-bottom-section { border-top: 1px solid #2e31b8; padding-left: 10%; padding-right: 10%;}

.loop3 { position: relative; margin-top: -24px; }
.loop3 .owl-dots {  display: none !important;}
.loop3 .owl-item {position: relative; z-index: 2; padding: 0 0px;}
.loop3 .owl-nav { position: absolute; top:50%; left: 0%; width: 100%; z-index: 11; transform: translateY(-50%);}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:transparent !important; width: 30px; height: 30px; margin: 0 !important; border-radius: 100% !important; border: 0px solid #ddd !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s; }
.loop3 .owl-prev { left:-30px; }
.loop3 .owl-next { right:-30px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 18px; height: 18px; background-size: contain; display: inline-block; border-width: 4px 4px 0 0; border-style: solid; border-color: #2e31b8; position: relative; top:-2px;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 2px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); right: 3px;}
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: -20px; width: 100%; text-align: center!important; padding: 0 0px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #00b4ab !important; width: 9px !important; height: 9px !important; margin: 5px !important;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #165ea7 !important; }

.idx-flow-box:hover .idx-flow-icon img:nth-of-type(1) { display: none !important;}
.idx-flow-box:hover .idx-flow-icon img:nth-of-type(2) { display: inline-block!important;}
.idx-flow-icon {text-align: center;}
.idx-flow-icon img {width: auto !important; display: inline-block !important;}
.idx-flow-icon img:nth-of-type(2) { display: none !important; }
.idx-flow-number { width: 47px; height: 47px; border-radius: 100%; border: 2px solid #2e31b8; position: relative; z-index: 3; margin: 0 auto; background: #fff; font-weight: 900; color: #333; text-align: center; line-height: 42px;}
.idx-flow-content { position: relative; margin-top: -23.5px; padding-bottom: 20px;}
.idx-flow-pto { border-radius: 30px 0 0 0; /*box-shadow: 0px -2px 0px 2px #2e31b8;*/ overflow: hidden; filter: drop-shadow(0px -3px 0px #2e31b8);}
.idx-flow-data { border-left: 6px solid #2e31b8; padding:15px 20px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,.04); font-weight: 500; color: #777; font-size: 12px; line-height: 1.3;}
.idx-flow-data span { display: block; font-weight: 900; color: #333; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.3;}


.idx-about-box { background: url("../upload-files/design/idx-about-bg.jpg") no-repeat top center / cover; border-radius: 0 200px; padding: calc(20px + 3%) 5%;}
.idx-about-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.idx-about-section-1 > div:nth-of-type(1) { width: calc(50% + 50px);}
.idx-about-section-1 > div:nth-of-type(2) { width: calc(50% - 50px); padding-left: 6%;}
.idx-about-section-1 > div:nth-of-type(2) .btn01 { margin: 0 0 0 auto;}
.idx-about-section-1 > div:nth-of-type(1) .title01 { display: none;}

.idx-about-section-2-content {display: flex; flex-direction: row; flex-wrap: wrap; }
.idx-about-section-2-content > div { width: 25%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; padding-bottom: 30px; }
.idx-about-section-2-pto { margin-bottom: calc(15px + 1%);}
.idx-about-section-2-number { position: relative; padding-bottom: 15px; margin-bottom: 20px; color: #1b1d79; font-weight: 900;}
.idx-about-section-2-number:after { position: absolute; content: ""; width: 42px; height: 2px; background: #959595; bottom: 0; left: 50%; transform: translateX(-50%);}
.idx-about-section-2-number > div:nth-of-type(1) { font-size: clamp(28px, 4vw, 60px); line-height: 1; padding-bottom: 8px;text-align: center;}
.idx-about-section-2-number > div:nth-of-type(2) { font-size: clamp(18px, 1.5vw, 20px); line-height: 1;  font-style: italic; text-align: center; text-transform: uppercase;}
.idx-about-section-2-data { font-size: 18px; color: #3b3b3b; font-weight: 700; text-align:center; line-height: 1.3;}


.idx-news-box { background: url("../upload-files/design/idx-news-bg.png") repeat-x bottom center; padding: calc(20px + 3%) 5%;}
.idx-news-section { position: relative; border-top: 2px solid #d2d2d2; padding-top: calc(20px + 2.5%);}
.idx-news-section:before { position: absolute; content: ""; background: #2e31b8; width: 33%; height: 6px; right: 0; top:-4px;}

.loop4 { position: relative; }
.loop4 .owl-dots {  display: none !important;}
.loop4 .owl-item {position: relative; z-index: 2; padding: 0 0px;}
.loop4 .owl-nav { position: absolute; top:50%; left: 0%; width: 100%; z-index: 11; transform: translateY(-50%);}
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:transparent !important; width: 30px; height: 30px; margin: 0 !important; border-radius: 100% !important; border: 0px solid #ddd !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s; }
.loop4 .owl-prev { left:-30px; }
.loop4 .owl-next { right:-30px;}
.loop4 .owl-prev:before, .loop4 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 18px; height: 18px; background-size: contain; display: inline-block; border-width: 4px 4px 0 0; border-style: solid; border-color: #2e31b8; position: relative; top:-2px;}
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 2px; }
.loop4 .owl-next:before { content: ""; transform: rotate(45deg); right: 3px;}
.loop4 .owl-prev:hover, .loop4 .owl-next:hover { opacity: 1;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom: -20px; width: 100%; text-align: center!important; padding: 0 0px; }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #00b4ab !important; width: 9px !important; height: 9px !important; margin: 5px !important;}
.loop4 .owl-dots .owl-dot.active span, .loop4  .owl-dots .owl-dot:hover span { background: #165ea7 !important; }

.idx-news-link { padding: 0 20px 20px 20px; display: block;}
.idx-news-pto { border-radius: 0 26px 0 0; padding-bottom: 68%; display: block;}
.idx-news-content { background: #fff;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);}
.idx-news-content-top { padding: 25px;}
.idx-news-content-top > div:nth-of-type(1) { display: block; font-weight: 900;font-size: clamp(18px, 1.5vw, 20px); padding-bottom: 10px; color: #3b3b3b;}
.idx-news-link:hover .idx-news-content-top > div:nth-of-type(1) { color: #2e31b8;}
.idx-news-link:hover .idx-news-content-bottom > div:nth-of-type(2) div { color: #2e31b8; font-weight: 700;}
.idx-news-link:hover .idx-news-content-bottom > div:nth-of-type(2) div img { filter: none;}
.idx-news-content-top > div:nth-of-type(2) { min-height: 112px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;}
.idx-news-content-bottom { border-top: 1px solid #e5e5e5; padding: 15px 25px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative;}
.idx-news-content-bottom:after { content: ""; position: absolute; width: 1px; height: 30px; background: #e5e5e5; top:50%; left: 50%; transform: translate(-50%, -50%);}
.idx-news-content-bottom > div { font-size: 14px;color: #3c3c3c; width: 50%; font-weight: 500; }
.idx-news-content-bottom > div img { display: inline-block !important; margin-right: 10px;  width: auto !important; transform: translateY(-1px);}
.idx-news-content-bottom > div:nth-of-type(2) {  text-align: right;}
.idx-news-content-bottom > div:nth-of-type(2) img { margin-left: 10px;margin-right: 0px; filter: brightness(0);}
.idx-news-content-bottom > div:nth-of-type(2) a { color: #3b3b3b; }



@media only screen and (max-width: 1600px) {
	#content { padding-top: 100px;}
	
	.idx-service-top-section { padding-left: 5%;}
}

@media only screen and (max-width: 1365px) {
	#content { padding-top: 60px;}
	
	
}

@media only screen and (max-width: 1279px) {
	.banner { border-radius: 0 0 50px 0;}
	
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important; }
	
	.banner .swiper-pagination-horizontal {  padding: 0 5% 2% 5%;}
	
	.banner-social-tool { left: 0;}
	
	.idx-service-top-section .title02 { padding-right: 5%;}
	.title02 > div:nth-of-type(1) { padding-right: 0; margin-right:  0; border-right: 0px solid #2e31b8;border-bottom: 3px solid #2e31b8;}
	.title02 > div:nth-of-type(2)  { width: 100%;}
	.title02 > div:nth-of-type(2) br { display: none;}
	
	.idx-service-top-section-content > div:nth-of-type(1) { width: 100%; padding-right: 5%; justify-content: space-between;}
	.idx-service-top-section-content > div:nth-of-type(1) > div { margin: 0 0 25px 0; width: calc(50% - 12px); }
	.idx-service-top-section-content > div:nth-of-type(2) { width: 100%; padding-right: 5%; }
	
	.idx-service-bottom-section { padding-left: 5%; padding-right: 5%;}
}

@media only screen and (max-width: 980px) {
	.banner-slogon { left: 0%; max-width: 260px; padding: 0 5%; top:45%;}
	.swiper-next, .swiper-prev { transform: scale(0.6); bottom: 5%;}
	.swiper-next:hover, .swiper-prev:hover { transform: scale(0.5);}
	.swiper-prev { right: calc(40px + 5%);}
	
	.swiper-slide .btn01 { width: 150px;}
	
	.banner-scroll, .banner-social-tool { display: none;}
	
	.idx-app-info > div { width: 100%; padding: 0 0% 15px 0; margin-bottom: 15px; }
	
	.idx-about-section-1 > div:nth-of-type(1) { width: 100%; padding-bottom: 20px;}
	.idx-about-section-1 > div:nth-of-type(1) .title01 { display: block;}
	.idx-about-section-1 > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	.idx-about-section-1 > div:nth-of-type(2) .title01 { display: none;}
	
	
	.idx-about-box { border-radius: 0 80px;}
	
	.idx-about-section-2-pto img { width: 60px;}
}
@media only screen and (max-width: 768px) {
	.loop2 { padding-left: 10px; padding-right: 10px;}
	.loop2 .owl-prev, .loop2 .owl-next { transform: scale(0.7);}
	.loop2 .owl-prev { left:-10px; }
	.loop2 .owl-next { right:-10px;}
	
	.idx-solution-box:before { display: none;}
	.idx-solution-top-btn { justify-content: center;}
	.idx-solution-top-section > div { width: 100%;}
	.idx-solution-bottom-section { padding: calc(30px + 2%) 5% calc(10px + 2%) 5%; margin-top: 0px;}
	.idx-solution-top-pto { margin-bottom: 15px;}
	.idx-solution-top-pto img { width: 50%;}
	
	.idx-app-section > div { width: 100%;}
	.idx-app-section > div:nth-of-type(1) { padding-right: 0%; order: 2; padding-top: 25px;}
	.idx-app-section > div:nth-of-type(1) .title01 span{ display: none;}
	.idx-app-section > div:nth-of-type(2) { order: 1;}
	.idx-app-section > div:nth-of-type(2) .title01 { display: block;}

	
	.loop3 { padding-left: 30px; padding-right: 30px;}
	.loop3 .owl-prev, .loop3 .owl-next { transform: scale(0.6);}
	.loop3 .owl-prev { left:-15px; }
	.loop3 .owl-next { right:-15px;}
	
	.loop4 { padding-left: 10px; padding-right: 10px;}
	.loop4 .owl-prev, .loop4 .owl-next { transform: scale(0.6);}
	.loop4 .owl-prev { left:-15px; }
	.loop4 .owl-next { right:-15px;}
	
}
@media only screen and (max-width: 640px) {
	.idx-about-section-2-content > div { width: 50%; }
	
}
@media only screen and (max-width: 570px) {
	.idx-service-top-section-content > div:nth-of-type(1) > div { width: 100%; }
	
}

@media only screen and (max-width: 414px) {
	.idx-solution-link-content img { max-width: 70%;max-height: 70%;}
}
@media only screen and (max-width: 375px) {
	
}

@media only screen and (max-width: 320px) {
	
	
}