@charset "utf-8";

/* 서브 레이아웃 + 콘텐츠 공통 스타일 */
/* mobile */
.sub_container{padding: 30px 20px}
.sub_visual{position: relative;padding: 30px 30px 250px;background: url("/images/common/sub_bg01.png") no-repeat center bottom -100px /304px var(--bg_black);border-radius: 32px;color: var(--white);}
.sub_visual:before{position: absolute;width: 80px;height: 80px;content: "";background: url("/images/common/sub_deco01.png") no-repeat center /cover;right: 15px;bottom: 210px;}
.sub_visual:after{position: absolute;width: 82px;height: 82px;content: "";background: url("/images/common/sub_deco02.png") no-repeat center /cover;left: 10px;bottom: -70px;z-index: -1;}
.sub_wrap:after{position: absolute;width: 326px;height: 250px;background: url("/images/common/sub_visual.png") no-repeat center /cover;content: "";left: 50%;bottom: -20px;transform: translateX(-50%);}
.sub_visual h2{font-family: var(--tit);font-size: 36px;font-weight: 600;margin-bottom: 8px;}
.sub_navi{margin: 30px 0;}
.sub_navi ul{display: flex;flex-wrap: wrap;align-items: center;}
.sub_navi>ul>li{display: flex;align-items: center;position: relative;}
.sub_navi>ul>li:before{display: inline-flex;content: "";width: 1px;height: 10px;background: rgba(255,255,255,.3);margin: 0 16px;}
.sub_navi>ul>li>button{display: inline-flex;color: #e4e4e4;align-items: center;font-size: 20px;cursor: pointer;}
.sub_navi>ul>li>button:after{width: 35px;height: 35px;content: "";background: url("/images/common/ico_drop.png") no-repeat center;}
.sub_navi li>a{color: #e4e4e4;font-size: 20px;}
.sub_navi li.home:before{display: none;}
.sub_navi li div{display: none;position: absolute;background: rgba(255,255,255,.8);border-radius: 12px;padding: 12px 16px;top: 36px;backdrop-filter: blur(5px);z-index: 1;left: 0;right: 0;}
.sub_navi li.on div{display: block;}
.sub_navi li div li a{display: block;color: var(--tit_black);}
.sub_util ul{display: flex;flex-wrap: wrap;gap: 10px;}
.sub_util>ul>li>button{width: 30px;height: 30px;border-radius: 8px;font-size: 0;background: url("/images/common/ico_print.png") no-repeat center;}
.sub_util>ul>li.share{position: relative;}
.sub_util>ul>li.share>button{background-image: url("/images/common/ico_share.png");}
.sub_util li div{display: none;position: absolute;background: rgba(255,255,255,.8);border-radius: 12px;top: 36px;backdrop-filter: blur(5px);z-index: 1;padding: 10px;}
.sub_util li.on div{display: block;}
.sub_util li div button{width: 30px;height: 30px;font-size: 0;background: url("/images/common/ico_kko.png") no-repeat center;}
.sub_util li div .clip button{background-image: url("/images/common/ico_link.png");}
.sub_util li div .close button{background-image: url("/images/common/ico_close.png");}
.sub_container h3{margin: 80px 0 40px;text-align: center;font-family: var(--tit);font-size: 32px;font-weight: 600;color: var(--tit_black);}

/* tablet */
@media (min-width: 768px) {
.sub_visual{background-position: right 0 bottom -100px;padding-bottom: 140px;}
.sub_wrap:after{left: auto;transform: none;right: -10px;}
.sub_visual:after{left: auto;right: 300px;bottom: 0;z-index: inherit;}
}

/* pc */
@media (min-width: 1024px) {
.sub_visual{padding-bottom: 40px;}
}

/* wide */
@media (min-width: 1440px) {
.sub_container{padding: 60px 80px;}
.sub_visual{padding: 60px 80px;background-size: 384px;background-position: right 120px top -26px;min-height: 290px;}
.sub_visual:before{width: 110px;height: 110px;right: 40px;top: auto;bottom: 10px;}
.sub_visual:after{top: 23px;right: 480px;}
.sub_wrap:after{width: 424px;height: 325px;right: 125px;bottom: -60px;}
.sub_util{position: absolute;top: 60px;right: 40px;}
.sub_visual h2{font-size: 42px;}
.sub_visual p{font-size: 18px;}
.sub_navi{margin: 40px 0 0;}
}
@media (min-width: 1600px) {
.sub_container{margin: 0 auto;max-width: 1760px;padding: 60px 0;}
.content_inner{padding: 0 160px;}
}

/* content style */
.content_wrap h4{display: flex;font-family: var(--tit);font-weight: 600;font-size: 28px;color: var(--tit_black);margin: 40px 0 20px;gap: 8px;}
.content_wrap h4:after{display: inline-flex;width: 8px;height: 8px;content: "";background: var(--blue);border-radius: 100%;}
.content_wrap h5{font-family: var(--tit);font-weight: 600;font-size: 24px;color: var(--blue);margin: 30px 0 20px;}
.content_wrap h6{font-weight: 700;font-size: 20px;color: var(--tit_black);margin: 20px 0 10px;padding-left: 10px;position: relative;}
.content_wrap h6:before{position: absolute;width: 4px;height: 16px;content: "";background: var(--blue);left: 0;top: 8px;}
.content_wrap p{margin: 10px 0;font-size: 18px;line-height: 1.5;}

.depth3_tab ul{display: flex;flex-wrap: wrap;flex-direction: column;gap: 2px;}
.depth3_tab li a{display: flex;align-items: center;justify-content: center;padding: 12px 0;font-size: 20px;border-radius:12px;background: var(--white);color: var(--tit_black);border: 1px solid var(--text_black);}
.depth3_tab li a:hover, .depth3_tab li a:focus{color: var(--white);background: var(--text_black);transition: .3s;}
.depth3_tab li.on a{color: var(--white);background: var(--tit_black);}

.depth4_tab{padding:10px;border: var(--line);border-radius:20px;}
.depth4_tab ul{display: flex;flex-direction: column;gap: 8px;}
.depth4_tab li a{display: block;padding: 10px 0;text-align: center;font-size: 18px;border-radius: 12px;}
.depth4_tab li a:hover, .depth4_tab li a:focus{background: var(--tit_black);color: var(--white);transition: .3s;}
.depth4_tab li.on a{background: var(--blue);color: var(--white);}

.list_ul{margin: 20px 0 40px;}
.list_ul li{position: relative;padding-left: 18px;margin: 12px 0;font-size: 20px;color: var(--tit_black);}
.list_ul li:before{position: absolute;width: 15px;height: 15px;content: "";background: url("/images/common/li01.svg") no-repeat center;left: 0;top: 7px;}
.list_ul li li{margin: 8px 0;font-size: 18px;padding-left: 14px;}
.list_ul li li:before{width: 8px;height: 3px;background: var(--navy);top: 13px;}
.list_ul li li li{font-size: 16px;padding-left: 10px;}
.list_ul li li li:before{width: 5px;height: 5px;border-radius: 100%;background: var(--dk_gray);top: 10px;}

.f_red{color: var(--red)!important;}
.f_blue{color: var(--blue)!important;}
.link_text{display: inline-flex;color: var(--tit_black);text-decoration: underline;align-items: center;gap: 4px;}
.link_text:after{content: "";width: 15px;height: 15px;background: url("/images/common/ico_link.svg") no-repeat center;}

.box_basic{padding: 20px;border-radius: 20px;background: #F8F8F8;margin: 30px 0;}
.box_basic h4, .box_basic h5, .box_basic h6{margin: 0 0 20px;}
.box_basic .list_ul{margin: 0;}
.box_point{padding: 20px;border-radius: 20px;background: #fffdef;margin: 30px 0;}
.box_point h4, .box_point h5, .box_point h6{margin: 0 0 20px;}
.box_point .list_ul{margin: 0;}

.line_box{display: flex;flex-wrap: wrap;width: 100%;padding: 20px;gap: 10px;border-radius: 12px;align-items: center;background: #f1f5ff;word-break: keep-all;margin: 20px 0;justify-content: center;text-align: center;}
.line_box:before{width: 32px;height: 27px;content: "";background: url("/images/common/box_icon.svg") no-repeat center;}
.line_box2{padding: 20px;border-radius: 12px;border: 1px solid #b3caff;margin: 20px 0;}

.btn_wrap a, .btn_wrap button{display: inline-flex;justify-content: center;align-items: center;margin: 2px;padding: 8px 20px;border: 1px solid var(--tit_black);border-radius: 10px;color: var(--tit_black);cursor: pointer;transition: .3s;}
.btn_wrap .btn_big{padding: 15px 30px;font-size: 18px;min-width: 120px;}
.btn_wrap .btn_pri{background: var(--tit_black);color: var(--white);border-color: transparent;}
.btn_wrap .btn_pri.btn_blue{background: var(--blue);}
.btn_wrap .btn_sec{border-color: var(--tit_black);color: var(--tit_black);background: var(--white);}
.btn_wrap .btn_sec.btn_blue{border-color: var(--blue);color: var(--blue);}
.btn_wrap a:hover, .btn_wrap button:hover,
.btn_wrap a:focus, .btn_wrap button:focus{background: #f1f5ff;}
.btn_wrap a.btn_pri:hover, .btn_wrap a.btn_pri:focus,
.btn_wrap button.btn_pri:hover, .btn_wrap button.btn_pri:focus{background: var(--yellow);color: var(--tit_black)!important;}

.table_scroll{overflow-x: auto;}
.table_scroll:before{display: block;content: "좌우로 스크롤하여 내용을 확인하세요.";text-align: center;background: #f1f5ff;margin: 0 0 10px;border-radius: 8px;padding: 10px 0;font-size: 14px;color: var(--tit_black);position: sticky;left: 0;}
.base_table{border-top: 2px solid var(--tit_black);min-width: 1000px;width: 100%;}
.base_table th,.base_table td{padding: 12px;text-align: center;border-bottom: var(--line);}
.base_table th{font-weight: 700;color: var(--tit_black);}
.base_table th:last-of-type, .base_table td:last-of-type{border-right: none;}
.base_table .point_bg{background: #fffdef;}
.base_table tfoot{border-top: 2px solid var(--text_black);}
td.btn_wrap{width: auto;margin: 0;overflow: auto;}

.img_box{border-radius: 12px;border: var(--line);padding: 20px;position: relative;overflow: hidden;}
.img_box a{position: absolute;bottom: 0;right: 0;background: var(--blue);color: var(--white);padding: 4px 10px;border-radius: 8px 0 0;}
.img_scroll{overflow-x: auto;}
.img_scroll:before{display: block;content: "좌우로 스크롤하여 내용을 확인하세요.";text-align: center;background: #f1f5ff;margin: 0 0 10px;border-radius: 8px;padding: 10px 0;font-size: 14px;color: var(--blue);position: sticky;left: 0;}
.img_scroll img{max-width: none;border-radius: 12px;border: var(--line);padding: 20px;}


/* tablet */
@media (min-width: 768px) {
.content_wrap h4{font-size: 32px;}
.content_wrap h5{font-size: 28px;}
.content_wrap h6{font-size: 24px;}
.content_wrap h6:before{top: 10px;}

.depth3_tab ul{flex-direction: row;}
.depth3_tab li{width: calc((100% - 6px)/4);}
.depth3_tab li a{padding: 15px;}
.depth3_tab .col2 li{width: calc((100% - 2px)/2);}
.depth3_tab .col3 li{width: calc((100% - 4px)/3);}
.depth3_tab .col4 li{width: calc((100% - 6px)/4);}
.depth3_tab .col5 li{width: calc((100% - 8px)/5);}
.depth3_tab .col6 li{width: calc((100% - 10px)/6);}

.depth4_tab{border-radius: 20px;padding: 10px;overflow-x: auto;}
.depth4_tab ul{flex-direction: row;gap: 10px;}
.depth4_tab li{flex-shrink: 0;}
.depth4_tab li a{border-radius: 10px;padding: 10px 20px;font-size: 20px;}

.line_box{justify-content: flex-start;}
}


/* pc */
@media (min-width: 1024px) {
.depth3_tab li a{padding: 20px 0;}

.box_basic, .box_point{padding: 40px;}

.table_scroll:before{display: none;}
.base_table{min-width: auto;}

.img_box{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding: 30px;border-radius: 20px;}
.img_box a{display: none;}
.img_scroll:before{display: none;}
.img_scroll{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding: 30px;border-radius: 20px;border: var(--line);}
.img_scroll img{padding: 0;border: none;border-radius: 0;max-width: 100%;}
}

/* 공통 컴포넌트 */
.search_box{margin: 20px 0;}
.board_search_form .search_box{display: flex;flex-wrap: wrap;gap: 4px;border-radius: 8px;margin: inherit;}
.board_search_form .search_box select{margin: 0;border-radius: 4px;}
.board_search_form .search_box input{width: 100%;}
.board_search_form .search_box button{width: calc((100% - 4px)/2);margin: 0;}

.board_total_count{margin: 12px 0;}

.table_category{padding: 8px;border-radius: 12px;border: var(--line);margin: 20px 0;}
.table_category::-webkit-scrollbar-thumb{background: var(--red);}
.table_category li a{display: flex;width: 100%;justify-content: center;align-items: center;padding: 10px 0;border-radius: 8px;color: var(--tit_black);}
.table_category li.active a{background: var(--red);color: var(--white);font-weight: 700;}

.page_btn{border-radius: 4px;}

.list_table thead tr{background: none;}
.list_table2 td.title, .list_table2 td .tit{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: left;}
.list_table2 .title a{display: block;font-weight: 700;color: #141414;font-size: 18px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;}
.list_table2 .title .ico_reply + a{display: inline-block;width: calc(100% - 40px);}
@media (max-width: 910px) {
table.list_table .title{display: block;margin: 10px 0;padding: 0;}
.list_table2 td.title{display: block;width: 100%;text-align: left;margin: 10px 0;font-size: 18px;padding: 0 0 10px;border-bottom: 1px dashed #cecece;margin-bottom: 20px;}
.list_table2 td.title:after{display: none;}
}
table td.noti{color: var(--blue);font-weight: 700;}

.detail_table th{color: var(--blue);text-align: center;border-bottom: var(--line);font-weight: 700;}
.content_view{margin: 20px 0;}
.prev_next_table table{border-top: 1px solid var(--tit_black);border-bottom: 1px solid var(--tit_black);}
.prev_next_table table th{background: none;color: var(--tit_black);text-align: center;font-weight: 700;}
.detail_table select, .detail_table input{max-width: 100%;}

@media (min-width: 768px) {
.board_search_form .search_box{justify-content: flex-end;padding: 20px;}
.board_search_form .search_box select,
.board_search_form .search_box input[type="text"]{width: auto;}
.board_search_form .search_box button{min-width: 44px;width: auto;padding: 0 10px;}

.table_category{overflow-x: auto;}
.table_category ul{display: flex;gap: 10px;}
.table_category li{flex-shrink: 0;}
.table_category li a{width: auto;padding: 10px;}

.detail_table th{border-bottom: none;color: var(--tit_black);background: none;}
}

/* custom */
.category_box{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 20px;}
.category_box .cate_tabs{display: flex;flex-wrap: wrap;gap: 8px;}
.category_box .cate_tabs button, .category_box .cate_tabs a{padding: 9px 16px;border: var(--line);border-radius: 24px;font-size: 14px;color: var(--text_black);cursor: pointer;transition: .3s;}
.category_box .cate_tabs .on{background: var(--red);color: var(--white);}

.note{display: flex;flex-wrap: wrap;gap: 10px;padding: 12px;border-radius: 8px;background: var(--st_ready_soft);font-size: 16px;align-items: center;color: var(--tit_black);}
.note.ok{color: var(--blue);}
.note.warn{background: var(--st_fin_soft);}

.prog_grid{margin: 20px 0;display: flex;flex-wrap: wrap;flex-direction: column;gap: 20px;}
.prog_grid .prog{display: flex;flex-direction: column;border-radius: 20px;overflow: hidden;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.prog_grid .prog .thumb{display: flex;align-items: center;justify-content: center;overflow:hidden;position:relative;height:180px;background:var(--bg_card) no-repeat center / cover;}
.prog_grid .prog .thumb img{width:100%;height:100%;object-fit:cover}
.prog_grid .prog .thumb span{position: absolute;top: 12px;left: 12px;padding: 2px 8px;border-radius: 8px;font-size: 14px;color: var(--white);}
.prog_grid .prog .thumb span.badge_mo{background: var(--red);}
.prog_grid .prog .thumb span.gold{background: var(--st_gold);}
.prog_grid .prog .thumb span.fin{background: var(--st_fin);}
.prog_grid .prog .thumb span.ready{background: var(--blue);}
.prog_grid .prog .pbody{display: flex;flex-wrap: wrap;flex-direction: column;padding: 20px;gap: 4px;}
.prog_grid .prog .pbody .pstage{display: inline-flex;padding: 2px 8px;border-radius: 4px;font-size: 14px;background: #fde8ec;color: var(--red);align-self: flex-start;font-weight: 700;}
.prog_grid .prog .pbody .ptit{font-size: 18px;font-weight: 700;color: var(--tit_black);margin: 8px 0;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;height: 3em;}
.prog_grid .prog .pbody .meta div{margin: 4px 0;display: flex;gap: 8px;align-items: center;}
.prog_grid .prog .pbody .meta i{font-size: 14px;width: 16px;height: 16px;display: inline-flex;align-items: center;justify-content: center;}
.prog_grid .prog .pbody .note{gap: 8px;padding: 8px;font-size: 14px;}
.prog_grid .prog .pbody .jbc_btn{display: flex;padding: 8px 0;align-items: center;justify-content: center;border-radius: 8px;margin: 12px 0 0;transition: .3s;}
.prog_grid .prog .pbody .jbc_btn.danger{background: var(--red);color: var(--white);}
.prog_grid .prog .pbody .jbc_btn.outline{background: var(--st_fin);color: var(--white);pointer-events: none;}
.prog_grid .prog .pbody .jbc_btn:hover, .prog_grid .prog .pbody .jbc_btn:focus{background: var(--bg_black);}

@media (min-width: 768px) {
.prog_grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (min-width: 1024px) {
.prog_grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
.prog_grid .prog .thumb{height: 240px;}
}

@media (min-width: 1440px) {
.prog_grid{gap: 30px;}
}