@charset "utf-8";

/*───────────────────────────────────────────────────────────

	 장사특강

───────────────────────────────────────────────────────────*/

.monosolution * { -ms-overflow-style: none; }
.monosolution *::-webkit-scrollbar { display: none; }

.monosolution .visual {position:relative; overflow: hidden;}
.monosolution .visual .swiper-slide {width: 100%; max-width: 500px; /* aspect-ratio: 320/210; */}
.monosolution .visual .swiper-slide img {width: 100%; object-fit: cover;}
.monosolution .visual .mainTopSwiper .swiper-pagination  { display: flex; flex-direction: row; align-items: center; justify-content: center; width:40px; color:#fff; left:auto; right: 20px; bottom:20px; background:rgba(0, 0, 0, .2); border-radius:11px; font-size:0;  }
.monosolution .visual .mainTopSwiper .swiper-pagination span  { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; padding:0 4px 0 6px; opacity: 0.5; line-height:22px; font-size:14px; font-weight: 500; }
.monosolution .visual .mainTopSwiper .swiper-pagination span.swiper-pagination-current  { opacity: 1; }
.monosolution .visual .mainTopSwiper .swiper-pagination span + span::before  { content:""; position: absolute; left:0;  width:1px; height:10px; background:rgba(255, 255, 255, .5)  }

.mainLnkWrap {width:100%; overflow: hidden;}
.mainLnkWrap .mainLnkList {display:flex; gap:12px; padding: 12px 20px 24px; overflow: scroll;  }
.mainLnkWrap .mainLnkList::-webkit-scrollbar {display: none; }
.mainLnkWrap .mainLnkList div {width:56px; }
.mainLnkWrap .mainLnkList div a { display:block; }
.mainLnkWrap .mainLnkList div a span { display:block; padding-top:60px; text-align: center; font-size: 12px; text-align: center; color:#333; font-weight: 400; }
.mainLnkWrap .mainLnkList div a.lnk_1 { background:url(/data/skin/mobile/moment/images/main/main_menus_1.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_2 { background:url(/data/skin/mobile/moment/images/main/main_menus_2.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_3 { background:url(/data/skin/mobile/moment/images/main/main_menus_3.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_4 { background:url(/data/skin/mobile/moment/images/main/main_menus_4.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_5 { background:url(/data/skin/mobile/moment/images/main/main_menus_5.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_6 { background:url(/data/skin/mobile/moment/images/main/main_menus_6.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_7 { background:url(/data/skin/mobile/moment/images/main/main_menus_7.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_8 { background:url(/data/skin/mobile/moment/images/main/main_menus_8.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_9 { background:url(/data/skin/mobile/moment/images/main/main_menus_9.png?v=250516) no-repeat 0 0 / 56px  }

.mainTitBox {display:flex; padding:20px 20px 10px; justify-content: space-between; }
.mainTitBox.line { padding-top:26px; border-top:8px solid rgba(136, 136, 136, .1);}
.mainTitBox h3 { font-size:20px; font-weight: 600;  }
.mainTitBox a.more { margin:auto 0; font-size: 14px; color:#888; padding-right:20px; background:url(/data/skin/mobile/moment/images/icon/btn_r_bul.png) no-repeat 100% 0 /16px }
.mainTitBox a.setting { margin:auto 0; width: 16px; height:16px; overflow: hidden; text-indent: -100px; font-size: 14px; color:#888; padding-right:20px; background:url(/data/skin/mobile/moment/images/icon/setting.png) no-repeat 100% 0 /16px }

.main_recipe .mainTitBox{padding-top:30px; border-top:8px solid rgba(136, 136, 136, .1);}
.monosolution .recipe_list {padding:0 0 24px; display:flex; gap:12px; overflow: scroll; }
.monosolution .recipe_list::-webkit-scrollbar {display: none; }
/* 카드 사이 여백은 Swiper의 spaceBetween이 슬라이드 margin으로 넣어준다.
   PC(1024px~)에서는 Swiper를 초기화하지 않는데(_main_section_02.html), 그때 쓸 그리드 규칙은
   main2.css에 있고 이 페이지는 그 파일을 불러오지 않아 여백을 줄 주체가 없다.
   → Swiper가 붙지 않은 경우에만 wrapper에 gap을 준다(붙으면 margin과 겹치므로 제외). */
.monosolution .recipe_list:not(.swiper-initialized) > .swiper-wrapper {gap:12px;}
.monosolution .recipe_list .recipe_items {min-width:218px; width:218px; }
.monosolution .recipe_list .swiper-slide:first-child {width: 238px; padding-left: 20px}
.monosolution .recipe_list .swiper-slide:last-child {width: 238px; padding-right: 20px}
.monosolution .recipe_list .recipe_items img {width: 100%; height:125px; object-fit: cover; }
.monosolution .recipe_list .recipe_items .recipe_img {}
.monosolution .recipe_list .recipe_items .recipe_tit {margin-top:8px; }
.monosolution .recipe_list .recipe_items .recipe_tit a {color:#222; font-size: 14px; }
.monosolution .recipe_list .recipe_items .recipe_tit a strong { display: block; font-size: 16px; }
.monosolution .recipe_list .recipe_items .recipe_prd {display: flex; margin-top:8px; justify-content: space-between;}
.monosolution .recipe_list .recipe_items .recipe_prd ul.thumb_item {overflow: hidden; padding-right:4px;}
.monosolution .recipe_list .recipe_items .recipe_prd ul.thumb_item li {float: left; width:36px; height:36px; margin-right:-4px; border:1px solid #EBEBEB; border-radius: 50%; overflow: hidden;}
.monosolution .recipe_list .recipe_items .recipe_prd ul.thumb_item li a { display: block; }
.monosolution .recipe_list .recipe_items .recipe_prd ul.thumb_item li img {width:36px; height:36px; vertical-align: top; margin:0; }
.monosolution .recipe_list .recipe_items .recipe_prd .btn {}
.monosolution .recipe_list .recipe_items .recipe_prd .btn a { display:flex; align-items: center; height:36px; border:1px solid #DFDFDF; line-height:20px; border-radius: 4px; padding: 8px 12px; }
.monosolution .recipe_list .recipe_items .recipe_prd .btn a::before {content: ""; display: inline-block; vertical-align: top; width:20px; height:20px; background:url(/data/skin/mobile/moment/images/icon/cart.png) no-repeat 50% 50% / 100% }
.recipeSelectList{padding:0;}

.monoplanet_list{overflow:auto;}
.monoplanet_list .swiper-slide{width: 160px;}
.monoplanet_list .swiper-slide:first-child {width: 180px; padding-left: 20px}
.monoplanet_list .swiper-slide:last-child {width: 180px; padding-right: 20px}
.monoplanet_list .swiper-slide img{width: 100%;}

.monoletter{margin-top: 25px; padding-bottom: 40px;}
.monoletter_list {overflow:auto;}
.monoletter_list .swiper-slide {width: 288px;}
.monoletter_list .swiper-slide:first-child {width: 308px; padding-left: 20px}
.monoletter_list .swiper-slide:last-child {width: 308px; padding-right: 20px}
.monoletter_list .swiper-slide img {width: 100%;}

.monotv {padding-top: 10px; margin-top: 30px; border-top:8px solid rgba(136, 136, 136, .1);}
.monotv .desc {padding:0 20px; margin-top: -10px; color: #222; font-size: 14px; line-height: 20px; letter-spacing: -0.084px;}
.monotv_list {padding:0 20px; margin-top: 18px;}
.monotv_list li + li {margin-top: 16px;}
.monotv_list li iframe {width: 100%; height: auto; aspect-ratio: 560 / 315; border-radius: 5px;}