@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}

.pageNotice {color:#fff;font-size:16px;background:#2d2d38;border-radius:6px;padding:18px 22px;display:flex;align-items:start;line-height:1.5;margin-bottom:30px;}
.pageNotice i {margin-right:9px;color:#ff0000;font-size:22px;}

.source {text-align:right;font-size:14px;line-height:1.4;margin-bottom:15px;}

.displayGuide {background-color:#e7ebfa;border-radius:6px;padding:15px 20px 20px;margin-bottom:25px;}
.displayGuide .guideTitle {font-size:16px;font-weight:600;display:flex;align-items:center;margin-bottom:10px;}
.displayGuide .guideTitle i {margin-right:9px;font-size:22px;}
.displayGuide .guideList {display:flex;gap:9px 0;flex-wrap:wrap;padding:0 20px;align-items:center;}
.displayGuide .guideItem {font-size:16px;font-weight:500;margin-right:30px;display:inline-flex;align-items:center;}
.displayGuide .guideItem img {margin-right:6px;}
.displayGuide .blue {color:#005bd6;}
.displayGuide .green {color:#00c417;}
.displayGuide .purple {color:#b400e8;}
.displayGuide .blur {color:#bababa;}

.tierPanel {display:flex;justify-content:space-between;z-index:10;align-items:center;height:64px;top:58px;position:sticky;background:#fff;margin-bottom: 36px;}
.tierPanel .left {display:flex;align-items:center;gap:14px;}
.tierPanel .switchBox {display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;}
.tierPanel .right {display:flex;align-items:center;gap:14px;}
.tierPanel .comboWrap {display:flex;align-items:center;gap:14px;}
.tierPanel .comboWrap input[type='text'] {display:block;height:42px;border:1px solid #555555;width:145px;border-radius:6px;background-color:#fff;padding:0 15px;font-size:16px;}
.tierPanel .right .moComboBtn {display:none;}

.switch {display:inline-flex;align-items:center;position:relative;}
.switch span {content: '';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius: 50%;background-color:#595959;transition: left 250ms linear;box-sizing:border-box;overflow:hidden;}
.switch span .icon {display:block;width:100%;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:500;color:#cacaca;}
.switch input {appearance:none;position:relative;border:0;border-radius:100px;width:42px;height:22px;background:#c8c8c8;cursor:pointer;}
.switch input:checked {background: #ffd4d4;}
.switch input:checked + span  {background-color: #ff0000;left:23px;box-shadow:none;}

.combo {margin:50px 0;position:relative;width:145px;}
.combo .comboSelection {display:flex;align-items:center;height:42px;border:1px solid #555555;border-radius:6px;background-color:#fff;padding:0 15px;font-size:16px;cursor:pointer;}
.combo .comboSelection .comboLabel {position:absolute;left:8px;top:-5px;font-size:12px;background:#fff;padding:0 2px;color:#4e4e4e;}
.combo .comboSelection .comboText {flex:1;padding-right:14px;font-weight:500;}
.combo .comboListWrap {position:absolute;top:100%;left:0;width:100%;padding-top:8px;opacity:0;z-index:10;transition:opacity .3s ease;}
.combo.on .comboListWrap {opacity:1;}
.combo.on .comboList {max-height:280px;overflow: auto;}
.combo .comboList {border: 1px solid #555555;border-radius: 6px;background-color:#fff;overflow:hidden;max-height:0;transition:max-height .3s ease;}
.combo .comboList .comboItem {padding:14px 15px;font-size:16px;cursor:pointer;}
.combo .comboList .comboItem:hover {background-color:#f8f8f8;}
.combo .comboList .comboItem.selected {background-color:#e7ebfa;}

.tierSection {margin-bottom:30px;padding:34px 24px 50px;box-shadow:0 0 8px rgba(9, 9, 9, .15);border-radius:10px;border:1px solid #e5e5e5;}
.tierSection .head {text-align:center;;position:relative;margin-bottom: 40px;}
.tierSection .head .title {font-size:24px;font-weight:600;}
.tierSection .head .recent {position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:16px;font-weight:500;}
.tierSection .head .recent i {margin-right:6px;font-size:18px;vertical-align:-2px;}
.tierSection .body {text-align:center;}
.tierSection .body .card {display:inline-block;padding:6px;width:162px;background-color:#3b82f6;border-radius:8px;margin:0 6px 10px 0;position: relative;}
.tierSection .body .card.purple {background-color:#9333ea;}
.tierSection .body .card.purple .cardProfile .etcBtn {background-color:#9333ea;}
.tierSection .body .card.orange .cardProfile .etcBtn {background-color:#ff8a00;}
.tierSection .body .card.green .cardProfile .etcBtn {background-color:#00c417;}
.tierSection .body .card.orange {background-color:#ff8a00;}
.tierSection .body .card.green {background-color:#00c417;}
.tierSection .body .card.blur {opacity:.4;}
.tierSection .body .card:last-child {margin-right:0;}
.tierSection .body .card:hover .etc {z-index:2;}
.tierSection .body .card:hover .cardLive {z-index:2;display:block;}
.tierSection .body .cardProfile {width:100%;height:0;padding-bottom:110%;border-radius:4px 4px 0 0;overflow:hidden;position:relative;}
.tierSection .body .cardProfile .profile {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.tierSection .body .cardProfile .crew {z-index:1;display:block;width:30px;height:30px;position:absolute;left:7px;top:7px;background-color:#fff;border-radius:100px;padding:4px;}
.tierSection .body .cardProfile .crew img {width: 100%;height:100%;object-fit:contain;}
.tierSection .body .cardProfile .live {position:inline-block;padding:3px 7px;position:absolute;top:7px;right:7px;border-radius:100px;color:#fff;font-weight:500;font-size:14px;background-color:#fa0030;}
.tierSection .body .cardProfile .win {position:absolute;bottom:7px;left:7px;}
.tierSection .body .cardProfile .other {position:absolute;bottom:7px;right:7px;}
.tierSection .body .cardProfile .etc {position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;background-color:rgba(0, 0, 0, .42);display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;}
.tierSection .body .cardProfile .etcBtn {width:88%;text-align:center;color:#fff;display:inline-block;border-radius:6px;line-height:32px;font-size:16px;background-color: #3b82f6;}
.tierSection .body .cardInfo {display:flex;align-items:center;padding:7px 4px 4px;}
.tierSection .body .cardInfo .nm {flex:1;font-size:17px;font-weight:600;color:#fff;}
.tierSection .body .cardInfo .nm .dot {display:inline-block;width:8px;height:8px;border-radius:100px;background-color: #ff0000;margin-right:3px;vertical-align:2px;}
.tierSection .body .cardInfo .xi-home {color:#fff;font-size:20px;}
.tierSection .body .cardLive {position:absolute;width:500px;max-width:45vw;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:none;}
.tierSection .body .cardLive .liveImg {width:100%;overflow: hidden;}
.tierSection .body .cardLive .liveImg img {width:100%;}
.tierSection .body .cardLive .liveTitle {position:aboslute;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, .8);color:#fff;padding:8px 10px;text-align:left;line-height:1.4;font-weight:500;}

@media all and (max-width:1024px){
    .tierContainer {padding:0 16px 24px;}
    .pageNotice { font-size: 13px;padding: 12px 12px;margin-bottom: 20px;}
    .pageNotice i {margin-right:6px;font-size:20px;}

    .source {font-size:12px;}
    .displayGuide {padding:12px 14px 20px;}
    .displayGuide .guideItem {zoom:.7;margin-right:11px;}
    .displayGuide .guideList {padding:0;gap:6px 0;}
    
    .tierPanel {height:52px;margin-bottom:20px;}
    .tierPanel .right .moComboBtn {display:block;background-color:transparent;font-size:22px;}
    .tierPanel .right .moComboBtn.on .xi-search {display:none;}
    .tierPanel .right .moComboBtn.on .xi-close {display:inline-block !important;}

    .tierPanel .comboWrap {display:none;position: absolute;left: 0;top: 99%;width:100%;background-color:#fff;}
    .combo {margin:0 10px 0 0;width:calc((100% - 14px)/2);display:inline-block;}
    .tierPanel .comboWrap input[type="text"] {width:calc((100% - 14px)/2);display:inline-block;}

    .tierSection {margin-bottom:24px;padding:18px 18px 24px;}
    .tierSection .head {text-align:left;margin-bottom:20px;}
    .tierSection .head .title {font-size:20px;}
    .tierSection .head .recent {font-size:14px;}
    .tierSection .body .card {margin-right:0;margin:6px 2px;width:calc((100% - 16px)/2);}
    .tierSection .body .cardInfo .nm {font-size:16px;}
    .tierSection .body .cardLive {top:calc(100% + 8px);}
}

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