@charset "utf-8";
section { overflow: hidden; }

/* 메인 비주얼 */
.main_visual { width: 100%; background: url(../../img/landing/sotong/bg_main_visual.webp) no-repeat center bottom; background-size: cover; }
.main_visual .inner { min-height: 480px; padding: 48px 20px; }
.main_visual .inner span { display: flex; font-size: 16px; font-weight: 700; color: var(--gray-800); line-height: 16px; }
.main_visual .inner span em { font-size: 16px; font-weight: 400; color: var(--gray-800); line-height: 16px; display: inline-block; }
.main_visual .inner span img { width: auto; height: 16px; margin: 0 8px; }
.main_visual .inner h2 { font-size: 26px; font-weight: 400; line-height: 36px; }

/* 필요한 영양제 */
.custom_section { background: rgb(241,251,245); background: linear-gradient(0deg, rgba(241,251,245,1) 0%, rgba(248,249,250,1) 100%); }
.custom_section .inner { padding: 40px 50px 0; }
.custom_section .inner h2 b { color: var(--primary); }
.custom_section ul { width: 250px; margin: 0 auto; }
.custom_section ul li { position: relative; width: 100%; padding: 12px 24px; background: #ffffff; border-radius: 30px; margin-bottom: 24px; }
.custom_section ul li:last-of-type { margin-bottom: 0; }
.custom_section ul li::after { position: absolute; top: 50%; transform: translateY(-50%); width: 72px; height: 80px; content: ''; display: block; z-index: 1; }
.custom_section ul li:nth-of-type(1):after { right: 0; background: url(../../img/landing/sotong/img_face_01.webp) no-repeat center center; background-size: contain; }
.custom_section ul li:nth-of-type(2):after { left: 15px; background: url(../../img/landing/sotong/img_face_02.webp) no-repeat center center; background-size: contain; }
.custom_section ul li:nth-of-type(3):after { right: 10px; background: url(../../img/landing/sotong/img_face_03.webp) no-repeat center center; background-size: contain; }
.custom_section ul li p { font-size: 14px; font-weight: 500; line-height: 18px; }
.custom_section ul li:nth-of-type(even) p { margin-left: 72px; }
.custom_section .text_box { text-align: center; }
.custom_section .text_box span { position: relative; display: inline-block; font-size: 12px; font-weight: 700; color: #ffffff; line-height: 16px; padding: 8px 12px; background: var(--primary); border-radius: 16px; z-index: 1; margin: 20px 0; }
.custom_section .text_box span::before { position: absolute; left: 50%; top: -50%; width: 1px; height: 60px; background: var(--primary); content: ''; display: block; z-index: -1; }
.custom_section .text_box p b { color: var(--primary); }
.custom_section .img_box { text-align: right; }
.custom_section .img_box img { width: 310px; margin-bottom: -3px; }

/* 3가지 방법 */
.recommend_section { text-align: center; }
.recommend_section h2 { color: #ffffff; background: var(--primary); padding: 24px; }
.recommend_section ul li { padding-top: 24px; overflow: hidden; }
.recommend_section ul li:nth-of-type(1),
.recommend_section ul li:nth-of-type(3) { padding-bottom: 32px; }
.recommend_section ul li .numb { font-size: 12px; font-weight: 700; color: #ffffff; line-height: 20px; padding: 0 4px; background: var(--primary-800); border-radius: 4px; display: inline-block; }
.recommend_section ul li h3 span { font-size: 12px; font-weight: 400; color: var(--gray-800); line-height: 14px; display: block; margin-bottom: 4px; }
.recommend_section ul li h3 span b::before { width: 12px; height: 12px; background: url(../../img/landing/sotong/icon_kakaotalk.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.recommend_section ul li:nth-of-type(2) .img_box,
.recommend_section ul li:nth-of-type(3) .img_box { width: 240px; margin: 0 auto; }

/* 특장점 */
.advantage_section { background: var(--primary-100); }
.advantage_section .inner { padding: 24px 40px; }
.advantage_section ul { width: 280px; margin: 0 auto; }
.advantage_section ul li { padding: 12px 20px; background: #ffffff; border-radius: 12px; margin-bottom: 12px; }
.advantage_section ul li:last-of-type { margin-bottom: 0; }
.advantage_section ul li .title_box { display: flex; align-items: center; justify-content: space-between; }
.advantage_section ul li h3 b { color: var(--primary); }
.advantage_section ul li img { width: 72px; }

/* 이용방법 */
.step_section { padding: 24px 0 0; background: url(../../img/landing/sotong/bg_step_01.webp) no-repeat center top, var(--gray-300); background-size: 360px; }
.step_section ul li { overflow: hidden; margin-bottom: 40px; }
.step_section ul li:last-of-type { padding: 55px 0; background: url(../../img/landing/sotong/img_step_05.webp) no-repeat right bottom ,var(--primary); background-size: 210px; margin-bottom: 0; }
.step_section ul li .inner { width: 300px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.step_section ul li:nth-of-type(even) .inner { flex-direction: row-reverse; }
.step_section ul li .text_box span { font-size: 12px; }
.step_section ul li .text_box b { position: relative; display: inline-block; z-index: 1; }
.step_section ul li .text_box b::before { position: absolute; left: 0; bottom: 2px; width: 100%; height: 6px; background: #CCE4D9; content: ''; display: block; z-index: -1 ; }
.step_section ul li .text_box em { font-size: 8px; font-weight: 400; color: var(--gray-800); line-height: 12px; display: block; }
.step_section ul li .img_box { position: relative; width: 128px; min-width: 128px; }
.step_section ul li .img_box::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; background: rgb(248,249,250); background: linear-gradient(0deg, rgba(248,249,250,1) 0%, rgba(248,249,250,1) 30%, rgba(255,255,255,0) 100%); content: ''; display: block; z-index: 1; }