/* **************************************************************************************

* 반응형 스킨 사용자/제작자 CSS

Author : 퍼스트몰(firstmall)

Author URL : http://www.firstmall.kr

Creation Date : 2019-08-26

Modify Date : 2021-02-25

************************************************************************************** */



body,th,td,input,select,textarea,button,pre{ font-weight:300; }



.aside_cs_phone {font-weight:400;}

.aside_cs_phone:before {display:none;}



/* ================================== HEADER ================================== */

/* HEADER - 로고 */

.layout_header .logo_wrap .resp_wrap { max-width:1840px; }

.layout_header .logo_wrap .logo_area { margin:0; float:left; }

.layout_header .logo_wrap .logo_area>a { height:100px; }



/* HEADER - 검색 */

.resp_top_search { right:50%; top:50%; margin:-22px -200px 0 0; }

.resp_top_search .search_ver2 { opacity:1; overflow:visible; transform:translateX(0); }

.resp_top_search .search_ver2 .search_new .input_area button.close { display:none; }

.resp_top_search .search_ver2 .search_new .input_area button.search { background: url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/42a20d809f2eb51735ae.png") 50% 50% no-repeat; background-size:20px; }

.resp_top_search .search_ver2 .search_new .input_area .cont { width:400px; text-align:left; border-radius:0; border:none; border-bottom:2px #333 solid; }

.resp_top_search .search_ver2 .search_new .input_area label.search_box { width:364px; }

.resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text'] { padding-left:5px; }

.resp_top_search .search_ver2 .search_new .contetns_area { width:398px; border-color:#333; }

.resp_top_search .search_ver2 .search_new .autocomplete_banner { border-color:#333; }



/* HEADER - 유틸메뉴 */

.layout_header .util_wrap_menu2 { margin-top:32px; font-size:12px; }

.layout_header .util_wrap_menu2>li { background:none; }

.layout_header .util_wrap_menu2>li>a { height:auto; padding:28px 5px 0; min-width:40px; line-height:1.2; text-align:center; background-position:center top; background-repeat:no-repeat; }

.layout_header .util_wrap_menu2>li:last-child>a { padding-right:5px; }

.layout_header .util_wrap_menu2>li.user_logout>a { background-image:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/c03fc45c83e102ca4fa2.png"); }

.layout_header .util_wrap_menu2>li.user_login>a { background-image:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/b2a19aad0388ca2596f2.png"); }

.layout_header .util_wrap_menu2>li.user_join>a { background-image:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/0d3ed53e044c2165ab9e.png"); }

.layout_header .util_wrap_menu2>li.respCartArea>a { background-image:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/40d55d5d12a18e40a864.png"); font-size:13px; }

.layout_header .util_wrap_menu2>li.seller_login>a { background-image:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/cd6b7d64979865bc0c24.png"); }

.layout_header .util_wrap_menu2>li.user_info>a { padding-top:5px; line-height:1.5; }

.layout_header .util_wrap_menu2>li.user_info .u_name,

.layout_header .util_wrap_menu2>li.user_info .u_id { color:#6d8bab; }

#layout_header .benefit { top:-25px; }

#layout_header .benefit .arrow { top:15px; font-size:10px; }



/* 버거킹 */

.resp_top_hamburger { left:auto; right:40px; margin-top:-19px; }

.resp_top_hamburger>a { width:22px; }

.resp_top_hamburger>a:before { transform:translateY(-8px) rotate(0deg); }

.resp_top_hamburger>a:after { transform:translateY(8px) rotate(0deg); }



/* GNB */

.layout_header .nav_wrap { background:#000; }

.layout_header .nav_wrap .respCategoryList>li { padding:10px 0; }

.layout_header .nav_wrap .categorySub { top:70px; border:none; background:rgba(255,255,255,.9); }

.layout_header .nav_wrap .respCategoryList .categoryDepthLink,

.categoryAllBtn, .brandAllBtn, .locationAllBtn { color:#fff; }

.layout_header .nav_wrap .respCategoryList .categoryDepthLink { font-size:14px; font-weight:500; }

.layout_header .nav_wrap .respCategoryList .custom_nav_link .categoryDepthLink { color:#8ba4bf; }

.categoryAllBtn, .brandAllBtn, .locationAllBtn { font-weight:300; border-left:none; border-right:none; }

.layout_header .nav_wrap .respCategoryList .categoryDepth1.on .categoryDepthLink>em,

.layout_header .nav_wrap .respCategoryList .custom_nav_link.on .categoryDepthLink>em { border-bottom-color:#81acdb; }

.layout_header .nav_wrap .respCategoryList .categoryDepthLink>em:after { background:#81acdb; }

.layout_header .nav_wrap .respCategoryList .categoryDepth1.on .categoryDepthLink,

.layout_header .nav_wrap .respCategoryList .custom_nav_link.on .categoryDepthLink,

.layout_header .nav_wrap .respCategoryList .categoryDepth1:hover .categoryDepthLink,

.layout_header .nav_wrap .respCategoryList .custom_nav_link:hover .categoryDepthLink { color:#81acdb; }





/* 카테고리 서브메뉴 - type2 */

.layout_header .nav_wrap[data-submenu='type2'] .respCategoryList { table-layout:auto; }

.layout_header .nav_wrap[data-submenu='type2'] .nav_category_area { position:relative; }

.layout_header .nav_wrap[data-submenu='type2'] .respCategoryList>li { position:static; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySub { left:0; right:auto; box-sizing:border-box; width:100%; padding:5px 15px 15px; box-shadow:none; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap { display:table; width:100%; text-align:left; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap>div.categorySubBanner { padding:10px 0 0; width:1px; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap .categoryDepth2 { font-size:0; padding-bottom:10px; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap .categoryDepth2>li { font-size:14px; display:inline-block; vertical-align:top; min-width:175px; min-height:46px; padding-bottom:2px; border:none; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap .categoryDepth2>li>a { box-sizing:border-box; padding:24px 0 8px 10px; width:100%; position:absolute; left:0; top:0; font-weight:500; color:#333; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-binding:url("/assets/missing.svg");word-wrap:normal !important; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categorySubWrap .categoryDepth2>li:hover>a { transform:none; color:#999; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categoryDepth3 { margin-top:52px; font-size:13px; font-weight:300; opacity:1; position:static; left:auto; top:auto; z-index:auto; white-space:normal; border:none; background:transparent; border-radius:0;  transform:none; transition:none; }

.layout_header .nav_wrap .categorySubWrap .categoryDepth3>li>a { padding:5px 0 4px 10px; border-top:none; transition:none; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categoryDepth3>li:hover>a { transform:none; }

.layout_header .nav_wrap[data-submenu='type2'] .categoryDepth1 .categoryDepth3 + a:after { display:none; }



@media only screen and (max-width:1279px) {

.resp_top_search { margin:-22px -150px 0 0; }

.resp_top_search .search_ver2 .search_new .input_area .cont { width:300px; }

.resp_top_search .search_ver2 .search_new .input_area label.search_box { width:264px; }

.resp_top_search .search_ver2 .search_new .contetns_area { width:298px; }

}

@media only screen and (max-width:1023px) {

.layout_header .logo_wrap .logo_area { float:none; margin:0 auto; }

.layout_header .logo_wrap .logo_area>a { height:auto; }

.layout_header .util_wrap_menu2 { display:none; }



.resp_top_search { right:20px; top:50%; margin:-20px 0 0; }

.resp_top_search .search_ver2 { opacity:0; overflow:hidden; transform:translateX(-20px); }

.resp_top_search .search_ver2 .search_new .input_area .cont { width:300px; border:1px #767676 solid; border-radius:2px; }

.resp_top_search .search_ver2 .search_new .input_area label.search_box { width:234px; }

.resp_top_search .search_ver2 .search_new .input_area button.close { display:inline-block; }



.resp_top_hamburger { left:20px; right:auto; margin-top:-12px; }

.resp_top_hamburger>a { width:30px; }

.resp_top_hamburger>a:before { transform:translateY(-11px) rotate(0deg); }

.resp_top_hamburger>a:after { transform:translateY(11px) rotate(0deg); }



.layout_header .resp_top_cart { right:56px; }

.layout_header .nav_wrap .respCategoryList>li { padding-top:5px; padding-bottom:5px; }

}



@media only screen and (max-width:767px) {

.resp_top_hamburger { left:10px; }

.resp_top_search { right:10px; }

.layout_header .resp_top_cart { right:40px; }

.layout_header .nav_wrap .respCategoryList>li { padding-top:2px; padding-bottom:2px; }    

}



@media only screen and (max-width:479px) {

.layout_header .logo_wrap .logo_area img { max-width:160px; }

}

/* ================================== // HEADER ================================== */





/* ================================== FOOTER ================================== */

.layout_footer .resp_wrap .menu2 { padding:20px 0; }

.layout_footer .resp_wrap .menu2>li { background:url("https://weping-assets-588229931799-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/assets/images/43b764bafd441a1640d2.gif") 100% calc(50% - 1px) no-repeat; }

.layout_footer .resp_wrap .menu2>li:last-child { background-image:none; }

.layout_footer .resp_wrap .menu2>li>a { padding-right:21px; padding-left:20px; }

.layout_footer .resp_wrap .menu2>li.bold>a { font-weight:700; color:#000; }



.layout_footer .title { font-weight:400; }

.layout_footer .list.v4 {font-size:12px;}

.layout_footer .list .compay_phone { font-size:24px; font-weight:400; letter-spacing:1px; }

.layout_footer .menu1>li.notice { max-width:400px; }

.table_footer_notice { width:100%; table-layout:fixed; }

.table_footer_notice td { padding:4px 0; }

.table_footer_notice .cat { display:none; }

.table_footer_notice .date { text-align:right; color:#999; }



.layout_footer .menu3 { padding-right:100px; }

.layout_footer .menu3 .pcolor { margin-left:8px; }



@media only screen and (max-width: 767px) {

.layout_footer .resp_wrap .menu2 { padding:15px 0; }

.layout_footer .resp_wrap .menu2>li>a { padding-right:16px; padding-left:15px; }

.layout_footer .menu3 { padding-right: 50px; }

}

/* ================================== //FOOTER ================================== */



/* ================================== MAIN ================================== */

.sliderB.wide_visual_slider .slick-active .simg { transition:none; transform:none; }



.title_group1 .title1 { font-size:30px; font-weight:500; text-align:left;}

.title_group1 + .show_display,

.title_group1 + style + .designDisplay { margin-top:-20px; }

.show_display { margin-top:-20px; }



/* 카테고리_베스트_Slide 커스텀 */

.util_wrap_slide1 .sliderB .text_wrap { display:inline-block; margin:-20px 10px 0; padding:20px 30px 25px; border-radius:12px; background:rgba( 255, 255, 255, 0.5 ); }

.util_wrap_slide1 .sliderB .wrap2 {vertical-align:bottom !important; padding:0px 0px 50px 0px !important;}

.util_wrap_slide1 .sliderB .text2 {font-size:24px !important;}





/* 반응형 게시판 STORY 연동*/

.title_group1 + .board_gallery { margin-top:-20px; }

.board_gallery > ul { font-size:0; margin-left:-20px; }

.board_gallery > ul > li { display:inline-block; box-sizing:border-box; width:25%; vertical-align:top; padding:20px 0 0 20px; font-size:13px; line-height:1.4; text-align:center; transition:transform 0.2s; }

.board_gallery > ul > li:hover { transform:translateY(-10px); }

.board_gallery .item_img_area { position:relative; text-align:center; }

.board_gallery .item_img_area img { max-width:100%; }

.board_gallery .item_info_area { padding-top:7px; color:#999; }

.board_gallery .item_info_area>li { padding:6px 0 0; }

.board_gallery .item_info_area .goods_name_area { padding-top:15px; font-size:20px; line-height:1.2; font-weight:300; color:#333; }

.board_gallery .item_info_area .goods_desc_area { padding-top:14px; }

.board_gallery .item_info_area .goods_desc_area a { color:#999; }



.main_bnr_type2 { display:table; width:100%; table-layout:fixed; margin-top:90px; }

.main_bnr_type2 > li { display:table-cell; text-align:left; }

.main_bnr_type2 > li:first-child { text-align:right; }



.wide_banner_custom { overflow:hidden; position:relative; text-align:center; margin-top:90px; }



.main_slider_a2 .slick-slide .slink { display:block; position:relative; transform:scale(0.94); transition:transform .3s; }

.main_slider_a2 .slick-slide.slick-center .slink { transform:scale(1); transition-delay:.4s; }

.main_slider_a2 .slick-slide .slink:after { display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.4; transition:opacity .4s; }

.main_slider_a2 .slick-slide.slick-center .slink:after { opacity:0; transition-delay:.6s; }

.main_slider_a2 .slick-slider .slick-prev { left:53px; }

.main_slider_a2 .slick-slider .slick-next { right:53px; }





.goodS_info { font-weight:400; }

.displaY_sales_price .nuM, .displaY_goods_price .nuM { font-weight:500; }

.style7_custom1 .goods_info_style_7 .displaY_goods_name a { color:#000; }

.style7_custom1 .goods_info_style_7 .displaY_sales_percent { color:#ff0505; float:right; margin-right:5px; }

.style7_custom1 .goods_info_style_7 .displaY_sales_percent .nuM { font-weight:400; }

.style7_custom1 .goods_info_style_7 .goodS_info.displaY_besong { display:none; }

.style7_custom1 .goods_info_style_7 .displaY_event_time { margin-top:6px; }



.style4_custom1 .goods_info_style_4 .goodS_info { font-weight:300; }

.style4_custom1 .goods_info_style_4 .displaY_goods_name { margin-bottom:0; padding-top:10px; font-size:19px; border:none; }

.style4_custom1 .goods_info_style_4 .displaY_goods_name a { color:#000; }



.display_tab_custom ul.displayTabType1 { text-align:center; }

.display_tab_custom ul.displayTabType1>li { float:none; display:inline-block; width:auto !important; border:none; background:transparent; font-size:15px; padding:0 25px; }

.display_tab_custom ul.displayTabType1>li.current { font-weight:500; }



.main_space { margin-top:90px; background:#f6f6f6; padding-bottom:80px; }



@media only screen and (max-width:1023px) {

.board_gallery>ul { margin-left:-10px; }

.board_gallery>ul>li { padding-left:10px; }

.wide_banner_custom img { max-width:140%; margin-left:-20%; margin-right:-20%; }

}

@media only screen and (max-width:940px) {

.board_gallery>ul>li { width:33.33%; }

    .util_wrap_slide1 .sliderB .text2 {font-size:30px !important;}

}

@media only screen and (max-width:860px) {

.show_display_col3 .display_responsible_class .goods_list li.gl_item { width:50%; }

    .resp_wrap .util_wrap_slide1 { display:none; }

    .show_display { width:100% !important;; }    

}

@media only screen and (max-width: 767px) {

.title_group1 .title1 { font-size:38px; }

.wide_banner_custom img { max-width:160%; margin-left:-30%; margin-right:-30%; }

}

@media only screen and (max-width:639px) {

.board_gallery>ul>li { width:50%; }

.main_bnr_type2 { display:block; width:auto; margin-top:65px; }

.main_bnr_type2 > li { display:block; text-align:center; margin-top:1px; }

.main_bnr_type2 > li:first-child { text-align:center; margin-top:0; }

.wide_banner_custom img { max-width:180%; margin-left:-40%; margin-right:-40%; }

.display_tab_custom ul.displayTabType1>li { padding:0 15px; }

}

@media only screen and (max-width:479px) {

.title_group1 .title1 { font-size:28px; }

.main_bnr_type2 { margin-top:50px; }

.board_gallery .item_info_area .goods_name_area { padding-top:10px; font-size:16px; }

.board_gallery .item_info_area .goods_desc_area { padding-top:10px; }

.show_display_col3 .display_responsible_class .goods_list li.gl_item { width:100%; }

.wide_banner_custom img { max-width:180%; margin-left:-40%; margin-right:-40%; }

.main_space { margin-top:60px; background:#f6f6f6; padding-bottom:40px; }

}

/* ================================== //MAIN ================================== */





/* ================================== 상품 리스트 페이지 ================================== */

.searched_item_display>ul>li { padding-bottom:10px; }

.searched_item_display .item_info_area .goods_price_area .discount_rate .num { font-weight:300; }

.searched_item_display .item_info_area .goods_besong_area { display:none; }

.searched_item_display .goods_list_style5 .item_info_area .goods_price_area .discount_rate { color:#ff0505; }



.searched_item_display .item_info_area .goods_name_area .brand_name { display:block; padding-bottom:5px; font-size:15px; font-weight:400; color:#F7782C; }

.searched_item_display .item_info_area .goods_name_area .brand_name:before,

.searched_item_display .item_info_area .goods_name_area .brand_name:after { display:none; }

/* ================================== //상품 리스트 페이지 ================================== */





/* ================================== 전체 컬러 세팅 ================================== */

/* ======== 어사이드/마이쇼핑/고객센터 - LNB 활성화 메뉴 ======== */

.subpage_lnb .lnb_sub>li.on>a,

.aside_navigation_wrap ul.menu.board>li.on a,

.aside_navigation_wrap ul.menu li.mitem.category.on a.mitem_goodsview,

.aside_navigation_wrap ul.menu li.mitem_subcontents ul.submenu li.submitem.category.on a.mitem_goodsview,

.quick_lnb_active_text {

color:#778ca3;

}



/* ======== 할인율 ======== */

.displaY_sales_percent,

.searched_item_display .item_info_area .goods_price_area .discount_rate,

.quick_basic_sale_rate {

color:#778ca3;

}



/* ======== 단독이벤트 ======== */

.spec_solo_event .remain_time .title,

.displaY_event_time .title,

.cart_list .cgd_contents .event_area .title,

.searched_item_display .goods_list_style5 .displaY_event_time .title,

.quick_solo_event_icon {

background-color:#778ca3; /* 아이콘 */

}

.spec_solo_event .event_datetime_box,

.displaY_event_time .time_container,

.cart_list .cgd_contents .event_area .time {

background-color:#778ca3; /* 배경 */

color:#ffffff; /* 텍스트 */

}

.quick_solo_event_bg { background-color:#778ca3; }

.quick_solo_event_text { color:#ffffff; }



/* ======== 평점 별 색상 ======== */

.displaY_review_score_a .ev_active2>b,

.goods_spec_customer_ev .ev_active2>b,

.quick_review_score {

background-color:#778ca3;

}



/* ======== 상품상세 할인율 ======== */

.deatil_sale_rate {

background-color:#8ba4bf; /* 할인율 - 배경 */

color:#ffffff; /* 할인율 - 텍스트 */

}

.quick_deatil_sale_rate_bg { background-color:#8ba4bf; }

.quick_deatil_sale_rate_text { color:#ffffff; }



/* ======== 쿠폰 버튼 컬러 ======== */

.resp_coupon_list>li>ul>li.bul,

.detail_relation_event>li>a:after,

.quick_coupon_btn {

background-color:#778ca3; /* 쿠폰 버튼 컬러 */

}



/* ======== 주요 버튼 컬러 ======== */

.btn_resp.color2.size_c,

.btn_resp.color2.size_extra,

.btn_resp.color2.size_extra2,

.resp_login_wrap .btn_resp.size_login1 {

outline:none;

border-color:#778ca3; /* 라인 */

background-color:#778ca3; /* 배경 */

color:#ffffff; /* 텍스트 */

}

.quick_major_button_line { border-color:#778ca3; }

.quick_major_button_bg { background-color:#778ca3; }

.quick_major_button_text { color:#ffffff; }



/* ======== 푸시 카운트 ======== */

.layout_header .cart_cnt1,

.layout_header .cart_cnt2,

.asie_main_menu .push_count,

.my_order_step .pushCount,

#layout_header .benefit {

background:#778ca3; /* 배경 */

color:#ffffff; /* 텍스트 */

}

#layout_header .benefit .arrow {

color:#778ca3;

}

.quick_push_count_bg { background:#778ca3; }

.quick_push_count_text { color:#ffffff; }



/* ======== BEST 페이지 랭크 ======== */

.best_page_ranking>ul>li:nth-child(1) .item_rank {

background-color:#778ca3; /* 1위 - 배경 */

color:#ffffff; /* 1위 - 텍스트 */

}

.best_page_ranking>ul>li:nth-child(2) .item_rank {

background-color:#778ca3; /* 2위 - 배경 */

color:#ffffff; /* 2위 - 텍스트 */

}

.best_page_ranking>ul>li:nth-child(3) .item_rank {

background-color:#778ca3; /* 3위 - 배경 */

color:#ffffff; /* 3위 - 텍스트 */

}





/* ======== 게시판 상세 - 현재글 ======== */

.res_table>.tbody.now_list {

outline-color:#778ca3; /* 라인 */

}

.res_table>.tbody.now_list .now {

color:#778ca3; /* 텍스트 */

}



/* ======== 페이징 - 현재 페이지 ======== */

.paging_navigation a.red,

.paging_navigation a.on,

.paging_navigation_pop a.red,

.paging_navigation_pop a.on {

border-color:#778ca3; /* 라인 */

color:#778ca3; /* 텍스트 */

}

/* ================================== //전체 컬러 세팅 ================================== */



/* 주문/결제 */

.subpage_wrap.order_payment.flyingMode .order_payment_right .order_subsection {position:relative !important;}

.subpage_wrap.order_payment.flyingMode .order_payment_right .order_subsection .right_flying_wrap1 {padding-left:0 !important; padding-right:0 !important;}

.subpage_wrap.order_payment.flyingMode .order_payment_right .order_subsection .right_flying_wrap3 {width:100% !important; box-shadow:none !important;}

#typereceiptlay .labelgroup_design {margin-bottom:5px;}



/* ====================================================================== */

/* ★ [최신 반응형] 검색 자동완성 추천상품 1:1 썸네일 & 2줄 상품명 통일 ★ */

/* ====================================================================== */



/* 1. [수정됨] 추천상품 이미지 1:1 완벽 정사각형 고정 (초정밀 타겟팅) */

#autocompleteBannerList img,

#autocompleteBannerList .item_img {

    width: 100% !important;

    height: 100% !important; /* JS가 몰래 넣는 고정 높이 강제 무력화 */

    aspect-ratio: 1 / 1 !important; /* 무조건 1:1 강제 크롭 */

    object-fit: fill !important;

    object-position: top center !important;

    display: block !important;

    margin: 0 auto !important;

}



/* 2. 상품명 2줄 강제 정렬 (성공한 코드 유지) */

#autocompleteBannerList .goods_info [class*="name"],

#autocompleteBannerList .goods_info a,

#autocompleteBannerList .goods_info p,

#autocompleteBannerList .goods_info span {

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important; /* 2줄까지만 허용 */

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important; /* 넘치면 ... 처리 */

    white-space: normal !important;

    word-break: break-all !important;

}



/* 가격 등의 요소를 보호하기 위한 예외 처리 */

#autocompleteBannerList .goods_info [class*="price"] {

    -webkit-line-clamp: unset !important;

    display: block !important;

}



/* ====================================================================== */

/* ★ 카테고리 추천상품 화살표 (상단메뉴 아래로 숨김 + 메인 동기화) ★ */

/* ====================================================================== */



/* 1. 화살표 배경 동그라미 (메인과 동일, 기존 찌꺼기 삭제) */

#recommendResult .swiper-button-prev,

#recommendResult .swiper-button-next {

    width: 44px !important;        

    height: 44px !important;

    background-color: rgba(255, 255, 255, 0.6) !important; 

    background-image: none !important; 

    color: transparent !important;     

    font-size: 0 !important;           

    border-radius: 50% !important; 

    top: 40% !important;           

    margin-top: 0 !important;

    transform: translateY(-50%) !important;

    z-index: 50 !important;        /* 🔥 9999에서 50으로 강등! (사진보단 위, 상단메뉴보단 아래) 🔥 */

    display: flex !important;      

    align-items: center !important;

    justify-content: center !important;

    transition: all 0.3s ease !important; 

    box-shadow: none !important;   

}



/* 위치 고정 */

#recommendResult .swiper-button-prev { left: 10px !important; }

#recommendResult .swiper-button-next { right: 10px !important; left: auto !important; }



/* 2. 마우스 올렸을 때 배경 변화 */

#recommendResult .swiper-button-prev:hover,

#recommendResult .swiper-button-next:hover {

    background-color: #ffffff !important; 

    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; 

}



/* 3. 투박한 거 지우고, 얇은 꺾쇠 직접 그리기 */

#recommendResult .swiper-button-prev::after,

#recommendResult .swiper-button-next::after {

    content: '' !important;        

    display: block !important;

    width: 12px !important;        

    height: 12px !important;       

    border: solid #999 !important; 

    border-width: 0 2px 2px 0 !important; 

    transition: border-color 0.3s ease !important;

}



/* 4. 꺾쇠 방향 회전시키기 (왼쪽 / 오른쪽) */

#recommendResult .swiper-button-prev::after {

    transform: rotate(135deg) !important; 

    margin-left: 4px !important;          

}

#recommendResult .swiper-button-next::after {

    transform: rotate(-45deg) !important; 

    margin-right: 4px !important;         

}



/* 5. 마우스 올렸을 때 꺾쇠 선 색상 변화 (진해짐) */

#recommendResult .swiper-button-prev:hover::after,

#recommendResult .swiper-button-next:hover::after {

    border-color: #333 !important; 

}



/* ====================================================================== */

/* ★ 상품상세페이지 하단 (관련상품/인기상품) 화살표 메인 100% 동기화 ★ */

/* ====================================================================== */



/* 1. 슬라이드 좌우 방어막(Padding) 철거 (화살표가 사진 위로 올라갈 수 있게) */

#goods_contents_quick .slick-slider,

#goods_contents_quick .designDisplay,

#goods_contents_quick .goods_list,

#goods_contents_quick .slick-list,

#goods_contents_quick .slick-track,

#goods_contents_quick .swiper-container {

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

}



/* 2. 화살표 배경 동그라미 (메인과 동일, 기존 찌꺼기 완벽 삭제) */

#goods_contents_quick .swiper-button-prev,

#goods_contents_quick .swiper-button-next,

#goods_contents_quick .slick-prev,

#goods_contents_quick .slick-next,

#goods_contents_quick .designSlidePrev,

#goods_contents_quick .designSlideNext {

    width: 44px !important;        

    height: 44px !important;

    background-color: rgba(255, 255, 255, 0.6) !important; 

    background-image: none !important; 

    color: transparent !important;     

    font-size: 0 !important;           

    border-radius: 50% !important; 

    position: absolute !important;

    top: 40% !important;           

    margin-top: 0 !important;

    transform: translateY(-50%) !important;

    z-index: 50 !important;        /* 상단 메뉴 뚫지 않도록 50 유지 */

    display: flex !important;      

    align-items: center !important;

    justify-content: center !important;

    transition: all 0.3s ease !important; 

    box-shadow: none !important;

    border: none !important;

}



/* (혹시 관리자에서 넣은 화살표 <img> 이미지가 있다면 강제 숨김) */

#goods_contents_quick .swiper-button-prev img,

#goods_contents_quick .swiper-button-next img,

#goods_contents_quick .slick-prev img,

#goods_contents_quick .slick-next img,

#goods_contents_quick .designSlidePrev img,

#goods_contents_quick .designSlideNext img {

    display: none !important;

}



/* 3. 위치 고정 (안쪽으로 10px 당김) */

#goods_contents_quick .swiper-button-prev,

#goods_contents_quick .slick-prev,

#goods_contents_quick .designSlidePrev { 

    left: 10px !important; right: auto !important; 

}

#goods_contents_quick .swiper-button-next,

#goods_contents_quick .slick-next,

#goods_contents_quick .designSlideNext { 

    right: 10px !important; left: auto !important; 

}



/* 4. 마우스 올렸을 때 배경 변화 */

#goods_contents_quick .swiper-button-prev:hover,

#goods_contents_quick .swiper-button-next:hover,

#goods_contents_quick .slick-prev:hover,

#goods_contents_quick .slick-next:hover,

#goods_contents_quick .designSlidePrev:hover,

#goods_contents_quick .designSlideNext:hover {

    background-color: #ffffff !important; 

    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; 

}



/* 5. 얇고 세련된 꺾쇠 직접 그리기 */

#goods_contents_quick .swiper-button-prev::after,

#goods_contents_quick .swiper-button-next::after,

#goods_contents_quick .slick-prev::after,

#goods_contents_quick .slick-next::after,

#goods_contents_quick .designSlidePrev::after,

#goods_contents_quick .designSlideNext::after {

    content: '' !important;        

    display: block !important;

    width: 12px !important;        

    height: 12px !important;       

    border: solid #999 !important; 

    border-width: 0 2px 2px 0 !important; 

    transition: border-color 0.3s ease !important;

}



/* 6. 꺾쇠 방향 회전시키기 (왼쪽 / 오른쪽) */

#goods_contents_quick .swiper-button-prev::after,

#goods_contents_quick .slick-prev::after,

#goods_contents_quick .designSlidePrev::after {

    transform: rotate(135deg) !important; 

    margin-left: 4px !important;          

}

#goods_contents_quick .swiper-button-next::after,

#goods_contents_quick .slick-next::after,

#goods_contents_quick .designSlideNext::after {

    transform: rotate(-45deg) !important; 

    margin-right: 4px !important;         

}



/* 7. 마우스 올렸을 때 꺾쇠 선 색상 변화 (진해짐) */

#goods_contents_quick .swiper-button-prev:hover::after,

#goods_contents_quick .swiper-button-next:hover::after,

#goods_contents_quick .slick-prev:hover::after,

#goods_contents_quick .slick-next:hover::after,

#goods_contents_quick .designSlidePrev:hover::after,

#goods_contents_quick .designSlideNext:hover::after {

    border-color: #333 !important; 

}





/* ====================================================================== */

/* ★ 판매자 미니샵 (화살표 메인 동기화만 유지, 레이아웃 건드리지 않음) ★ */

/* ====================================================================== */

#mshop_page .slick-slider, #mshop_page .designDisplay, #mshop_page .slick-list,

#mshop_page .slick-track, #mshop_page .swiper-container {

    padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;

}

#mshop_page .swiper-button-prev, #mshop_page .swiper-button-next,

#mshop_page .slick-prev, #mshop_page .slick-next,

#mshop_page .designSlidePrev, #mshop_page .designSlideNext {

    width: 44px !important; height: 44px !important; background-color: rgba(255, 255, 255, 0.6) !important;

    background-image: none !important; color: transparent !important; font-size: 0 !important;

    border-radius: 50% !important; position: absolute !important; top: 40% !important; margin-top: 0 !important; 

    transform: translateY(-50%) !important; z-index: 50 !important; display: flex !important; align-items: center !important;

    justify-content: center !important; transition: all 0.3s ease !important; box-shadow: none !important; border: none !important;

}

#mshop_page .swiper-button-prev img, #mshop_page .swiper-button-next img,

#mshop_page .slick-prev img, #mshop_page .slick-next img,

#mshop_page .designSlidePrev img, #mshop_page .designSlideNext img { display: none !important; }

#mshop_page .swiper-button-prev, #mshop_page .slick-prev, #mshop_page .designSlidePrev { left: 10px !important; right: auto !important; }

#mshop_page .swiper-button-next, #mshop_page .slick-next, #mshop_page .designSlideNext { right: 10px !important; left: auto !important; }

#mshop_page .swiper-button-prev:hover, #mshop_page .swiper-button-next:hover,

#mshop_page .slick-prev:hover, #mshop_page .slick-next:hover,

#mshop_page .designSlidePrev:hover, #mshop_page .designSlideNext:hover {

    background-color: #ffffff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;

}

#mshop_page .swiper-button-prev::after, #mshop_page .swiper-button-next::after,

#mshop_page .slick-prev::after, #mshop_page .slick-next::after,

#mshop_page .designSlidePrev::after, #mshop_page .designSlideNext::after {

    content: '' !important; display: block !important; width: 12px !important; height: 12px !important; 

    border: solid #999 !important; border-width: 0 2px 2px 0 !important; transition: border-color 0.3s ease !important;

}

#mshop_page .swiper-button-prev::after, #mshop_page .slick-prev::after, #mshop_page .designSlidePrev::after {

    transform: rotate(135deg) !important; margin-left: 4px !important;

}

#mshop_page .swiper-button-next::after, #mshop_page .slick-next::after, #mshop_page .designSlideNext::after {

    transform: rotate(-45deg) !important; margin-right: 4px !important;

}

#mshop_page .swiper-button-prev:hover::after, #mshop_page .swiper-button-next:hover::after,

#mshop_page .slick-prev:hover::after, #mshop_page .slick-next:hover::after,

#mshop_page .designSlidePrev:hover::after, #mshop_page .designSlideNext:hover::after { border-color: #333 !important; }



/* ====================================================================== */

/* ★ 카테고리/미니샵 전체 1:1 핏 & 꿀렁거림 100% 차단 (최종 완료본) ★ */

/* ====================================================================== */



/* 1. 모든 종류의 사진 껍데기 1:1 정사각형 빈 공간 확보 (일반상품 껍데기 추가완료!) */

#catalog_page .item_photo_box,

#catalog_page .item_image,

#catalog_page .item_img,

#catalog_page .img_area,

#catalog_page .thumbnail,

#catalog_page .gli_image,

#catalog_page .item_img_area, /* ★ 일반상품 껍데기 이름 추가! */

#mshop_page .item_photo_box,

#mshop_page .item_image,

#mshop_page .item_img,

#mshop_page .img_area,

#mshop_page .thumbnail,

#mshop_page .gli_image,

#mshop_page .item_img_area /* ★ 미니샵 일반상품 껍데기 이름 추가! */ {

    position: relative !important;

    width: 100% !important;

    height: 0 !important;

    padding-bottom: 100% !important; /* 마법의 핵심: JS가 건드리기 전에 세로 빈 공간을 100% 확보! */

    overflow: hidden !important;

    display: block !important;

}



/* 2. 링크(a) 영역을 콘크리트 빈 상자 안에 빈틈없이 꽉 채우기 */

#catalog_page .item_photo_box > a,

#catalog_page .item_image > a,

#catalog_page .item_img > a,

#catalog_page .img_area > a,

#catalog_page .thumbnail > a,

#catalog_page .gli_image > a,

#catalog_page .item_img_area > a,

#mshop_page .item_photo_box > a,

#mshop_page .item_image > a,

#mshop_page .item_img > a,

#mshop_page .img_area > a,

#mshop_page .thumbnail > a,

#mshop_page .gli_image > a,

#mshop_page .item_img_area > a {

    position: absolute !important;

    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;

}



/* 3. 쏟아져 들어오는 메인 상품 사진을 상자에 강제로 꽉 채워 넣기 (fill) */

#catalog_page .item_photo_box img,

#catalog_page .item_image img,

#catalog_page .item_img img,

#catalog_page .img_area img,

#catalog_page .thumbnail img,

#catalog_page .gli_image img,

#catalog_page .item_img_area img,

#mshop_page .item_photo_box img,

#mshop_page .item_image img,

#mshop_page .item_img img,

#mshop_page .img_area img,

#mshop_page .thumbnail img,

#mshop_page .gli_image img,

#mshop_page .item_img_area img {

    position: absolute !important;

    top: 0 !important; left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: fill !important; 

}



/* 4. 아이콘(찜, 뱃지 등) 거인화 방어막 (원래 자리 유지) */

#catalog_page img[src*="zzim"], 

#catalog_page img[src*="icon"], 

#catalog_page img[src*="badge"],

#catalog_page img[src*="btn"],

#mshop_page img[src*="zzim"], 

#mshop_page img[src*="icon"], 

#mshop_page img[src*="badge"],

#mshop_page img[src*="btn"] {

    position: absolute !important; 

    top: auto !important; left: auto !important; /* 강제 위치 해제 */

    width: auto !important; height: auto !important;

    object-fit: none !important; margin: 0 !important;

}



/* 5. 브랜드명과 상품명을 분리하여 2줄 강제 축약 통일 */

#catalog_page .brand_name,

#mshop_page .brand_name {

    display: block !important;

    margin-bottom: 3px !important;

}



#catalog_page .goods_name_area .name, 

#catalog_page [class*="name"] a, 

#catalog_page [class*="title"] a,

#mshop_page .goods_name_area .name, 

#mshop_page [class*="name"] a, 

#mshop_page [class*="title"] a {

    display: -webkit-box !important; 

    -webkit-line-clamp: 2 !important; 

    -webkit-box-orient: vertical !important; 

    overflow: hidden !important; 

    text-overflow: ellipsis !important; 

    text-align: left !important; 

    white-space: normal !important;

    word-break: break-all !important;

    line-height: 1.4 !important;

    max-height: 2.8em !important;

}



<!-- +++++++++++ 카테고리 메뉴 CSS (깜빡임 완벽 제어 및 색상 분리) +++++++++++ -->

<style>

/* 0. 상하 테두리 선 삭제 (PC/모바일 공통) */

#layout_header, #cateSwiper, #cateSwiper .nav_category_area, #cateSwiper .designCategoryNavigation {

border: none !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; 

}



/* 1. 모바일 전용 디자인: 검정 띠 & 흰색 글씨 */

/* --- 모바일 메뉴 순서 강제 고정 및 ALL 버튼 숨김 --- */

        

      



        /* 📌 메뉴 순서 지정 */

       

        

        /* '의류', '잡화', '뷰티' 등 기본 카테고리를 4순위로 묶음 */



        

      


/* 모바일 기본 밑줄 완벽 차단 */

#layout_header #cateSwiper .respCategoryList > li > a, 

#layout_header #cateSwiper .respCategoryList > li > a em,

#layout_header #cateSwiper .respCategoryList > li > a span,

#layout_header #cateSwiper .respCategoryList > li:hover > a, 

#layout_header #cateSwiper .respCategoryList > li:hover > a em,

#layout_header #cateSwiper .respCategoryList > li:hover > a span {

text-decoration: none !important; border: none !important; box-shadow: none !important; background-image: none !important; font-style: normal !important;

}



#layout_header #cateSwiper .respCategoryList > li > a em::before,

#layout_header #cateSwiper .respCategoryList > li > a em::after,

#layout_header #cateSwiper .respCategoryList > li > a span::before,

#layout_header #cateSwiper .respCategoryList > li > a span::after,

#layout_header #cateSwiper .respCategoryList > li > a::before { display: none !important; }



/* 상단메뉴 글자 크기 통일 */

#layout_header #cateSwiper .respCategoryList > li > a, 

#layout_header #cateSwiper .respCategoryList > li > a em,

#layout_header #cateSwiper .respCategoryList > li > a span {

color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important; transition: color 0.3s ease !important;

}

#layout_header #cateSwiper .respCategoryList > li:hover > a, 

#layout_header #cateSwiper .respCategoryList > li:hover > a em,

#layout_header #cateSwiper .respCategoryList > li:hover > a span { color: #ff768b !important; }



/* 모바일 밑줄 위치 설정 */

#layout_header #cateSwiper .respCategoryList > li > a::after {

content: "" !important; position: absolute !important; left: 50% !important; bottom: 5px !important; width: 0 !important; height: 2px !important; background-color: #ff768b !important; transition: all 0.3s ease !important; transform: translateX(-50%) !important;

}

#layout_header #cateSwiper .respCategoryList > li:hover > a::after { width: 100% !important; }





/* ★ 2. PC 화면 전용: 1단 통합 레이아웃 (1300px 전환 유지) ★ */

@media (min-width: 1300px) {


#cateSwiper { background: transparent !important; background-color: transparent !important; }


/* PC 진회색 글자 적용 */

#layout_header #cateSwiper .respCategoryList > li > a, 

#layout_header #cateSwiper .respCategoryList > li > a em,

#layout_header #cateSwiper .respCategoryList > li > a span { color: #333333 !important; }

#layout_header #cateSwiper .respCategoryList > li:hover > a, 

#layout_header #cateSwiper .respCategoryList > li:hover > a em,

#layout_header #cateSwiper .respCategoryList > li:hover > a span { color: #ff768b !important; }


/* PC 밑줄 위치 설정 */

#layout_header #cateSwiper .respCategoryList > li > a::after { bottom: 10px !important; } 



#layout_header { border-bottom: none !important; height: 100px !important; position: relative !important; z-index: 1000 !important; }



#layout_header .logo_wrap, #cateSwiper {

position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; 

height: 100px !important; z-index: 20 !important; pointer-events: none !important; 

}

#cateSwiper { z-index: 10 !important; }



#layout_header .logo_wrap .resp_wrap, #cateSwiper .resp_wrap {

max-width: 1280px !important; height: 100px !important; margin: 0 auto !important; position: relative !important; pointer-events: none !important; 

}



/* [1] 로고 영역 */

#layout_header .logo_area { 

pointer-events: auto !important; position: absolute !important; margin: 0 !important; padding: 0 !important; 

left: 50px !important; 

top: 50% !important; transform: translateY(-50%) !important; margin-top: 0px !important; z-index: 9999 !important; 

}


/* [2] 상단 메뉴 영역 */

#cateSwiper .nav_category_area {

pointer-events: none !important; position: absolute !important; margin: 0 !important; padding: 0 !important; 

left: 0 !important; width: 100% !important; top: 0 !important; height: 100px !important; transform: none !important; 

}

#cateSwiper .respCategoryList { 

pointer-events: none !important; display: flex !important; align-items: center !important; height: 100px !important; 

flex-wrap: nowrap !important; gap: 25px !important; margin: 0 !important; 

padding: 0 0 0 235px !important; 

}

#cateSwiper .respCategoryList > li { pointer-events: auto !important; position: static !important; margin-right: 0 !important; height: auto !important; }



#cateSwiper .respCategoryList > li > a { 

position: relative !important; top: auto !important; transform: none !important; margin-top: 0px !important; 

z-index: 2 !important; 

}



#cateSwiper .respCategoryList > li > ul, #cateSwiper .respCategoryList > li > div[class*="category"], #cateSwiper .respCategoryList > li .subCategory {

background: #ffffff !important; background-color: #ffffff !important;

box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; z-index: 1 !important; 

}



/* [3] 검색창 영역 */

#layout_header .resp_top_search {

pointer-events: auto !important; position: absolute !important; margin: 0 !important; padding: 0 !important;

right: 270px !important; width: 160px !important; 

top: 50% !important; transform: translateY(-50%) !important;

margin-top: -20px !important; z-index: 99999 !important; 

}

#layout_header .resp_top_search input, #layout_header .resp_top_search .search_ver2_input_box {

width: 100% !important; max-width: 100% !important;

}

#layout_header .resp_top_search > a:not(.btn_search_submit),

#layout_header .resp_top_search > button,

#layout_header .resp_top_search .btn_search_m {

display: none !important;

}


/* 퍼스트몰 추천상품 팝업창 전역 하얀색 덮기 */

#layout_header .resp_top_search form ~ div, #layout_header .resp_top_search .search_ver2_input_box ~ div,

.search_suggest, .auto_word_layer, .res_search_list { background-color: #ffffff !important; z-index: 999999 !important; }

#layout_header .resp_top_search form ~ div *, #layout_header .resp_top_search .search_ver2_input_box ~ div *,

.search_suggest *, .auto_word_layer *, .res_search_list * { background-color: #ffffff !important; }


.search_suggest h2, .search_suggest h3, .search_suggest dt, .search_suggest .tit, .search_suggest .title,

.auto_word_layer h2, .auto_word_layer h3, .auto_word_layer dt, .auto_word_layer .tit, .auto_word_layer .title,

.res_search_list h2, .res_search_list h3, .res_search_list dt, .res_search_list .tit, .res_search_list .title {

margin: 0 !important; padding: 10px !important; background-color: #ffffff !important;

}



/* [4] 유틸리티 영역 */

#layout_header .util_wrap_menu2 { 

pointer-events: auto !important; position: absolute !important; padding: 0 !important;

right: 90px !important; margin-right: 0px !important; margin-left: 0 !important; margin-bottom: 0 !important; 

top: 50% !important; transform: translateY(-50%) !important;

margin-top: 10px !important; z-index: 9999 !important; 

}



/* [5] 삼단버튼(햄버거) 영역 */

#layout_header .resp_top_hamburger { 

pointer-events: auto !important; position: absolute !important; padding: 0 !important;

right: 50px !important; margin-right: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important;

top: 50% !important; transform: translateY(-50%) !important;

margin-top: -2px !important; z-index: 9999 !important; 

}

}



/* ★ [핵심 추가] 1300px 이하 모바일 전환 시, 상단 배너 여백 제거 및 100% 팽창 동기화 ★ */

@media (max-width: 1299px) {

/* 헤더가 모바일로 바뀌는 순간, 본문 최상단의 메인 배너도 눈치껏 양옆 빈 공간을 버리고 100% 꽉 채우도록 강제 설정합니다. */

#layout_body > .designBanner:nth-child(1),

#layout_body > .designBanner:nth-child(1) .resp_wrap,

#layout_body > .designBanner:nth-child(2),

#layout_body > .designBanner:nth-child(2) .resp_wrap,

#layout_body > div:first-of-type,

#layout_body > div:first-of-type .resp_wrap,

#layout_body > style + div,

#layout_body > style + div .resp_wrap {

padding-left: 0 !important;

padding-right: 0 !important;

margin-left: 0 !important;

margin-right: 0 !important;

width: 100% !important;

max-width: 100% !important;

}

}

</style>


/* ====================================================================== */

/* ★ 페이지 로딩 시 상단 헤더 가로 흔들림 절대 방어 (스크롤바 유지) ★ */

/* ====================================================================== */

html {

    overflow-y: scroll !important; 

}



/* 페이지 내용이 로딩 중일 때도 세로 길이를 모니터보다 1% 길게 강제 유지 */

body, #layout_wrap, #layout_body {

    min-height: 101vh !important; 

}