@charset "UTF-8";
/* 
  Feelanet main style css
*/

#wrap {overflow: hidden;}
.section .inner {position: relative;width: 100%;height: 100%;overflow: hidden;}
#fp-nav {top: calc(50% + 70px);}
#fp-nav.right {right: 55px;}
#fp-nav ul li, .fp-slidesNav ul li {width: 24px;height: 24px;margin: 5px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span,
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {width: 6px;height: 6px;background: var(--white, #FFF);transform: translate(-50%, -50%); margin: 0;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {width: 6px;height: 6px;margin: 0;}
#fp-nav ul li a, .fp-slidesNav ul li a, #fp-nav ul li:hover a, .fp-slidesNav ul li:hover a {border: 2px solid transparent;border-radius: 20px;transition: 200ms;}
#fp-nav ul li a.active, .fp-slidesNav ul li a.active, #fp-nav ul li:hover a.active, .fp-slidesNav ul li:hover a.active {border: 2px solid var(--white, #FFF);}
.video-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
.video-bg .video-wrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;}
.video-bg video {width: 100%;height: 100%;pointer-events: none;object-fit: cover;
  -webkit-transform: translate3d(0,0,0); /* GPU 활성화 */
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden; /* iOS 렌더링 버그 방지 */
  backface-visibility: hidden;
  -webkit-perspective: 1000; /* 추가 안전 장치 */
  perspective: 1000;
}
.video-bg .video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    contain: paint;}


/* sec1 */
.sec1 {min-height: 100vh;}
.sec1 .video-cover {background: radial-gradient(104.6% 51.83% at 50% 50%, rgba(255, 255, 255, 0.64) 48.25%, rgba(255, 255, 255, 0.00) 100%);}
.sec1 .text-area {position: absolute;display: flex;flex-direction: column;justify-content: center;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 52px;font-weight: 800;line-height: 140%;word-break: keep-all;z-index: 1;}
.sec1 .text-area .txt {position: relative;display: inline-block;
  color: transparent;-webkit-text-fill-color: transparent;
  background-clip: text;-webkit-background-clip: text;
  background-size: 200% 100%;background-position: 100% 0;
}
.sec1 .text-area {animation: scaleAni 0.5s linear forwards;}
@keyframes scaleAni {
  from {transform: scale(0.9) translate(-60%, -50%);opacity: 0;} 
  to {transform: scale(1) translate(-50%, -50%);opacity: 1;}
}

.sec1 .fill-ani-1 {background: linear-gradient(90deg,#002967 0%,#002967 50%,#E7E7E7 50%,#E7E7E7 100%);animation: fillAni 0.7s linear 1s forwards;}
.sec1 .fill-ani-2 {background: linear-gradient(90deg,#C01054 0%,#C01054 50%,#E7E7E7 50%,#E7E7E7 100%);animation: fillAni 0.7s linear 2s forwards;}
.sec1 .fill-ani-3 {background: linear-gradient(90deg,#C01054 0%,#C01054 50%,#E7E7E7 50%,#E7E7E7 100%);animation: fillAni 0.7s linear 2.7s forwards;}
@keyframes fillAni {
  from {background-position: 100% 0;} 
  to {background-position: 0 0;}
}

.sec1 .scroll-down {position: absolute;left: 50%;bottom: 40px;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;z-index: 1;}
.sec1 .scroll-down .scroll-ani {position: relative;width: 20px;height: 30px;border: 2px solid var(--gray_blue_2, #B8BFCC);border-radius: 9px;}
.sec1 .scroll-down .scroll-ani::after {content: '';position: absolute;top: 0;left: calc(50% - 1px);display: block;width: 2px;height: 7px;background: var(--gray_blue_2, #B8BFCC);border-radius: 2px;
animation: scrollAni 1600ms ease-out infinite;}
.sec1 .scroll-down .txt {color: #ACB6C9;font-size: 12px;font-weight: 600;line-height: 100%; /* 12px */margin-top: 8px;}
@keyframes scrollAni {
  0% {opacity: 0;top: 0;}
  30% {opacity: 1;top: 12px;}
  60% {opacity: 1;top: 12px;}
  65% {opacity: 0;top: 12px;}
  100% {opacity: 0;top: 12px;}
}


/* sec2 ~ sec5 */
.fixed .text-area {position: absolute;height: 100%;width: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;word-break: keep-all;}
.fixed .text-area .en-txt {color: #FFF;text-align: center;font-size: 32px;font-weight: 700;line-height: 100%; /* 32px */margin-bottom: 39px;}
.fixed .text-area .tit {color: #FFF;text-align: center;font-size: 72px;font-weight: 800;line-height: 100%; /* 72px */}
.fixed .text-area .txt {color: #FFF;text-align: center;font-size: 24px;font-weight: 500;line-height: 100%; /* 24px */margin-top: 26px;}
.sec2 .video-cover {background: #8994AF;mix-blend-mode: multiply;}
.sec3 .video-cover {background: #BCC0CA;mix-blend-mode: darken;}
.sec4 .video-cover {background: #9FABCC;mix-blend-mode: multiply;}
.sec5 .video-cover {background: #959EB3;mix-blend-mode: multiply;}


/* sec2 */
.sec2 .fp-tableCell {display: flex;justify-content: center;align-items: center;}
.sec2.active .inner {width: 400px;height: 400px;border-radius: 180px;transition: 1s;animation: widthAni 1s linear 0.5s forwards;}
@keyframes widthAni {
  from {width: 400px;height: 400px;border-radius: 180px;} 
  to {width: 100%;height: 100%;border-radius: 0;}
}
.sec2.active .fixed .text-area {transition: opacity 1s 1.2s, transform 1.2s 0s;}
.sec2.active .fixed .en-txt {transition-delay: 1.2s;}
.sec2.active .fixed .tit {transition-delay: 1.2s;}
.sec2.active .fixed .txt {transition-delay: 1.2s;}

.fixed .text-area {opacity: 0;transform: translateY(-40%);transition: opacity 1s 0s, transform 1s 0s;}
.fixed .en-txt {transform: translateY(-20px);transition: 0.5s;transition-delay: 1s;}
.fixed .tit {transform: translateY(20px);transition: 0.5s;transition-delay: 1s;}
.fixed .txt {transform: translateY(20px);transition: 0.5s;transition-delay: 1s;}
.active .fixed .text-area {opacity: 1;transform: translateY(0);transition: opacity 1s 0.5s, transform 1s 0s;}
.active .fixed .en-txt {transform: translateY(0px);transition-delay: 0.5s;}
.active .fixed .tit {transform: translateY(0px);transition-delay: 0.5s;}
.active .fixed .txt {transform: translateY(0px);transition-delay: 0.5s;}

/* fixed 마지막 섹션 */
.sec5 .text-area {position: absolute;height: 100%;width: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;word-break: keep-all;}
.sec5 .text-area .en-txt {color: #FFF;text-align: center;font-size: 32px;font-weight: 700;line-height: 100%; /* 32px */margin-bottom: 39px;}
.sec5 .text-area .tit {color: #FFF;text-align: center;font-size: 72px;font-weight: 800;line-height: 100%; /* 72px */}
.sec5 .text-area .txt {color: #FFF;text-align: center;font-size: 24px;font-weight: 500;line-height: 100%; /* 24px */margin-top: 26px;}
.sec5 .text-area {opacity: 0;transform: translateY(-150px);transition: opacity 1s 0.5s, transform 1.2s 0s;}
.sec5 .en-txt {transform: translateY(-20px);transition: 0.5s;transition-delay: 0.5s;}
.sec5 .tit {transform: translateY(20px);transition: 0.5s;transition-delay: 0.5s;}
.sec5 .txt {transform: translateY(20px);transition: 0.5s;transition-delay: 0.5s;}
.sec5.active .text-area {opacity: 1;transform: translateY(0)}
.sec5.active .en-txt {transform: translateY(0px);}
.sec5.active .tit {transform: translateY(0px);}
.sec5.active .txt {transform: translateY(0px);}


/* sec6 */
.sec6 {background: #FFF;z-index: 6;}
.sec6 .inner {position: relative;display: flex;justify-content: center;align-items: center;}
.sec6 .text-area {height: 200px;width: 540px;position: absolute;bottom: 20px;left: 200px;z-index: 5;}
.sec6 .title {position: absolute;left: 200px;top: 80px;color: var(--CI_point, #C01054);font-size: 24px;font-weight: 800;line-height: 100%;}
.sec6 .text-list {position: relative;}
.sec6 .text-list li {position: absolute;opacity: 0;transition: 0.7s;transform: translateY(20px);}
.sec6 .text-list li.active {opacity: 1;transform: translateY(0px);}
.sec6 .text-area .tit {color: var(--navy_txt, #333F54);font-size: 56px;font-weight: 800;line-height: 100%; /* 56px */}
.sec6 .text-area .tit .txt-s {font-size: 26px;font-weight: 500;}
.sec6 .text-area .txt {width: 100%;color: var(--navy_txt, #333F54);font-size: 20px;font-weight: 500;line-height: 160%; /* 32px */word-break: keep-all;margin-top: 24px;}
.sec6 .custom-swiper {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.sec6 .custom-swiper .slide-wrapper {position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;overflow: hidden;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
.sec6 .custom-swiper .slide-wrapper .slideItem {display: flex;align-items: flex-end;justify-content: center;opacity: 0;width: 400px;height: 400px;border-radius: 9999px;overflow: hidden;background-color: #fff;
  /* iOS Safari 대응 */
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;}
.sec6 .custom-swiper .slide-wrapper .slideItem.slide-current {z-index: 3;width: 600px;height: 600px;}
.sec6 .custom-swiper .slide-wrapper .circle-box {position: absolute;top: calc(50% - 250px);right: calc(50% - 314px);z-index: 5;}
.sec6 .custom-swiper .slide-wrapper .circle-box .circle-txt {animation: circleAni 6s linear infinite;opacity: 0;transition: 0.7s;}
@keyframes circleAni {
  from {transform: rotate(0);} 
  to {transform: rotate(360deg);}
}

.sec6 .custom-swiper .slide-wrapper .slideItem.slide-prev {position: absolute;left: 0;top: 50%;transform: translate(-50%, -50%);transition: 0.5s;z-index: 2;}
.sec6 .custom-swiper .slide-wrapper .slideItem.slide-next {position: absolute;right: 0;top: 50%;transform: translate(50%, -50%);transition: 0.5s;z-index: 2;}
.sec6 .custom-swiper .slide-wrapper .slideItem.slide-next::after,
  .sec6 .custom-swiper .slide-wrapper .slideItem.slide-prev::after {content: '';display: block; position: absolute;left: 0;top: 0;width: 100%;height: 406px;background: linear-gradient(180deg, rgba(50, 54, 93, 0.00) 12.03%, rgba(50, 54, 93, 0.90) 87.07%);mix-blend-mode: screen;}
.sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image {background: url(../images/circle_bg_img.png) no-repeat center;background-size: auto 100%;}
.sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image .view-img {width: 400px;}
.sec6 .custom-swiper .slide-wrapper .slideItem .view-img {width: 100%;height: auto;}
.sec6 .custom-swiper .slide-wrapper.result::after {position: absolute;left: 0;top: 50%;content: "";transform: translateY(-50%);background: #e5eaf3;width: 100%;height: 1px;}


.sec6 .img-slide-wrap {position: relative;width: 100%;display: flex;justify-content: center;align-items: center;z-index: 2;}
.sec6 .img-slide-wrap::before {content: '';position: absolute;left: 0;top: 50%;right: 0;display: block;width: 100%;height: 1px;background: #E5EAF3;}
.sec6 .img-box {position: relative;border-radius: 600px;background: #FFF;overflow: hidden;}
.sec6 .img-box img {width: 100%;height: 100%;
  user-drag: none;
  /* Safari */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;}
.sec6 .img-box.prev {position: absolute;right: calc(100% - 192px);width: 384px;height: 384px;border-radius: 300px;}
.sec6 .img-box.center {width: 600px;height: 600px;border-radius: 400px;}
.sec6 .img-box.next {position: absolute;left: calc(100% - 192px); width: 384px;height: 384px;border-radius: 300px;}
.sec6 .control {display: flex;gap: 28px;position: absolute;bottom: 62px;right: 200px;}

.sec6 .page {display: inline-flex;align-items: center;gap: 15px;color: var(--gray_blue, #989BA8);font-size: 18px;font-weight: 400;line-height: 156%; /* 28.08px */}
.sec6 .current {color: var(--CI_point, #C01054);font-weight: 700;}
.sec6 .page .line {display: block;width: 1px;height: 13px;background: #CCC;}
.sec6 .control .btn {color: var(--gray_blue_2, #B8BFCC);font-size: 16px;}
.sec6 .control .btn:hover {color: var(--CI_point, #C01054);}

#section6 .title,
#section6 .text-list,
#section6 .slide-prev,
#section6 .slide-next,
#section6 .control {
  opacity: 0;
  transition: opacity 1s ease;
}

/* sec7 */
.sec7 .inner {display: flex;flex-direction: column;justify-content: center;background: var(--CI_navy, #002967);}
.sec7 .text-area {max-width: 1440px;display: flex;align-items: center;gap: 25px;padding-left: 228px;margin-bottom: 66px;z-index: 2;}
.sec7 .text-area .tit {color: var(--white, #FFF);font-size: 48px;font-weight: 300;line-height: 100%; /* 48px */}
.sec7 .text-area .tit b {font-weight: 800;}
.sec7 .text-area .page-link {color: var(--gray_blue_2, #B8BFCC);font-size: 16px;}
.sec7 .text-area .page-link:hover {color: var(--CI_point, #C01054);}
.sec7 .img-bg {position: absolute;top: -36px;right: 220px;}
.card-wrap {gap: 26px;}
.card-wrap .card {width: 456px;background: #FFF;border-radius: 16px;overflow: hidden;}
.card-wrap .card .img-area {position: relative;height: 250px;overflow: hidden;}
.card-wrap .card .img-area img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: cover;}
.card-wrap .card .txt-area {display: flex;flex-direction: column;justify-content: space-between;height: 190px;padding: 43px 40px 44px;}
.card-wrap .card .card-tit {color: var(--black, #222);font-size: 24px;font-weight: 600;line-height: 140%; /* 33.6px */
display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;word-break: keep-all;}
.card-wrap .card .card-txt {color: var(--gray_1, #6B6B6B);font-size: 18px;font-weight: 400;line-height: 100%; /* 18px */
display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;word-break: keep-all;}

.sec7 .text-area {opacity: 0;transform: translateY(20px);}
.sec7 .img-bg {opacity: 0;transform: translateY(-20px);}
.sec7 .card-wrap .card {opacity: 0;transform: translateY(20px);}

/* PC */
@media screen and (min-width: 1281px) and (max-width: 1600px)
{
  .sec6 .text-area {left: 150px;}
  .sec6 .control {right: 150px;}
  .sec6 .custom-swiper .slide-wrapper .circle-box {top: calc(50% - 200px);right: calc(50% - 264px);}
  .sec6 .custom-swiper .slide-wrapper .slideItem {width: 300px;height: 300px;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.slide-current {width: 450px;height: 450px;}
  
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #fp-nav.right {display: none !important;}

  /* sec1 */
  .sec1 .text-area {width: 560px;font-size: 40px;padding: 0;}
  .sec1 .scroll-down {bottom: 58px;}

  /* sec2 ~ sec5 */
  .fixed .text-area {padding: 0 32px;}
  .fixed .text-area .en-txt {font-size: 28px;margin-bottom: 13px;}
  .fixed .text-area .tit {font-size: 64px;line-height: 130%}
  .fixed .text-area .txt {font-size: 24px;line-height: 100%;margin-top: 30px;}

  .sec2.active .inner {width: 328px;height: 328px;border-radius: 138px;}
  @keyframes widthAni {
    from {width: 328px;height: 328px;border-radius: 138px;} 
    to {width: 100%;height: 100%;border-radius: 0;}
  }

  /* sec5 */
  .sec5 .text-area {padding: 0 32px;}
  .sec5 .text-area .en-txt {font-size: 28px;margin-bottom: 13px;}
  .sec5 .text-area .tit {font-size: 64px;line-height: 130%}
  .sec5 .text-area .txt {font-size: 24px;line-height: 100%;margin-top: 30px;}

  /* sec6 */
  .sec6 .inner {padding-top: 72px;}
  .sec6 .custom-swiper {flex-direction: column;justify-content: center;height: 100%;}
  .sec6 .title {position: static;align-self: flex-start;font-size: 20px;padding-left: 32px;}
  .sec6 .text-list li {max-width: 100vw;}
  .sec6 .img-box.prev {width: 88px;height: 88px;}
  .sec6 .img-box.center {width: 240px;height: 240px;}
  .sec6 .img-box.next {width: 88px;height: 88px;}
  .sec6 .custom-swiper .slide-wrapper {height: auto;padding: 77px 0 40px;}
  .sec6 .custom-swiper .slide-wrapper .circle-box {display: none;}
  .sec6 .custom-swiper .slide-wrapper .slideItem {width: 236px;height: 236px;}
  .sec6 .custom-swiper .slide-wrapper .slideItem .view-box img {width: 100%;height: 100%;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.slide-current {width: 352px;height: 352px;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image {background: url(../images/circle_bg_img.png) no-repeat center;background-size: 100% 100%;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image .view-img {width: 150px;}
  .sec6 .text-area {position: static;margin-top: 0;padding: 0 32px;width: 100%;height: 135px;}
  
  .sec6 .text-area .tit {font-size: 28px;}
  .sec6 .text-area .txt {font-size: 18px;}
  .sec6 .text-area .tit .txt-s {font-size: 18px;}
  .sec6 .control {position: static;order: 1;margin-top: 43px;align-self: flex-end;padding-right: 32px;}
  .sec6 .control .btn {font-size: 12px;}
  .sec6 .page {font-size: 14px;}

  /* sec7 */
  .sec7 .inner {padding-top: 72px;}
  .sec7 .img-bg {height: auto;top: 37px;right: 33px;}
  .sec7 .text-area {padding-left: 32px;margin-bottom: 72px;}
  .sec7 .text-area .tit {font-size: 30px;}
  .sec7 .card-wrap .card {width: 420px;}
  .card-wrap .card .img-area {height: 230px;}
  .card-wrap .card .txt-area {height: 138px;padding: 31px 25px 32px;}
  .card-wrap .card .card-tit {font-size: 18px;}
  .card-wrap .card .card-txt {font-size: 16px;}


}

/* Mobile */
@media screen and (max-width: 767px) {
  #fp-nav.right {display: none !important;}

  /* sec1 */
  .sec1 .text-area {width: 100%;font-size: 36px;padding: 0 24px 0 37px;}

  /* sec2 ~ sec5 */
  .fixed .text-area {padding: 0 30px;}
  .fixed .text-area .en-txt {font-size: 16px;margin-bottom: 18px;}
  .fixed .text-area .tit {font-size: 36px;line-height: 130%}
  .fixed .text-area .txt {font-size: 18px;line-height: 160%;margin-top: 5px;}

  .sec2.active .inner {width: 145px;height: 267px;}
  @keyframes widthAni {
    from {width: 145px;height: 267px;border-radius: 180px;} 
    to {width: 100%;height: 100%;border-radius: 0;}
  }

  /* sec5 */
  .sec5 .text-area {padding: 0 30px;}
  .sec5 .text-area .en-txt {font-size: 16px;margin-bottom: 18px;}
  .sec5 .text-area .tit {font-size: 36px;line-height: 130%}
  .sec5 .text-area .txt {font-size: 18px;line-height: 160%;margin-top: 5px;}

  /* sec6 */
  .sec6 .inner {padding-top: 64px;}
  .sec6 .custom-swiper {flex-direction: column;justify-content: center;height: 100%;}
  .sec6 .title {position: static;align-self: flex-start;font-size: 18px;padding-left: 20px;}
  .sec6 .text-list li {max-width: 100vw;}
  .sec6 .img-box.prev {width: 88px;height: 88px;}
  .sec6 .img-box.center {width: 240px;height: 240px;}
  .sec6 .img-box.next {width: 88px;height: 88px;}
  .sec6 .custom-swiper .slide-wrapper {height: auto;padding: 52px 0 32px;}
  .sec6 .custom-swiper .slide-wrapper .circle-box {display: none;}
  .sec6 .custom-swiper .slide-wrapper .slideItem {width: 104px;height: 104px;}
  .sec6 .custom-swiper .slide-wrapper .slideItem .view-box img {width: 100%;height: 100%;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.slide-current {width: 240px;height: 240px;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image {background: url(../images/circle_bg_img.png) no-repeat center;background-size: 100% 100%;}
  .sec6 .custom-swiper .slide-wrapper .slideItem.is-first-image .view-img {width: 150px;}
  .sec6 .text-area {position: static;margin-top: 0;padding: 0 18px;width: 100%;height: 120px;}
  
  .sec6 .text-area .tit {font-size: 24px;}
  .sec6 .text-area .txt {width: 100%;font-size: 16px;}
  .sec6 .text-area .tit .txt-s {font-size: 16px;}
  .sec6 .control {position: static;order: 1;margin-top: 43px;}
  .sec6 .control .btn {font-size: 12px;}
  .sec6 .page {font-size: 14px;}

  /* sec7 */
  .sec7 .inner {padding-top: 64px;}
  .sec7 .text-area {gap: 20px;padding-left: 20px;margin-bottom: 50px;}
  .sec7 .img-bg {width: 200px;height: auto;top: 42px;right: 0;}
  .sec7 .text-area .tit {font-size: 24px;}
  .sec7 .text-area .page-link {font-size: 11px;}
  .sec7 .card-wrap .card {width: 248px;}
  .sec7 .card-wrap .card .img-area {height: 136px;}
  .sec7 .card-wrap .card .txt-area {height: 128px;padding: 20px 20px 30px;}
  .sec7 .card-wrap .card .card-tit {font-size: 18px;}
  .sec7 .card-wrap .card .card-txt {font-size: 15px;}
  

}