@charset "utf-8";

.mo {display: none;}

@keyframes wobble-hor-bottom {
  0%,
  100% {
            transform: translateX(0%);
            transform-origin: 50% 50%;
  }
  15% {
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
            transform: translateX(15px) rotate(6deg);
  }
  45% {
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

@keyframes wobble-ver-left {
  0%,
  100% {
            transform: translateY(0) rotate(0);
            transform-origin: 50% 50%;
  }
  15% {
            transform: translateY(0) rotate(0);
  }
  30% {
            transform: translateY(15px) rotate(10deg);
  }
  45% {
            transform: translateY(-15px) rotate(-3.6deg);
  }
  60% {
            transform: translateY(9px) rotate(2.4deg);
  }
  75% {
            transform: translateY(-6px) rotate(-1.2deg);
  }
}

@keyframes bounce {
   0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes bounce2 {
   0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(-15px) rotate(5deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes bounce3 {
   0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(-10deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes bounce4 {
   0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(10deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes bounce5 {
    0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(0);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes bounce6 {
    0% {
	opacity: 0;
  }
  50% {
	opacity: 1;
  }
  100% {
	opacity: 0;
  }
}

@keyframes bounce7 {
  0%   { transform: rotateY(0deg) translateY(0); }
  50%  { transform: rotateY(180deg) translateY(-10px); }
  100% { transform: rotateY(360deg) translateY(0); }
}

/* splitting */
.section-header h4.motion .char {animation:textAni .7s both; animation-delay:calc(0.05s * var(--char-index) + .4s); display: inline-block;}
.sec6 .section-header h4.motion .char {animation:textAni2 1s both; animation-delay:calc(0.05s * var(--char-index) + .4s); display: inline-block;}

.visual .swiper-wrapper .swiper-slide-active .container.motion .char {animation:textAni .8s both; animation-delay:calc(0.05s * var(--char-index)); display: inline-block;}
.visual .swiper-wrapper .swiper-slide-active .container.motion h2 .char {animation:textAni 1s both; animation-delay:calc(0.05s * var(--char-index) + .8s); display: inline-block;}
.visual .swiper-wrapper .swiper-slide-active .container.motion p .word {animation:textAni 1s both; animation-delay:calc(0.05s * var(--word-index) + 1.5s); display: inline-block;}

@keyframes textAni {
    0% {transform: translateY(80px);}
    100% {transform: translateY(0);}
}

@keyframes textAni2 {
    0% {transform: translateY(150px);}
    100% {transform: translateY(0);}
}

.bounce {animation: bounce 2.5s infinite;}
.bounce2 {animation: bounce2 2.5s infinite;}
.bounce3 {animation: bounce3 2.5s infinite;}
.bounce4 {animation: bounce4 2.5s .3s infinite;}
.bounce5 {animation: bounce5 2.5s infinite;}
.bounce6 {animation: bounce6 2.5s .2s infinite;}
.bounce7 {animation: bounce7 2.5s ease-in-out infinite;}

.wobble-hor-bottom {animation: wobble-hor-bottom 1.5s infinite;}
.wobble-ver-left {animation: wobble-ver-left 2.5s infinite;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 947px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide {overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.08);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {max-width: 1690px !important; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 255px; left: 15px; font-size: 30px; line-height: normal; color: #000; font-weight: 400; letter-spacing: -.6px;  width: 100%; overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {position: absolute; top: 315px; left: 15px; font-size: 60px; line-height: normal; color: #333; font-weight: 700;  width: 100%; overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .container > p {position: absolute; top: 405px; left: -50px; font-size: 22px; line-height: 1.49; letter-spacing: -.44px; color: #333; font-weight: 400; width: 100%; overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .container .start {display: block; position: absolute; left: 15px; top: 560px; max-width: 255px; width: 100%; transition: all 1s ease 2.5s; opacity: 0; }
.m-visual .visual .swiper-wrapper .swiper-slide .container .start a {display: block; width: 100%; line-height: 70px; border-radius: 50px; background-color: #ff7f33; text-align: center; font-size: 20px; letter-spacing: -.4px; font-weight: 600; color: #fff; transition: all .2s linear;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container > p {left: 15px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container .start {top: 525px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container .start a:hover {background-color: #fff; color: #ff7f33;}


.m-visual .visual .swiper-slide .container .banner {position: absolute; top: 200px; right: 15px; z-index: 2; max-width: 412px; width: 100%; opacity: 0; transition: all .8s linear .5s;}
.m-visual .visual .swiper-slide .container .banner dl {width: 100%; padding: 25px 41px; display: flex; gap: 18px; align-items: center;border-radius: 100px; background-color: rgba(17, 17, 17, 0.21); }
.m-visual .visual .swiper-slide .container .banner dl ~ dl {margin-top: 20px;}
.m-visual .visual .swiper-slide .container .banner dl dt {max-width: 64px; width: 100%;}
.m-visual .visual .swiper-slide .container .banner dl dt img {max-width: 100%; display: block;}
.m-visual .visual .swiper-slide .container .banner dl dd {width: 1%; flex: 1 1 auto;}
.m-visual .visual .swiper-slide .container .banner dl dd h5 {font-size: 20px; font-weight: 600; line-height: 1.49; color: #fff; letter-spacing: -.4px;}
.m-visual .visual .swiper-slide .container .banner dl dd p {font-size: 16px; font-weight: 400; color: #fff; line-height:  normal; margin-top: 7px;}
.m-visual .visual .swiper-slide-active .container .banner {top: 255px; opacity: 1;}

.controls {position: absolute; top: 465px; left: 50%; transform: translateX(-50%); padding: 0 15px; width: 100%; max-width: 1690px; height: 16px; z-index: 5;}
.controls .visual-pagination.swiper-pagination-bullets {width: 66px; display: flex; gap: 15px; align-items: center;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {width: 10px; height: 10px; border-radius: 50%; background-color: #ff7f33; opacity: 1; margin: 0;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 16px; height: 16px; background-color: transparent; border: 2px solid #ff7f33;}

.sec2 {position: relative; padding: 145px 0 285px; position: relative;}
.sec2::before {position: absolute; content:''; width: 100%; height: 100%; top: 0; left: 0; background-color: #F1F4FD; z-index: -2;}
.section-header {text-align: center;}
.section-header small {display: block; font-size: 20px; color: #ff9e18; font-weight: 600; line-height: 1.49; letter-spacing: -.4px;}
.section-header h4 {margin-top: 10px; font-size: 50px; font-weight: 300; line-height: normal; color: #333; letter-spacing: -1px;}
.section-header h4 > strong {font-size: 60px; font-weight: 700; letter-spacing: -1.2px; display: block; overflow: hidden;}
.section-header p {margin-top: 30px; font-size: 22px; font-weight: 400; line-height: 1.49; letter-spacing: -.44px; color: #767676;}

.sec2 .advantage {position: relative; margin-top: 100px; text-align: center; background-color: #fff; border-radius: 20px; padding: 75px 15px;  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);}
.sec2 .advantage::before {position: absolute; content: ''; width: 100%; height: 50%; top: -14px; left: 0; border-radius: 20px; background-color: #FF7F33; z-index: -1;}
.sec2 .advantage h5 {position: relative; display: inline-block; padding-left: 135px; font-size: 36px; font-weight: 500; line-height: normal; letter-spacing: -.72px; color: #333; z-index: 2;}
.sec2 .advantage h5 > span {position: relative; padding-top: 6.5px; color: #ff7f33; font-weight: 700; /* text-emphasis: filled #ff7f33; */ display: inline-block;/*  margin-left: 10px; */}
.sec2 .advantage h5 > span:nth-of-type(1) {margin-left: 10px;}
.sec2 .advantage h5 > span::before {position: Absolute; content:''; width: 4px; height: 4px; border-radius: 50%; background-color: #ff7f33; top: 0; left: 50%; transform: translateX(-50%); animation: blink .7s infinite;}
@keyframes blink {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
.sec2 .advantage h5::before {position: absolute; content: ''; width: 112px; height: 112px; left: 0; top: -10px; background: url(../images/main/ico_mark.png) 50% 50% no-repeat; background-size:112px auto; z-index: -1;}
.sec2 .advantage p {position: relative; margin-top: 67.5px; width: 100%; text-align: center; font-size: 26px; color: #767676; line-height: 1.61; letter-spacing: -.52px; padding-bottom: 40px;}
/* .sec2 .advantage p::after {position: absolute; content: ''; width: 1px; height: 38px; background-color: #ff7f33; bottom: 0; left: 50%; transform: translateX(-50%);} */
.sec2 .advantage h5.fw {padding-left: 0; font-weight: 700; line-height: 1.16; display: block; text-align: center; margin-top: 23px;}
.sec2 .advantage h5.fw::before {display: none;}
.sec2 .advantage h5.fw > span::before {display: none;}
.sec2 .advantage > span {margin-top: 33px; display: block; text-align: center; font-size: 18px; color: #999; line-height: 1.55; letter-spacing: -.36px;}
.sec2 .advantage h5.fw > span {margin-left: 0;}

.sec2 .inner {margin-top: 190px; width: 100%;}
.sec2 .inner ul {display: flex; flex-wrap: wrap; width: 100%; gap: 30px 20px;}
.sec2 .inner ul li {flex: 0 0 calc(33.333% - 14.5px); min-height: 275px;}
.sec2 .inner ul li figure {width: 100%; position: relative;}
.sec2 .inner ul li figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec2 .inner ul li figure img:nth-of-type(2) {position: absolute; top: 40px; right: 85px;}
.sec2 .inner ul li dl {position: relative; width: 100%; height: 100%; border-radius: 20px; background-color: #fff; padding: 50px 155px 20px 44px; box-shadow:  0 4px 4px 0 rgba(0, 0, 0, 0.10);}
.sec2 .inner ul li dl::after {position: absolute; content: ''; width: 136px; height: 136px; background: url() 50% 50% no-repeat; background-size: auto; bottom: 24px; right: 24px; animation: bounce 2.5s infinite;}
.sec2 .inner ul li:nth-of-type(2) dl::after {background-image: url(../images/main/img_sec202.png); animation: bounce 4s .4s infinite; }
.sec2 .inner ul li:nth-of-type(3) dl::after {background-image: url(../images/main/img_sec203.png); animation: bounce 4s .2s infinite; }
.sec2 .inner ul li:nth-of-type(4) dl::after {background-image: url(../images/main/img_sec204.png); animation: bounce 4s .3s infinite; }
.sec2 .inner ul li:nth-of-type(5) dl::after {background-image: url(../images/main/img_sec205.png); animation: bounce 4s .6s infinite; }
.sec2 .inner ul li:nth-of-type(6) dl::after {background-image: url(../images/main/img_sec206.png); animation: bounce 4s .5s infinite; }
.sec2 .inner ul li dl dt {font-size: 26px; color: #333; font-weight: 400; line-height: 1.26; letter-spacing: -.52px;}
.sec2 .inner ul li dl dd {margin-top: 7px; font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.58px; color: #333;}
.sec2 .inner ul li dl dd > span {color: #ff7f33;}
.sec2 .inner ul li dl dd > i {display: block; font-size: 22px; color: #333; font-style: normal; font-weight: 600; letter-spacing: -.44px; margin-top: 15px;}
.sec2 .inner ul li dl dd > small {display: block; font-size: 20px; font-weight: 400; color: #767676; line-height: 1.89; letter-spacing: -.4px; margin-top: 28px;}

/* .sec2 .inner ul li:hover dl::after {transform: scale(1.1);} */


.sec3 {background-color: #F1F4FD;}
.sec3 .bg-box {position: relative; border-radius: 70px 70px 0 0; width: 100%; padding: 120px 0 140px 235px; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover;}
.sec3 .bg-box::before {position: absolute; content: 'Hi-Friends'; font-size: 147px; font-family: 'Poppins'; font-weight: 700; color: #ff7f33; top: -160px; right: 53px; line-height: normal;}
.sec3 .bg-box::after {position: absolute; content: ''; width: 401px; height: 374px; left: 195px; bottom: -24px; background: url(../images/main/img_sec305.png) 50% 50% no-repeat; background-size: auto;}
.sec3 .cnt {display: flex; gap: 30px; align-items: flex-start;}
.sec3 .section-header {max-width: 405px; width: 100%;}
.sec3 .section-header * {color: #fff; text-align: left;}
.sec3 .hi-slide {margin-top: 20px; width: 1%; flex: 1 1 auto; padding-bottom: 30px; height: calc(100% + 30px); margin-bottom: -30px;}
.sec3 .hi-slide .swiper-slide .img-box {border-radius: 20px; overflow: hidden; width: 100%;}
.sec3 .hi-slide .swiper-slide .img-box img {display: block; max-width: 100%; width: 100%;}
.sec3 .hi-slide .swiper-slide dl {min-height: 304px; height: 100%; width: 100%; padding: 30px 34.5px; background-color: #fff; border-radius: 20px;box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.25);}
.sec3 .hi-slide .swiper-slide dl dt {font-size: 20px; color: #000; font-weight: 600; line-height: 1.49; letter-spacing: -.4px;}
.sec3 .hi-slide .swiper-slide dl dd {margin-top: 19px; font-size: 18px; font-weight: 400; color: #767676; letter-spacing: -.36px; line-height: 1.55; word-break: break-all;}

.sec4 {padding: 165px 0 150px; background-color: #F1F4FD;}
.sec4 .benefit {margin-top: 110px; width: 100%;}
.sec4 .benefit ul {width: 100%; display: flex; gap: 20px;}
.sec4 .benefit ul li {position: relative; width: 1%; flex: 1 1 auto; padding: 70px 30px 30px; min-height: 495px; border-radius: 20px; background: linear-gradient(163deg, #CBE1FE 1.62%, #F4FAFF 74.44%); box-shadow: 4px 4px 10px 0 rgba(4, 8, 50, 0.10); transition: all .3s linear;}
.sec4 .benefit ul li:nth-of-type(1) figure {position: absolute; bottom: -83px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 251px;}
.sec4 .benefit ul li:nth-of-type(1) figure img {display: block; margin: 0 auto;}
.sec4 .benefit ul li:nth-of-type(1) figure img:nth-of-type(2) {position: absolute; top: 10px; right: 15px;}
.sec4 .benefit ul li:nth-of-type(1) figure img:nth-of-type(3) {position: absolute; bottom: 30px; left: 5px;}
.sec4 .benefit ul li:nth-of-type(2) figure {position: absolute; bottom: -83px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 211px;}
.sec4 .benefit ul li:nth-of-type(2) figure img {display: block; margin: 0 auto;}
.sec4 .benefit ul li:nth-of-type(2) figure img:nth-of-type(2) {position: absolute; top: 7px; right: 0;}
.sec4 .benefit ul li:nth-of-type(3) figure {position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 167px;}
.sec4 .benefit ul li:nth-of-type(3) figure img {display: block; margin: 0 auto;}
.sec4 .benefit ul li:nth-of-type(3) figure img:nth-of-type(2) {position: absolute; top: -11px; left: 0; animation: bounce6 2.5s infinite;}
.sec4 .benefit ul li:nth-of-type(3) figure img:nth-of-type(3) {position: absolute; top: -11px; right: 0; animation: bounce6 2.5s .5s infinite;}
.sec4 .benefit ul li:nth-of-type(4) figure {position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 167px;}
.sec4 .benefit ul li:nth-of-type(4) figure img {display: block; margin: 0 auto;}
.sec4 .benefit ul li:nth-of-type(4) figure img:nth-of-type(2) {position: absolute; top: 0; left: 0;}
.sec4 .benefit ul li:nth-of-type(4) figure img:nth-of-type(3) {position: absolute; top: 0; right: 0;}
.sec4 .benefit ul li:nth-of-type(2n) {background: linear-gradient(163deg, #FEE6CD 1.62%, #FFF8F2 74.44%);}
.sec4 .benefit ul li h5 {font-size: 30px; line-height: 1.4; font-weight: 600; color: #001a5d; text-align: center;}
.sec4 .benefit ul li p.dot {position: relative; padding-left: 17px; font-size: 20px; font-weight: 400; line-height: 1.74; letter-spacing: -.4px; color: #222; margin: 20px 15px 0;}
.sec4 .benefit ul li p.dot::before {position: absolute; content: ''; width: 3px; height: 3px; background-color: #222; border-radius: 50%; top: 15px; left: 0px;}
.sec4 .benefit ul li p.dot ~ p.dot {margin-top: 6px;}
.sec4 .benefit ul li p.dot span {font-size: 18px; line-height: 1.6; display: block;}

/* .sec4 .benefit ul li:hover {transform: translateY(-30px);} */

.sec5 {padding: 125px 0 100px;}
.sec5 .step {margin-top: 100px; width: 100%;}
.sec5 .step ul {width: 100%; display: flex; gap: 43px; align-items: flex-start;}
.sec5 .step ul li {width: 1%; flex: 1 1 auto; min-height: 405px; padding: 44px 20px 30px; background-color: #FF7F33; border-radius: 135px; /* transition: all .3s linear; */}
.sec5 .step ul li:nth-of-type(2n) {background-color: #FF9E1B; margin-top: 80px;}
.sec5 .step ul li figure {max-width: 137px; width: 100%; border-radius: 50%; margin: 0 auto;}
.sec5 .step ul li dl {margin-top: 33px; width: 100%;}
.sec5 .step ul li dl dt {position: relative; font-size: 18px; font-weight: 700; line-height: 1.55; color: #fff; letter-spacing: -.36px; text-align: center; padding-bottom: 10px;}
.sec5 .step ul li dl dt::after {position: absolute; content: ''; width: 25px; height: 2px; border-radius: 5px; background-color: #fff; bottom: 0; left: 50%; transform: translateX(-50%);}
.sec5 .step ul li dl dt > strong {display: block; font-size: 24px; line-height: normal; margin-bottom: 11px; font-weight: 700;}
.sec5 .step ul li dl dd {padding-top: 10px; font-size: 18px; color: #fff; text-align: center; font-weight: 400; line-height: 1.55; letter-spacing: -.36px;}
.sec5 .step .more {margin: 90px auto 0; display: block; max-width: 270px; line-height: 68px; border-radius: 64px; background-color: #00205b; border: 1px solid #00205b; font-size: 20px; color: #fff; text-align: center; font-weight: 600; letter-spacing: -.4px; transition: all .2s linear;}
.sec5 .step .more:hover {background-color: #fff; color: #00205b;}
/* .sec5 .step ul li:hover {border-radius: 15px;} */

.sec6 {padding-top: 182px; background-color: #F1F4FD;}
.sec6 .container {padding: 0 100px; position: relative; display: flex; gap: 90px;}
.sec6 .section-header {width: 1%; flex: 1 1 auto; text-align: left;}
.sec6 .section-header h4 {margin-top: 0;}
.sec6 .section-header h4 > strong {margin-top: 10px;}
.sec6 .section-header h4 > strong > span {color: #00205B;}
.sec6 .section-header h4 > strong > i {color: #FF9E1B; font-style: normal;}
.sec6 .section-header > a {display: block; margin: 72px auto 0; display: block; max-width: 270px; line-height: 68px; border-radius: 64px; background-color: #FF7F33; border: 1px solid #ff7f33; font-size: 20px; color: #fff; text-align: center; font-weight: 600; letter-spacing: -.4px; transition: all .2s linear;}
.sec6 .section-header > a:hover {background-color: #fff; color: #ff7f33;}
.sec6 figure {max-width: 417px; width: 100%; padding-top: 56px;}
.sec6 figure img {display: block; max-width: 100%; margin: 0 auto;}