/* BASIC css start */
/* 메인 전용 CSS. 상품 그리드·상품명·가격은 기존 공통 CSS 사용 */
html { overflow-x:hidden; }
#main #section_title_01 { width:var(--site-width,1080px); margin:0 auto; text-align:center; font-size:20px; padding:40px 0 20px 0; color:#999; }
#main #section_title_01 .st_04 { font-size:28px; font-weight:500; color:#000; }
#main #section_title_01 .thin { font-weight:300; }
#main .main_section { position:relative; left:50%; width:1600px; max-width:100vw; min-width:var(--site-width,1080px); margin:0; transform:translateX(-50%); }
#main .board_rolling_cont { display:flex; width:var(--site-width,1080px); margin:60px auto; gap:16px; box-sizing:border-box; }
#main .board_rolling_cont .swiper_cont:nth-child(2) { border-color:#efd3af; background:linear-gradient(180deg,#fffaf5 0%,#fff 48%); }
#main .board_rolling_cont .swiper_cont:nth-child(3) { border-color:#ccdcbc; background:linear-gradient(180deg,#f9fcf6 0%,#fff 48%); }
#main .board_rolling_cont .swiper_cont > p { position:relative; min-height:42px; margin:0; padding:1px 0 0 50px; color:#222; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.5px; box-sizing:border-box; }
#main .board_rolling_cont .swiper_cont > p::before { position:absolute; top:0; left:0; display:flex; width:38px; height:38px; border:1px solid #f0bbc4; border-radius:50%; background:#fff2f4; color:#e9687d; font-size:18px; align-items:center; justify-content:center; content:"♡"; box-sizing:border-box; }
#main .board_rolling_cont .swiper_cont > p::after { position:absolute; top:26px; left:50px; color:#888; font-size:13px; font-weight:400; line-height:1.2; content:"직접 보고 비교하고 선택하세요"; }
#main .board_rolling_cont .swiper_cont:nth-child(2) > p::before { border-color:#edc894; background:#fff6e9; color:#df841e; content:"◷"; }
#main .board_rolling_cont .swiper_cont:nth-child(2) > p::after { content:"원하는 조리원, 대기 먼저 걸어두세요"; }
#main .board_rolling_cont .swiper_cont:nth-child(3) > p::before { border-color:#c7d8b7; background:#f1f7ec; color:#719855; content:"!"; }
#main .board_rolling_cont .swiper_cont:nth-child(3) > p::after { content:"조리원 최신 소식을 확인하세요"; }
#main .board_rolling_cont .board_link { display:block; margin-top:12px; color:inherit; text-decoration:none; }
#main .board_rolling_cont .swiper { width:100%; height:145px; padding:10px 4px 0; border-top:1px solid rgba(0,0,0,.07); background:transparent; box-sizing:border-box; overflow:hidden; }
#main .board_rolling_cont ul { margin:0; padding:0; list-style:none; }
#main .board_rolling_cont ul li { position:relative; display:flex; height:32px; padding-left:11px; color:#444; font-size:15px; line-height:32px; box-sizing:border-box; align-items:center; }
#main .board_rolling_cont ul li::before { position:absolute; top:50%; left:0; width:3px; height:3px; border-radius:50%; background:#aaa; content:""; transform:translateY(-50%); }
#main .board_rolling_cont ul li em { flex:1; min-width:0; overflow:hidden; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
#main .board_rolling_cont ul li em .board-product { display:inline-block; padding-right:5px; font-weight:bold; }
#main .board_rolling_cont ul li span { margin-left:12px; color:#aaa; font-size:13px; flex-shrink:0; }
#main .board_rolling_cont .board_more { display:flex; width:100%; height:42px; margin-top:10px; border-radius:22px; background: #ff6b7e; color:#fff; font-size: 16px; font-weight:600; align-items:center; justify-content:center; box-sizing:border-box; transition:.2s; }
#main .board_rolling_cont .board_more::after { margin-left:7px; font-size:20px; font-weight:400; content:"›"; }
#main .board_rolling_cont .swiper_cont:nth-child(2) .board_more { background: #ffa947; }
#main .board_rolling_cont .swiper_cont:nth-child(3) .board_more { background: #8fb96b; }
#main .board_rolling_cont .board_link:hover .board_more { opacity:.9; transform:translateY(-2px); }
#main .plan_list { width: var(--site-width,1080px); margin: 0 auto; padding-bottom:70px; }
#main .plan_list ul { display: flex; flex-wrap: wrap; gap:25px; }
#main .plan_list ul li { width: 32%; }
#main .plan_list ul li .img_area { position:relative; border-radius: 10px; overflow:hidden; }
#main .plan_list ul li .img_area .date { position:absolute; top: 10px; left: 10px; padding: 2px 8px; font-size: 15px; border-radius: 7px; background:#777; color:#fff; line-height: 24px; letter-spacing:0.05rem; }
#main .plan_list ul li .ico_area { padding-top: 10px; }
#main .plan_list ul li .ico_area > span { display:inline-block; font-weight:500; padding: 0px 7px; font-size: 15px; border-radius: 7px; }
#main .plan_list ul li .ico_area .purple { font-weight:600; background: #fdf1ff; color:#673AB7; }
#main .plan_list ul li .ico_area .pink { font-weight:600; background: #ffeff4; color:#e74174; }
#main .plan_list ul li .ico_area .gray { background: #f8f8f8; color:#999; }
#main .plan_list ul li .ico_area .green { font-weight:600; background: #e5f7e6; color:#2b8b2f; }
#main .plan_list ul li a { display:block; }
#main .plan_list ul li img { width:100%; }
#main .plan_list ul li .listName { color: #444; word-break: break-all; margin: 15px 0 10px 0; font-size: 17px; line-height: 20px; font-weight:500; }
#main .plan_list ul li .listPrice { font-size: 21px; margin:0; line-height:26px; font-weight:500; }
#main .plan_list ul li .listPrice_login { color: #e74174; font-size: 21px; margin:0; font-weight: 500; }
#main .plan_list ul li .listPrice del { font-weight:400; font-size:17px; letter-spacing:-1px; padding-left:10px; color:#9b9b9b; }
#main .plan_list ul li .listPrice .discount { color:#e74174; font-weight:600; float:left; margin-right:10px; letter-spacing:-1px; }
#main .best_container { text-align:center; width:var(--site-width,1080px); margin:0 auto 35px; }
#main #bn_item01 { width:var(--site-width,1080px); text-align:center; position:relative; margin:0 auto; }
#main #bn_item01 .img { width:var(--site-width,1080px); margin:0 auto; text-align:center; position:relative; }
#main .bn_item02 .img { width:var(--site-width,1080px); margin:0 auto; text-align:center; position:relative; display:flex; justify-content: space-around; gap:22px; }
#main .bn_item02 .img a { width:100%; display:inline-block; }
#main #bn_item03 { width:100%; text-align:center; position:relative; margin:40px 0; }
#main #bn_item03 .img a { display:inline-block; width:420px; }
#main #bn_item03 .img a img { width:100%; }
#main #education_wrap { width:100%; position:relative; background:#f6f6f6; margin-bottom:40px; }
#main #education_wrap .education { width:var(--site-width,1080px); margin:0 auto; padding: 30px 0 50px 0; }
#main #education_wrap .education li { position:relative; width:630px; height:230px; }
#main #education_wrap .education li a { display: block; }
#main #education_wrap .education li span { color:#e74174; }
#main #education_wrap .education ul .edu_01 .name { position:absolute; top:67px; right:44px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_01 .sub { position:absolute; top:111px; right:42px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; }
#main #education_wrap .education ul .edu_01 .logo img { width:67px; }
#main #education_wrap .education ul .edu_02 .name { position:absolute; top:67px; right:45px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_02 .sub { position:absolute; top:111px; right:60px; line-height:19px; color:#666; font-size:0.85em; text-align:center; }
#main #education_wrap .education ul .edu_03 .name { position:absolute; top:67px; right:52px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_03 .sub { position:absolute; top:111px; right:48px; line-height:19px; color:#666; font-size:0.85em; text-align:center; }
#main #education_wrap .education ul .edu_03 .logo img { width:132px; }
#main #education_wrap .education ul .edu_05 .name { position:absolute; top:67px; right:52px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_05 .sub { position:absolute; top:111px; right:61px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; }
#main #education_wrap .education ul .edu_05 .logo img { width:130px; }
#main #education_wrap .education ul .edu_06 .name { position:absolute; top:67px; right:62px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_06 .sub { position:absolute; top:111px; right:61px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; }
#main #education_wrap .education ul .edu_06 .logo img { width:80px; }
#main #education_wrap .education ul .edu_07 { background:url(/design/kichmom/10276/bn_edu_07_bg.jpg) no-repeat; }
#main #education_wrap .education ul .edu_07 .name { position:absolute; top:67px; right:47px; font-size:24px; text-align:center; letter-spacing:-0.02em; font-weight:500; }
#main #education_wrap .education ul .edu_07 .sub { position:absolute; top:111px; right:46px; line-height:19px; color:#666; font-size:0.85em; text-align:center; }
#main #education_wrap .education ul .edu_07 .logo img { width:167px; }
#main #education_wrap #section_title_01 img { width:60px; margin:20px 0 5px 0; }
#main #guide { width:var(--site-width,1080px); margin:32px auto 6px; clear:both; }
#main #guide,#main #guide * { box-sizing:border-box; }
#main #guide .guide_wrap>li { display:block; float:none; width:auto; min-width:0; margin:0; padding:0; }
#main #guide .guide_wrap>li>a:hover { border-color:#777; background:#fafafa; }
#main #guide .guide_wrap>li>a:focus-visible { outline:2px solid var(--main-color,#e74174); outline-offset:3px; }
#main #guide .guide_wrap>li>a>span { position:static; display:block; flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; border-radius:50%; overflow:hidden; background:#f5f5f5; }
#main #guide .guide_wrap>li>a>span>img { position:static; display:block; width:100%; height:100%; max-width:100%; margin:0; border:0; border-radius:0; object-fit:cover; transform:none; }
#main #guide .guide_wrap>li>a>p { margin:0; padding:0; color:inherit; font-size:14px; font-weight:500; line-height:1.4; text-align:left; white-space:nowrap; }
#main #ipo-brand-deal { scroll-margin-top:150px; }
#main { width:var(--site-width,1080px); margin:0 auto; }
#main *,#main *::before,#main *::after { box-sizing:border-box; }
#main .main_section .swiper-slide>a,#main .main_section .swiper-slide img { display:block; width:100%; height:auto; }
#main .meta_bn .img>a { flex:1; min-width:0; }
#main .meta_bn .img>a>img,#main #bn_item01 img,#main #bn_item03 .img>a>img { display:block; width:100%; height:auto; }
#main #bn_item03 .img { width:var(--site-width,1080px); margin:0 auto; text-align:center; position:relative; display:flex; justify-content: space-between; gap:18px; }
#main #bn_item03 .img>a { flex:1; min-width:0; width:auto; }
#main .plan_list>ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
#main .plan_list>ul>li { width:auto; min-width:0; }
#main #guide .guide_wrap { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0; padding:0; list-style:none; gap:14px 12px; }
#main #guide .guide_wrap>li>a { position:relative; display:flex; align-items:center; justify-content:flex-start; width:100%; height:58px; padding:6px 16px 6px 7px; border:1px solid #e5e5e5; border-radius:32px; color:#222; background:#fff; text-decoration:none; gap:10px; padding-right:10px; }
#main .board_rolling_cont .swiper_cont { flex:1; min-width:0; border:1px solid #f0c8cf; border-radius:14px; background:linear-gradient(180deg,#fffafb 0%,#fff 48%); box-sizing:border-box; overflow:hidden; padding:12px; }
#main .board_rolling_cont .swiper_cont>p { font-size:17px; }
#main #education_wrap .edu_list,#main #education_wrap .education li { width:100%; min-width:0; }
#main #education_wrap .edu_list>a>img { display:block; width:100%; height:auto; }
#main .main_section .hroSldWrp { position:relative; width:100%; overflow:hidden; }
#main .main_section .ipo-hero-controls { position:absolute; right:max(16px,calc((100% - var(--site-width,1080px)) / 2)); bottom:24px; z-index:5; display:flex; align-items:center; justify-content:center; gap:4px; height:38px; padding:0 8px; border:0; border-radius:22px; background:rgba(0,0,0,.48); color:#fff; }
#main .main_section .ipo-hero-controls .swiper-pagination { position:static; display:block; flex:0 0 auto; width:auto; min-width:54px; height:auto; margin:0; padding:0 2px; transform:none; color:rgba(255,255,255,.6); font-size:14px; font-weight:400; line-height:38px; text-align:center; white-space:nowrap; letter-spacing:.5px; pointer-events:none; }
#main .main_section .ipo-hero-controls .swiper-pagination-current { color:#fff; font-weight:600; }
#main .main_section .ipo-hero-controls .swiper-pagination-total { color:rgba(255,255,255,.65); }
#main .main_section .ipo-hero-prev,#main .main_section .ipo-hero-next { position:static; display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:38px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:rgba(255,255,255,.85); cursor:pointer; transform:none; box-shadow:none; }
#main .main_section .ipo-hero-prev::before,#main .main_section .ipo-hero-next::before { content:""; display:block; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; }
#main .main_section .ipo-hero-prev::before { transform:translateX(2px) rotate(-135deg); }
#main .main_section .ipo-hero-next::before { transform:translateX(-2px) rotate(45deg); }
#main .main_section .ipo-hero-prev:hover,#main .main_section .ipo-hero-next:hover { background:transparent; color:#fff; }
#main .main_section .ipo-hero-prev:focus-visible,#main .main_section .ipo-hero-next:focus-visible { outline:2px solid #fff; outline-offset:-3px; border-radius:4px; }
#main .main_section .swiper-button-disabled { opacity:.4; cursor:default; }
#main .main_section .swiper-button-lock { display:none; }
#main .cateTit h3 { text-align:left; font-size:32px; line-height:42px; color: var(--black-color); font-weight: 600; padding:40px 0 24px; }
#main .bn_item02 { width:100%; text-align:center; position:relative; margin:0 0 60px 0; margin-bottom:32px; }
#main #education_wrap .education ul { flex-wrap: wrap; justify-content: space-between; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
#main #education_wrap .education li.edu_list { position:relative; height:230px; overflow:hidden; border-radius:8px; }
#main #education_wrap .edu_list .edu-link { position:absolute; inset:0; z-index:1; display:block; }
#main #education_wrap .edu_list .edu-link>img { display:block; width:100%; height:100%; object-fit:cover; }
#main #education_wrap .edu_list .tit,#main #education_wrap .edu_list .name,#main #education_wrap .edu_list .sub { z-index:2; margin:0; pointer-events:none; }
#main #education_wrap .education ul li .tit { position:absolute; top:60px; letter-spacing:-1px; font-weight:500; left:24px; font-size:29px; line-height:37px; }
#main #education_wrap .education ul li .name { right:24px; font-size:21px; }
#main #education_wrap .education ul li .sub { right:24px; font-size:13px; }
#main #education_wrap .education ul li .logo { position:absolute; top:169px; left:24px; z-index:3; }
#main #education_wrap .edu_list a:focus-visible { outline:2px solid var(--main-color,#e74174); outline-offset:-3px; }
#main .best_container .bstPrdWrp { position:relative; width:100%; max-width:var(--site-width,1080px); min-width:0; margin:0; padding:0 0 24px; overflow:hidden; box-sizing:border-box; }
#main .bstPrdWrp>.swiper-wrapper { display:flex; flex-wrap:nowrap; align-items:flex-start; width:100%; gap:0; }
#main .bstPrdWrp>.swiper-wrapper>.swiper-slide { flex-shrink:0; height:auto; }
#main .bstPrdWrp>.swiper-scrollbar { position:absolute; right:0; bottom:0; left:0; width:100%; }
#main .section-heading { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:24px; margin:40px 0 24px; }
#main .section-heading .cateTit { min-width:0; margin:0; padding:0; }
#main .section-heading .cateTit h3 { margin:0; padding:0; }
#main .section-heading .more_btn { position:static; flex:0 0 auto; margin:0 0 0 auto; padding:0; white-space:nowrap; }
#main .section-heading .more_btn a { display:inline-block; color:#555; font-size:16px; line-height:24px; text-decoration:none; }
/* 단일 상품 이미지의 기존 할인 배지 */
#main .thumbnail .percent { position:absolute; top:0; left:0; z-index:2; padding:5px 8px; background:var(--main-color,#e74174); color:#fff; font-size:14px; line-height:20px; pointer-events:none; }
/* 게시판 데이터가 적거나 Swiper가 없을 때에도 목록을 읽을 수 있음 */
#main .board_rolling_cont .swiper:not(.swiper-initialized) .swiper-wrapper { display:block; }
#main .bstPrdWrp:not(.swiper-initialized)>.swiper-wrapper { gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; }
#main .bstPrdWrp:not(.swiper-initialized)>.swiper-wrapper>.swiper-slide { flex:0 0 calc((100% - 72.8px)/3.6); min-width:0; scroll-snap-align:start; }
/* 홍보 동영상: 왼쪽 1개 + 오른쪽 2개. 세 영상 모두 16:9, 상하 끝선 일치 */
#main #section_youtube { display:flex; align-items:center; justify-content:center; gap:16px; margin:0; padding:30px 0 18px; }
#main #section_youtube .st_04 { margin:0; color:#000; font-size:32px; font-weight:500; line-height:1.4; }
#main #section_youtube .you_btn { flex:0 0 auto; margin:0; padding:0; line-height:0; }
#main #section_youtube .you_btn a,#main #section_youtube .you_btn img { display:block; }
#main #section_youtube .you_btn img { width:auto; height:32px; }
#main .play { --video-gap:16px; display:grid; grid-template-columns:minmax(0,calc((200% - var(--video-gap) * 2 / 9) / 3)) minmax(0,1fr); gap:var(--video-gap); width:100%; margin:0; padding:0; align-items:stretch; }
#main .play .play_all { position:relative; min-width:0; min-height:0; margin:0; padding:0; aspect-ratio:16/9; background:#000; }
#main .play .play_list { min-width:0; min-height:0; margin:0; padding:0; }
#main .play .play_list ul { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:var(--video-gap); width:100%; height:100%; margin:0; padding:0; list-style:none; }
#main .play .play_list li { position:relative; min-width:0; min-height:0; margin:0; padding:0; background:#000; }
#main .play iframe { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; }

/* BASIC css end */