@charset "utf-8";


/* 상품 추천 */
#ebric_mobile_wrap .recommend-list {margin:20px 0;position: relative; overflow: hidden; border-bottom: 1px solid #e5e5e5; width: 100%;}
#ebric_mobile_wrap .recommend-list .tit-wrap {background: #ff9134; color: #fff; padding: 10px; height: 40px;}
#ebric_mobile_wrap .recommend-list .tit-wrap .recommend-tit {float: left;font-size: 1.4rem; }
#ebric_mobile_wrap .recommend-list .tit-wrap .recommend-paging {float: right; font-size:1.3rem; }
#ebric_mobile_wrap .recommend-list .tit-wrap .recommend-paging .now {font-weight: 600}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap {padding: 15px 10px;  background: #fff; overflow: hidden; width: 100%}
#ebric_mobile_wrap .recommend-list .arrow-wrap img {width: 33px; height: 33px;}
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-left,
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-right  {position: absolute; top: 50%; cursor: pointer;transition: opacity .3s ease; z-index: 3}
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-left:hover,
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-right:hover {opacity: 0.4}
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-left {left: 4px; transform: rotate(180deg);}
#ebric_mobile_wrap .recommend-list .arrow-wrap .arrow-right {right: 4px}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box {width: 100%;  background-color: #fff; cursor: pointer}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .img-box {position: relative; overflow: hidden; height: 135px; width: 200px; cursor: pointer; float: left;}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box:last-child {margin-right: 0;}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .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_mobile_wrap .recommend-list .recommend-box-wrap > .box .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_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area {padding:30px 20px 0 5px;float: left; width: calc(100% - 200px); position: relative}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area h2 {font-size: 1.6rem;font-weight: 500; font-weight: 600; word-break:break-all;margin-bottom: 20px;}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area .more-btn {position: absolute;top: 74px;right: 51px}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area .more-btn i {cursor: pointer; color: #999; font-size: 1.4rem}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword {font-weight: 600; width: 100%; word-break: break-all; padding-right: 50px; 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_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword::-webkit-scrollbar {display: none}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area.on p.keyword {height: 50px; text-overflow:initial;  -webkit-line-clamp:initial; overflow-y: auto; }
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area.on .more-btn i {transform: rotate(180deg)}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span i {font-size: 0.7rem; color: #aaa; margin-right: 1px}
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span a {font-weight: 300; color: #2f6de5; text-decoration: underline; margin-right: 10px; }
#ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area p.keyword span:first-child {padding-left: 3px}
#ebric_mobile_wrap .hash-tag {color: #666; cursor: pointer; padding-right: 8px; display: inline-block; margin-bottom: 2px}
#ebric_mobile_wrap .hash-tag.check {background: #ff9134; color: #fff; border-radius: 10px; padding: 0 4px}

#ebric_mobile_wrap .txt-box .hash-wrap {margin-top: 10px; position:relative;padding-right: 25px; height: 22px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; white-space: normal; word-wrap: break-word;  -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: height .2s ease}
#ebric_mobile_wrap .txt-box .hash-wrap.on {height: 50px; overflow: initial; overflow-y: auto; word-break: break-all; white-space: normal; text-overflow: initial; display: block}
#ebric_mobile_wrap .txt-box .hash-wrap .more-btn {position: absolute;top: 1px;right: 7px;}
#ebric_mobile_wrap .txt-box .hash-wrap .more-btn i {font-size: 1.7rem; color: #aaa;}
#ebric_mobile_wrap .txt-box .hash-wrap.on .more-btn i {transform: rotate(180deg);}

@media(max-width: 432px) {
    #ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area .more-btn {top: 60px; right: 45px;}
    #ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .img-box {width: 150px;}
    #ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area {width: calc(100% - 150px); padding: 20px 20px 0 5px}
    #ebric_mobile_wrap .recommend-list .recommend-box-wrap > .box .txt-area h2 {font-size: 1.4rem}
}