@charset "utf-8";

/* 내용관리 기본 */
#ctt {margin:10px 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}

.timelineContainer {max-width:720px;margin:0 auto;padding-bottom:40px;}
.filter {margin:50px 0;position:relative;}
.filter .filterLabel {display:flex;align-items:center;height:56px;border:1px solid #d9d9d9;border-radius:6px;background-color:#fff;padding:0 20px;font-size:18px;cursor:pointer;}
.filter .filterLabel .filterLabelText {flex:1;padding:0 10px;font-weight:500;}
.filter .filterListWrap {position:absolute;top:100%;left:0;width:100%;padding-top:8px;opacity:0;z-index:10;transition:opacity .3s ease;}
.filter.on .filterListWrap {opacity:1;}
.filter.on .filterList {max-height:310px;overflow: auto;}
.filter .filterList {border: 1px solid #d9d9d9;border-radius: 6px;background-color:#fff;overflow:hidden;max-height:0;transition:max-height .3s ease;}
.filter .filterList .filterItem {padding:18px 20px;font-size:18px;cursor:pointer;}
.filter .filterList .filterItem:hover {background-color:#f8f8f8;}
.filter .filterList .filterItem.selected {background-color:#d9d9d9;}
.timeline {grid-template-columns: min-content auto ;display: grid;grid-auto-flow: dense;position: relative;row-gap: 24px;height: 100%;}
.tlItem {display:contents;}
.tlItem .tlCon {border:1px solid #d9d9d9;border-radius:10px;margin-left:24px;line-height:1.6;min-width:0;}
.tlItem .tlHead {padding:24px 24px 16px;display:flex;align-items:center;font-size:16px;font-weight:600;}
.tlItem .tlHead .update {width:19px;margin-right:6px;flex-shrink:0;}
.tlItem .tlHead .dday {color:#fa0030;font-weight:700;margin-left:10px;}
.tlItem .tlHead .noti {margin-left:auto;display:inline-block;width:22px;height:22px;font-size:0;text-indent:-9999px;overflow:hidden;background:url(/img/noti.png) no-repeat center/ 21px auto;}
.tlItem .tlHead .noti.on {background-image:url(/img/noti_on.png);}
.tlItem .tlTitle {padding:0 24px 24px 24px;color:#fa0030;font-size:24px;font-weight:700;position:relative;word-break:break-all;}
.tlItem .tlToggle {position:absolute;right:24px;top:10px;background-color:transparent;font-size:22px;}
.tlItem .tlToggle.on i {transform:rotate(180deg);}
.tlItem .tlText {padding:0 24px 24px 24px;display:none;}
.tlItem .tlText img {display:block;margin:14px auto;max-width:100%;}
.tlItem .tlText .t1 {display:block;text-align:center;color:#ae4fcf;font-size:24px;font-weight:700;margin-bottom:7px;}
.tlItem .tlText .t2 {display:block;text-align:center;font-weight:500;font-size:18px;}
.tlItem .tlLine {position: relative;
    display: flex;
    align-items: center;
justify-content:center;height: 100%;
    flex-direction: column;}
.tlItem .tlProfile {width:60px;height:60px;border-radius:100px;display:block;background:#cecece;border:5px solid #cecece;z-index:1;position:relative;overflow:hidden;}
.tlItem .tlProfile img {width:100%;height:100%;object-fit:cover;display:block;}
.tlItem .tlLineBefore {height: calc(50% + 12px);width: 5px;top: -12px;background: #f4f4f4;position: absolute;}
.tlItem .tlLineAfter {height: calc(50% + 12px);width: 5px;bottom: -12px;background: #f4f4f4;position: absolute;}
.tlItem.blur .tlCon {opacity:.6;}
.tlItem.blur .tlTitle {color:#777;}
.tlItem:first-child .tlLineBefore {display:none;}
.tlItem:last-child .tlLineAfter {display:none;}

@media all and (max-width:1024px){
    .timelineContainer {padding:0 16px 24px;}
    .filter {margin:30px 0;}
    .filter .filterLabel {height:44px;padding:0 15px;font-size:16px;}
    .filter .filterLabel .filterLabelText {font-size:14px;}
    .filter .filterList .filterItem {font-size:14px;padding:11px 15px;}
    .tlItem .tlCon {margin-left:8px;line-height:1.4;}
    .tlItem .tlHead {font-size:11px;padding:10px 40px 4px 12px;position:relative;}
    .tlItem .tlHead .update {margin-right:2px;width:15px;}
    .tlItem .tlHead .dday {margin-left:5px;white-space:nowrap;}
    .tlItem .tlHead .noti {position:absolute;right:14px;width:18px;height:20px;background-size:18px auto;margin-top:-2px;}
    .tlItem .tlToggle {top:0;right:10px;}
    .tlItem .tlTitle {font-size:16px;padding:0 43px 10px 12px;}
    .tlItem .tlText {font-size:14px;padding:0 12px 10px 12px;}
    .tlItem .tlText .t1 {font-size:16px;margin-bottom:3px;}
    .tlItem .tlText .t2 {font-size:13px;}
    .tlItem .tlProfile {width:30px;height:30px;border-width:1px;}
    .tlItem .tlLineBefore,
    .tlItem .tlLineAfter {width:2px;}
}

@media all and (max-width:520px){
}