#section-four
{

	position: absolute;
	width: 1500px;
	height: 702px;
	/*left: 18px;*/
	left: calc(50% - 1500px/2);
	top: 2650px;
	z-index: 1;

	background: white;
	/*border-radius: 20px;*/
}

#section-four-container
{
/* Container */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
gap: 30px;

position: absolute;
width: 1169px;
height: 172px;
left: 135.5px;
/*top: 2837px;*/


}

#section-four-title
{/* Headline */

width: 560.59px;
height: 172px;

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 72px;
line-height: 120%;
/* or 86px */
letter-spacing: -0.02em;

color: #212121;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;

}

#section-four-desc
{/* Paragraph */

width: 564px;
height: 122px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 120%;
/* or 26px */
letter-spacing: -0.02em;

/* sub tittle */
color: #686868;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;

}

#section-four-web
{
/* Container */

position: absolute;
width: 575px;
height: 640px;
left: 135px;
top: 123px;

background: #FFFFFF;
/* Shadow Card */
box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.09);
border-radius: 32px;

}

#section-four-web-title
{
/* Paragraph */

position: absolute;
width: 350px;
height: 36px;
left: 32px;
top: 32.5px;

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 120%;
/* identical to box height, or 36px */
letter-spacing: -0.02em;

color: #202020;


}

#section-four-web-desc
{
/* Headline */

position: absolute;
width: 511px;
height: 38px;
left: 32px;
top: 79.15px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 120%;
/* or 19px */
letter-spacing: -0.02em;

color: #717171;


}

#section-four-web-img
{
	/* Frame 28 */

	position: absolute;
	width: 511px;
	height: 457px;
	left: 32px;
	top: 129px;

	border-radius: 16px;

}

#section-four-web-img-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFEFAA;
border-radius: 32px;
}

#section-four-web-img-container:hover .overlay {
  opacity: 0.5;
}

.text {
  color: black;
  font-family: 'Poppins';
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#section-four-right
{
	/* Frame 25 */

/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 10px;

position: absolute;
width: 575px;
height: 740px;
left: 730px;
top: 123px;
}

#section-four-mobile
{/* Container */

width: 575px;
height: 300px;

background: #FFFFFF;
/* Shadow Card */
box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.09);
border-radius: 32px;

/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;

}

#section-four-mobile-title
{
/* Paragraph */

position: absolute;
width: 368px;
height: 36px;
left: 32px;
top: 12.5px;

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 120%;
/* identical to box height, or 36px */
letter-spacing: -0.02em;

color: #202020;


}

#section-four-mobile-desc
{
/* Headline */

position: absolute;
width: 394px;
height: 38px;
left: 32px;
top: 59.15px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 120%;
/* or 19px */
letter-spacing: -0.02em;

color: #717171;


}

#section-four-mobile-img-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFEFAA;
border-radius: 32px;
}


#section-four-mobile-img-container:hover .overlay {
  opacity: 0.7;
}

#section-four-mobile-img
{
/* Frame 29 */

position: absolute;
width: 511px;
height: 177px;
left: 32px;
top: 109px;

border-radius: 16px;

}

#section-four-hybrid
{
/* Container */

width: 575px;
height: 330px;

background: #FFFFFF;
/* Shadow Card */
box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.09);
border-radius: 32px;

/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

}

#section-four-hybrid-title
{/* Paragraph */

position: absolute;
width: 163px;
height: 36px;
left: 32px;
top: 322.5px;

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 120%;
/* identical to box height, or 36px */
letter-spacing: -0.02em;

color: #202020;
}

#section-four-hybrid-desc
{
/* Headline */

position: absolute;
width: 511px;
height: 38px;
left: 32px;
top: 362.15px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 120%;
/* or 19px */
letter-spacing: -0.02em;

color: #717171;


}

#section-four-hybrid-img-container .overlay {
  position: absolute;
  top: 310px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 330px;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFEFAA;
border-radius: 32px;
}


#section-four-hybrid-img-container:hover .overlay {
  opacity: 0.7;
}

#section-four-hybrid-img
{
	/* Frame 27 */

position: absolute;
width: 511px;
height: 176px;
left: 32px;
top: 420px;

border-radius: 16px;

}

#section-four-back-dot-top
{
	/* Mask group */

position: absolute;
width: 261.66px;
height: 252px;
right: 140.67px;
top: 80px;


}

#section-four-back-dot-bottom
{
	/* Mask group */

position: absolute;
width: 261.66px;
height: 252px;
right: 1153.34px;
top: 563px;
z-index: -1;

transform: rotate(180deg);
}


@media only screen and (max-width: 1440px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 8%;
  }
}

@media only screen and (max-width: 1300px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 10%;
  }
}

@media only screen and (max-width: 1220px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 13%;
  }
}

@media only screen and (max-width: 1150px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 15%;
  }
}

@media only screen and (max-width: 1080px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 20%;
    width: 1390px;
  }

  #section-four-back-dot-top, #section-four-back-dot-bottom
  {
    margin-right: -7%;
  }
}

@media only screen and (max-width: 990px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 22%;
  }
  /* For mobile phones: */

  #section-four-back-dot-top, #section-four-back-dot-bottom
  {
    margin-right: -8%;
  }
}

@media only screen and (max-width: 930px) {
  /* For mobile phones: */
  #section-four
  {
    margin-left: 28%;
    width: 1351px;
  }

  #section-four-back-dot-top, #section-four-back-dot-bottom
  {
    margin-right: -11%;
  }
}

@media only screen and (max-width: 880px) {
  /* For mobile phones: */

  #section-four
  {
    margin-left: 29%;
    width: 1359px;
  }
}

@media only screen and (max-width: 830px) {
  /* For mobile phones: */

  #section-four
  {
    margin-left: 30%;
  }

  #section-four-back-dot-top, #section-four-back-dot-bottom
  {
    display: none;
  }
}

@media only screen and (max-width: 795px) {
  /* For mobile phones: */

  #section-four
  {
    margin-left: 32%;
  }
}

@media only screen and (max-width: 775px) {
  /* For mobile phones: */

  #section-four
  {
    margin-left: 34%;
  }
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */

  #section-four
  {
    margin-left: 38%;
    width: 1200px;
  }
}

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

  #section-four
  {
    margin-left: 35%;
    width: 1375px;
  }

  #section-four-container
  {
    display: block;
    margin-left: 16%;
    width: 700px;
  }

  #section-four-title, #section-four-desc
  {
    width: 800px;
    height: 100px;
    text-align: center;
  }

  #section-four-web, #section-four-right, #section-four-hybrid
  {
    margin-top: 4%;
     margin-left: 4%;
  }
}

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

  #section-four-container
  {
    margin-left: 18%;
  }

  #section-four-web
  {
    width: 36%;
    margin-left: 10%;
  }

  #section-four-mobile-img, #section-four-hybrid-img
  {
    width: 80%;
    margin-left: 3%;
  }

  #section-four-mobile, #section-four-hybrid
  {
    margin-left: 5%;
    width: 87%;
  }

  #section-four-hybrid
  {
    height: 42%;
  }

  #section-four-hybrid-title, #section-four-hybrid-desc, #section-four-hybrid-img
  {
    margin-top: 20px;
  }

  #section-four-mobile-title, #section-four-mobile-desc, #section-four-hybrid-title, #section-four-hybrid-desc
  {
    margin-left: 3%;
    width: 80%;
  }

  #section-four-web-title, #section-four-web-desc, #section-four-web-img
  {
    width: 87%;
  }
}

@media only screen and (max-width: 570px) {
  #section-four
  {
    margin-left: 40%;
    width: 1300px;
  }

  #section-four-web
  {
    width: 40%;
    margin-left: 10%;
  }
}

@media only screen and (max-width: 540px) {
  #section-three-container
  {
    width: 1431px;
  }
}

@media only screen and (max-width: 520px) {
  #section-three-container
  {
    width: 1433px;
  }
}

@media only screen and (max-width: 510px) {
  #section-three-title
  {
    margin-left: 16%;
    width: 990px;
  }

  #section-three-first-desc
  {
    width: 990px;
  }

  #s3r1, #s3r2
  {
    margin-left: 20%;
  }

  .s3rc-number, .s3rc-title
  {
    width: 421px;
  }
}

@media only screen and (max-width: 470px) {
  #section-three-container
  {
    width: 1436px;
  }

  #section-three-title
  {
    margin-left: 19%;
    width: 990px;
  }

  #section-three-first-desc
  {
    margin-left: 7%;
    width: 930px;
  }

  #s3r1, #s3r2
  {
    margin-left: 25%;
    width: 900px;
  }

  .s3rc-back-dot
  {
    margin-left: -32px;
  }
}

@media only screen and (max-width: 460px) {
  #section-three-container
  {
    width: 1440px;
  }

  #section-three-first-desc
  {
    margin-left: 5%;
  }
}

@media only screen and (max-width: 430px) {
  #section-three-first-desc
  {
    margin-left: 9%;
  }
}

@media only screen and (max-width: 410px) {
  #section-three-container
  {
    width: 1444px;
  }

  #s3r1, #s3r2
  {
    margin-left: 27%;
  }
}

@media only screen and (max-width: 385px) {
  #section-three-title
  {
    margin-left: 20%;
  }

  #section-three-first-desc
  {
    margin-left: 9%;
  }
}

@media only screen and (max-width: 375px) {
  #section-three-container
  {
    width: 1447px;
  }
}

@media only screen and (max-width: 360px) {
  #section-three-title
  {
    margin-left: 21%;
  }

  #s3r1, #s3r2
  {
    margin-left: 28%;
  }
}

@media only screen and (max-width: 350px) {
  #section-three-container
  {
    width: 1450px;
  }
}

@media only screen and (max-width: 335px) {
  #section-three-container
  {
    width: 1454px;
  }

  #section-three-title
  {
    margin-left: 22%;
  }

  #section-three-first-desc
  {
    margin-left: 33%;
    width: 470px;
    text-align: center;
  }

  #s3r1, #s3r2
  {
    margin-left: 31%;
    width: 850px;
  }

  .s3rc-back-dot
  {
    margin-left: -60px;
  }

  .s3rc-number, .s3rc-title, .s3rc-desc
  {
    width: 380px;
  }
}