@charset "utf-8";

.main-page .animated-background {z-index: -1; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg,
 #ffe5e5 0%,
 #ffe0f0 20%,
 #e0f0ff 40%,
 #e8e5ff 60%,
 #e0f0ff 80%,
 #ffe5e5 100%); background-size: 200% 200%; animation: flowGradient 10s ease-in-out infinite; will-change: background-position; }

@keyframes flowGradient {
 0% { background-position: 0% 0%; }
 25% { background-position: 50% 50%; }
 50% { background-position: 100% 100%; }
 75% { background-position: 50% 50%; }
 100% { background-position: 0% 0%; }
}

/* Background Circles */
.main-page {padding-top:0}
.main-page .main-background-circles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; }
.main-page .main-background-circles .circle { position: absolute; border-radius: 50%; opacity:0.5; animation: gentleFloat 8s ease-in-out infinite;}
.main-page .main-background-circles .circle-1 { width: 300px; height: 300px; top: 10%; left: -2%; background: linear-gradient(45deg, rgba(255, 136, 207, 0.09) 0%, rgba(131, 160, 255, 0.30) 85%); animation-delay: 0s; }
.main-page .main-background-circles .circle-2 { width: 86px; height: 86px; top: 10%; right: 15%; background: linear-gradient(230deg, rgba(255, 136, 207, 0.09) 25%, rgba(131, 160, 255, 0.30) 100%); animation-delay: 1s; }
.main-page .main-background-circles .circle-3 { width: 200px; height: 200px; bottom: 30%; left: 20%; background: linear-gradient(315deg, rgba(255, 136, 207, 0.09) 10%, rgba(131, 160, 255, 0.30) 90%); animation-delay: 2s; }
.main-page .main-background-circles .circle-4 { width: 280px; height: 280px; bottom: 20%; right: -2%; background: linear-gradient(160deg, rgba(255, 136, 207, 0.09) 5%, rgba(131, 160, 255, 0.30) 95%); animation-delay: 3s; }
.main-page .main-background-circles .circle-5 { width: 180px; height: 180px; top: 20%; left: 20%; background: linear-gradient(280deg, rgba(255, 136, 207, 0.09) 20%, rgba(131, 160, 255, 0.30) 80%); animation-delay: 4s; }
.main-page .main-background-circles .circle-6 { width: 100px; height: 100px; top: 80%; right: 30%; background: linear-gradient(95deg, rgba(255, 136, 207, 0.09) 15%, rgba(131, 160, 255, 0.30) 100%); animation-delay: 5s; }
.main-page .main-background-circles .circle-7 { width: 160px; height: 160px; bottom: 40%; left: 60%; background: linear-gradient(200deg, rgba(255, 136, 207, 0.09) 0%, rgba(131, 160, 255, 0.30) 75%); animation-delay: 6s; }
.main-page .main-background-circles .circle-8 { width: 240px; height: 240px; top: 30%; left: 70%; background: linear-gradient(340deg, rgba(255, 136, 207, 0.09) 30%, rgba(131, 160, 255, 0.30) 100%); animation-delay: 7s; }

@keyframes gentleFloat {
 0%, 100% { translate: 0 0; }
 25% { translate: 15px -15px; }
 50% { translate: -10px 20px; }
 75% { translate: 20px 10px; }
}

/* Sections */
.main-page section { overflow:hidden; position: relative; z-index: 10; padding: 100px 20px 40px; background: transparent; }
.main-page section .btn-main { width: 100%; max-width: 325px; padding: 15px; background: #4678FD; border: none; border-radius: 12px; color: white; text-decoration: none; font-size: 18px; text-align: center; transition: all 0.3s; display: inline-block; }
.main-page section .btn-main:hover { background: #5a2478; transform: translateY(-2px); }
.main-page section .btn-main:after {content:''; display:inline-block; width:7px; height:12px; margin-left:14px; background: url('../images/icon_btn_arrow.svg') no-repeat;}
.main-page .section-1,
.main-page .section-2 { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-page .section-1 { padding-top: 0; }
.main-page .section-1 h1 { font-size: 72px; font-weight: bold; color: #313A47; text-align: center; margin-bottom: 30px; line-height: 1.3; }
.main-page .section-2 { padding-top: 80px; }
.main-page .section-2 h2 { font-size: 32px; font-weight: 500; color: #313A47; text-align: center; margin-bottom: 30px; line-height: 1.3; }
.main-page .section-2 h2 img {width:210px;}
.main-page .section-2 h2 strong { color: #4678FD; font-weight: 700; }

.main-page .section-3 {overflow: visible;}
.main-page .section-3 .background-circles {z-index:-1; position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;}
.main-page .section-3 .background-circles .circle {position:absolute; border-radius:50%; background: linear-gradient(134deg, rgba(50, 132, 255, 0.00) 14.05%, rgba(142, 152, 255, 0.30) 99.05%); filter: blur(7.5px);}
.main-page .section-3 .background-circles .circle-1 {width:336px; height:336px; top:30%; right:-10%;}
.main-page .section-3 .background-circles .circle-2 {width:120px; height:120px; top:50%; left:10%;}
.main-page .section-3 .background-circles .circle-3 {width:210px; height:210px; top:90%; left:30%; background: linear-gradient(134deg, rgba(255, 136, 207, 0.09) 14.05%, rgba(131, 160, 255, 0.30) 99.05%);}
.main-page .section-3 .background-circles .circle-4 {width:336px; height:336px; top:100%; right:-10%;background: linear-gradient(134deg, rgba(255, 136, 207, 0.09) 14.05%, rgba(131, 160, 255, 0.30) 99.05%);}
.main-page .section-3 h2 {color:#313A47; font-size:72px; font-weight: 700; text-align: center;}
.main-page .section-3 .desc .tit {color:#313A47; font-size:32px; font-weight: 600; text-align: center; margin-top:110px;}
.main-page .section-3 .desc .sub {color:#313A47; font-size:22px; font-weight: 500; text-align: center; margin-top:20px;}
.main-page .section-3 .desc .point {color:#4678FD}
.main-page .section-3 .info-list-wrap {display:flex; flex-direction: column; align-items:center; max-width:1236px; width:100%; margin:75px auto 0;}
.main-page .section-3 .info-list-wrap li + li {margin-top:-280px;}
.main-page .section-3 .info-list-wrap li .img-box {position: relative; max-width:588px;}
.main-page .section-3 .info-list-wrap li:nth-child(odd) {margin-right:auto}
.main-page .section-3 .info-list-wrap li:nth-child(even) {margin-left:auto}
.main-page .section-3 .info-list-wrap li p {color:#313A47; font-size:24px; text-align: center; font-weight: 500; line-height: 37px; margin-top:30px}

.main-page .section-4 {padding:190px 20px 180px}
.main-page .section-4::before {z-index:-1; opacity:0.7; content:''; position:absolute; right:-400px; bottom:-400px; display:block; width:860px; height:860px; border-radius: 100%; background: linear-gradient(134deg, rgba(255, 136, 207, 0.09) 14.05%, rgba(131, 160, 255, 0.30) 99.05%); filter: blur(7.5px);}
.main-page .section-4 h2 {color:#313A47; font-size:72px; font-weight: 700; text-align: center;}
.main-page .section-4 .desc {margin-top:60px}
.main-page .section-4 .desc .tit {color:#313A47; font-size:32px; font-weight: 600; text-align: center; margin-top:110px;}
.main-page .section-4 .desc .sub {color:#313A47; font-size:22px; font-weight: 500; text-align: center; margin-top:20px;}
.main-page .section-4 .desc .point {color:#4678FD}
.main-page .section-4 .step-list-img {max-width:1129px; display:flex; gap:80px; align-items: center; justify-content: center; margin:29px auto 0}
.main-page .section-4 .step-list-img li .text {position:relative; width:100%; color:#313A47; font-size:24px; font-weight: 600; line-height:36px; text-align: center;}
.main-page .section-4 .step-list-img li::after {content:''; position:absolute; left:100%; bottom:15px; display:block; width:80px; height:31px; margin-top:-15px; background:url('../images/main/icon_step_arrow.svg') center no-repeat; }
.main-page .section-4 .step-list-img li:last-child::after {display: none;}
.main-page .section-4 .banner {position:relative; width:100%; max-width: 1236px; margin:206px auto 0; }
.main-page .section-4 .banner a {display: flex; width:100%; align-items: center; height:393px; color:#fff; font-size:72px; font-weight: 700; border-radius: 60px; padding-left:43.6%; background-color: #4678FD;}
.main-page .section-4 .banner img {position:absolute; left:13.2%; bottom:0; max-width:25%;}

.main-page .section-4 .btn-wrap {display:flex; gap:24px; align-items: center; justify-content: center; margin-top:30px}
.main-page .section-4 .btn-wrap a {display:flex; align-items: center; justify-content: center; width:460px; height:86px; line-height:85px; color:#fff; font-size:24px; font-weight: 700; border-radius:12px; background-color: #4678FD;}
.main-page .section-4 .btn-wrap a:after {content:''; display:inline-block; width:7px; height:12px; margin-left:14px; background: url('../images/icon_btn_arrow.svg') no-repeat;}




/********************************************************* Tablet *********************************************************/
@media (min-width:769px) and (max-width: 1200px) {
  .main-page .section-3 .info-list-wrap li .img-box {width:49vw;}
  .main-page .section-3 .info-list-wrap li:first-child .deco {width:24.75vw;}

}


/********************************************************* Mobile *********************************************************/
@media (max-width: 768px) {
  .main-page .section-1 h1 { font-size: 32px; }
  .main-page .section-1 .btn-main,
  .main-page .section-2 .btn-main {max-width:325px}
  .main-page .section-2 h2 {font-size: 22px;}
  .main-page .section-2 h2 img {width: 50px;}
  .main-page .section-3 h2 {font-size: 32px;}
  .main-page .section-3 .tit {font-size: 22px;}
  .main-page .section-3 .desc {font-size: 16px;}
  .main-page .section-3 .info-list-wrap {margin-top:20px;}
  .main-page .section-3 .info-list-wrap li {width:100%;}
  .main-page .section-3 .info-list-wrap li + li {margin-top:56px;}
  .main-page .section-3 .info-list-wrap li .img-box {max-width: 100%;}
  .main-page .section-3 .info-list-wrap li:first-child .deco {top:-10%; width:34%;}
  .main-page .section-3 .info-list-wrap li dl {margin-top:16px}
  .main-page .section-3 .info-list-wrap li dl dt {font-size:24px;}
  .main-page .section-3 .info-list-wrap li dl dd {font-size: 18px; line-height: 150%;}

  .main-page .section-4 {padding:125px 40px}
  .main-page .section-4::before {right:-40%; bottom:2%; width: 400px; height:400px}
  .main-page .section-4 h2 {font-size:32px;}
  .main-page .section-4 .step-list-img {flex-direction: column; gap:90px;}
  .main-page .section-4 .step-list-img li {width: 100%;}
  .main-page .section-4 .step-list-img li::after {left:50%; top:calc(100% + 40px); width:31px; height:31px; margin-left:-15px; transform: rotate(90deg);}
  .main-page .section-4 .step-list-img li .text {font-size: 22px;}
  .main-page .section-4 .banner {margin-top:100px;}
  .main-page .section-4 .banner a {height:150px; font-size:24px; padding: 0 20px 0 130px; justify-content: center; border-radius: 30px;}
  .main-page .section-4 .banner img {left:5%; width:100px; max-width:100%; margin-bottom:20px;}
  .main-page .section-4 .btn-wrap {flex-direction: column; gap:10px;}
  .main-page .section-4 .btn-wrap a {width:100%; height:69px; line-height:68px; font-size: 24px;}


 }