@charset "utf-8";
/* 261008-1 : 글자 크기만 px→rem (font-size, line-height / 1rem=16px 기준). 박스·여백·이미지·칸 배치는 px 유지 */ /* 261008-2 : 글자 최대 115% 상한 = min(rem, 원래px×1.15) */
/*───────────────────────────────────────────────────────────

	 리스트 타입 및 옵션

───────────────────────────────────────────────────────────*/
@import url("../goods/goods.css");


/*** 쇼핑몰 메인본문 | main/index.php ***/
.main { background-size:contain; padding:20px 0 40px; box-sizing:border-box;}

/* 메인 슬라이드 */
.main_move_ban {margin:0 20px ; position: relative; /* 261021-2 : 시안 투명 링크 기준 */}
.main_move_ban .renewal_hotspot { position: absolute; left: -20px; top: 0; width: 20px; height: 40px; z-index: 5; } /* 261021-2 : 리뉴얼 시안(모바일) 투명 링크(배너 왼쪽 위 모서리 바깥 여백) */
.main_move_ban .renewal_hotspot img { display: block; width: 20px; height: 40px; }
.main_move_ban img {width:100%; display: block; }
.main_move_ban .slider-banner-1180261340 .slick-dots > li {margin:0 3px 0 0;}
.main_move_ban .slider-banner-1180261340 .slick-dots > li:last-child {margin:0;}
.main_move_ban .slider-banner-1180261340 .slick-dots > li > button {background-color:transparent; width:5px; height:5px; border:1px solid #4c4b47; box-sizing:border-box; padding:0;}
.main_move_ban .slider-banner-1180261340 .slick-dots > li.slick-active > button {border:1px solid #e31414; background-color:#e31414; width:6px; height:6px;}

/* 메인-퀵메뉴 (모바일 반응형 최적화) */
.quick_icon {  width: 100%;padding: 0 20px;margin: 25px 0;box-sizing: border-box;}
.quick_icon ul {display: flex;flex-wrap: wrap; justify-content: space-between;align-items: flex-start; gap: 15px; list-style: none; padding: 0; margin: 0;}
.quick_icon ul li { flex: 1 1 calc(100% / 6 - 15px); text-align: center;}
.quick_icon ul li img { display: block; width: 100%; height: auto;}
.quick_icon ul li span { display: block; font-size: min(0.75rem, 12px); margin-top: 5px; line-height: min(1.125rem, 18px);} /* 261008-4 : 칸 폭(약 59px)이 좁아 원래 크기(12px)에서 멈춤 */

@media (max-width: 400px) { .quick_icon ul li {   flex: 1 1 calc(100% / 3 - 15px);  }}

/* 메인-이벤트 긴배너 */
.event_banner {display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; width:100%; height:70px; 
background-image: url('/data/250801/m_banner_bg.png'); background-size: 100% 100%;background-repeat: no-repeat; background-position: center;  }
.event_banner p {font-size: min(0.875rem, 16.1px); color:#fff;  margin-top: 5px; line-height: 1.3;}
.event_banner h4 {font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: min(1.25rem, 23px); color:#fff;  margin: 0;line-height: 1.3;}

/* 메인-택배용차벌크 */
.buy_guide { padding: 15px 20px;}
.buy_guide h3 {  font-family: 'GmarketSans'; font-weight: 700; font-size: min(1.375rem, 25.3px); color: #0c1608; text-align: left; margin: 0;}
.buy_guide h3 span { font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: min(1.375rem, 25.3px); color: #ce1212;}
.buy_guide_all { display: flex; justify-content: space-between; gap: 10px; width: 100%; flex-wrap: wrap; }
.buy_small { flex: 1 1 calc(33.333% - 10px); background-color: #edecec; border-radius: 10px; }
.buy_small h5 { font-size: min(1rem, 18.4px); margin: 15px 20px 5px ; }
.buy_small h5 .bold { font-weight: 600;}
.buy_small h5 .light { font-weight: 400;}
.buy_small .line {  width: 90%; height: 1px; background-color: #ccc; margin: 0 auto;}
.buy_small_inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; text-align: center;}
.buy_small_inner img:first-child { width: 100px;}
.buy_text span { font-size: min(1.125rem, 20.7px); font-weight: 600;}
.buy_text p { font-size: min(0.75rem, 13.8px); margin: 0;}
.buy_text .icon_go { width: 120px; margin-top: 5px;}

@media (max-width: 400px) { .buy_small { flex: 1 1 100%; }
    .buy_guide h3 {font-size: min(1.25rem, 23px); margin-top:5px; }
    .buy_guide h3 span  {font-size: min(1.25rem, 23px); }
    .buy_small_inner {flex-direction: row; align-items: center; text-align: center; }
    .buy_text { flex: 1; display: flex; flex-direction: column;  justify-content: center; align-items: center; text-align: center; }
    .buy_text span { font-size: min(1.125rem, 20.7px);  font-weight: 600; display: block;  }
    .buy_text p {   font-size: min(0.8125rem, 14.95px); margin-top: 4px;  }
    .buy_small_inner img:first-child { width: 90px; padding:0 10px; }}


/* 메인-박스메뉴 */
.box_all { display: flex; flex-direction: column; width: 100%; background-color: #edecec; margin-top: 20px; padding: 35px 15px 20px; box-sizing: border-box;}
.box_all_tit { width: 100%; text-align: left; margin-bottom: 10px;}
.box_all_tit h3 { font-family: 'GmarketSans'; font-size: min(1.5625rem, 28.75px); line-height: 1.2;}
.box_all_tit p { font-size: min(0.875rem, 16.1px); font-weight: 400; line-height: 1.2;}
.box_all_menu { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: #000 #fff;
  background-color: transparent; position: relative; }
 /* 웹킷 스크롤바 전체 트랙 */
.box_all_menu::-webkit-scrollbar {  height: 2px; background: #fff}
.box_all_menu::-webkit-scrollbar-track { background: #fff}
.box_all_menu::-webkit-scrollbar-thumb { background-color: #000 !important; border-radius: 1px; border: none;}

.box_all_menu .box_menu { flex: 0 0 auto;  width: 250px;  background-color: #fff; border: 1px solid #cfcfcf; padding: 15px; box-sizing: border-box; border-radius: 10px; text-align: center;}
.box_all_menu .box_menu img { max-width: 100%; height: auto; margin-bottom: 10px;}
.box_all_menu .box_menu h6 { font-size: min(1.125rem, 20.7px); font-weight: 600; margin: 0 10px ; text-align: left;}
.box_all_menu .box_menu p { font-size: min(0.8125rem, 14.95px); color: #4e4e4e; text-align: left; margin: 0 10px  }

/* 메인-주문제작 */
/* 261007-2 맞춤제작 배너 CSS 텍스트형 - 시안 이미지(728x108) 비율·스타일 맞춤 */
.custom_order { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; aspect-ratio: 728 / 108; margin: 20px; padding: 0 1.8% 0 3.6%; background: url("/data/250801/main/m_main_custom_order_bg.jpg") center / cover no-repeat; border-radius: 10px; overflow: hidden; text-decoration: none; letter-spacing: -0.03em; }
.custom_order .txt { flex: 1; min-width: 0; }
.custom_order p { margin: 0 0 0.3em; font-size: clamp(10px, calc((100vw - 40px) * 0.026), 18px); font-weight: 400; line-height: 1.3; color: #222; white-space: nowrap; }
.custom_order h4 { margin: 0; font-size: clamp(12px, calc((100vw - 40px) * 0.04), 30px); font-weight: 400; line-height: 1.3; white-space: nowrap; }
.custom_order h4 .bold { font-weight: 800; color: #e60012; }
.custom_order h4 .light { font-weight: 400; color: #444; }
.custom_order .btn { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; width: 12%; height: auto; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #e60012; box-shadow: none; font-size: clamp(9px, calc((100vw - 40px) * 0.024), 17px); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; color: #fff; text-align: center; }
.custom_order .btn i { display: block; margin-top: 0.1em; font-style: normal; font-size: 1.3em; line-height: 1; }
/* //261007-2 */

/* 비닐 메뉴 전체 */
.pbag_all { display: flex; flex-direction: column; width: 100%; background-color: #edecec; margin-top: 20px; padding: 35px 15px 20px; box-sizing: border-box;}
.pbag_all_tit { width: 100%; text-align: left; margin-bottom: 10px;}
.pbag_all_tit h3 { font-family: 'GmarketSans'; font-size: min(1.5625rem, 28.75px); line-height: 1.2;}
.pbag_all_tit p { font-size: min(0.875rem, 16.1px); font-weight: 400; line-height: 1.2;}
.pbag_all_menu { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: #000 #fff; background-color: transparent; position: relative; -webkit-overflow-scrolling: touch; }

.pbag_all_menu::-webkit-scrollbar { height: 2px; background: #fff;}
.pbag_all_menu::-webkit-scrollbar-track { background: #fff;}
.pbag_all_menu::-webkit-scrollbar-thumb { background-color: #000 !important; border-radius: 1px; border: none;}

.pbag_all_menu .pbag_menu { flex: 0 0 auto; width: 250px; background-color: #fff; border: 1px solid #cfcfcf; padding: 15px 5px; box-sizing: border-box; border-radius: 10px; text-align: center;}
.pbag_all_menu .pbag_menu img { max-width: 90%; height: auto; margin-bottom: 10px;}
.pbag_all_menu .pbag_menu h6 { font-size: min(1.125rem, 20.7px); font-weight: 600; margin: 0 17px; text-align: left;}
.pbag_all_menu .pbag_menu p { font-size: min(0.8125rem, 13px); color: #4e4e4e; text-align: left; margin: 0 17px;} /* 261008-4 : 카드 폭 250px 고정이라 원래 크기(13px)에서 멈춤 */


/* 메인-기타메뉴 */
.other_all { display: flex; flex-direction: column; width: 100%; background-color: #edecec; margin-top: 25px; padding: 30px 15px; box-sizing: border-box;}
.other_all_menu { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 10px;  scrollbar-width: thin;scrollbar-color: #000 #fff; 
  -webkit-overflow-scrolling: touch; background-color: transparent; position: relative;}

.other_all_menu::-webkit-scrollbar { height: 2px; background: #fff;}
.other_all_menu::-webkit-scrollbar-track { background: #fff;}
.other_all_menu::-webkit-scrollbar-thumb { background-color: #000 !important; border-radius: 1px; border: none;}

.other_all_menu .other_menu { flex: 0 0 auto; width: 250px; background-color: #fff; border: 1px solid #cfcfcf; padding: 15px; box-sizing: border-box; border-radius: 10px; text-align: center;}
.other_all_menu .other_menu img { max-width: 100%; height: auto; margin-bottom: 10px;}
.other_all_menu .other_menu h6 { font-size: min(1.125rem, 20.7px); font-weight: 600; margin: 0 10px; text-align: left;}
.other_all_menu .other_menu p { font-size: min(0.8125rem, 14.95px);  color: #4e4e4e; text-align: left; margin: 0 10px;}

/* 메인-예치금-고객상담 */
.main_bottom_all { display: flex; flex-direction: column; width: 100%;background-color: #edecec;margin-top: 25px;padding: 35px 20px; box-sizing: border-box; gap: 10px;}
.bottom_all_left { width: 100%; display: flex;flex-direction: column; justify-content: center; padding: 20px; position: relative; background-color: #fff;
  border: 1px solid #cfcfcf; border-radius: 10px; background-image: url('/data/250801/main_bottom_m1.png'); background-repeat: no-repeat;
  background-position: right bottom;background-size: 130px 130px; box-sizing: border-box;}
.bottom_all_left .bgblack { display: inline-block; font-size: min(0.875rem, 16.1px); background: black; color: #fff; padding: 4px 8px; max-width: fit-content;}
.bottom_all_left h4 { font-size: min(1.5rem, 27.6px); margin: 10px 0 10px; line-height:1.2;}
.bottom_all_left p { font-size: min(0.875rem, 16.1px); font-weight: 300; line-height: 1.2;}
.bottom_all_right { width: 100%;   display: flex;  flex-wrap: nowrap;  justify-content: space-between;  box-sizing: border-box;}
.bottom_all_right .bottom_menu { flex: 1 1 0; max-width: calc((100% - 20px) / 3);  display: flex; align-items: center; background-color: #fff; border: 1px solid #cfcfcf; box-sizing: border-box;
  border-radius: 10px;  padding: 10px; min-width: 0; }
.bottom_all_right .bottom_menu a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; color: #333; box-sizing: border-box;}
.bottom_all_right .bottom_menu .menu_text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%;}
.bottom_all_right .bottom_menu h6 { margin-top: 3px; font-size: min(0.875rem, 16.1px); font-weight: 500;}
.bottom_all_right .bottom_menu img { width: 55px;  height: auto;  margin: 0;}