/*index css*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

html{}
body{margin:0; padding:0; overflow-x: hidden;}
h1,h2,h3,h4,p,span,a, div{font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Noto Sans KR', 'Malgun Gothic', sans-serif;margin:0; padding:0;text-decoration:none;}
p{font-size:18px; font-weight:300; color:#767676; line-height:32px;}
h1{font-size: 58px; font-weight: 700; line-height: 72px;}
h2{font-size:40px; line-height: 50px;font-weight:800;}
h3{font-size:36px;font-weight:800;line-height:48px;}
h4{font-size:22px;}
h5{font-size:20px;}
ul,li{list-style:none;padding:0; margin:0;}
input, button{
	border: none;
	box-shadow:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	-webkit-box-shadow:none;
	border-radius: 3px;
}
input::-ms-clear{display:none;}
section{margin-top: 140px; text-align:center;}
.content{width:92%;max-width:1400px; margin:0 auto;}

.flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
.three li{
  flex-basis: 32%;
  border-radius:18px;
  transition: all .3s ease-in-out;
}
.three li p{margin: 0 auto;}
.title{max-width: 720px; margin: 0 auto; width: 80%; word-break: keep-all;}
.title h2{margin-top: 24px;}
.title p{margin-bottom: 80px; margin-top: 20px;}
.title p span{font-weight: 300; font-size: 14px;}
.title span{letter-spacing: 0.5px; font-family: 'Righteous', cursive;}

/* free-btn */
.custom-btn {
  color: #fff;
  border-radius: 18px 0;
  padding: 20px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: fixed;
  right: 0;
  top: 300px;
  display: inline-block;
  outline: none;
  z-index: 999;
  text-align: center;
}

.btn-11 {
  border: none;
  background: rgb(251,33,117);
    background: linear-gradient(315deg, rgba(41,72,255,1) 0%, rgba(57,106,252,1) 100%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2),
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%
  }
  }

/* TOP BUTTON */

#go-top-btn {
  display: none;
  bottom: 85px;
  right: 18px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  width:60px;
  height:60px;
  border-radius: 60px;
  overflow: hidden;
  z-index: 99;
  position: fixed;
  }
  .go-top-icon{width:45%;}
  #go-top-btn:hover {background-color: #777;}

/* 해더 */
#header{
	background:#fff;
	height: 60px;
	padding:10px 0;
	z-index: 999;
	}
.logo{
	width:160px;
	float: left;
	}
.logo img {width: 100%;}
.call_btn {
	text-align:center;
	font-weight:700;
	background:#034eeb;
	width:200px;
	height:60px;
	line-height:60px;
	border-radius:100px;
	float: right;
	}
.call_btn a{display:block; color:#fff;}
.s_free_btn , .s_call_btn {display: none;}

/*메인배너*/

.main-right{
  float:right;
}
.main-img{
  position: absolute;
  right: 10%;
  top: 6%;
  width: 36%;
  text-align: center;
}
.main-apps{
  position: absolute;
  right:2%;
  top:0;
  width: 42%;
}
.main-banner{
  background:url(../img/main-bg.jpg) no-repeat;
  background-position: 0;
  background-size: cover;
  position:relative;
  text-align:left;
  height:880px;
  margin-top:0;
}
.main-banner .content{padding-left: 8%; }
.bg-object1{
  width: 220px;
  position: absolute;
  top: 0;
  right: 30%;
}
.bg-object2{
  width:260px;
  position: absolute;
  bottom:70px;
  right:18%;

}
.main-banner .content{
  margin: 0 auto;
  padding-top: 250px;
  color: #fff;
}
.main-banner .content h1{margin: 30px 0;}
.main-banner .content span{font-size: 26px;font-weight: 600;}
.main-banner .content p{font-size: 18px; max-width: 505px; color: #b2c0d9;}


/* 페이먼트 로고 */
.payment-logo {margin-top: 30px;}
.payment-logo ul{max-width: 1320px; margin: 0 auto;}
.payment-logo ul li{flex-basis: 10.5%;}

/*스크롤 텍스트*/
#text-scroll {
  color:#999;
  text-transform: uppercase;
  font-size:26px;
  font-weight:bold;
  margin-top:100px;
  width:100%;
  display:block;
  text-align: center;
}

#flip {
  height:50px;
  overflow:hidden;
  display: inline-block;
  vertical-align: -15px;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#ae87df;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

/*POS 솔루션*/

.business li {padding: 20px; box-sizing: border-box; text-align: left;}
.business li h4 {margin: 20px 0 20px 0; padding-left: 10px;}
.business li p {margin-bottom: 30px; padding: 0 10px;}

.tri-box {text-align:center;}
.tri-box li {
  padding:20px;
  box-sizing: border-box;
  /*padding:80px 0 40px 0;*/

  box-shadow: 0 18px 28px 0 rgb(26 0 35 / 12%);
  /*
  -webkit-box-shadow: 0px 40px 100px rgb(110 110 110 / 12%);
  -moz-box-shadow: 0px 40px 100px rgb(110 110 110 / 12%);
  box-shadow: 0px 40px 100px rgb(110 110 110 / 12%);
  box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
*/
}
.tri-box li h4 {margin: 30px 0 20px 0;}
.tri-box li p {margin-bottom: 30px; padding: 0 20px;}
.tri-box li span {
		font-size: 14px;
    color: #787878;
    padding: 6px 10px;
    border-radius: 10px;
    display: inline-block;
    background: #e9e9e9;
    margin-bottom: 10px;
	}
	.business-type {padding: 0 60px;}

/* POS 기능 */
.part2{
  height: 540px;
  position: relative;
  background: #f7f8f9;
  padding: 60px 0;
}
.part2 .title{
  text-align: left;
  width: 85%;
  position: absolute;
  right: 0;
  max-width: none;
  padding-left: 20px;
  box-sizing: border-box;
}
.part2 .title h2{margin-top: 40px;}
.app{
  width: 85%;
  position: absolute;
  right: 0;
  top:240px;
}
.app-box{
  background: #fff;
  border-radius: 18px;
  padding: 50px 40px;
  box-sizing: border-box;
  text-align: left;
  min-height:310px;
  box-shadow: 0 0 1px rgb(13 102 147 / 10%), 0 10px 40px rgb(39 45 63 / 5%);
  transition: all .3s cubic-bezier(0,0,.5,1);
}
.app-box:hover{
  box-shadow: 0 0 1px rgb(13 102 147 / 5%), 0 10px 40px rgb(39 45 63 / 10%);
  transform: scale3d(1.01,1.01,1.01);
  }

.app-box h5{margin:40px 0 10px 0;}
.app-box p{line-height:26px;font-size:16px;}
.slick-track{padding: 50px 0;}

/* 로봇 배너 */
.robot-banner{background: url(../img/robot-bg.jpg) no-repeat; background-size: cover; padding: 80px 0 40px 0; text-align: left; color: #fff;}
.robot-txt{padding: 50px; flex-basis:50%;box-sizing: border-box;}
.robot-txt h2{font-weight: 700;}
.robot-txt p{color: #d7d7d7;}
.robot-txt > p{margin: 20px 0 60px 0;}
.robot-banner ul{margin-right: 60px;    display: inline-block;}
.robot-banner ul li p span img{vertical-align: middle; margin-right: 10px;}
.robot-banner ul li{margin-bottom:30px;}
.robot-img {flex-basis:50%; line-height: 553px; margin-bottom: -40px;}
.robot-img img{width: 100%; vertical-align: bottom;}

/* 이커머스 솔루션 */
.ecommerce .flex li {flex-basis:50%; text-align:left; position:relative;}
.e-text{padding: 50px;box-sizing: border-box;}
.ecommerce ul {margin-bottom: 180px;}
.ecommerce ul h3 {margin:20px 0 40px 0;}
.ecommerce ul p {font-size: 18px;line-height: 34px;}
.ecommerce ul span {font-family: 'Righteous', cursive; color: #808080;}
.ecommerce1 {position: absolute; right: -70px;}
.ecommerce2 {position: absolute; left: -50px;}

/* 이벤트 배너 */
.clover {margin-top: 0;}
.clover-banner{
  /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
  background: linear-gradient(-45deg, #4776E6, #9D50BB, #3F5EFB, #1CD8D2);
	background-size: 400% 400%;
	animation: gradient 6s ease infinite;
  border-radius: 18px;
  position: relative;
}
  @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.clover-banner ul{padding: 115px 100px 85px 100px;position: relative;}
.clover-banner ul li{text-align:left; color:#fff;}
.clover-banner ul > li > img{position:absolute;right:-90px;top:10px;}
.clover-banner ul > li > h2{margin:30px 0;}
.clover-banner ul > li > h2 > button{margin-top:10px;}
.clover-banner a{
  background: none;
  border: 2px solid #fff;
  border-radius: 100px;
  color: #fff;
  padding: 10px 30px;
  font-weight: bold;
  font-size: 16px;
}
.clover-banner span{
  color:#fff;
  font-size:16px;
  display: block;
  font-family: 'Righteous', cursive;
}
.clover-banner ul li h3{
  font-weight: 300;
  margin: 20px 0 40px 0;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}
.reseller-logo img{
  position: absolute;
  top: 30px;
  right: 30px;
	width: 90px;
	height: 90px;
	animation: shakeY 15s infinite;

}

/* 카드단말기 */
.t-banner {margin-top: 30px;}
.terminal {text-align: left;}
.terminal li {position: relative; border-radius: 18px; flex-basis: 49%; padding: 50px 60px; box-sizing: border-box; overflow: hidden;}
.terminal li:first-child {background: #6051db; }
.terminal li:nth-child(2) {background: #2d68ef;}
.terminal li h4 {font-size: 26px; line-height: 35px; font-weight: 600; color: #ffffff; margin-bottom: 10px;}
.terminal li p {font-size: 24px; font-weight: 600; color: #fff;opacity: 0.5;}
.terminal li img {position: absolute; right: 10px; top: 20px;}

/* 페이먼트 솔루션 */
.payment .title p{margin-bottom: 40px;}
.payment ul{
  align-items: center;
}
.payment ul li{
  padding:80px 0;
  min-height: 325px;
  -webkit-box-shadow: 9px 9px 25px rgb(163 177 198 / 25%), inset -9px 0px 10px rgb(224 229 236 / 10%);
  box-shadow: 9px 9px 25px rgb(163 177 198 / 25%), inset -9px 0px 10px rgb(224 229 236 / 10%);
  flex-basis: 31%;
}
.payment ul li:hover{
  -webkit-box-shadow: inset -9px -9px 15px rgb(224 229 236 / 20%), inset 9px 9px 15px rgb(224 229 236 / 10%);
  box-shadow: inset -9px -9px 15px rgb(224 229 236 / 20%), inset 9px 9px 15px rgb(224 229 236 / 10%);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  }
.payment ul li:nth-child(2), .payment ul li:nth-child(5){margin-top:80px;}
.payment ul li h4{margin:30px 0;}
.payment ul li p{width: 70%;}

/* 인터넷 솔루션 */

.internet{
  background: url(../img/internet-bg2.jpg) no-repeat;
  padding: 80px 0 10px 0;
  position: relative;
  background-position: top center;
  max-width: 1400px;
  border-radius: 18px;
  background-size: cover;
  width: 90%;
  margin: 0 auto;
}
.internet .title span{margin-bottom: 30px; display: block; color: #fff;}
.internet .title h2{color: #ffffff;}
.internet .title p{color: #ababab; font-size: 18px;}


/* section6 CUSTOMER */

.customer .title p {margin-bottom: 40px;}
.review > .flex{
	width:180px;
	line-height:26px;
  margin: 0 auto;
	}
.review li{
	background:#fff;
	box-shadow: 0 6px 20px 5px rgb(19 20 22 / 6%);
	padding:60px 15%;
	box-sizing: border-box;
  border-radius: 18px;
	text-align: left;
	}
.review h4{font-weight:500; font-size: 17px; color:#787878;}
.review li p{
	line-height:26px;
	font-size: 16px;
	margin: 20px auto;
	min-height: 160px;
	color:#111;
	}
	.review img{
    width: 120px;
	}


/*Partnership*/
.container .partnership{text-align:center; margin-bottom:80px;}
.partnership h2{margin-bottom:40px;}
.partnership .slider li img{width:70%;margin:0 auto;}
.partnership .slider li .scale{width:50%;}

/* contact us */
.contact {background: #39405b; padding-bottom: 60px;}
.contact .flex {align-items: center; position: relative;}
.benefit{flex-basis:65%; padding:100px 0 80px 0;text-align: left; color: #fafbff;}
.benefit h3 {margin-bottom:40px; font-weight: 600; }
.benefit p {font-size: 19px; margin-bottom:20px; font-weight: 100; color: #fafbff;}

.benefit_txt{display:flex; justify-content:space-between;}
.benefit_txt ul:first-child{flex-basis:40%;}
.benefit_txt ul:nth-child(2){flex-basis:60%;}
.benefit_txt ul li{font-size:18px;line-height:42px;}
.benefit_txt ul li span{font-weight:600;}
.benefit_txt ul li .check-icon{
		display: inline-block;
		width: 18px;
    height: 18px;
    background: url(../img/iconmonstr-pin-23-240.png) no-repeat;
    margin-right: 12px;
		background-size: contain;
	}
.benefit_txt ul li .clover_icon{padding-right:5px;width:90px;height:25px;vertical-align: -4px;}

.consulting{
	flex-basis:35%;
	margin-top:-40px;
	padding:60px;
	background-color:#fff;
	border-radius:5px;
	text-align:center;
	box-shadow: 0 0 1px rgb(13 102 147 / 25%), 0 15px 80px rgb(39 45 63 / 35%);
	z-index: 10;
  box-sizing: border-box;}
.consulting p{margin:20px 0 40px 0;}
#contact-form {text-align:left;}
#contact-form input {
	width: 100%;
	background: #f4f4f4;
	padding: 15px;
	margin-bottom: 10px;
	box-sizing: border-box;
}
#contact-form .send-btn{background:#034eeb; color:#fff;}

.arrow {
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left:-15px;
  width: 30px;
  height: 30px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
  display: none;
}

/* footer*/

#footer{background-color: #1e2023; padding:60px 0; }
#footer h4{color:#fff; margin-bottom:20px;}
#footer p, #footer a{color:#8c8c8c;font-size:14px;}

.f-section{flex-basis:33.333%;}
.f-section ul li{margin-bottom:10px;}
.f-info{background:url(../img/footer_map.png) no-repeat; background-size:contain;}
.smltxt p{font-size:12px;}
.sns h4{display:inline-block; vertical-align:middle; margin-right:15px;}
.sns-logo{margin-bottom:10px; display:inline-block; vertical-align:middle;}
.sns-logo li{display:inline-block; margin-right:10px;}
.sns-logo li a img{width:35px;}
#footer .f-policy{font-size:10px;line-height:12px;}

/* Responsive */

@media (max-width: 1600px){
  .clover-banner ul > li > img{width: 55%;}
}

@media (max-width: 1440px){
	.main-banner {height: 800px;}
	.main-banner .content {padding-top: 220px; padding-left: 5%;}
	.main-img {top: 15%;}
	.main-apps {top: 9%;}

  .clover-banner ul{padding: 100px 90px 80px 90px;}
  .clover-banner ul li:first-child{width: 52%;}
  .clover-banner ul > li > img{top: 90px;}


  .ecommerce2 {margin-left: 0;}
}

@media (max-width: 1280px){
	.call_btn{
		position:absolute;
		right: 20px;
			width: 180px;
			height: 50px;
			line-height: 50px;
			top: 15px;
	}
	.logo{
		position:absolute;
		left: 20px;
		}
	.main-banner {height: 740px;}
	.main-banner .content {padding-top: 200px;}
  .main-img {right: 5%; top: 20%; width: 40%;}
  .main-apps {right: 0; top: 18%; width: 42%;}

  .three li, .payment ul li{flex-basis: 32%;}
  .ecommerce1, .ecommerce2{position: relative; width: 100%; left: 0; right: 0;}

	.r-icon{display: flex;	justify-content: space-between;}
	.r-icon ul{margin-right:0;}

  .clover-banner ul{padding: 90px 80px 70px 80px;}
  .clover-banner ul li br{display:none;}
  .reseller-logo img {top: 10px; right: 10px;}

  .benefit_txt{display:block;}
  .benefit, .consulting{flex-basis:50%;}


}
@media (max-width: 1024px){
	section {margin-top: 120px;}
	h1 {font-size: 50px; line-height: 64px;}
  h2 {font-size: 36px; word-break: keep-all; line-height: 48px;}
  h3 {font-size: 30px; line-height: 46px; word-break: keep-all;}
  p, .internet .title p, .main-banner .content p, .ecommerce ul p, .benefit p {line-height: 30px;}
  .title p{font-size: 17px; line-height: 24px;}
	.terminal li {padding: 50px 0px 0 60px;}
	.terminal li img {position: relative; right: 0; top: 0; float: right; margin-top: 20px;}

	.flex {justify-content: space-around;}
  .three li, .payment ul li{flex-basis: 47%;margin-bottom: 50px;}
	.payment ul li:nth-child(2), .payment ul li:nth-child(5) {margin-top: 0;}
	.payment .title p{margin-bottom: 60px;}

	.robot-txt {padding: 35px; }
	.robot-txt > h2, .robot-txt > p {text-align: center;}

	.main-banner {height: 680px;}
	.main-banner .content {padding-top: 160px;}
	.main-banner .content p {max-width: 431px;}
  .benefit p {margin-bottom: 10px;}
}

@media (max-width: 992px){
  #header {padding: 0;}
  .logo {top: 12px;}
	.widget-app-container {padding-bottom: 60px; }
	#hubspot-messages-iframe-container{min-height: 280px; padding-bottom: 60px; height:90% !important; box-sizing: border-box; z-index: 800 !important;}
	#hubspot-messages-iframe-container iframe{margin-bottom: 60px; box-sizing: border-box;}
  #header .sticky{height: auto;}
  .sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow:0px 3px 8px rgb(1 1 1 / 10%);
  height: auto !important;
  }
  .call_btn{top: 6px;}
  .logo{width: 140px; top: 0;}
  .sticky .content{width: 100%;font-size: 0;}
  .sticky + .container {padding-top:82px;}
  .sticky .call_btn, .sticky .logo {display: none;}
  .sticky .s_free_btn {
    width: 50%;
    display: inline-block;
    background: #2c2d2e;

    text-align: center;
  }
  .sticky .s_call_btn {
    width: 50%;
    display: inline-block;
    background: #034eeb;

    text-align: center;
  }
  .sticky .s_call_btn span, .sticky .s_free_btn span{
    margin-right: 10px;
    margin-left: -16px;
  }

  .s_free_btn a, .s_call_btn a {color: #ffffff;font-size: 16px;display: block;    padding: 13px 0;}
  .s_free_btn img, .s_call_btn img {vertical-align: -11px;}
  .custom-btn {display: none;}


  .main-banner .content{text-align: center;}
  .main-banner {height: auto;}
  .main-banner .content p {max-width: none;}
  .main-banner .content {padding-top: 100px; padding-left: 0;}
  .main-right {float: none; position: relative;}
  .main-img {position: relative; right: 0; top: 0; width: 70%; margin: 0 auto; padding: 50px 0;}
  .main-apps {right: 2%; top: 0; width: 80%;}
  .bg-object1 {display: none;}
  .bg-object2 {bottom: 30px; right: 12%; width: 40%;}

	.robot-txt, .robot-img{flex-basis: 98%;}
	.r-icon{justify-content: space-around;}

	.ecommerce{margin-bottom: 200px;}
	.ecommerce .flex li {flex-basis: 98%;}
	.ecommerce ul {margin-bottom: 0;}
  .e-text{padding: 0; margin-bottom: 50px;}

	.order1 {order: 1;}
	.order2 {order: 2;}

  .contact .flex {display: block;}
  .benefit{margin:0 auto;padding: 80px 0 40px 0;text-align: center;}
  .benefit_txt {text-align: left;margin: 0 auto 30px auto;width: 293px;}
  .consulting{width:95%; margin:-30px auto 0 auto;padding:60px; max-width: 460px;}
}

@media (max-width: 768px){
  .three li, .payment ul li {flex-basis: 70%;}
  .go-top{display:none;}

  .content {width: 85%;}
	.part2 {height: 600px;}
  .part2 .title {position: relative; max-width: 680px; padding-left: 0; width: 85%;}
  .app {width: auto; position: relative; top: 0; right: 0; margin-top: -60px;}

  .ecommerce .flex li br{display: none;}

  .clover-banner ul li:first-child {width: 100%;}
  .clover-banner ul > li > img {width: 75%; top: -48%; right: 0;}
	.terminal li{padding: 50px 0 0 50px;}
}

@media (max-width: 576px){
	section {margin-top: 80px;}
  h1 {font-size: 42px; line-height: 56px;}
  h2 {font-size: 32px; word-break: keep-all; line-height: 46px;}
  h4{font-size: 24px;}
  .content,	.internet .title{width: 90%;}
  .title {width: 100%; word-break: keep-all;}
	.call_btn{ font-size:14px; top:10px; right:10px; height:40px; line-height:40px;}
	.logo{width:120px;top:5px;left:10px;}

  .three li, .payment ul li {flex-basis: 98%;}
  .business li {padding: 0;}

	.main-banner .content span {font-size: 20px;}
  .main-banner .content h1 {margin: 20px 0;}
	.main-img {right: 1%; width: 85%;}
  .main-apps {top: 5%; width: 90%;}
  .app {margin-top: -80px;}
  .payment-logo ul li {flex-basis: 21%;}

	.robot-txt ul{margin: 0;}

  .ecommerce ul li span {font-size: 13px;}
  .ecommerce ul h3 {margin: 20px 0;}
  .ecommerce .title p {margin-bottom: 0;}

  .clover-banner ul {padding: 50px;}
  .clover-banner ul > li > img {width: 94%; top: -35%;}
  .clover-banner h3{font-size: 28px;line-height: 40px;word-break: break-all;}
  .clover-banner span {padding-top: 40px;}
  .reseller-logo img {width: 70px; height: 70px;}

	.terminal li {flex-basis: 100%; margin-bottom: 40px;}

	.robot-txt {padding: 20px;}
	.robot-img {line-height: 300px;}

  .benefit {width: 90%;}
  .benefit h3 br {display: none;}
  .benefit_txt ul li {font-size: 16px;}
  .consulting {padding: 30px; margin: 0 auto; position: relative;}
  .arrow {display: block;}
  .arrow a{display: block; width: 100%; height: 100%;}
  .consulting h3 {margin-bottom:30px;}
	.consulting p {display: none;}

	#footer .flex{flex-direction: column;}
}

@media (max-width: 408px){
  .main-banner .content h1 br{display: none;}
  .benefit_txt ul li .check-icon{display:none;}
  .benefit_txt ul{list-style:disc;}

}
#request_btn
{
    cursor:pointer;        z-index: 999999;
}
#request_btn a
{letter-spacing: 2px;}