@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:0;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.liveTop {display:flex;align-items:center;margin-bottom:60px;}
.liveTopLeft {flex:1;gap:14px;display:flex;align-items:center;}
.liveTitle {display:flex;align-items:center;font-size:20px;font-weight:700;}
.liveTitle > img {width:25px;margin-right:8px;}
.liveTitle .liveCount {margin-left:3px;}
.liveTabs {margin-left:32px;display:flex;gap:8px;flex-wrap:wrap;}
.liveTabs .tabBtn {font-size:16px;display:inline-flex;padding:5px 15px; border-radius:100px;text-align:center;align-items:center;background-color:#555;color:#fff;}
.liveTabs .tabBtn.active:before {content:'';width:7px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);display:inline-block;margin-right:6px;margin-top:-3px;}
.liveTabs .tabBtn.red {background-color: #ff0000;}
.liveTabs .tabBtn.blue {background-color: #09a1ff;}
.liveTabs .tabBtn.purple {background-color: #9e6bf5;}
.liveSearch {display:flex;align-items:center;width: 260px;position:relative;}
.liveSearch > img {height:22px;flex:none;}
.liveSearch:before {content:'';width:22px;height:22px;display:inline-block;position:absolute;left:10px;background:url(/img/search_icon.png) no-repeat center/contain;top:50%;transform:translateY(-50%);}
.liveSearch .searchInput {height:100%;padding:0 11px 0 40px;height:35px;border:1px solid #e3e3e3;background:#f7f7f7;border-radius: 100px;}

.liveList {display:grid;grid-template-columns: repeat(3, 1fr);gap:42px 25px;padding-bottom:20px;}
.liveItem {min-width:0;}
.liveItem .liveThumb {width:100%;padding-bottom:55%;height:0;position:relative;overflow:hidden;border-radius:4px;margin-bottom:10px;}
.liveItem .liveThumb img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.liveItem .liveCon {display:flex;align-items:start;padding:0 6px;}
.liveItem .liveCon .profile {width:52px;height:52px;position:relative;overflow:hidden;border-radius:100px;margin-right:14px;flex-shrink:0;}
.liveItem .liveCon .profile img {width:100%;height:100%;object-fit:cover;}
.liveItem .liveCon .info {width: 100%;flex: auto;min-width: 0;word-break: break-word;}
.liveItem .title {font-size:16px;}
.liveItem .util {margin-bottom:7px;font-size:16px;}
.liveItem .util .viewer {color:#838282;margin-left:4px;}
.liveItem .util .viewer img {vertical-align:-3px;}
.liveItem .util .viewer:before {content:'•';margin-right:4px;}
.liveItem .util .live {color:#838282;margin-left:4px;}
.liveItem .util .live:before {content:'•';margin-right:4px;}
.liveItem .util .live img {vertical-align:-3px;}
.liveItem .categoryBox {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.liveItem .category {font-size:16px;display:inline-flex;padding:5px 15px; border-radius:100px;text-align:center;align-items:center;background-color:#555;color:#fff;}
.liveItem .category.red {background-color: #ff0000;}
.liveItem .category.blue {background-color: #09a1ff;}
.liveItem .category.purple {background-color: #9e6bf5;}
.liveItem .category.green {background-color: #4fb053;}

@media all and (max-width:1024px){
    .liveContainer {padding:16px 16px;}
    .liveTop {display:block;margin-bottom:40px;}
    .liveTopLeft {display:block;}
    .liveTitle {margin-bottom:16px;}
    .liveTabs {margin-left:0;margin-bottom: 12px;}
    .liveList {grid-template-columns:repeat(2, 1fr);gap:44px;}
}

@media all and (max-width:520px){
    .liveList {grid-template-columns:repeat(1, 1fr);gap:44px;}
}