/*--------------------------------------------- 기본 그리드 시스템---------------------------------------------------------
▶ grid-wrap > grid > grid-item 구조 / d1 = division 1 (1분할) / cbine2 = combine2 grid-item2개를 합치다.
▶ grid-item에 padding 값을 줄수있음 p1, p2, p3, p4, p5 등등
------------------------------------------------------------------------------------------------------------------------------*/
.grid-wrap { width: 1080px; height: auto; margin: 60px auto; }
.grid-wrap > h1 { font-size: 20px; font-weight: 600; }
.grid-wrap > h4 { font-size: 14px; margin: 20px 0; }

/*그리드 기본*/
.grid { display: inline-block; width: 100%; height: auto; }
.grid-item { overflow: hidden; position: relative; float: left; width: 100%; height: auto; min-height: 100px; box-sizing: border-box; }
.p1 { padding: 1%!important; }
.p2 { padding: 2%!important; }
.p3 { padding: 3%!important; }
.p4 { padding: 4%!important; }
.p5 { padding: 5%!important; }

.mt5 { margin-top: 5px!important; }
.mt8 { margin-top: 8px!important; }
.mt10 { margin-top: 10px!important; }
.mt12 { margin-top: 12px!important; }
.mt15 { margin-top: 15px!important; }
.mt16 { margin-top: 16px!important; }
.mt20 { margin-top: 20px!important; }
.mt24 { margin-top: 24px!important; }
.mt25 { margin-top: 25px!important; }
.mt32 { margin-top: 32px!important; }
.mt40 { margin-top: 40px!important; }
.mt60 { margin-top: 60px!important; }


/*그리드 1분할 (d1 안적어도 기본적으로는 100%)*/
.grid.d1 .grid-item { width: 100%; }

/*그리드 2분할*/
.grid.d2 .grid-item { width: 50%; }

/*그리드 3분할*/
.grid.d3 .grid-item { width: 33.3333%; }
.grid.d3 .grid-item.cbine2 { width: 66.6666%; }

/*그리드 4분할*/
.grid.d4 .grid-item { width: 25%; }
.grid.d4 .grid-item.cbine2 { width: 50%; }
.grid.d4 .grid-item.cbine3 { width: 75%; }

/*해당 요소 비우기*/
.empty { display: none!important; }

/*slick slider 기본옵션 수정*/

/*------------------------------------------------- 타이틀 시작 ---------------------------------------------------------
▶ grid-title > h4 > a / 추가클래스 : line(제목라인생성), list-more(더보기), search-type(검색결과페이지에만사용)
------------------------------------------------------------------------------------------------------------------------------*/

.grid-title { display: inline-block; width: 100%; height: auto; padding-bottom: 24px; }
.grid-title h4 { display: block; float: left; font-size: 24px; font-weight: 500; line-height: 24px; }
.grid-title a { display: none; }
.grid-title.line { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; }
.grid-title.list-more a { display: block; float: right; line-height: 24px; color: #b6b6b6; font-size: 12px; text-decoration: underline; }
.grid-title.list-more a:hover { color: #868686; }
.grid-title.search-type { padding-bottom: 0; }
.grid-title.line.search-type { padding-bottom: 12px; margin-bottom: 0; }

.grid-filter { display: inline-block; width: 100%; height: auto; padding-bottom: 24px; }
.grid-filter .list-type { float: right; display: inline-block; }
.grid-filter .list-type .gallery { border: 1px solid #e6e6e6; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_n.png) center center no-repeat; background-size: 24px; transition: all 0.5s; }
.grid-filter .list-type .gallery:hover { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_s.png) center center no-repeat; background-size: 24px; }
.grid-filter .list-type .list { border: 1px solid #e6e6e6; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_n.png) center center no-repeat; background-size: 24px; transition: all 0.5s; }
.grid-filter .list-type .list:hover { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_s.png) center center no-repeat; background-size: 24px; }
.grid-filter .list-type .gallery.on { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_s.png) center center no-repeat; background-size: 24px; }
.grid-filter .list-type .list.on { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_s.png) center center no-repeat; background-size: 24px; }

/*셀렉트박스*/
.select { border: 1px solid #e6e6e6; height: 34px; padding: 4px 12px; display: block; width: 120px; height: 100%; position: relative; }
.select .select-slider { width: 100%; cursor: pointer; display: inline-block; position: relative; background: transparent; }
.select .select-slider span { font-size: 13px; color: #161616; }
.select .select-slider i { position: absolute; top: 50%; margin-top:-10px; right:-4px; width: 20px; height: 20px; background: url(/image/web/common/icon_arrow_select_down.png) center center no-repeat; background-size: contain; }
.select .select-slider.on i { background: url(/image/web/common/icon_arrow_select_up.png) center center no-repeat; background-size: contain; }
.select #select-type-01 { display: none; padding: 0 16px; }
.select .actual-option { position: absolute; top: calc(100% - 1px); left: 0; display: none; width: 100%; max-height: 120px; box-sizing: border-box; border: 1px solid #e6e6e6; font-size: 13px; overflow-y: scroll; background: #fff; z-index: 10; cursor: pointer; }
.select .actual-option li { position: relative; float: left; width: 100%; clear: both; padding: 8px 16px; transition: all 0.5s; color: #868686; }
.select .actual-option li:hover { color: #161616; background: #f6f6f6; }
.select label { width: 100%; }
.select label.on ~ .actual-option { display: block; }

/*------------------------------------------------- 상품 타입 --------------------------------------------------------------
▶ product > product-item > img - info - title - price
무료배송/배송료 표시는 .delivery태그에 .free 또는 .charged 를 넣어 구분할 수있다.
------------------------------------------------------------------------------------------------------------------------------*/

/*상품 1개(분할)*/
.grid .grid-item .product.d1 .product-item { width: 100%; }

/*상품 2개(분할)*/
.grid .grid-item .product.d2 .product-item { width: 50%; }

/*상품 3개(분할)*/
.grid .grid-item .product.d3 .product-item { width: 33.3333%; }
.grid .grid-item .product.d3 .product-item.cbine2 { width: 66.6666%; }

/*상품 4개(분할)*/
.grid .grid-item .product.d4 .product-item { width: 25%; }
.grid .grid-item .product.d4 .product-item.cbine2 { width: 50%; }
.grid .grid-item .product.d4 .product-item.cbine3 { width: 75%; }

/*상품 5개(분할)*/
.grid .grid-item .product.d5 .product-item { width: 20%; }
.grid .grid-item .product.d5 .product-item.cbine2 { width: 40%; }
.grid .grid-item .product.d5 .product-item.cbine3 { width: 60%; }
.grid .grid-item .product.d5 .product-item.cbine4 { width: 80%; }

.grid .grid-item .product.d5 .product-item.p1 { padding: 1%; }
.grid .grid-item .product.d5 .product-item.p2 { padding: 2%; }
.grid .grid-item .product.d5 .product-item.p3 { padding: 3%; }
.grid .grid-item .product.d5 .product-item.p4 { padding: 4%; }
.grid .grid-item .product.d5 .product-item.p5 { padding: 5%; }

/*상품 기본*/
.grid .grid-item .product { width: 100%; height: auto; display: inline-block; }
.grid .grid-item .product .product-item { display: inline-block; width: 100%; height: auto; position: relative; float: left; }
.grid .grid-item .product .product-item .img { display: block; width: 100%; height: 100%; }
.grid .grid-item .product .product-item .img a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; }
.grid .grid-item .product .product-item .img a img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.grid .grid-item .product .product-item .img a:hover img { transform: scale(1.05); }
.grid .grid-item .product .product-item .info { display: block; width: 100%; height: auto; position: relative; }
.grid .grid-item .product .product-item .info .ect { display: block; width: 100%; height: auto; margin-top: 8px; }
.grid .grid-item .product .product-item .info .ect ul { display: inline-block; width: 100%; height: auto; }
.grid .grid-item .product .product-item .info .ect ul li.brand { float: left; display: block; font-size: 12px; line-height: 24px; color: #161616; font-weight: 500; }
.grid .grid-item .product .product-item .info .ect ul li.like { float: right; display: block; width: 24px; height: 24px; }
.grid .grid-item .product .product-item .info .ect ul li.like a { display: block; width: 100%; height: 100%; transition: all 0.5s; background: url(/image/web/common/icon_like_n.png) center center no-repeat; background-size: contain; text-indent:-9999px; transform: scale(1.0); }
.grid .grid-item .product .product-item .info .ect ul li.like a:hover { transform: scale(1.08); background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product .product-item .info .ect ul li.like a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product .product-item .info .ect ul li.shop { float: right; width: auto; height: 24px; display: block; }
.grid .grid-item .product .product-item .info .ect ul li.shop a { display: block; width: auto; height: 24px; }
.grid .grid-item .product .product-item .info .ect ul li.shop a:after { content: ''; display: block; float: right; width: 24px; height: 24px; background: url(/image/web/common/icon_shop.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product .product-item .info .ect ul li.shop a span.name { float: left; display: block; font-size: 12px; color: #b6b6b6; line-height: 24px; margin-right: 2px; }
.grid .grid-item .product .product-item .info .ect ul li.shop a:hover .name { color: #868686; }
.grid .grid-item .product .product-item .info .title { display: block; width: 100%; height: auto; }
.grid .grid-item .product .product-item .info .title a { display: block; font-size: 14px; color: #161616; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; }
.grid .grid-item .product .product-item .info .title a:hover { text-decoration: underline; }
.grid .grid-item .product .product-item .info .title p.detail { display: block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; }
.grid .grid-item .product .product-item .info .price { display: block; width: 100%; height: auto; margin-top: 8px; }
.grid .grid-item .product .product-item .info .price ul { display: inline-block; width: 100%; height: auto; }
.grid .grid-item .product .product-item .info .price ul li { display: block; }
.grid .grid-item .product .product-item .info .price ul li.discount { float: left; font-size: 18px; font-weight: 800; color: #e80032; font-family: 'Lato'; margin-right: 12px; }
.grid .grid-item .product .product-item .info .price ul li.current-price { float: left; font-size: 18px; font-weight: 800; color: #161616; font-family: 'Lato'; }
.grid .grid-item .product .product-item .info .price ul li.origin-price { float: left; font-size: 12px; color: #b6b6b6; font-family: 'Lato'; text-decoration: line-through; margin-left: 6px; margin-top: 5px; }
.grid .grid-item .product .product-item .info .price ul li.delivery { float: right; display: block; }
.grid .grid-item .product .product-item .info .price ul li.delivery span { display: none; }
.grid .grid-item .product .product-item .info .price ul li.delivery .charged { display: inline-block; position: relative; color: #758baf; font-size: 10px; padding: 2px 6px 2px 22px; border: 1px solid #758baf; }
.grid .grid-item .product .product-item .info .price ul li.delivery .charged:before { left: 2px; top: 50%; margin-top:-8px; position: absolute; content: ''; width: 16px; height: 16px; display: inline-block; margin-right: 4px; background: url(/image/web/common/icon_delivery.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product .product-item .info .price ul li.delivery .free { display: inline-block; position: relative; color: #758baf; font-size: 10px; padding: 2px 6px; border: 1px solid #758baf; }
.grid .grid-item .product .product-item .info .addition { display: none; }

/*------------------------------------------------- 상품 타입 A, B, C, D ------------------------------------------------------
▶ product 태그에 type-a / type-b / type-c / type-d 클래스명을 넣어주면 된다. ex) product type-a
------------------------------------------------------------------------------------------------------------------------------*/

.grid .grid-item .product.type-b .product-item .info .title p.detail { display: none; }
.grid .grid-item .product.type-b .product-item .info .price ul li.discount { display: none; }
.grid .grid-item .product.type-b .product-item .info .price ul li.origin-price { display: none; }
.grid .grid-item .product.type-c .product-item .info .title p.detail { display: none; }
.grid .grid-item .product.type-c .product-item .info .price ul li.discount { display: none; }
.grid .grid-item .product.type-c .product-item .info .price ul li.origin-price { display: none; }
.grid .grid-item .product.type-c .product-item .info .ect ul li.shop a span.name { display: none; }


.grid .grid-item .product.type-d .product-item .info .title p.detail { display: none; }
.grid .grid-item .product.type-d .product-item .info .price ul li.discount { display: none; }
.grid .grid-item .product.type-d .product-item .info .price ul li.origin-price { display: none; }
.grid .grid-item .product.type-d .product-item .info .ect ul li.shop a span.name { display: none; }
.grid .grid-item .product.list { border-top: 1px solid #e6e6e6; }
.grid .grid-item .product.list .product-item { padding: 16px 0; display: inline-block; width: 100%; height: auto; position: relative; border-bottom: 1px solid #e6e6e6; }
.grid .grid-item .product.list .product-item .img { float: left; display: block; width: 20%; height: 100%; }
.grid .grid-item .product.list .product-item .info { float: left; display: block; width: calc(80% - 16px); height: 100%; position: relative; margin-left: 16px; }
.grid .grid-item .product.list .product-item .info .price { margin-top: 8px; display: block; width: 100%; height: auto; }
.grid .grid-item .product.list .product-item .info .price ul li.delivery { margin-top: 8px; width: 100%; }
.grid .grid-item .product.list .product-item .info .addition { position: absolute; right: 0; bottom: 2px; display: block; }
.grid .grid-item .product.list .product-item .info .addition ul { display: inline-block; }
.grid .grid-item .product.list .product-item .info .addition ul li { float: left; display: block; }
.grid .grid-item .product.list .product-item .info .addition ul li span {  float: left; font-size: 12px; color: #868686; margin-left: 8px; }
.grid .grid-item .product.list .product-item .info .addition ul li.score span:before { margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_score.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.list .product-item .info .addition ul li.review span:before {  margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_review.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.list .product-item .info .addition ul li.like span:before {  margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_like.png) center center no-repeat; background-size: contain; }


/*product type별 min-width*/
.grid .grid-item .product.type-a .product-item { min-width: 240px; }
.grid .grid-item .product.type-b .product-item { min-width: 200px; }
.grid .grid-item .product.type-c .product-item { min-width: 160px; }
.grid .grid-item .product.type-d.gallery .product-item { min-width: 160px; }
.grid .grid-item .product.type-d.list .product-item { min-width: 600px; }

/*------------------------------------------------------- 상품 슬라이드 ------------------------------------------------------
▶ product 태그에 slider 태그 추가시 슬라이드 배너 생성
▶ product 태그에 add-dot, add-pager, add-pager-hover 추가시 각각 하단에 슬라이드 닷, 슬라이드 페이저 생성
add-pager는 보임, add-pager-hover는 hover시만 보임
------------------------------------------------------------------------------------------------------------------------------*/

.grid .grid-item .product.slider .slider-pager { display: none; width: 100%; height: 44px; position: absolute; left: 0; top: 50%; margin-top:-22px; }
.grid .grid-item .product.slider .slider-pager .btn-prev { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; left: 0px; width: 44px; height: 44px; display: block; opacity: 0; }
.grid .grid-item .product.slider .slider-pager .btn-prev span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.slider .slider-pager .btn-next  { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; right: 0px; width: 44px; height: 44px; display: block; transition: all 0.5s; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; opacity: 0; background-size: contain; }
.grid .grid-item .product.slider .slider-pager .btn-next span {  width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.slider:hover .slider-pager .btn-prev { opacity: 1; }
.grid .grid-item .product.slider:hover .slider-pager .btn-next { opacity: 1; }
.grid .grid-item .product.slider:hover .slider-pager .btn-prev:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.slider:hover .slider-pager .btn-next:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .product.slider .slick-dots { display: none!important; position: absolute; bottom: 16px; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.grid .grid-item .product.slider .slick-dots li { position: relative; transition: all 0.5s; display: inline-block; width: 10px; height: 10px; margin: 0 5px; padding: 0; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; }
.grid .grid-item .product.slider .slick-dots li.slick-active { background: #e80032; }
.grid .grid-item .product.slider .slick-dots li:hover { background: #e80032; }
.grid .grid-item .product.slider .slick-dotted.slick-slider { margin-bottom: 0; }

.grid .grid-item .product.slider.add-dot .slick-dots { display: block!important; }
.grid .grid-item .product.slider.add-pager .slider-pager { display: block!important; }
.grid .grid-item .product.slider.add-pager .slider-pager .btn-prev { opacity: 1; }
.grid .grid-item .product.slider.add-pager .slider-pager .btn-next { opacity: 1; }
.grid .grid-item .product.slider.add-pager-hover .slider-pager { display: block!important; }
.grid .grid-item .product.slider.add-pager-hover .slider-pager .btn-prev { left:-20px; }
.grid .grid-item .product.slider.add-pager-hover .slider-pager .btn-next { right:-20px; }
.grid .grid-item .product.slider.add-pager-hover:hover .slider-pager .btn-prev { left: 0; }
.grid .grid-item .product.slider.add-pager-hover:hover .slider-pager .btn-next { right: 0; }


/*------------------------------------------------------- 기본 배너 ------------------------------------------------------
▶ banner-item 태그에 img-type-a, img-type-b, img-type-c 각각 1: 1, 4: 3, 16: 9 비율의 이미지 생성
▶ banner-item 태그에 img-contain, img-cover 사용시 각각 이미지 크기 조절됨
------------------------------------------------------------------------------------------------------------------------------*/
.grid .grid-item .banner { position: relative; width: 100%; height: auto; display: block; }
.grid .grid-item .banner .banner-item { display: inline-block; width: 100%; height: auto; position: relative; }
.grid .grid-item .banner .banner-item .img { display: block; width: 100%; height: 100%; }
.grid .grid-item .banner .banner-item .img a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; }
.grid .grid-item .banner .banner-item .img a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.grid .grid-item .banner .banner-item.img-type-a .img a { }
.grid .grid-item .banner .banner-item.img-type-b .img a { padding-bottom: 75%; }
.grid .grid-item .banner .banner-item.img-type-c .img a { padding-bottom: 56.25%}
/*object-fit 태그는 ie에서 지원하지 않는 태그임.*/
.grid .grid-item .banner .banner-item.img-contain .img a img { object-fit: contain; }
.grid .grid-item .banner .banner-item.img-cover .img a img { object-fit: cover; }

/*------------------------------------------------------- 슬라이드 배너 ------------------------------------------------------
▶ banner 태그에 slider 태그 추가시 슬라이드 배너 생성
▶ grid-item 태그에 add-dot, add-pager, add-pager-hover 추가시 각각 하단에 슬라이드 닷, 슬라이드 페이저 생성
add-pager는 보임, add-pager-hover는 hover시만 보임
------------------------------------------------------------------------------------------------------------------------------*/
.grid .grid-item .banner.slider .slider-pager { display: none; width: 100%; height: 44px; position: absolute; left: 0; top: 50%; margin-top:-22px; }
.grid .grid-item .banner.slider .slider-pager .btn-prev { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; left: 0px; width: 44px; height: 44px; display: block; opacity: 0; }
.grid .grid-item .banner.slider .slider-pager .btn-prev span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .banner.slider .slider-pager .btn-next  { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; right: 0px; width: 44px; height: 44px; display: block; transition: all 0.5s; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; opacity: 0; background-size: contain; }
.grid .grid-item .banner.slider .slider-pager .btn-next span {  width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .banner.slider:hover .slider-pager .btn-prev { opacity: 1; }
.grid .grid-item .banner.slider:hover .slider-pager .btn-next { opacity: 1; }
.grid .grid-item .banner.slider:hover .slider-pager .btn-prev:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .banner.slider:hover .slider-pager .btn-next:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; }
.grid .grid-item .banner.slider .slick-dots { display: none!important; position: absolute; bottom: 16px; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.grid .grid-item .banner.slider .slick-dots li { position: relative; transition: all 0.5s; display: inline-block; width: 10px; height: 10px; margin: 0 5px; padding: 0; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; }
.grid .grid-item .banner.slider .slick-dots li.slick-active { background: #e80032; }
.grid .grid-item .banner.slider .slick-dots li:hover { background: #e80032; }
.grid .grid-item .banner.slider .slick-dotted.slick-slider { margin-bottom: 0; }

.grid .grid-item .banner.slider.add-dot .slick-dots { display: block!important; }
.grid .grid-item .banner.slider.add-pager .slider-pager { display: block!important; }
.grid .grid-item .banner.slider.add-pager .slider-pager .btn-prev { opacity: 1; }
.grid .grid-item .banner.slider.add-pager .slider-pager .btn-next { opacity: 1; }
.grid .grid-item .banner.slider.add-pager-hover .slider-pager { display: block!important; }
.grid .grid-item .banner.slider.add-pager-hover .slider-pager .btn-prev { left:-20px; }
.grid .grid-item .banner.slider.add-pager-hover .slider-pager .btn-next { right:-20px; }
.grid .grid-item .banner.slider.add-pager-hover:hover .slider-pager .btn-prev { left: 0; }
.grid .grid-item .banner.slider.add-pager-hover:hover .slider-pager .btn-next { right: 0; }

/*------------------------------------------------------- 최신 게시물 ------------------------------------------------------
▶ latest-board > ul > li > a 최신 게시물의 경우 grid-title의 font-size가 작아보여야하는경우가 많기 때문에
grid-title에 latest 태그를 넣어 font-size를 줄인다.
▶ latest-board에 bullet-type-a, bullet-type-b, bullet-type-c 를 넣어 해당 list 항목에 bullet을 추가할수있다.
------------------------------------------------------------------------------------------------------------------------------*/
.grid-title.latest { padding-bottom: 12px; }
.grid-title.latest h4 { font-size: 16px; font-weight: 500; line-height: 16px; }

.grid .grid-item .latest-board { width: 100%; height: auto; display: block; }

.grid .grid-item .latest-board ul { width: 100%; display: inline-block; }
.grid .grid-item .latest-board ul li { width: 100%; display: inline-block; text-align: left; }
.grid .grid-item .latest-board ul li a { width: 95%; display: inline-block; font-size: 13px; color: #868686; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.grid .grid-item .latest-board ul li a:hover { text-decoration: underline; }

.grid .grid-item .latest-board.bullet-type-a ul li a:before { content: ''; display: block; float: left; width: 3px; height: 3px; background: #e80032; margin-right: 12px; margin-top: 10px; }
.grid .grid-item .latest-board.bullet-type-b ul li a:before { content: ''; display: block; float: left; width: 3px; height: 3px; background: #e80032; border-radius: 50%; margin-right: 12px; margin-top: 10px; }
.grid .grid-item .latest-board.bullet-type-c ul li a:before { content: '-'; display: inline-block; margin-right: 8px; color: b6b6b6; font-size: 13px; }


/*------------------------------------------------------- 검색 및 검색결과 ------------------------------------------------------
▶ search > search-result , 검색결과의 경우 상단 title의 padding-bottom을 지워줘야하므로 title에 search-type을 붙여 날려준다.
▶ search > search-again
------------------------------------------------------------------------------------------------------------------------------*/
.grid .grid-item .search { width: 100%; height: auto; display: block; }
.grid .grid-item .search .search-result { width: 100%; height: auto; padding: 40px 0; display: block; text-align: center; }
.grid .grid-item .search .search-result p { display: inline-block; text-align: center; font-size: 13px; color: #868686; font-weight: 400; }
.grid .grid-item .search .search-result p strong { color: #161616; font-weight: 500; margin-right: 2px; }

.grid .grid-item .search .search-again { width: 100%; height: auto; display: block; height: 110px; }
.grid .grid-item .search .search-again form { width: 100%; height: 100%; padding: 0 24px; background: #f9f9f9; }
.grid .grid-item .search .search-again form ul { width: 100%; height: auto; display: inline-block; }
.grid .grid-item .search .search-again form ul li { display: inline-block; width: 100%; height: auto; font-size: 12px; color: #868686; }
.grid .grid-item .search .search-again form ul li label { display: block; font-size: 12px; color: #161616; margin: 24px 0 5px; }
.grid .grid-item .search .search-again form .align-left { width: 45%; float: left; margin-right: 10%; }
.grid .grid-item .search .search-again form .align-left input { float: left; width: 48%; height: 36px; }
.grid .grid-item .search .search-again form .align-left span { display: block; width: 4%; float: left; text-align: center; line-height: 34px; }
.grid .grid-item .search .search-again form .align-right { width: 45%; float: right; }
.grid .grid-item .search .search-again form .align-right input { width: 70%; float: left; }
.grid .grid-item .search .search-again form .align-right .btn-small { float: left; width: calc(30% - 5px); margin-left: 5px; }

/*------------------------------------------------------- 하위 카테고리/브랜드 ------------------------------------------------------
▶ category / 카테고리의 li 태그의 width는 기본적으로 5분할으로 되어있으며 d5, d6, d8 까지 추가태그로 설정되어있음.
------------------------------------------------------------------------------------------------------------------------------*/

.grid .grid-item .category { width: 100%; height: auto; display: block; border: 1px solid #e6e6e6; padding: 24px; font-size: 12px; }
.grid .grid-item .category p.category-title { font-size: 12px; color: #161616; margin-bottom: 16px; }
.grid .grid-item .category ul { width: 100%; height: auto; display: inline-block; }
.grid .grid-item .category ul li { float: left; width: 20%; }
.grid .grid-item .category ul li a { width: 100%; padding: 4px 8px; height: auto; transition: all 0.5s; border-radius: 4px; display: inline-block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.grid .grid-item .category ul li a:hover { background: #f9f9f9; color: #161616; }
.grid .grid-item .category.d5 ul li { }
.grid .grid-item .category.d6 ul li { width: 16.6666%}
.grid .grid-item .category.d8 ul li { width: 12.5%; }

/*------------------------------------------------------- 실시간 인기검색어 ------------------------------------------------------
▶
------------------------------------------------------------------------------------------------------------------------------*/
.grid .grid-item .keyword { display: inline-block; width: 100%; height: auto; border: 1px solid #e6e6e6; padding: 24px; box-sizing: border-box; }
.grid .grid-item .keyword p.keyword-title { font-size: 12px; color: #161616; margin-bottom: 16px; }
.grid .grid-item .keyword ul { width: 100%; height: auto; }
.grid .grid-item .keyword ul li { width: 100%; display: inline-block; height: auto; margin-bottom: 8px; }
.grid .grid-item .keyword ul li a { width: 100%; display: block; height: auto; }
.grid .grid-item .keyword ul li a em { display: block; width: 16px; height: 16px; text-align: center; line-height: 16px; float: left; font-size: 10px; font-family: 'Lato'; font-weight: 700; color: #fff; background: #d6d6d6; }
.grid .grid-item .keyword ul li.on a em { background: #e80032; }
.grid .grid-item .keyword ul li a span { display: block; float: left; font-size: 12px; color: #868686; margin-left: 12px; line-height: 16px; width: 75%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.grid .grid-item .keyword ul li a span:hover { text-decoration: underline; }
.grid .grid-item .keyword ul li.on a span { color: #161616; font-weight: 500; }
.grid .grid-item .keyword ul li a strong { display: block; float: right; font-size: 12px; font-family: 'Lato'; font-weight: 700; color: #868686; }
.grid .grid-item .keyword ul li a strong.keyword-up { color: #e80032; }
.grid .grid-item .keyword ul li a strong.keyword-up:before { width: 10px; height: 10px; content: ''; display: block; float: left; background: url(/image/web/common/icon_arrow_keyword_up.png) center center no-repeat; background-size: contain; margin: 3px 3px 0 0; }
.grid .grid-item .keyword ul li a strong.keyword-down { color: #b6b6b6; }
.grid .grid-item .keyword ul li a strong.keyword-down:before { width: 10px; height: 10px; content: ''; display: block; float: left; background: url(/image/web/common/icon_arrow_keyword_down.png) center center no-repeat; background-size: contain; margin: 3px 3px 0 0; }