@charset "utf-8";

/*========================================================================
메인 레이아웃
========================================================================*/
.body-main #wrap { min-width:1420px; }
.body-main #wrap::before { border-bottom:0; }
.body-main #container {  max-width:100%; width:100%; min-width:1200px; padding-bottom:0; }
.body-main #contents { max-width:100%; min-width:1200px; width:100%; padding:0 0 120px; margin:0 auto; }
.body-main #topLine { height:0; }
.body-main #footer { margin-top:0; }

.main-inner { position:relative; width:1200px; margin:0 auto; }
.main-inner::after { content:""; display:block; clear:both; }
.main-max-inner { position:relative; width:1400px; margin:0 auto; }
.main-max-inner::after { content:""; display:block; clear:both; }


/*========================================================================
메인 영역
============================ ============================================*/
/* 메인 비주얼 */
.main-visual { position:relative; overflow:hidden; }
.main-visual .visual-slider { position:relative; width:1200px; margin:0 auto; }
.main-visual .swiper-container { overflow:visible; }
/* 제어버튼 */
.main-visual .swiper-container .swiper-button { position:absolute; top:50%; width:60px; height:60px; transform:translateY(-50%); margin:0; font-size:0; background:no-repeat 50% 50%; border-radius:0; opacity:1; cursor:pointer; z-index:61; }
.main-visual .swiper-container .swiper-button-prev { left:-80px; background-image:url("../img/main_prev.png"); }
.main-visual .swiper-container .swiper-button-next { right:-80px; background-image:url("../img/main_next.png"); }
/* 페이져 */
.main-visual .custom-swiper .swiper-pagination { width:auto; right:64px; left:auto; bottom:20px; height:35px; line-height:35px; padding:0 12px; color:#fff; font-size:16px; border-radius:999px; background:rgba(22,22,22,0.35); }
.main-visual .swiper-pagination em { color:#e0e0e0; }
.main-visual .swiper-pagination em::before { content:"/"; display:inline-block; vertical-align:top; font-size:12px; margin:0 4px 0 5px; }
/* 재생 , 일시정지 */
.slide-pause { position:absolute; bottom:20px; right:20px; width:35px; height:35px; border-radius:50%; background:rgba(22,22,22,0.35); z-index:51; }
.slide-pause > span { display:block; width:100%; height:100%; font-size:0; background:no-repeat 50%; cursor:pointer; }
.slide-pause #pauser { background-image:url("../img/main_visual_stop.png"); }
.slide-pause #resume { background-image:url("../img/main_visual_play.png"); }

/* 비주얼 타이틀 */
.visual-title { position:absolute; top:50%; left:100px; transform:translateY(-50%); }
.visual-title h3 { color:#121212; font-size:42px; font-weight:700; line-height:1.3; }
.visual-title p { margin:18px 0 0; color:#6f6f6f; font-size:18px; font-weight:300; line-height:1.35; }

/* 비주얼 타이틀 모션 */
.main-visual .swiper-container .swiper-slide { position:relative; border-radius:20px; overflow:hidden; }
.main-visual .swiper-container .swiper-slide .visual-title > * { opacity:0; font-family:"pretendard", sans-serif; }
.main-visual .swiper-container .swiper-slide-active .visual-title > * { backface-visibility:hidden; animation:TransYS 1s ease-out both; }
.main-visual .swiper-container .swiper-slide-active .visual-title > *:first-child { animation-delay:0.3s; }
.main-visual .swiper-container .swiper-slide-active .visual-title > *:nth-child(2) { animation-delay:0.7s; }

/* box 간격 */
.main-box { margin:60px 0 0;  }
.main-box2 { margin:120px 0 0; }
.main-box3 { margin:120px 0 0; }
.main-box4 { margin:120px 0 0; }
.main-box5 { margin:120px 0 0; }
.main-box6 { margin:120px 0 0; }
.main-box7 { margin:120px 0 0; }
.main-box8 { margin:120px 0 0; }

/* 메인 타이틀 */
.main-wrap .goods_list_tit { display:none; }
.main-wrap .title h2 { padding:0; margin-bottom:25px; color:#121212; font-size:36px; font-weight:600; line-height:1; text-align:center; }

/* 메인 퀵메뉴 */
.main-quick-menu {  }
.main-quick-menu ul { display:flex; justify-content: center; gap:30px; text-align:center; }
.main-quick-menu ul li p { margin:15px 0 0; color:#121212; font-size:16px; line-height: 1.35; }

/* 중간 배너 */
.main-bn1 ul { display:flex; gap:15px; }
.main-bn1 ul li { flex:1; }
.main-bn1 ul li img { width:100%; max-width:390px; }

/* 업종별 납품사례 */
.sale-case { overflow:hidden; }
.sale-case .tab-contents .swiper-container { padding:0 100px; }
.sale-case .tab-contents .swiper-container::before { content:""; position:absolute; top:0; left:0; width:100px; height:100%; background:#fff; z-index:51; }
.sale-case .tab-contents .swiper-container::after { content:""; position:absolute; top:0; right:0; width:100px; height:100%; background:#fff; z-index:51; }
.sale-case .tab-contents .swiper-container .swiper-slide img { border-radius:10px; }
/* 탭버튼 */
.sale-case > .swiper-pagination { position:static; display:flex; justify-content: center; align-items:center; gap:20px; margin-bottom:32px; border-bottom:1px solid #E0E0E0; }
.sale-case > .swiper-pagination li { position:relative; width:auto; height:auto; padding:0; margin:0; opacity:1; background:none; border-radius:0; }
.sale-case > .swiper-pagination li span { display:block; padding:5px 0 12px; margin:0; color:#9e9e9e; font-size:16px; font-weight:400; line-height:1; text-align:center; cursor:pointer; }
.sale-case > .swiper-pagination li.swiper-pagination-bullet-active span { color:#dd675a; font-weight:500; }
.sale-case > .swiper-pagination li.swiper-pagination-bullet-active span::after { content:""; position:absolute; bottom:-1px; left:0; width:100%; border-bottom:3px solid #dd675a; }
/* 제어버튼 */
.sale-case .tab-contents .swiper-button { position:absolute; top:50%; width:52px; height:52px; transform:translateY(-50%); margin:0; font-size:0; background:no-repeat 50% 50%; border-radius:0; opacity:1; cursor:pointer; z-index:61; }
.sale-case .tab-contents .swiper-button-prev { left:20px; background-image:url("../img/main_mid_prev.png"); }
.sale-case .tab-contents .swiper-button-next { right:20px; background-image:url("../img/main_mid_next.png"); }

/* 카테고리별 베스트 */
/* 탭버튼 */
.prd-tab-slide > .swiper-pagination { position:static; display:flex; justify-content: center; align-items:center; gap:20px; margin-bottom:32px; border-bottom:1px solid #E0E0E0; }
.prd-tab-slide > .swiper-pagination li { position:relative; width:auto; height:auto; padding:0; margin:0; opacity:1; background:none; border-radius:0; }
.prd-tab-slide > .swiper-pagination li span { display:block; padding:5px 0 12px; margin:0; color:#9e9e9e; font-size:16px; font-weight:400; line-height:1; text-align:center; cursor:pointer; }
.prd-tab-slide > .swiper-pagination li.swiper-pagination-bullet-active span { color:#dd675a; font-weight:500; }
.prd-tab-slide > .swiper-pagination li.swiper-pagination-bullet-active span::after { content:""; position:absolute; bottom:-1px; left:0; width:100%; border-bottom:3px solid #dd675a; }
/* 상품 */
.prd-tab-slide .goods_list_cont > div > ul { display:flex; gap:14px; }
.prd-tab-slide .item_photo_box > a > img { max-width:339px; border-radius:10px; }
.prd-tab-slide .item_cont { padding:0; }
.prd-tab-slide .item_cont .item_info_cont { margin:15px 0 0; }
.prd-tab-slide .item_cont .item_tit_box .item_name { font-size:16px; }
.prd-tab-slide .item_cont .item_money_box .item_price { font-size:18px; }
.prd-tab-slide .item_cont .item_money_box .fixed-price { color:#bbb; }
.prd-tab-slide .item_cont .sale-rate { margin:0 0 0 5px; color:#dd675a; font-size:17px; font-weight:500; }
.prd-tab-slide .prd-btn-box .btn_basket_get { width:18px; height:16px; background-image:url("../img/wish_icon.png");}
/* 컬러 */
.prd-tab-slide .goods_list .color { display:flex; align-items: center; gap:4px; position:relative; margin:13px 0 0; }
.prd-tab-slide .goods_list .color.active::after { content:""; display:inline-block; width:10px; height:10px; margin-left:1px; background:url("../img/color_cross_icon.png") no-repeat; }
.prd-tab-slide .goods_list .color > div { width:15px; height:15px; margin:0; border:1px solid #eeeeee !important; }
.prd-tab-slide .goods_list .color > div:nth-child(n+16) { display:none; }

/* 배너 영역 3개 */
.main-banner-3 ul { display:flex; gap:15px; }
.main-banner-3 ul li { width:calc((100% - 30px)/ 3); text-align:center; }
.main-banner-3 ul li img { width:100%; max-width:390px; border-radius:15px; }
.main-banner-3 ul li h3 { margin:21px 0 0; color:#121212; font-size:30px; font-weight:600; }
.main-banner-3 ul li p { margin:8px 0 0; color:#9e9e9e; font-size:16px; font-weight:300; line-height:1.38; }

/* 진행순서 */
.main-order-step { padding:55px 0 60px; background:#fff0ee; }
.main-order-step ul { display:flex; justify-content: space-evenly; padding:10px 0 0; }
.main-order-step ul li { position:relative; }
.main-order-step ul li:not(:first-child)::before { content:""; position:absolute; top:79px; left:-40px; width:24px; height:18px; background:url("../img/main_arr1.png") no-repeat; }
.main-order-step ul li span { display:flex; align-items: center; justify-content: center; position:absolute; top:-4px; left:10px; width:42px; height:42px; color:#fff; font-size:20px; font-weight:500; background:#dd675a; border-radius:50%; }
.main-order-step ul li div { display:flex; flex-direction: column; align-items: center; justify-content: center; width:170px; height:170px; background:#fff; border:1px solid #e0e0e0; border-radius:50%; }
.main-order-step ul li div p { margin:10px 0 0; color:#121212; font-size:16px; font-weight:500; text-align:center; }

/* 인쇄안내 */
.main-print-guide { display:flex; flex-direction: column; gap:40px; }
.main-print-guide > div { display:flex; justify-content: space-between; padding:62px 45px; background:#f4f4f4; border-radius:15px; }
.main-print-guide .left-box { flex:auto;  }
.main-print-guide .left-box h3 { display:inline-flex; align-items: center; justify-content: center; height:56px; padding:0 24px; margin:0 0 20px; color:#ffffff; font-size:30px; font-weight:700; background:#dd675a; border-radius:10px; }
.main-print-guide .left-box li { color:#121212; font-size:17px; line-height: 2.23; }
.main-print-guide .left-box a { display:inline-flex; align-items: center; justify-content: center; position:relative; height:46px; line-height:45px; padding:0 40px; margin:23px 0 0; color:#121212; font-size:16px; border:1px solid #454545; border-radius:999px; }
.main-print-guide .left-box a::before { content:""; display:inline-flex; width:9px; height:9px; margin:0 9px 0 0; background:url("../img/more_cross_icon.png") no-repeat; }
.main-print-guide .right-box { padding:13px; background:#fff; }
.main-print-guide .right-box ul { display:flex; gap:13px; }
.main-print-guide .right-box li { width:calc((100% - 26px)/ 3); }
.main-print-guide .right-box img { width:100%; max-width:310px; }

/* 이용후기 */
.main-review-bn { overflow:hidden; }
.main-review-bn .swiper-container { padding:0 100px; }
.main-review-bn .swiper-container::before { content:""; position:absolute; top:0; left:0; width:100px; height:100%; background:#fff; z-index:51; }
.main-review-bn .swiper-container::after { content:""; position:absolute; top:0; right:0; width:100px; height:100%; background:#fff; z-index:51; }
.main-review-bn .swiper-container .swiper-slide img { border-radius:10px; }
/* 제어버튼 */
.main-review-bn .swiper-container .swiper-button { position:absolute; top:50%; width:52px; height:52px; transform:translateY(-50%); margin:0; font-size:0; background:no-repeat 50% 50%; border-radius:0; opacity:1; cursor:pointer; z-index:61; }
.main-review-bn .swiper-container .swiper-button-prev { left:20px; background-image:url("../img/main_mid_prev.png"); }
.main-review-bn .swiper-container .swiper-button-next { right:20px; background-image:url("../img/main_mid_next.png"); }