@charset "utf-8";
@keyframes ani_scan {
    0% { top: 15px; }
    20% { top: 15px; }
    35% { top: 130px; }
    65% { top: 130px; }
    80% { top: 15px; }
    100% { top: 15px; }
}
@keyframes ani_scale {
    0% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    28% {  transform: translate(-50%, -50%) scale(1); opacity: 1; }
    87% {  transform: translate(-50%, -50%) scale(1); opacity: 1; }
    95% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
@keyframes ani_scale2 {
    0% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    52% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% {  transform: translate(-50%, -50%) scale(1); opacity: 1; }
    88% {  transform: translate(-50%, -50%) scale(1); opacity: 1; }
    96% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% {  transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

section .inner { padding: 56px 20px 40px; }
section .inner h2 .mark { position: relative; display: inline-block; z-index: 1; }
section .inner h2 .mark::before { position: absolute; left: 0; bottom: 2px; width: 100%; height: 8px; background: #46FF8C; content: ''; display: block; z-index: -1; }

/* PL993 - A */
.btn_main_box > p { margin-bottom: 12px; }
.btn_main_box > p img { width: 162px; }
.main_visual_A .inner { padding: 0 20px 16px; }
.main_visual_A .flex { justify-content: space-between; }
.main_visual_A .title_box { position: relative; width: 235px; margin-top: 56px; }
.main_visual_A .title_box h2 { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 60px; }
.main_visual_A .title_box h2 span { padding-left: 110px; display: inline-block; }
.main_visual_A .mv_text_slider { position: absolute; left: -6px; top: 53px; width: 120px; height: 70px; overflow: hidden; }
.main_visual_A .mv_text_slider .swiper-slide { font-size: 54px; font-weight: 800; }
.main_visual_A .mv_text_slider .swiper-slide span { width: 70px; height: 70px; vertical-align: -16px; display: inline-block; margin-right: -6px; }
.main_visual_A .mv_text_slider .swiper-slide.green { color: #48E23D; }
.main_visual_A .mv_text_slider .swiper-slide.green span { background: url(../../img/landing/icon_mvo_PL993_A.webp) no-repeat center center; background-size: 70px; }
.main_visual_A .mv_text_slider .swiper-slide.red { color: #FF2E31; }
.main_visual_A .mv_text_slider .swiper-slide.red span { background: url(../../img/landing/icon_mvx_PL993_A.webp) no-repeat center center; background-size: 70px; }
.main_visual_A .mv_img_slider { width: 100px; height: 315px; overflow: hidden; }
.main_visual_A .btn_main_box::after { width: 40px; height: 44px; background: url(../../img/landing/img_mv_arrow_PL993_A.svg); content: ''; display: block; margin: 24px auto 0; }
.section02_A { width: 100%; background: url(../../img/landing/bg_sec02_PL993_A.png) no-repeat center center; background-size: cover; }
.section02_A p { font-size: 18px; font-weight: 400; line-height: 28px; }
.section02_A p .mark { position: relative; display: inline-block; z-index: 1; }
.section02_A p .mark::before { position: absolute; left: 0; bottom: 2px; width: 100%; height: 8px; background: #46FF8C; content: ''; display: block; z-index: -1; }

/* PL993 - B */
.main_visual_B { width: 100%; background: var(--primary-100); text-align: center; }
.main_visual_B .inner > img { border-radius: 12px; overflow: hidden; }
.main_visual_B .inner > ul { position: relative; display: flex; justify-content: center; } 
.main_visual_B .inner > ul li { width: 72px; margin-right: 24px; } 
.main_visual_B .inner > ul li:last-of-type { margin-right: 0; } 
.main_visual_B .inner > ul li .icon_box { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: var(--white); border-radius: 50%; overflow: hidden; }
.main_visual_B .inner > ul li:nth-of-type(1) .icon_box img { width: 45px; } 
.main_visual_B .inner > ul li:nth-of-type(2) .icon_box img { width: 72px; } 
.main_visual_B .inner > ul li:nth-of-type(3) .icon_box img { width: 55px; } 
.main_visual_B .inner > ul li p { font-size: 18px; font-weight: 700; color: #222; line-height: 26px; margin-top: 8px; } 
.main_visual_B .inner > ul li p b { color: #0971DC; }
.section02_B .txt_box { text-align: center; }
.section02_B .txt_box span { display: inline-block; font-size: 18px; font-weight: 700; color: var(--white); line-height: 26px; padding: 4px 8px; background: #777777; margin-bottom: 16px; }
.section02_B .txt_box p { font-size: 26px; font-weight: 700; line-height: 34px; margin-bottom: 24px; } 
.section02_B .txt_box p.ico_emoji::after { display: block; width: 40px; height: 40px; background: url(../../img/landing/icon_embarrass.svg) no-repeat center center; background-size: contain; content: ''; margin: 16px auto 0; } 
.section02_B .txt_box p b { color: var(--primary); } 
.section02_B .txt_box img { width: 100%; max-width: 350px; border-radius: 8px; overflow: hidden; }




/* 혜택 */
@keyframes tooltipMove {
    0% { transform: translateY(0); }
    50% { transform: translateY(4px); }
    100% { transform: translateY(0); }
}
.benefit_section h2 { position: relative; }
.benefit_section h2 .tooltip { position: absolute; left: 133px; bottom: -36px; font-size: 14px; font-weight: 700; color: var(--white); line-height: 14px; padding: 8px 14px; background: #717278; border-radius: 15px; animation: tooltipMove 1s infinite forwards; }
.benefit_section h2 .tooltip::before { position: absolute; left: 24px; bottom: 90%; width: 20px; height: 0px; border: 10px solid transparent; border-bottom: 10px solid #717278; box-sizing: border-box; content: ''; display: block; }
.benefit_section .benefit_slider .swiper-slide { position: relative; width: 200px; text-align: center; padding: 20px; z-index: 1; } 
.benefit_section .benefit_slider .swiper-slide::before { position: absolute; left: 0; top: 0; width: 100%; height: 160px; background: #EAFCF1; border-radius: 24px; content: ''; display: block; z-index: -1; }
.benefit_section .benefit_slider p { font-size: 16px; font-weight: 400; line-height: 24px; }
.benefit_section .benefit_slider p strong { font-size: 18px; display: block; }
.benefit_section .benefit_slider .img_box { width: 130px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 16px auto 0; }
.benefit_section .benefit_slider .s01 .img_box img { width: 121px; }
.benefit_section .benefit_slider .s02 .img_box img { width: 129px; }
.benefit_section .benefit_slider .s03 .img_box img { width: 103px; }
.benefit_section .benefit_slider .s04 .img_box img { width: 109px; }
.benefit_section .benefit_slider .s05 .img_box img { width: 100px; }
.benefit_section .benefit_slider .bs-scrollbar { width: 60px; height: 6px; background: #F0F0F0; border-radius: 3px; margin: 16px auto 0; }
.benefit_section .benefit_slider .bs-scrollbar .swiper-scrollbar-drag { background: #111; }


/* 리뷰 */
.review_section .review_slider .swiper-slide { width: 360px; }
.review_section .review_slider .swiper-slide a { position: relative; display: block; width: 100%; height: 270px; border-radius: 32px; overflow: hidden; }
.review_section .review_slider .img_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.review_section .review_slider .img_box::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 5%, rgba(0, 0, 0, 0.50) 62.93%); content: ''; display: block; }
.review_section .review_slider .img_box img { width: 100%; height: 100%; object-fit: cover; }
.review_section .review_slider .top_box { position: relative; width: 100%; padding: 24px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.review_section .review_slider .star { font-size: 14px; font-weight: 400; color: var(--white); line-height: 16px; display: inline-block; }
.review_section .review_slider .star::before { width: 16px; height: 16px; background: url(../../img/icon/icon_star_white.svg) no-repeat center center; background-size: 16px; content: ''; display: inline-block; vertical-align: -3px; margin-right: 4px; }
.review_section .review_slider .arrow { font-size: 14px; font-weight: 400; color: var(--white); line-height: 16px; display: inline-block; }
.review_section .review_slider .arrow::after { width: 16px; height: 16px; background: url(../../img/icon/icon_arrow_right_white.svg) no-repeat center center; background-size: 20px; content: ''; display: inline-block; vertical-align: -3px; margin-left: 2px; }
.review_section .review_slider .text_box { position: absolute; left: 0; bottom: 0; width: 100%; padding: 24px; z-index: 5; }
.review_section .review_slider .label { font-size: 13px; font-weight: 500; color: var(--white); line-height: 20px; padding: 0 12px; background: rgba(255, 255, 255, 0.5); border-radius: 10px; display: inline-block; }
.review_section .review_slider .title { font-size: 16px; font-weight: 700; color: var(--white); line-height: 24px; }
.review_section .review_slider .text { max-height: 44px; font-size: 14px; font-weight: 400; color: #d2d2d2; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap:break-word; overflow: hidden; }
.review_section .review_slider .rs-scrollbar { width: 60px; height: 6px; background: #F0F0F0; border-radius: 3px; margin: 16px auto 0; }
.review_section .review_slider .rs-scrollbar .swiper-scrollbar-drag { background: #111; }


/* 추천 영양제 패키지 */
.package_section { background: var(--gray-400); }
.package_list_box { display: flex; flex-wrap: wrap; }
.package_list_box li { width: calc(33.33% - 10px); margin-right: 12px; }
.package_list_box li:nth-of-type(3n) { margin-right: 0; }
.package_list_box li:nth-of-type(n+4) { margin-top: 12px; }
.package_list_box a { width: 100%; padding: 12px 12px 14px; text-align: center; background: var(--white); border-radius: 8px; display: block; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04); }
.package_list_box span { display: inline-block; width: 40px; height: 40px; }
.package_list_box .icon_package_require { background: url(../../img/icon/icon_package_require.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_menses { background: url(../../img/icon/icon_package_menses.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_liver { background: url(../../img/icon/icon_package_liver.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_digest { background: url(../../img/icon/icon_package_digest.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_bone { background: url(../../img/icon/icon_package_bone.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_energe { background: url(../../img/icon/icon_package_energe.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_immune { background: url(../../img/icon/icon_package_immune.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_diet { background: url(../../img/icon/icon_package_diet.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_sleep { background: url(../../img/icon/icon_package_sleep.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_beauty { background: url(../../img/icon/icon_package_beauty.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_hair { background: url(../../img/icon/icon_package_hair.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_blood { background: url(../../img/icon/icon_package_blood.svg) no-repeat center center; background-size: contain; }
.package_list_box .icon_package_concent { background: url(../../img/icon/icon_package_concent.svg) no-repeat center center; background-size: contain; }


/* 지금 필그램 구독자가 많이 찾는 영양제 */
.product_section .inner { position: relative; padding: 56px 0 0; }
.product_section .title_box { position: relative; padding: 0 20px; }
.product_section .title_box > .btn_product_more { position: absolute; right: 20px; bottom: 0; font-size: 14px; font-weight: 400; color: var(--gray-800); line-height: 18px; display: inline-block; }
.product_section .title_box > .btn_product_more::after { width: 18px; height: 18px; background: url(../../img/icon/icon_arrow_right_gray.svg) no-repeat center center; background-size: contain; vertical-align: -4px; content: ''; display: inline-block; }
.product_section .sub_tab_nav { padding: 20px 20px 12px 20px; }
.product_section .sub_tab_nav ul { display: flex; flex-wrap: wrap; }
.product_section .sub_tab_nav ul li { font-size: 14px; color: var(--gray-800); line-height: 18px; padding: 8px 16px; background: var(--gray-400); border-radius: 16px; margin: 0 8px 8px 0; cursor: pointer; }
.product_section .sub_tab_nav ul li.active { font-weight: 700; color: var(--primary); background: var(--primary-100); }
.product_section .product_list_box { padding: 20px 20px 40px; background: var(--gray-400); } 


/* 나에게 맞는 맞춤 영양제 만드는 방법 */
.service_section { position: relative; }
.accordion_list_box { position: relative; padding-left: 40px; }
.accordion_list_box ul > li { position: relative; }
.accordion_list_box ul > li:last-of-type { margin-bottom: 0; }
.accordion_list_box ul > li::before { position: absolute; left: -34px; top: 43px; width: 4px; height: 100%; background: var(--gray-400); content: ''; display: block; }
.accordion_list_box ul > li::after { position: absolute; left: -40px; top: 28px; width: 16px; height: 16px; background: var(--gray-400); border-radius: 50%; content: ''; display: block; z-index: 1; }
.accordion_list_box ul > li:last-of-type:before { display: none; }
.accordion_list_box .card_box { position: relative; height: 72px; background: var(--white); border-radius: 12px; overflow: hidden; margin-bottom: 12px; cursor: pointer; transition: height 0.3s ease-out; }
.accordion_list_box .cover_box { position: absolute; width: 100%; height: 100%; max-height: 95px; z-index: 5; transition: all 0.3s ease-out; }
.accordion_list_box .item01 .cover_box { background: url(../../img/landing/img_service_01.webp) no-repeat center center; background-size: cover; }
.accordion_list_box .item02 .cover_box { background: url(../../img/landing/img_service_02.webp) no-repeat center center; background-size: cover; }
.accordion_list_box .item03 .cover_box { background: url(../../img/landing/img_service_03.webp) no-repeat center center; background-size: cover; }
.accordion_list_box .item04 .cover_box { background: url(../../img/landing/img_service_04.webp) no-repeat center center; background-size: cover; }
.accordion_list_box .cover_box::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); content: ''; display: block; }
.accordion_list_box .cover_box::after { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url(../../img/icon/icon_arrow_down_white.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 1; }
.accordion_list_box .cover_box span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 1; }
.accordion_list_box .content_box { position: relative; height: 100%; overflow: hidden; }
.accordion_list_box .img_box { height: 95px; overflow: hidden; }
.accordion_list_box .text_box { padding: 0 20px 16px; }
.accordion_list_box .text_box .numb { font-size: 50px; font-weight: 700; color: var(--gray-400); line-height: 50px; display: block; margin-top: -25px; }
/* .item04 */
.accordion_list_box .item04 .card_box { background: url(../../img/landing/img_service_04_bg.webp) no-repeat center center; background-size: cover; }
.accordion_list_box .item04 .img_box { height: 75px; }
.accordion_list_box .item04 .text_box .numb { color: rgba(248, 249, 250, 0.2); }
.accordion_list_box .item04 .text_box dd { color: var(--primary-800); }
.accordion_list_box .item04 .btn_start { font-size: 16px; font-weight: 700; color: var(--white); line-height: 18px; display: inline-block; }
.accordion_list_box .item04 .btn_start::after { width: 12px; height: 12px; background: url(../../img/icon/icon_arrow_right_white.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -1px; margin-left: 6px; }
/* ? active */
.accordion_list_box li.on::before { background: var(--primary); }
.accordion_list_box li.active::before { background: rgb(239,239,239); background: linear-gradient(0deg, rgba(239,239,239,1) 0%, rgba(42,173,92,1) 100%); }
.accordion_list_box li.on::after,
.accordion_list_box li.active::after { background: var(--primary); }
.accordion_list_box li.active .card_box { height: 220px; }
.accordion_list_box li.active .cover_box { opacity: 0; }


/* 필그램의 영양제 */
.point_section .inner { text-align: center; }
.point_section .inner > span { display: inline-block; font-size: 16px; font-weight: 700; color: var(--white); line-height: 28px; padding: 0 8px; background: var(--primary-800); border-radius: 6px; }
.point_section .inner > .img_box { position: relative; margin: 0 auto; z-index: 1; }
.point_section .inner > .img_box::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: url(../../img/landing/bg_filter.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: -1; }
.point_section > div:nth-of-type(1) > .img_box { width: 320px; }
.point_section > div:nth-of-type(2) > .img_box { width: 320px; }
.point_section > div:nth-of-type(3) > .img_box { width: 240px; }


/* 영양제 추천 시스템 */
.step_section { background: var(--gray-400); }
.step_section .inner { padding: 40px 32px; }
.step_section .slider_box .swiper-slide { text-align: center; }
.step_section .slider_box .text_box { width: 100%; }
.step_section .slider_box .text_box > span { display: inline-block; font-size: 16px; font-weight: 700; color: var(--white); line-height: 28px; padding: 0 8px; background: var(--primary-800); border-radius: 6px; }
.step_section .slider_box .img_box { width: 100%; border-radius: 12px; overflow: hidden; }
.step_section .slider_pager { position: relative; width: 100%; text-align: center; display: block; }
.step_section .slider_pager > span { width: 8px; height: 8px; background: var(--gray-600); border-radius: 8px; margin: 0 3px; opacity: 1; transition: all 0.3s ease-out; }
.step_section .slider_pager > span.swiper-pagination-bullet-active { width: 28px; background: var(--black); }