@charset "utf-8";

/* =========================================================
   전국기능경기대회 팝업 공통 스타일
   기준 사이즈 : 1200 x 800
   신규 클래스 : popskill_
========================================================= */
*            {margin:0; padding:0; border:none; box-sizing: border-box;}
html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",Arial,sans-serif;
    color:#222;
    background:#fff;
     -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; 
}
 
.btnArea      {height: 44px; background: #5c5b56; padding: 0 10px; display: flex; align-items: center;  justify-content: space-between;}
.btn_Txt      { padding:0; margin:0;display: flex; align-items: center;  }
.btn_Txt span {color:#fff; padding-left:10px; font-size:13px}
.close_popbtn {float:right; padding-right:6px; margin:0;}
    
    
.popskill_wrap,
.popskill_wrap * { box-sizing:border-box; }
.popskill_wrap {
    position:relative;
    width:1200px;
    height:800px;
    margin:0 auto;
    overflow:hidden;
    background:#fff;
}
.popskill_wrap a { color:inherit; text-decoration:none; }
.popskill_wrap ul,
.popskill_wrap ol,
.popskill_wrap li,
.popskill_wrap dl,
.popskill_wrap dt,
.popskill_wrap dd,
.popskill_wrap p,
.popskill_wrap h1,
.popskill_wrap h2,
.popskill_wrap h3 { margin:0; padding:0; }
.popskill_wrap ul,
.popskill_wrap ol,
.popskill_wrap li { list-style:none; }

.popskill_header {
    position:relative;
    height:88px;
    padding:18px 16px 0;
    background:#428bc4;
}
.popskill_tabs {
    display:flex;
    gap:10px;
    width:700px;
    height:70px;
}
.popskill_tabs a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:226px;
    height:70px;
    border-radius:11px 11px 0 0;
    background:#2f70a6;
    color:#d9e7f3;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.6px;
}
.popskill_tabs a.popskill_active {
    background:#fff;
    color:#222;
}
.popskill_logo {
    position:absolute;
    right:22px;
    top:16px;
    width:250px;
    height:58px;
    background:url("../images/contents/61th/popskill_logo.png") no-repeat right center / contain;
}
.popskill_logo span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}
.popskill_content {
    position:relative;
    height:712px;
    overflow:hidden;
}

/* =========================================================
   1page : 실시간현황
========================================================= */

.popskill_live {
    position: relative;
    /* height: 712px; */
    padding:30px 10px 0;

    background-image:
        url("../images/contents/61th/popskill_mascot.png"),
        linear-gradient(
            to bottom,
            #ffffff 0,
            #ffffff 555px,
            #e6f4ff 555px,
            #e6f4ff 100%
        );

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center bottom,
        left top;

    background-size:
        auto 230px,
        100% 100%;
}

.popskill_live_status {
    display:flex;
    width:100%;
    height:194px;
    overflow:hidden;
    border:1px solid #2183ee;
    border-radius:20px;
}
.popskill_live_card {
    position:relative;
    display:flex;
    align-items:center;
    width:50%;
    padding:28px 34px 28px 145px;
}
.popskill_live_card:first-child { background:#fff; }
.popskill_live_card:last-child { background:#e7f3ff; }
.popskill_live_icon {
    position:absolute;
    left:24px;
    top:35px;
    width:110px;
    height:120px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}
.popskill_live_icon.popskill_player {
    background-image:url("../images/contents/61th/popskill_player.png");
}
.popskill_live_icon.popskill_judge {
    background-image:url("../images/contents/61th/popskill_judge.png");
}
.popskill_live_title {
    margin-bottom:23px !important;
    font-size:24px;
    font-weight:800;
    letter-spacing:-1px;
}
.popskill_live_detail {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}
.popskill_live_labels {
    font-size:16px;
    line-height:1.25;
    font-weight:700;
    color:#444;
}
.popskill_live_labels span {
    display:block;
}
.popskill_live_count {
    white-space:nowrap;
    font-size:54px;
    line-height:.95;
    font-weight:900;
    letter-spacing:-3px;
    color:#222;
}
.popskill_live_count em {
    font-style:normal;
    font-size:54px;
}
.popskill_live_bar_area {
    width:990px;
    margin:38px auto 0;
}
.popskill_live_bar_row {
    display:grid;
    grid-template-columns:155px 110px 1fr;
    align-items:center;
    gap:12px;
    margin:15px 0;
}
.popskill_live_bar_name {
    font-size:27px;
    font-weight:800;
    letter-spacing:-1px;
    color:#626262;
}
.popskill_live_bar_percent {
    font-size:31px;
    font-weight:900;
}
.popskill_live_bar_row:nth-child(1) .popskill_live_bar_percent { color:#555; }
.popskill_live_bar_row:nth-child(2) .popskill_live_bar_percent { color:#0f60c9; }
.popskill_live_bar_row:nth-child(3) .popskill_live_bar_percent { color:#24891b; }
.popskill_live_track {
    height:31px;
    overflow:hidden;
    border-radius:18px;
    background:#bdbdbd;
}
.popskill_live_fill {
    height:100%;
    min-width:0;
    border-radius:18px;
    box-shadow:0 3px 5px rgba(0,0,0,.25);
}
.popskill_live_fill.popskill_before { background:#555; }
.popskill_live_fill.popskill_ing { background:#1665c9; }
.popskill_live_fill.popskill_end { background:#2c9e1b; }

/* =========================================================
   2page : 과제별 진행현황
========================================================= */
.popskill_progress {
    padding:42px 16px 20px;
    background:#fff;
}
.popskill_progress_guide {
    margin:0 0 8px 2px !important;
    font-size:13px;
}
.popskill_job_grid {
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:4px;
    margin-bottom:25px;
}
.popskill_job_btn {
    height:29px;
    border:1px solid #c3c3c3;
    background:#fff;
    color:#333;
    font-size:12px;
    cursor:pointer;
}
.popskill_job_btn.popskill_selected {
    background:#cfe5f7;
    border-color:#7db3df;
    color:#244e70;
}
.popskill_progress_head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:0 10px 7px;
}
.popskill_progress_head h2 {
    color:#3479b8;
    font-size:26px;
    font-weight:800;
    letter-spacing:-1px;
}
.popskill_progress_summary {
    font-size:15px;
    font-weight:700;
    color:#555;
}
.popskill_progress_box {
    height:370px;
    padding:39px 86px 24px;
    overflow:auto;
    border:1px solid #1987f5;
    border-radius:23px 0 23px 0;
    background:#e6f3ff;
}
.popskill_progress_row {
    display:grid;
    grid-template-columns:98px 125px 1fr 48px 85px;
    align-items:center;
    gap:12px;
    min-height:31px;
}
.popskill_task {
    display:flex;
    align-items:center;
    justify-content:center;
    height:21px;
    border-radius:14px;
    background:#0057b7;
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.popskill_subject {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#1558a7;
    font-size:14px;
}
.popskill_track {
    height:11px;
    border-radius:10px;
    background:#d6d6d6;
    overflow:hidden;
}
.popskill_fill {
    height:100%;
    border-radius:10px;
    background:linear-gradient(#ffad83,#f18b5d);
}
.popskill_percent {
    color:#f34e00;
    font-size:14px;
}
.popskill_state {
    display:flex;
    align-items:center;
    justify-content:center;
    height:22px;
    border-radius:14px;
    background:#ed5b50;
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.popskill_state.popskill_doing {
    background:#527da4;
}

/* =========================================================
   3page : 직종별 생중계 CCTV
========================================================= */
.popskill_cctv {
    position:relative;
    /* height:100%; */
    padding:10px 30px 0;
    background:
        url("../images/contents/61th/2026wordskill_bg.png") no-repeat bottom,
        #dee6f0;
}
.popskill_cctv_intro {
    display:flex;
    align-items:center;
    height:85px;
    padding-left:80px;
    background:url("../images/contents/61th/top_cctv.png") no-repeat left center;
    margin-bottom: 15px;
}
.popskill_cctv_intro h1 {
    padding-right:22px;
    border-right:4px solid #555;
    font-size:35px;
    line-height:40px;
    letter-spacing:-1.7px;
}
.popskill_cctv_intro h1 strong { color:#ff321d; }
.popskill_cctv_intro p {
    padding-left:16px;
    font-size:13px;
    line-height:1.65;
    letter-spacing:-.4px;
}
.popskill_venue_grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    align-items:start;
}
.popskill_venue {
    /* min-height:220px; */
    padding:16px 19px 70px !important;
    border-radius:5px 5px 100px 100px;
    background:#fff;
}
.popskill_venue dt {
    margin-bottom:13px;
    font-size:13px;
    font-weight:700;
}
.popskill_venue_no {
    display:block;
    margin-bottom:2px;
    font-size:20px;
    font-weight:700;
    color: #285794;
}
.popskill_venue ul li {
    position:relative;
    padding-left:8px;
    font-size:13px;
    line-height:20px;
    cursor:pointer;
}
.popskill_venue ul li::before {
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#666;
}
.popskill_venue ul li:hover {
    color:#0066cc;
    text-decoration:underline;
}

/* 선택적으로 로고/마스코트 이미지가 아직 없을 때 레이아웃 유지 */
.popskill_logo:empty { min-height:1px; }

@media (max-width:1199px) {
    body { overflow:auto; }
}