@charset "utf-8";


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

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

.wobble-hor-top  {animation: wobble-hor-top 0.8s both;}
.bounce {animation: bounce 2s infinite;}

/* splitting */
.page-header > .container.motion h2.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.1s * var(--char-index));}

@keyframes textAni {
    0% {opacity:0;}
    30% {opacity:0;}
}

/* page-header */
.page-header {position: relative; width: 100%; height: 434px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 142px;}
/* .page-header.type1 {background-image: url(../images/sub/s-visual01.jpg); background-color: #333;} */
.page-header.type1 {background-color: #fff1eb;}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg); background-color: #333;}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg); background-color: #333;}

.page-header .container h2 {position: relative; padding-top: 36px; font-size: 60px; font-weight: 700; color: #fff; text-align: center; letter-spacing: -1.2px; line-height: normal;}
.page-header .container h2::before {position: absolute; content:''; width: 49px; height: 36px; background:url(../images/sub/ico_heart.png) 50% 50% no-repeat; background-size: auto; top: 0; left: 50%; transform: translateX(-50%);}
.page-header .container p {font-size: 22px; text-align: center; color: #fff; line-height: 1.49; letter-spacing: -.44px; margin-top: 9px;}

.page-header.type1 {height: 330px;}
.page-header.type1 .container {padding-top: 46px;}
.page-header.type1 .container h2 {color: #333;}
.page-header.type1 .container p {color: #333;}
.page-header.type1 .container .visual_tit {display: flex; justify-content: center; gap: 120px; align-items: center;}
.page-header.type1 .container .visual_tit figure img {display: block; max-width: 100%; margin: 0 auto;}
.page-header.type1 .container .visual_tit .tit h2 {text-align: left;}
.page-header.type1 .container .visual_tit .tit h2::before {left: 0; transform: none;}
.page-header.type1 .container .visual_tit .tit p {text-align: left; margin-top: 19px;}

/* s1 */
.s1 {overflow: hidden;}
.s1 .mt22 {margin-top: 22px;}
.s1 .mt50 {margin-top: 50px;}
.s1 .mt60 {margin-top: 60px;}
.s1 .mt100 {margin-top: 100px;}
.s1 .mt120 {margin-top: 120px;}
.s1 {padding: 120px 0 230px;}
.s1 .p48 {padding-left: 48px;}
.tab {width: 100%; background-color: #FF7F33; position: sticky; top: 0; z-index: 100; transition: all .2s linear;}
body.sub1 #header.scrolled {box-shadow: none;}
body.opened.sub1 #header {box-shadow: none; border-bottom: 1px solid #ddd;}
body.opened .tab {top: 82px;}
.tab ul {width: 100%; display: flex; align-items: center; justify-content: center;}
.tab ul li {width: 1%; flex: 1 1 auto; position: relative;}
.tab ul li ~ li::before {position: absolute; content:''; width: 1px; height: 8px; background-color: #fff; top: 50%; left: 0; transform: translateY(-50%);}
.tab ul li a {display: flex; height: 48px; text-align: center; font-size: 20px; color: #fff; font-weight: 500; align-items: center; justify-content: center;}
.tab ul li.active a {background-color: #fff; color: #333;}
.tab ul li.active + li::before {display: none;}
.s1 .heart {position: relative;font-size:34px; color:#333; line-height: 1.46; padding-left: 46px; background:url(../images/sub/ico_heart_s.png) 0 50% no-repeat; background-size: auto; margin-bottom: 20px;}
.s1 .heart ~ .heart {margin-top: 130px;}
.s1 article {max-width: 810px; width: 100%; padding: 0 15px; margin: 0 auto;}
.s1 article ~ article {margin-top: 200px;}
.s1 article p {font-size: 20px; color: #767676; font-weight: 400; line-height: 1.74; letter-spacing: -.4px;}
.s1 article p > strong {color: #333; font-weight: 600;}
.s1 article p span {color: #ff7f33;}
.s1 article figure img {display: block; max-width: 100%; margin: 0 auto;}
.s1 article .upper {margin-top: 115px;}
.s1 article .upper h3 {position: relative; font-size: 34px; color: #333; font-weight: 700; line-height: 1.46; letter-spacing: -.68px; padding-top: 10px; text-align: center;}
.s1 article .upper h3::before {position: absolute; content:'“'; top: 0; left: 50%; transform: translateX(-50%); font-size: 112px; color: #000; font-weight: 600; line-height: .44; letter-spacing: -2.24px; font-family: 'Aritaburi';}
.s1 article .upper h3 > span {color: #ff7f33;}
.s1 article .upper h5 {font-family: 'KccEunyeong'; text-align: center; font-size: 50px; font-weight: 400; line-height: .99; letter-spacing: -1px; margin-top: 22px; color: #ff7f33;}
.s1 article .upper small {display: block; margin-top: 50px; line-height: 1.75; font-size: 16px; color: #767676; letter-spacing: -.32px; margin-top: 25px; text-align: center;}
.s1 article .step {margin-top: 70px;}
.s1 article .step .num {font-size: 26px; font-weight: 600; line-height: 1.68; letter-spacing: -.52px; color: #001a5d; margin-bottom: 16px;}
.s1 article .step .num span {display: inline-block; padding: 0 26px 3px 26px; line-height: 33px; font-family: 'Poppins'; font-size: 22px; color: #fff; font-weight: 600; line-height: normal; letter-spacing: -.44px; background-color: #001A5D; margin-right: 23px; border-radius: 50px; vertical-align: middle;}
.s1 article .step small {display: block; font-size: 18px; color: #ff7f33; font-weight: 400; line-height: 1.55; letter-spacing: -.36px;}

.s1 .tip {margin-top: 115px; border-radius: 20px; padding: 16px 50px 65px; background-color: #F1F4FD; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);}
.s1 .tip h5 {position: relative; padding-left: 50px; font-size: 28px; font-weight: 600; line-height: 1.5; letter-spacing: -.56px; color: #001a5d; /* background: url(../images/sub/ico_bell.png) 0% 50% no-repeat; background-size: auto; */ margin-top: 10px; }
.s1 .tip h5::before {position: absolute; content:''; width: 43px; height: 45px; background: url(../images/sub/ico_bell.png) 50% 50% no-repeat; background-size:43px auto; top: 0; left: 0;animation: wobble-hor-top 1.5s infinite;}
.s1 .tip h4 {font-size: 34px; font-weight: 700; line-height: 1.46; letter-spacing: -.68px; color: #333; margin-top: 25px;}
.s1 .tip h4 > span {color: #ff7f33; display: inline-block; margin-left: 18px;}
.s1 .tip p {margin-top: 20px;}
.s1 .tip p ~ p {margin-top: 10px;}
.s1 .tip small {display: block; margin-top: 50px; line-height: 1.75; font-size: 16px; color: #767676; letter-spacing: -.32px;}

.s1 .tip.ty2 {margin-top: 130px; padding: 45px 34px;  display: flex; align-items: center; gap: 63px;}
.s1 .tip.ty2 figure {margin-top: -17px; max-width: 105px; width: 100%;}
.s1 .tip.ty2 .txt {width: 1%; flex: 1 1 auto; }
.s1 .tip.ty2 .txt h5 {display: inline-block;}
.s1 .tip.ty2 .txt h5 > span {display: inline-block; margin-left: 20px; font-size: 26px; color: #333; font-weight: 600; line-height: 1.68; letter-spacing: -.52px;}
.s1 .tip.ty2 .txt p {text-align: left; margin-top: 25px;}

.s1 .tip.ty3 {gap: 45px; padding: 65px}
.s1 .tip.ty3 figure {max-width: 254px;}
.s1 .tip.ty3 h5 {background-position: 0 0;}
.s1 .tip.ty3 .txt h5 > span {margin-left: -50px; font-size: 34px; font-weight: 700; line-height: 1.46; letter-spacing: -.68px; margin-top: 25px;}
.s1 .tip.ty3 .txt p {word-break: break-all;}

.s1 .tip.ty4 {margin-top: 34px; width: 100%; display: flex; align-items: center; gap: 30px; background-color: transparent; box-shadow: none; padding: 0;}
.s1 .tip.ty4 h5 {max-width: 107px; width: 100%;}
.s1 .tip.ty4 h5 .txt {width: 1%; flex: 1 1 auto;}
.s1 .tip.ty4 p {margin-top: 0;}
.s1 .tip.ty4 p ~ p {margin-top: 0;}

.s1 .start {max-width: 480px; width: 100%; margin-left: auto; margin-right: auto;}
.s1 h5.start-tit {position: relative; display: inline-block; padding-left: 40px; font-size: 26px; color: #001a5d; font-weight: 600; line-height: 1.68; letter-spacing: -.52px; text-align: center;}
.s1 h5.start-tit::before {position: absolute; content:''; width: 4px; height: 4px; border-radius: 50%; top: 20px; left: 15px; background-color: #001a5d;}
.s1 .start .item {display: flex; align-items: center; width: 100%; border-radius: 70px; background-color: #ff7f33; padding: 20px 29px; gap: 34px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10); margin-top: 50px;}
.s1 .start .item:nth-of-type(2n) {background-color: #ff9e1b;}
.s1 .start .item ~ .item {margin-top: 33px;}
.s1 .start .item figure {max-width: 90px; width: 100%; border-radius: 50%;}
.s1 .start .item figure img {display: block; max-width: 100%;}
.s1 .start .item dl {display: flex; align-items: center; gap: 22px; width: 1%; flex: 1 1 auto;}
.s1 .start .item dl dt {position: relative; max-width: 107px; width: 100%; font-size: 24px; font-weight: 700; color: #fff; line-height: normal; padding-right: 22px;}
.s1 .start .item dl dt::after {position: absolute; content:''; width: 2px; height: 25px; border-radius: 2px; background-color: #fff; top: 50%; right: 0; transform: translateY(-50%);}
.s1 .start .item dl dd {font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.4px; color: #fff; width: 1%; flex: 1 1 auto; text-align: left;}

.s1 .start.ty2 {max-width: 432px;}
.s1 .start .d-day {width: 100%; padding:15px 15px 42px; background: url(../images/sub/img_s10103.png) 50% 50% no-repeat; background-size: auto; margin-top: 27px; }
.s1 .start .d-day ~ .d-day {margin-top: 24px;}
.s1 .start .d-day > span {font-size: 20px; font-weight: 700; color: #fff; text-align: center; display: block; line-height: 1.4; letter-spacing: -.4px;}
.s1 .start .d-day p {font-size: 18px; margin-top: 40px; text-align: center;}
.s1 .start .d-day p strong {font-weight: 700;}

.s1 .start .d-day.mt20 {padding: 15px 15px 20px;}
.s1 .start .d-day.mt20 p {margin-top: 30px;}

.s1 p.dot {position: relative; padding-left: 30px; color: #333;}
.s1 p.dot::before {position: absolute; content:''; width: 4px; height:4px; border-radius: 50%; background-color: #333; top: 15px; left: 15px;}

.s1 #arti1 figure.m-20 {margin-top: -20px;}
.s1 #arti1 .why {margin-top: 70px; width: 100%;}
.s1 #arti1 .why .box {position: relative; width: 100%; border-radius: 10px; background-color: #fff7f2;box-shadow: 0 4px 0 0 #FF7F33; padding: 42px 34px; display: flex; align-items: flex-start; gap: 45px}
.s1 #arti1 .why .box ~ .box {margin-top: 20px;}
.s1 #arti1 .why .box .ico {max-width: 122px; width: 100%; border-radius: 50%; overflow: hidden;}
.s1 #arti1 .why .box .ico img {display: block; max-width: 100%; margin: 0 auto;}
.s1 #arti1 .why .box dl {width: 1%; flex: 1 1 auto;}
.s1 #arti1 .why .box dl dt {font-size: 26px; color: #333; font-weight: 600; line-height: 1.68; letter-spacing: -.52px;}
.s1 #arti1 .why .box dl dd {margin-top: 6px; font-size: 20px; color: #333; font-weight: 400; line-height: 1.74; letter-spacing: -.4px; word-break: break-all;}
.s1 #arti1 .why .box dl dd > span {color: #ff7f33;}
.s1 #arti1 .why .box dl dd > small {display: block; margin-top: 30px; font-size: 18px; line-height: 1.6; letter-spacing: -.36px; color: #ff7f33;}
.s1 #arti1 .why .box dl dd > i {font-style: normal; font-size: 18px;}

.s1 #arti2 .upper {margin: 60px 0;}

.s1 #arti3 .upper {margin: 130px 0 10px;}
.s1 #arti3 h6 {margin-top: 24px; width: 100%; border-radius: 35px; line-height: 53px; text-align: center; font-size: 22px; color: #fff; font-weight: 600; letter-spacing: -.44px; background-color: #001a5d;}
.s1 #arti3 .about {max-width: 542px; width: 100%; margin: 55px auto 0;}
.s1 #arti3 .about figure {margin-top: 55px;}
.s1 #arti3 .know-how {max-width: 627px; width: 100%; margin-left: auto; margin-right: auto;}
.s1 #arti3 .know-how h5 {position: relative; max-width: 245px; width: 100%; line-height: 44px; border-radius: 34px; border: 1px solid #ff7f33; padding: 0 29px; box-shadow: 0 4px 0 0 #FF7F33; font-size: 20px; font-weight: 600; letter-spacing: -.4px; color: #000; margin-bottom: 28px;}
.s1 #arti3 .know-how h5::after {position: absolute; content:''; width: 43px; height: 45px; background:url(../images/sub/ico_bell.png) 50% 50% no-repeat; background-size:43px auto; top: -19px; right: -14px; animation: wobble-hor-top 1.5s infinite;}
.s1 #arti3 .know-how p.dot {font-size: 20px;}
.s1 #arti3 .know-how p.dot ~ p.dot {margin-top: 16px;}
.s1 #arti3 .know-how p {font-size: 18px; padding-left: 30px;}
.s1 #arti3 .know-how .info {margin-top: 26px; border-radius: 10px; background-color: #001a5d; padding: 20px 39px;}
.s1 #arti3 .know-how .info p.dot {color: #fff;}
.s1 #arti3 .know-how .info p.dot::before {background-color: #fff;}
.s1 #arti3 .know-how .info p.dot strong {color: #fff;}
.s1 #arti3 .know-how .info p.dot ~ p.dot {margin-top: 3px;}
.s1 #arti3 .know-how .upper {margin: 112px 0;}
.s1 #arti3 .know-how .upper h3 {padding-top: 0;}
.s1 #arti3 .know-how .upper h3::before {display: none;}
.s1 #arti3 .know-how .upper h3 i {font-style: normal;}

.s1 #arti3 .advantage {width: 100%; padding: 69px 94px 60px; background:url(../images/sub/bg_s10101.jpg) 50% 50% no-repeat; background-size: cover; border-radius:20px; text-align: center;}
.s1 #arti3 .advantage h5 {display: flex; align-items: flex-start; gap: 10px; font-size: 34px; font-weight: 700; line-height: 1.46; letter-spacing: -.68px; color: #ff9e1b; justify-content: center;}
.s1 #arti3 .advantage h4 {font-size: 40px; color: #fff; font-weight: 200; line-height: .82; letter-spacing: -.8px; margin-top: 40px; margin-bottom: 16px;}
.s1 #arti3 .advantage h4 strong {font-weight: 600; color: #28ad4d; font-size: 36px; line-height: .91; letter-spacing: -.72px; display: block; margin-top: 17px;}
.s1 #arti3 .advantage p strong {font-size: 22px; color: #fff; line-height: 1.49; letter-spacing: -.44px;}
.s1 #arti3 .advantage figure {margin-top: 5px;}
.s1 #arti3 .advantage figure img {display: block; max-width: 100%; margin: 0 auto;}
.s1 #arti3 .advantage p {color: #fff; }
.s1 #arti3 .advantage p span {color: #FF9E1B; }
.s1 #arti3 .advantage small {display: block; margin-top: 20px; font-size: 16px; color: #fff; line-height: 1.75; letter-spacing: -.32px;}

.s1 #arti4 .step.mt80 {margin-top: 80px; padding-top: 90px; border-top: 1px solid rgba(0, 0, 0, 0.25);}
.s1 #arti4 .step .tip.ty2 {margin-top: 50px;}

.s1 #arti4 .upper.mt70 {margin: 70px 0;}
.s1 #arti4 .upper.mt140 {margin-top: 140px;}
.s1 #arti4 p.dot::before {background-color: #FF7F33;}
.s1 #arti4 a {display: block; max-width: 255px; width: 100%; margin: 65px auto 0; line-height: 70px; border-radius: 64px; background-color: #ff7f33; text-align: center; font-size: 20px; color: #fff; font-weight: 600; letter-spacing: -.4px;}

.s1 #arti5 .real-cont {margin-top: 60px;}

.s1 .real-cont {padding: 0;}
.real-cont {padding: 100px 0 240px;}