@charset "utf-8";

/* 메인 비주얼 */
.main_visual { position: relative; }
.main_visual::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 130px; background: linear-gradient(180deg, #EEE 0%, rgba(248, 249, 250, 0.00) 100%); }
.main_visual .inner { position: relative; padding: 68px 20px 72px; z-index: 1; }
.main_visual .inner h2 { font-size: 26px; font-weight: 400; color: var(--gray-900); line-height: 130%; }
.main_visual .inner h2 .mark { position: relative; z-index: 1; }
.main_visual .inner h2 .mark::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; background: var(--primary-200); z-index: -1; }
.main_visual .inner .img_list_wrap { position: relative; width: 100%; height: 210px; z-index: 1; }
.main_visual .inner .img_list_wrap .img_box { position: absolute; left: 45%; top: 0; transform: translateX(-50%); width: 1070px; height: 210px; }
.main_visual .inner .img_list_wrap .tooltip_text { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 20px; font-weight: 600; color: var(--white); line-height: 130%; white-space: nowrap; padding: 8px 16px; background: #4A4A4A; border-radius: 50px; z-index: 5; }
.main_visual .inner .img_list_wrap .tooltip_text::after { content: ''; display: block; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 40px; height: 34px; background: url(../../img/landing/PL1133/icon_tooltip_arrow_gray.svg) no-repeat center center; background-size: contain; z-index: -1; }
.main_visual .inner .img_list_wrap .blur_text { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); }
.main_visual .inner .img_list_wrap .blur_text::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 36px; background: url(../../img/landing/PL1133/img_question_mark.svg) no-repeat center center; background-size: contain; z-index: 1; }
.main_visual .inner .img_list_wrap .blur_text p { font-size: 26px; font-weight: 400; color: #999; filter: blur(4px); }
.main_visual .inner .arrow_box { display: block; width: 40px; height: 44px; background: url(../../img/landing/img_arrow_down_gradient.svg) no-repeat center center; background-size: contain; margin: 0 auto; }

/* 서비스 한줄 소개 */
.info_section { background: url(../../img/landing/PL1133/bg_info_section.png) no-repeat center top ; background-size: 480px; }
.info_section .inner { padding: 20px 20px 48px; }
.info_section .inner .title_box .h2 { font-size: 24px; font-weight: 400; color: var(--gray-900); line-height: 140%; letter-spacing: -0.6px; margin-top: 8px; }
.info_section .inner .title_box span { display: block; font-size: 16px; font-weight: 500; color: var(--gray-800); line-height: 130%; letter-spacing: -0.32px; }
.info_section .inner .title_box h2 { font-size: 24px; font-weight: 400; color: var(--gray-900); line-height: 140%; letter-spacing: -0.6px; margin-top: 8px; }
.info_section .inner .text_box { margin-top: 120px; }
.info_section .inner .text_box span { display: inline-block; position: relative; font-size: 14px; font-weight: 700; color: var(--white); line-height: 130%; letter-spacing: -0.28px; padding: 7px 14px; background: #4a4a4a; border-radius: 50px; z-index: 1; }
.info_section .inner .text_box span::after { content: ''; display: block; position: absolute; left: 14px; bottom: -8px; width: 12px; height: 12px; background: url(../../img/landing/PL1133/icon_tooltip_arrow_gray.svg) no-repeat center center; background-size: 100% 100%; z-index: -1; }
.info_section .inner .text_box h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); line-height: 140%; letter-spacing: -0.32px; padding-left: 8px; margin-top: 12px; }
.info_section .inner .text_box p { position: relative; width: 100%; font-size: 16px; font-weight: 400; color: var(--gray-900); line-height: 140%; letter-spacing: -0.32px; padding: 14px 18px 14px 84px; background: var(--white); border-radius: 12px; margin-top: 12px; }
.info_section .inner .text_box p::before { content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; background: url(../../img/landing/PL1133/icon_magicStick.svg) no-repeat center center; background-size: contain; }

/* 추천 과정 */ 
.service_section { position: relative; background: var(--gray-300); }
.service_section .inner { padding: 48px 20px 72px ; }
.accordion_list_box { position: relative; padding-left: 40px; } 
.accordion_list_box ul > li { position: relative; border-radius: 20px; }
.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: 20px; overflow: hidden; margin-bottom: 12px; cursor: pointer; transition: height 0s ease-out; }
.accordion_list_box ul li:last-of-type .card_box { margin-bottom: 0; }
.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(--primary ); 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: 71px; }
.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 { display: block; font-size: 16px; font-weight: 700; color: var(--white); line-height: 140%; margin-top: 15px; }
.accordion_list_box .item04 .btn_start::after { width: 18px; height: 18px; background: url(../../img/icon/icon_arrow_right_white.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-left: 6px; }
/* ? active */
.accordion_list_box li.active { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); }
.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; }

/* 영양제 조합 */
.banner_section { background: linear-gradient(180deg, #48CA7A 0%, #2AAD5C 100%); }
.banner_section .inner { padding: 40px 20px; }
.banner_section h2 { font-size: 24px; font-weight: 400; color: var(--white); line-height: 150%; letter-spacing: -0.6px; }
.banner_section h2 b { position: relative; color: var(--white); }
.banner_section h2 b::after { content: ''; display: block; position: absolute; right: -58px; bottom: -12px; width: 39px; height: 63px; background: url(../../img/landing/PL1133/img_plus_group_white.svg) no-repeat center center; background-size: contain; }
.banner_section .banner_slider .swiper-slide { width: auto; padding: 16px 24px; background: var(--white); border-radius: 20px;   }
.banner_section .banner_slider .icon_box { display: inline-block; width: 42px; height: 42px; margin-right: 12px; }
.banner_section .banner_slider .text_box dt { font-size: 14px; font-weight: 400; color: var(--gray-900); line-height: 130%; }
.banner_section .banner_slider .text_box dt em { color: var(--gray-700); }
.banner_section .banner_slider .text_box dd { font-size: 22px; font-weight: 700; color: var(--gray-900); line-height: 130%; margin-top: 4px; }
.banner_section .banner_slider .text_box dd b { color: var(--primary); }

/* 후기 */
.review_section .inner { padding: 48px 20px; }
.review_section .review_slider .swiper-slide { width: 270px; }
.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 img { width: 100%; height: 100%; object-fit: cover; }
.review_section .review_slider .top_box { position: relative; width: 100%; padding: 20px; 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: 20px; 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: 140%; }
.review_section .review_slider .text { max-height: 44px; font-size: 14px; font-weight: 400; color: #d2d2d2; line-height: 130%; 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; }
.review_section .btn_sub_box .btn { font-weight: 500; color: var(--gray-900); }
.review_section .btn_sub_box .btn::after { content: ''; display: inline-block; width: 18px; height: 18px; background: url(../../img/icon/icon_arrow_right_black.svg) no-repeat center center; background-size: contain; vertical-align: -4px; margin-left: 6px; } 

/* 영양제 소개 */
.point_section .inner { padding: 24px 20px; 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; width: 240px; margin: 0 auto; z-index: 1; }
.point_section .inner > .table_box { width: 210px; margin: 0 auto; }
.point_section .inner > .table_box table { width: 100%; }
.point_section .inner > .table_box table thead tr th { text-align: center; padding: 4px; }
.point_section .inner > .table_box table thead tr th span { display: inline-block; font-size: 14px; font-weight: 500; color: var(--gray-800); line-height: 130%; letter-spacing: -0.28px; padding: 5px 8px; background: #EFEFEF; border-radius: 50px; }
.point_section .inner > .table_box table thead tr th span.point { font-weight: 700; color: var(--white); background: var(--primary); }
.point_section .inner > .table_box table tbody tr th { font-size: 14px; font-weight: 500; line-height: 130%; letter-spacing: -0.28px; padding: 12px 6px; }
.point_section .inner > .table_box table tbody tr td { font-size: 16px; font-weight: 400; color: var(--gray-800); line-height: 140%; letter-spacing: -0.32px; text-align: center; padding: 12px 10px; }
.point_section .inner > .table_box table tbody tr td.red { color: #F6463B; }
.point_section .inner > .table_box p { font-size: 10px; font-weight: 400; color: var(--gray-700); line-height: 130%; text-align: right; margin-top: 4px; }
.point_section .arrow_box { display: block; width: 40px; height: 44px; background: url(../../img/landing/img_arrow_down_gradient.svg) no-repeat center center; background-size: contain; margin: 0 auto; }
.point_section .btn_main_box { padding: 40px 20px ; }