@charset "utf-8";
/* 새글 스킨 (latest) */

.lat {position:relative;margin-bottom:20px;overflow:hidden;border: 1px solid #c6cacc;background:#fff}
.lat .lat_title {display:block;padding:0 20px;line-height:45px;font-size:1.083em;border-bottom:1px solid #e2e2e2;color:#253dbe;background:#fcfcfc}
.lat .lat_title a{color:#253dbe;display:inline-block;position:relative}
.lat .lat_title a:after{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#253dbe;content:''}
.lat ul{padding:15px 20px}
.lat li {position:relative;line-height:18px;padding:3px 0;padding-right:50px;padding-left:10px}
.lat li:before{position: absolute;top: 12px;left: 0px;width: 4px;height: 4px;background: #aaa;content: '';border-radius: 50%;}
.lat li a:hover{color:#a22121}
.lat li .fa-heart{color:#ff0000;}
.lat li .fa-lock{display: inline-block;line-height: 14px;width: 16px;font-size: 0.833em;color: #4f818c;background: #cbe3e8;text-align: center;border-radius: 2px;font-size: 12px;border:1px solid #a2c6ce}
.lat li .new_icon{display:inline-block;width: 16px;line-height:16px;font-size:0.833em;color:#ffff00;background:#6db142;text-align:center;border-radius: 2px;}
.lat li .hot_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius: 2px;}
.lat li .fa-caret-right{color:#bbb}
.lat .lt_date{position:absolute;top:3px;right:0;color:#888}
.lat  .empty_li{line-height:145px ;color:#666;text-align:center;padding:0;}
.lat  .empty_li:before{background:none;padding:0}

.lat .lt_cmt{background:#5c85c1;color:#fff; font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;
-webkit-box-shadow: inset 0 2px 5px  rgba(255,255,255,0.4);
-moz-box-shadow: inset 0 2px 5px  rgba(255,255,255,0.4);
box-shadow: inset 0 2px 5px  rgba(255,255,255,0.4);}
.lat .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.lat .lt_more:hover{color:#777}



/* 헬프사람넷 2.0 커스텀 */

#latest_realtime.lat {border: none; font-size: 0; overflow: visible; padding-bottom: 20px; background-color: transparent;}
#latest_realtime .lat_title {margin-bottom: 15px; line-height: 55px; padding: 0; border: none; background: transparent;}
#latest_realtime .lat_title a {color: #434343; font-size: 32px; font-weight: 700; letter-spacing: -2px; border: none; width: 100%; height: 100%;}
#latest_realtime .lat_title a:after {background-color: transparent; height: 0;}

#latest_realtime.lat .lt_more {color: #434343; font-size: 32px; font-weight: 700; margin-top: 4px;}

#latest_realtime .bo_list_card {position: relative; width: 470px; height: 292px; border-radius: 30px; box-shadow: 0px 24px 40px 3px rgba(0, 0, 0, 0.07); background-color: #fbfbfb; margin-bottom: 25px; display: inline-block; transition: 0.2s;}
#latest_realtime .bo_list_card:hover {box-shadow: 0px 24px 40px 3px rgba(0, 0, 0, 0.15);}
#latest_realtime .bo_list_card:nth-of-type(odd) {margin-right: 20px;}
#latest_realtime .bo_list_card > a {display: block; width: 100%; height: 100%; padding: 10px 25px 25px 25px;}
#latest_realtime .bo_list_card > a:hover {text-decoration: none;}
#latest_realtime .card-title {letter-spacing: -2px; font-size: 20px; line-height: 55px; font-weight: 400; color: #1e1e1e; width: 390px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#latest_realtime .card-title > span {width: 24px; height: 29px; display: inline-block; vertical-align: middle; background-image: url(./img/Q.png); background-size: cover; background-position: center;}
#latest_realtime .card-hashtag {width: 100%; float: left; margin-top: 3px; margin-bottom: 8px; font-size: 16px; color: #372b24;}
#latest_realtime .card-hashtag .card-date {float: right; color: #5f5f5f;}
#latest_realtime .card-text {font-size: 17px; color: #434343; height: 124px; overflow: hidden; width: 100%;}
#latest_realtime .card-bottom {margin-top: 17px;}
#latest_realtime .card-option {margin-right: 5px; color: white; float: left; font-size: 16px; font-weight: 600; width: fit-content; padding: 5px 15px 5px 15px; border-radius: 20px; position: relative; display: inline-block;}
#latest_realtime .card-option.pink {background-color: #f1446d;}
#latest_realtime .card-option.blue {background-color: #258de5;}
#latest_realtime .card-option.black {background-color: #434343;}
#latest_realtime .card-option.orange {background-color: #f39e45;}
#latest_realtime .card-option.orange .tooltiptext {display: none; width: max-content; transform: translateX(-50%); bottom: 100%; left: 50%; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 8px; position: absolute; z-index: 1; margin-bottom: 5px;}
#latest_realtime .card-menu-icon {position: absolute; top: 10px; right: 25px; width: 30px; height: 28px; background-image: url(./img/card-menu-icon.png); background-size: contain; background-position: center; background-repeat: no-repeat; margin-top: 12px; cursor: pointer;}
#latest_realtime .card-answer-button {position: absolute; right: 25px; bottom: 18px; display: block; font-weight: 700; font-size: 22px; color: #3a2c24; cursor: pointer; transition: .2s;}
#latest_realtime .card-answer-button > a {transition-duration: .2s}
#latest_realtime .card-answer-button > a:hover {text-decoration: none; color: #f39e45;}
#latest_realtime .card-menu {display: none; border-radius: 15px; cursor: default; box-shadow: 0px 13px 29.4px 2.6px rgba(0, 0, 0, 0.11); background-color: #f2f2f2; user-select: none; z-index: 1000; position: absolute; overflow: hidden; width: 104px; font-size: 15px; color: rgba(0, 0, 0, 0.87); padding: 16px 0; margin-top: 32px; animation-name: animatetop; animation-duration: 0.6s;}
#latest_realtime .bo_list_card:nth-of-type(even) .card-menu {margin-left: -70px;}
#latest_realtime .card-menu ul {padding: 0; list-style: none;}
#latest_realtime .card-menu li {padding: 0; min-height: 32px; line-height: 32px; cursor: pointer; text-align: center; font-weight: 300;}
#latest_realtime .card-menu li:before {background: transparent; width: 0;}
#latest_realtime .card-menu li:hover {background-color: #eeeeee;}
#latest_realtime .card-menu li.divider {margin: 10px 0; min-height: 1px; height: 1px; background-color: #eaeaea; cursor: default;}
#latest_realtime .card-menu li > a {display: block; width: 100%; height: 100%;}
#latest_realtime .card-menu li > a:hover {text-decoration: none; color: black;}
#latest_realtime .share-selects {margin: 0 auto; margin-top: 50px; width: 85%; height: 75px; display: flex; justify-content: space-between;}
#latest_realtime .share-icon {width: 40px; height: 40px; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer;}
#latest_realtime .share-icon.tw {background-image: url('img/tw.svg');}
#latest_realtime .share-icon.fb {background-image: url('img/fb.svg');}
#latest_realtime .share-icon.kt {background-image: url('img/kakao.jpg');}
#latest_realtime .share-icon.ks {background-image: url('img/kakaostory.png');}
#latest_realtime .share-icon.naver {background-image: url('img/naver.png');}
#latest_realtime .share-icon.band {background-image: url('img/band.png');}
#latest_realtime .share-icon.tumblr {background-image: url('img/tumblr.png');}
#latest_realtime .share-icon > a {display: block; width: 100%; height: 100%;}
.share-selects {margin: 0 auto; margin-top: 50px; width: 85%; height: 75px; display: flex; justify-content: space-between;}
.share-icon {width: 40px; height: 40px; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer;}
.share-icon.tw {background-image: url('img/tw.svg');}
.share-icon.fb {background-image: url('img/fb.svg');}
.share-icon.kt {background-image: url('img/kakao.jpg');}
.share-icon.ks {background-image: url('img/kakaostory.png');}
.share-icon.naver {background-image: url('img/naver.png');}
.share-icon.band {background-image: url('img/band.png');}
.share-icon.tumblr {background-image: url('img/tumblr.png');}
.share-icon > a {display: block; width: 100%; height: 100%;}

@-webkit-keyframes animatetop {
    from {top:-20px; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-20px; opacity:0}
    to {top:0; opacity:1}
}


/* 헬프사람넷 반응형 */

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

    #latest_realtime.lat {border-bottom: 3px solid black;}

    #latest_realtime .bo_list_card {width: 100%; height: 284px;}
    #latest_realtime .bo_list_card:nth-of-type(odd) {margin-right: 0;}
    #latest_realtime .card-title {width: calc(100% - 20px); line-height: 45px;}
    #latest_realtime .card-hashtag {font-size: 14px;}
    #latest_realtime .card-text {font-size: 16px; height: 97px;}
    #latest_realtime .card-bottom {margin-top: 12px;}
    #latest_realtime .card-option {font-size: 12px; padding: 5px 10px;}
    #latest_realtime .card-menu-icon {width: 20px; height: 18px; right: 20px; top: 12px;}
    #latest_realtime .bo_list_card .card-menu {margin-left: -70px;}
    
    .share-icon {width: 28px; height: 28px;}

}