@charset "utf-8";

/* LHI 2025.11.05
   component - color form btn table popup
*/

/* 기본버튼 */
.btn_wrap {display:flex; flex-wrap:wrap; justify-content:end; gap:3px; margin:4rem 0;}
.btn_cr_navy {padding:1.5rem 3rem; font-weight:700; color:#fff !important; text-align:center; border:1px solid var(--navy); border-radius:5px; background:var(--navy);}
.btn_cr_blue {padding:1.5rem 3rem; font-weight:700; color:#fff !important; text-align:center; border:1px solid var(--blue); border-radius:5px; background:var(--blue);}
.btn_ln_navy {padding:1.5rem 3rem; font-weight:700; color:var(--navy) !important; text-align:center; border:1px solid var(--navy); border-radius:5px; background:#fff;}
.btn_ln_blue {padding:1.5rem 3rem; font-weight:700; color:var(--blue) !important; text-align:center; border:1px solid var(--blue); border-radius:5px; background:#fff;}
[class^="btn_cr"], [class^="btn_ln"] {line-height:1;}
[class^="btn_cr"][readonly="readonly"], [class^="btn_ln"][readonly="readonly"], [class^="btn_cr"]:disabled, [class^="btn_ln"]:disabled {color:#fff !important; border-color:var(--gray-70); background:var(--gray-70); pointer-events:none; cursor:unset;}

/* layer pop */
.layer_wrap {overflow:hidden; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.2); opacity:0; visibility:hidden; z-index:-1;}
.layer_wrap.layer_open {opacity:1; visibility:visible; z-index:99;}
.layer_cont {position:absolute; top:50%; left:50%; width:100%; max-width:80rem; height:auto; max-height:90%; padding:3rem; border-radius:1rem; background:#fff; transform:translate(-50%, -50%); box-sizing:border-box;}
.layer_cont .pop_head {position:relative;}
.layer_cont .pop_head .pop_tit {padding-bottom:20px; font-size:22px; font-weight:600; color:var(--black); border-bottom:1px solid var(--black-70);}
.layer_cont .pop_head .btn_close {overflow:hidden; position:absolute; top:0; right:0; width:3rem; height:3rem; text-indent:-9999px; background:url('/images/nationTask/common/icon_wrap.png') -120px -30px no-repeat;}
.layer_cont .pop_body {overflow-y:auto; max-height:calc(100vh - 180px); padding-top:25px; box-sizing:border-box;}
.layer_cont .pop_body .bt_btn {margin-top:20px;}
.layer_cont .pop_body .bt_btn button, .layer_cont .pop_body .btn_btn a {padding:1rem 2rem; font-size:1.5rem;}

/* 탭 */
.tab_list {display:flex; flex-wrap:wrap; gap:1rem; margin:4rem 0;}
.tab_list > li > a {padding:1.5rem 4rem; font-size:2.1rem; color:var(--black-70); border:1px solid var(--blue-40); border-radius:1.5rem 0.5rem 0.5rem 0.5rem;}
.tab_list > li > a.disabled {pointer-events:none; cursor:text;}
.tab_list > li:not(.on) > a:hover, .tab_list > li:not(.on) > a:focus, .tab_list > li:not(.on) > a:active {color:var(--blue);}
.tab_list > li.on > a {font-weight:700; color:var(--white); border-color:var(--blue); background:var(--blue); transition:background .2s ease-out;}
.tab_cont > div {display:none;}

/* 테이블 */
.tb_tit {margin-bottom:2rem; padding:2rem; text-align:center; line-height:1.2; word-break:keep-all; background:var(--blue-20);}
.tb_base {width:100%; table-layout:fixed; border-collapse:collapse; box-sizing:border-box;}
.tb_base:not(.tb_view) tr {border-top:1px solid var(--blue-30); border-bottom:1px solid var(--blue-30);}
.tb_base th, .tb_base td {position:relative; padding:2.2rem 2.4rem; font-weight:400; text-align:center; line-height:1.2; word-break:keep-all; }
.tb_base:not(.tb_view) td a {overflow:hidden; max-width:100%; text-align:left; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;}
.tb_base:not(.tb_view) td a:hover {font-weight:600; color:var(--blue); text-decoration:underline;}
.tb_base .tb_file {position:relative; display:block; padding-left:2.8rem;}
.tb_base .tb_file:before {content:""; position:absolute; top:2px; left:0; width:1.9rem; height:1.8rem; background:url('/images/nationTask/common/icon_file.png') no-repeat; background-size:cover;}
.tb_base .tb_file + .tb_file {margin-top:0.5rem;}

/* 게시판 photo */
.photo_list {display:flex; flex-wrap:wrap; gap:3rem;}
.photo_list > li {flex:0 0 calc(25% - 2.3rem); border:2px solid var(--blue-20); border-radius:1.5rem; background:var(--blue-20); width: 20%;}
.photo_list > li > a {display:block; padding:2rem;}
.photo_list > li:hover {border-color:var(--blue); transition:border-color .5s ease-out;}
.photo_list .photo_thumb {width:100%; max-height:25rem; border-radius:8px;}
.photo_list .photo_tit {overflow:hidden; margin-top:2rem; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;}

/* 게시판 view */
.tb_view_wrap pre {width:100%; margin:2rem 0; padding:2rem 1.5rem; font-family:var(--font-base); line-height:1.5; white-space:pre-wrap; border-bottom:1px solid var(--blue-30);}
.tb_base.tb_view th, .tb_base.tb_view td {border:1px solid var(--blue-30);}
.tb_base.tb_view th {padding:1.2rem 0; background:var(--blue-20);}
.tb_base.tb_view td {padding:1.2rem 2rem; text-align:left;}

/* 페이징 */
.page_wrap {position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0.8rem; margin-top:4rem; text-align:center;}
.page_wrap > a {position:relative; display:inline-block; width:4rem; height:4rem; line-height:4rem; border-radius:0.5rem;}
.page_wrap > a:not(.on):hover, .page_wrap > a:not(.on):focus, .page_wrap > a:not(.on):active {text-decoration:none; color:var(--blue);}
.page_wrap > a[class^='page_'] {overflow:hidden; margin-right:0; font-size:0; text-indent:-9999px; vertical-align:bottom; border:1px solid transparent;}
.page_wrap > a.page_left {background:url('/images/nationTask/common/icon_page_left.png') center center no-repeat;}
.page_wrap > a.page_right {background:url('/images/nationTask/common/icon_page_right.png') center center no-repeat;}
.page_wrap > a.page_first {background:url('/images/nationTask/common/icon_page_first.png') center center no-repeat;}
.page_wrap > a.page_last {background:url('/images/nationTask/common/icon_page_last.png') center center no-repeat;}
.page_wrap > a.on {font-weight:700; color:#fff; text-decoration:none; border-radius:0.5rem; background:var(--blue);}

/* layer pop */
.layer_wrap {overflow:hidden; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.2); opacity:0; visibility:hidden; z-index:-1;}
.layer_wrap.layer_open {opacity:1; visibility:visible; z-index:10;}
.layer_cont {position:absolute; top:50%; left:50%; width:100%; max-width:80rem; height:100%; max-height:calc(98vh - 3rem); padding:3rem; border-radius:2rem; background:var(--white); transform:translate(-50%, -50%); background-size:cover; box-sizing:border-box;}
.layer_cont .layer_tit {position:relative; margin-bottom:2.2rem; padding:0 3rem 0 3.6rem; font-family:var(--font-title); font-size:2.4rem; font-weight:600; line-height:1.2; word-break:keep-all;}
.layer_cont .layer_tit:before {content:""; position:absolute; top:0.5rem; left:0; width:2.6rem; height:1.6rem; background:url('/images/nationTask/common/icon_layer_tit.png') no-repeat; background-size:cover;}
.layer_cont .layer_close {overflow:hidden; position:absolute; top:4rem; right:4rem; width:3rem; height:3rem; text-indent:-9999px; background:url('/images/nationTask/common/icon_layer_close.png') no-repeat; background-size:cover; zoom:0.8;}
.layer_cont .layer_body {overflow-y:auto; max-height:calc(100% - 4.6rem);}

@media screen and (max-width:850px){
    .btn_wrap {margin:1.9rem 0 0 0;}
    .btn_wrap a {width:100%;}
    .tab_list {margin:2rem 0;}
    .tab_list > li > a {padding:1.5rem 2.5rem;}
    .tb_tit {margin-bottom:1rem; font-size:2.1rem;}
    .tb_base colgroup {display:none;}
    .tb_base th, .tb_base td {display:block; width:100%; padding:1.5rem; text-align:left;}
    .tb_base.tb_view th {padding:1.2rem;}
    .tb_base.tb_view th + td {border-top:none;}
    .tb_view_wrap pre {margin:0 0 2rem 0; padding:1.5rem; font-size:1.9rem; line-height:1.3;}
    .photo_list {gap:2.5rem;}
    .photo_list > li {flex:1 0 calc(50% - 5rem);}
    .photo_list .photo_tit {display:-webkit-box; -webkit-box-orient:vertical; white-space:normal; -webkit-line-clamp:2; line-height:1.4;}
    .page_wrap {margin-top:2rem;}
    .layer_cont .layer_tit {font-size:2rem;}
    .layer_cont .layer_tit:before {top:0.4rem;}
    .layer_cont {max-width:calc(98% - 3rem);}
}
@media screen and (max-width:500px){
    .photo_list > li {flex:1 0 100%;}
    .photo_list .photo_thumb {max-height:none;}
}