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

.entryWrap {display:flex;gap:20px;align-items:start;}
.entryWrap .leftSection {width:55%;}
.entryWrap .rightSection {width:45%;}

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

.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 {position:relative;width:100%;}
.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;}

.whiteBox {margin-bottom:16px;padding:24px 16px 20px;box-shadow:0 0 8px rgba(9, 9, 9, .15);border-radius:10px;border:1px solid #e5e5e5;}
.whiteBox .head {display:flex;align-items:center;margin-bottom:20px;}
.whiteBox .head .title {font-size:18px;font-weight:600;flex:1;}
.whiteBox .head .combo {width:145px;}
.whiteBox .btns {text-align:right;margin-top:24px;}
.whiteBox .btns .btnReset {margin-right:3px;display:inline-block;padding:0 18px;border-radius:5px;background:#fa0030;color:#fff;font-weight:500;line-height:33px;}
.whiteBox .btns .btnEnter {display:inline-block;padding:0 18px;border-radius:5px;background:#2d2d38;color:#fff;font-weight:500;line-height:33px;}
.card {display:inline-block;padding:6px;width:162px;background-color:#3b82f6;border-radius:8px;position: relative;}
.card.purple {background-color:#9333ea;}
.card.purple .cardProfile .etcBtn {background-color:#9333ea;}
.card.orange .cardProfile .etcBtn {background-color:#ff8a00;}
.card.green .cardProfile .etcBtn {background-color:#00c417;}
.card.orange {background-color:#ff8a00;}
.card.green {background-color:#00c417;}
.card.blur {opacity:.4;}
.card:last-child {margin-right:0;}
.card:hover .etc {z-index:2;}
.card:hover .cardLive {z-index:2;display:block;}
.cardProfile {width:100%;height:0;padding-bottom:110%;border-radius:4px 4px 0 0;overflow:hidden;position:relative;}
.cardProfile .profile {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.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;}
.cardProfile .crew img {width: 100%;height:100%;object-fit:contain;}
.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;}
.cardProfile .win {position:absolute;bottom:7px;left:7px;}
.cardProfile .other {position:absolute;bottom:7px;right:7px;}
.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;}
.cardProfile .etcBtn {width:88%;text-align:center;color:#fff;display:inline-block;border-radius:6px;line-height:32px;font-size:16px;background-color: #3b82f6;}
.cardInfo {display:flex;align-items:center;padding:7px 4px 4px;}
.cardInfo .nm {flex:1;font-size:17px;font-weight:600;color:#fff;text-align:center;}
.cardInfo .nm .dot {display:inline-block;width:8px;height:8px;border-radius:100px;background-color: #ff0000;margin-right:3px;vertical-align:2px;}
.cardInfo .xi-home {color:#fff;font-size:20px;}
.cardLive {position:absolute;width:500px;max-width:45vw;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:none;}
.cardLive .liveImg {width:100%;overflow: hidden;}
.cardLive .liveImg img {width:100%;}
.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;}

.teamPicker {display:flex;gap:20px;}
.teamPicker .col {width:50%;display:flex;flex-direction:column;gap:12px;min-width:0;}
.teamPicker .col input[type='text'] {display:block;height:42px;border:1px solid #555555;border-radius:6px;background-color:#fff;padding:0 15px;font-size:16px;}
.teamPicker .col .playerList {margin-top:10px;}

.playerList li {display:flex;align-items:center;margin-bottom:18px;}
.playerList li .btnAdd {color:#3b82f6;margin-right:10px;margin-top:3px;font-size:24px;background-color:transparent;line-height:1;}
.playerList li .btnDelete {color:#fa0030;margin-right:10px;margin-top:3px;font-size:24px;background-color:transparent;line-height:1;}
.playerList li .btnMove {color:#000;margin-right:4px;margin-top:3px;font-size:20px;background-color:transparent;line-height:1;}
.playerList li:last-child {margin-bottom:0;}

.teams {display:flex;}
.teams .col {width:50%;display:flex;flex-direction:column;gap:12px;min-width:0;}
.teams .teamNo {text-align:center;border-bottom:1px solid #d3d3d3;padding:8px 0;font-weight:500;}

.vs {display:flex;justify-content:space-between;align-items:center;padding:0 10px;margin-bottom:20px;}
.vs .vsItem {display:flex;flex-direction:column;min-width:0;}
.vs .mid {color:#ccccdf;font-size:30px;font-weight:700;}

.score {display:flex;justify-content:space-between;padding:0 10px;margin-bottom:28px;}
.score .scoreItem {display:flex;flex-direction:column;min-width:0;text-align:center;width:162px;}
.score .scoreItem strong {font-size:30px;font-weight:700;}
.score .scoreItem p {font-size:18px;margin-top:5px;}
.score .mid {font-size:30px;font-weight:700;}

.detail {background-color:#ebebfa;border-radius:6px;padding:18px 24px;}
.detail .detailTitle {font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.detail.on .detailTitle i {transform:rotate(180deg);}
.detail .detailTable {padding-top:24px;display:none;}
.detail .detailTable table {width:100%;border-collapse:collapse;font-size:14px;color:#2d2d38;text-align:center;}
.detail .detailTable table thead th {border-bottom:1px solid #c8c8c8;padding: 10px 0;}
.detail .detailTable table tbody td {padding:10px 0;width:33%;}

@media all and (max-width:1024px){
    .entryContainer {padding:0 16px 24px;}

    .source {font-size:12px;}

    .entryWrap {flex-direction:column;gap:0;}
    .entryWrap .leftSection,
    .entryWrap .rightSection {width:100%;}

    .card {width:100%;}
    .cardInfo .nm .dot {width:5px;height:5px;}
    .cardInfo .nm {font-size:14px;}
    .cardInfo .xi-home {font-size:16px;}
    .cardInfo .elo {height:20px;}
    .cardProfile .etcBtn {font-size:13px;line-height:27px;}

    .whiteBox {padding:14px 14px;margin-bottom:28px;}
    .whiteBox .head {margin-top:10px;}

    .vs {padding:0;gap:8px;}
    .vs .mid {font-size:20px;}
    .vs .vsItem {width:50%;}

    .score {padding:0;}
    .score .mid {font-size:20px;}
    .score .scoreItem strong {font-size:20px;}
    .score .scoreItem p {font-size:12px;}

    .detail {padding:12px 18px;}
    .detail .detailTitle {font-size:14px;}
    .detail .detailTable {padding-top:10px;}
    .detail .detailTable table thead th,
    .detail .detailTable table tbody td {font-size:13px;}
}

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