@charset "utf-8";
@keyframes marquee { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-760px, 0, 0); } 
}

/* 상단 nav */
.pg_nav { position: sticky; left: 0; top: 68px; width: 100%; max-width: 480px; background: #ffffff; border-bottom: 1px solid var(--gray-200); overflow: hidden; z-index: 100; }
.pg_nav ul { white-space: nowrap; overflow-x: scroll; padding: 15px 24px; -ms-overflow-style: none; scrollbar-width: none; }
.pg_nav ul::-webkit-scrollbar { display: none; }
.pg_nav ul li { display: inline-block; margin-right: 24px; }
.pg_nav ul li:last-of-type { margin-right: 0; }
.pg_nav ul li a { font-size: 14px; font-weight: 500; color: var(--gray-03); line-height: 18px; transition: all 0.1s ease-in-out; }
.pg_nav ul li a:hover { color: var(--black); }

/* main */
main { position: relative; overflow: hidden; }
section .inner { padding: 36px 20px; }
main .title_box span { font-size: 18px; font-weight: 500; color: var(--gray-900); display: block; margin-bottom: 4px; }
main .title_box span b { color: var(--purple); }
main .title_box h2 { font-size: 30px; font-weight: 700; color: var(--gray-900); line-height: 36px; }
main .btn_box .btn { width: 100%; height: 52px; font-size: 18px; font-weight: 600; color: #ffffff; line-height: 20px; text-align: center; padding: 16px; background: var(--purple); border: none; border-radius: 8px; box-sizing: border-box; display: block; }
main .btn_box .btn::after { width: 20px; height: 20px; background: url(../../image/icon/icon_circle_right_w.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-left: 6px; }

/* section_01 */
.section01_B { position: relative; }
.section01_B .main_visual { width: 100%; padding: 30px 0 20px; overflow: hidden; }
.section01_B .main_visual .swiper-slide { width: 300px; }
.section01_B .main_visual .swiper-slide.s02 .visual_card_box { background: var(--gray-100); }
.section01_B .visual_card_box { width: 100%; transform: scale(0.9); padding: 24px 20px 16px; border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-02); overflow: hidden; transition: all 0.3s ease-in-out 0.1s; }
.section01_B .main_visual .swiper-slide.swiper-slide-active .visual_card_box { transform: scale(1); }
.section01_B .visual_card_box h2 { font-size: 30px; font-weight: 700; line-height: 40px; }
.section01_B .visual_card_box p { font-size: 16px; font-weight: 400; color: var(--purple-900); line-height: 22px; margin-top: 10px; }
.section01_B .img_box { position: relative; width: 100%; height: 200px; border-radius: 12px; overflow: hidden; margin-top: 24px; }
.section01_B .img_box img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; }
.section01_B .bottom { width: 100%; padding: 0 20px 20px; }
.section01_B .main_pager { width: 100%; text-align: center; margin-bottom: 20px; }
.section01_B .main_pager .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--purple-300); opacity: 1; margin: 0 4px; }
.section01_B .main_pager .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--purple-900); border: 1px solid var(--black); }
/* section_01 A */
.section01_A { position: relative; }
.section01_A .visual_list li { width: 100%; padding: 36px 20px; }
.section01_A .visual_list li:first-of-type { height: 510px; background: url(../../image/main/PL936/bg_section01.webp) no-repeat center center; background-size: cover; }
.section01_A .visual_list li:last-of-type { background: var(--gray-50); }
.section01_A .visual_list h2 { font-size: 30px; font-weight: 700; line-height: 40px; }
.section01_A .visual_list p { font-size: 16px; font-weight: 400; color: var(--purple-900); line-height: 22px; margin-top: 10px; }
.section01_A .img_box { position: relative; width: 100%; height: 200px; border-radius: 12px; overflow: hidden; margin-top: 24px; }
.section01_A .img_box img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; }

/* section_02 */
.section02 { background: #ffffff; }
.section02 .title_box { text-align: center; }
.section02 .contents_box { margin: 24px 0; }
.section02 .contents_box li { margin-bottom: 16px; }
.section02 .contents_box li:last-of-type { margin-bottom: 0; }
.section02 .contents_box li a { width: 100%; display: flex; align-items: center; padding: 18px 16px; background: #ffffff; border-radius: 8px; box-shadow: var(--shadow-02); }
.section02 .contents_box .img_box { width: 64px; min-width: 64px; height: 64px; padding: 8px; background: var(--purple-50); border-radius: 8px; display: block; overflow: hidden; box-shadow: var(--shadow-02); }
.section02 .contents_box .img_box img { width: 100%; max-height: 100%; }
.section02 .contents_box .text_box { flex: 1; padding-left: 16px; }
.section02 .contents_box .name { font-size: 18px; font-weight: 700; color: var(--gray-04); line-height: 23px; }
.section02 .contents_box .detail { font-size: 13px; font-weight: 400; color: var(--purple-900); line-height: 18px; }
.section02 .contents_box .bottom { display: flex; justify-content: space-between; margin-top: 4px; }
.section02 .contents_box .price { display: inline-block; font-size: 14px; font-weight: 700; line-height: 20px; }
.section02 .contents_box .btn_view { display: inline-block; font-size: 12px; font-weight: 700; color: var(--purple); line-height: 20px; }
.section02 .contents_box .btn_view::after { width: 16px; height: 16px; background: url(../../image/icon/icon_circle_right_p.svg) no-repeat center center; content: ''; display: inline-block; vertical-align: -4px; margin-left: 3 px; }

/* section_03 */
.section03 { background: #F2f4f7; }
.section03 .inner { text-align: center; }
.section03 .contents_box { display: flex; justify-content: center; margin-top: 24px; }
.section03 .contents_box li { width: 50%; padding: 28px 20px; background: #ffffff; border-radius: 10px; box-shadow: var(--shadow-02); }
.section03 .contents_box li:last-of-type { margin-left: 15px; }
.section03 .contents_box li strong { font-size: 30px; font-weight: 700; color: var(--purple); line-height: 40px; display: block; margin-bottom: 4px; }
.section03 .contents_box li p { font-size: 13px; font-weight: 400; line-height: 22px; }
.section03 .contents_box li b { font-size: 16px; font-weight: 700; display: block; }
.section03 .video_box { margin-top: 30px; }
.section03 .video_box p { font-size: 16px; font-weight: 500; }
.section03 .video_wrap { position: relative; width: 100%; margin-top: 12px; }
.section03 .video_cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../image/main/PL936/img_video_cover.webp) no-repeat center center; background-size: cover; z-index: 5; }
.section03 .video_cover::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); content: ''; display: block; z-index: 6; }
.section03 .btn_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; background: url(../../image/btn/btn_play.svg) no-repeat center center; background-size: contain; text-indent: -9999px; z-index: 10; }

/* section_04 */
.section04 { background: #ffffff; }
.section04 .title_box { text-align: center; }
.section04 .review_slider { width: 100%; margin-top: 24px; }
.section04 .review_slider .swiper-slide { width: 300px; }
.section04 .review_box { width: 100%; transform: scale(0.9); padding: 20px; background: var(--purple-25); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-02); overflow: hidden; transition: all 0.3s ease-in-out 0.1s; }
.section04 .review_slider .swiper-slide.swiper-slide-active .review_box { transform: scale(1); }
.section04 .review_box .info_box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.section04 .review_box .info_box .subscribe { position: relative; font-size: 13px; font-weight: 500; color: #ffffff; line-height: 25px; padding: 0 10px 0 30px; display: inline-block; background: var(--purple-800); border: 1px solid var(--purple-200); border-radius: 14px; }
.section04 .review_box .info_box .subscribe::before { position: absolute; left: -1px; top: -1px; width: 27px; height: 27px; content: ''; display: block; z-index: 1; }
.section04 .review_box .info_box .subscribe.male::before { background: url(../../image/icon/icon_user_male.svg) no-repeat center center; background-size: contain; }
.section04 .review_box .info_box .subscribe.female::before { background: url(../../image/icon/icon_user_female.svg) no-repeat center center; background-size: contain; }
.section04 .review_box .info_box .star { width: calc(100% - 120px); font-size: 13px; font-weight: 600; color: var(--gray-600); line-height: 27px; text-align: right; display: block; }
.section04 .review_box .info_box .star::before { width: 70px; height: 14px; background: url(../../image/icon/icon_star_full.svg); background-size: 14px; content: ''; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.section04 .review_box .info_box .name { display: block; width: 50%; font-size: 13px; font-weight: 400; color: var(--gray-600); line-height: 20px; margin-top: 6px; }
.section04 .review_box .info_box .date { display: block; width: 50%; font-size: 13px; font-weight: 400; color: var(--gray-600); line-height: 20px; text-align: right; margin-top: 6px; }
.section04 .review_box .text_box { height: 110px; min-height: 110px; overflow: hidden; margin-top: 16px; }
.section04 .review_box .text_box p { font-size: 15px; font-weight: 400; color: var(--purple-900); line-height: 22px; overflow: hidden; }
.section04 .review_box .text_box p b { font-weight: 700; }
.section04 .review_box .text_box p .fold { display: none; }
.section04 .review_box .text_box .btn_more { display: inline-block; font-size: 15px; font-weight: 700; color: var(--purple); line-height: 22px; }
.section04 .review_box .text_box .btn_more::before { font-size: 15px; font-weight: 400; color: var(--purple-900); content: '...'; display: inline-block; margin-right: 4px; }
.section04 .review_box .text_box.active { height: auto; }
.section04 .review_box .text_box.active p .fold { display: inline; }
.section04 .review_box .text_box.active { min-height: auto; }
.section04 .review_box .text_box.active .btn_more { display: none; }
.section04 .review_box .img_box { position: relative; width: 100%; border-radius: 12px; overflow: hidden; margin-top: 16px; }
.section04 .review_box .img_box img { width: 100%; }
.section04 .review_pager { width: 100%; text-align: center; margin-top: 16px; }
.section04 .review_pager .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--purple-300); opacity: 1; margin: 0 4px; }
.section04 .review_pager .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--purple-900); border: 1px solid var(--black); }

/* section_05 */
.section05 { background: #f8f9fc; }
.section05 .inner { padding-bottom: 100px; }
.section05 .title_box { display: flex; align-items: center; justify-content: center; }
.section05 .title_box::before { width: 81px; height: 81px; background: url(../../image/main/PL936/logo_section06.webp) no-repeat center center; background-size: contain; content: ''; display: inline-block; margin-right: 20px; }
.section05 .rolling_box { position: relative; height: 150px; margin-top: 24px; }
.section05 .rolling_wrap { position: absolute; top: 0; left: -20px; width: calc(100% + 40px); overflow: hidden; }
.section05 .rolling { display: flex; animation: marquee linear infinite 20s; }
.section05 .rolling img { width: 360px; margin-right: 20px; }