/*--------------------------------------------- 기본 그리드 시스템---------------------------------------------------------
▶ 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 #4a4545; 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 #4a4545; 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 #4a4545; 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 #4a4545; 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: #4a4545;}
.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: #4a4545; 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:#4a4545; 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:#4a4545;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:#4a4545; 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:#4a4545; 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: #4a4545; 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:#4a4545; 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:#4a4545;}
.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:#4a4545; 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:#4a4545; 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;}