@charset "utf-8";


/* 상품 추천 */
#ebric_pc_wrap .recommend-list {margin-top: 10px;position: relative; overflow: hidden;}
#ebric_pc_wrap .recommend-list .tit-wrap {background: #ff9134; color: #fff; padding: 10px}
#ebric_pc_wrap .recommend-list .tit-wrap.blue {background: #2f6ed5}
#ebric_pc_wrap .recommend-list .tit-wrap .recommend-tit {float: left;font-size: 1.4rem; }
#ebric_pc_wrap .recommend-list .tit-wrap .recommend-paging {float: right; font-size:1.3rem; }
#ebric_pc_wrap .recommend-list .tit-wrap .recommend-paging .now {font-weight: 600}
#ebric_pc_wrap .recommend-list .recommend-box-wrap {padding: 20px 33px;  background: #fff; overflow: hidden;border:1px solid #e5e5e5; border-top:0; }
#ebric_pc_wrap .recommend-list .arrow-wrap img {width: 33px; height: 33px;}
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-left,
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-right  {position: absolute; top: 145px; cursor: pointer;transition: opacity .3s ease; z-index: 3}
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-left:hover,
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-right:hover {opacity: 0.4}
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-left {left: 2px; transform: rotate(180deg);}
#ebric_pc_wrap .recommend-list .arrow-wrap .arrow-right {right: 3px}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box {float: left; width: calc(25% - 12px); margin-right: 15px; background-color: #fff;border: 1px solid #e5e5e5; cursor: pointer}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box:last-child {margin-right: 0;}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .img-box {position: relative; overflow: hidden; height: 175px; width: 100%; cursor: pointer; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box .img-block { height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; transition: background .45s ease; overflow: hidden; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box .img-block .label-layer { position: relative; width: 100%; height: 100%; }
#ebric_pc_wrap.recommend-list .recommend-box-wrap .img-box .img-block .label-layer .label { font-size: 11px; padding: 5px 8px; line-height: 12px; background: rgba(0,0,0,0.55); position: absolute; bottom: -100%; left: 0; width: 100%; color: #fff; font-weight: 300; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box:hover .img-block { background: rgba(0, 0, 0, 0.1); }
#ebric_pc_wrap.recommend-list .recommend-box-wrap .img-box:hover .img-block .label-layer .label { bottom: 0; transition: bottom .35s ease; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box .img-block .ico-layer .label { font-size: 1.2rem; color: #fff; background: #2f6ed5; display: inline-block; height: 25px; border-radius: 12.5px; line-height: 25px; padding: 0 10px; text-align: center; min-width: 50px; position: absolute; z-index: 3; bottom: 15px; right: 15px; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap  .img-box .img-block .label-layer .label { font-size: 11px; padding: 5px 8px;   line-height: 12px; background: rgba(0,0,0,0.55);position: absolute; bottom: -100%; left: 0;  width: 100%; color: #fff; font-weight: 300;}
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box:hover .img-block .label-layer .label {bottom: 0;transition: bottom .35s ease;}
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap .img-box .thumbnail img { position: absolute; top: 0; left: 0; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; max-height: 100%; max-width: 100%; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area {padding: 10px; position: relative}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area h2 {text-align: center; padding-bottom: 5px;font-size: 1.4rem;font-weight: 500; font-weight: 600}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area .more-btn {position: absolute;top: 37px;right: 10px}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area .more-btn i {cursor: pointer; color: #999; font-size: 1.4rem}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword {font-weight: 600; width: 100%; word-break: break-all; padding-right: 12px; height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; white-space: normal; word-wrap: break-word;  -webkit-line-clamp: 1; -webkit-box-orient: vertical;-ms-overflow-style: none; scrollbar-width: none; transition: height .2s ease}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword::-webkit-scrollbar {display: none}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area.on p.keyword {height: 58px; overflow-y: auto;text-overflow:initial;  -webkit-line-clamp:initial; }
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword.one {text-overflow: initial;white-space: normal; overflow: initial; display: block; height: auto;}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area.on .more-btn i {transform: rotate(180deg)}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span i {font-size: 0.7rem; color: #aaa; margin-right: 1px}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span a {font-weight: 300; color: #2f6de5; text-decoration: underline; margin-right: 7px; transition:opacity .2s ease }
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span a:hover {opacity: 0.5}
#ebric_pc_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span:first-child {padding-left: 3px}
#ebric_pc_wrap .hash-tag {color: #666; cursor: pointer; margin-right: 6px; display: inline-block; margin-bottom: 2px}
#ebric_pc_wrap .hash-tag:hover {color: #ff9134}
#ebric_pc_wrap .hash-tag.check {background: #ff9134; color: #fff; border-radius: 10px; padding: 0 4px}