@charset "utf-8";
.ip_wd10 { width:10%;}
.ip_wd20 { width:20%;}
.ip_wd30 { width:30%;}
.ip_wd40 { width:40%;}
.ip_half { width:50%;}
.ip_wd60 { width:60%;}
.ip_wd70 { width:70%;}
.ip_wd80 { width:80%;}
.ip_wd90 { width:90%;}
.ip_wdful { width:100%;}

.tabmenu ul {display:flex; flex-wrap:wrap; justify-content:center; }
.tabmenu ul li { text-align: center; color: #777; box-sizing: border-box; word-break: keep-all; margin:0 5px 10px 5px;}
.tabmenu ul li a {display:inline-block; padding:8px 20px; border-radius:30px; background:#f2f2f2;}
.tabmenu ul li a:hover, .faq .tabmenu ul li.active a { background: #0177c0; color: #fff;}

#boardWrap .stepbox { display:flex; flex-wrap:wrap; justify-content:space-between; text-align: center; word-break:keep-all; }
#boardWrap .stepbox > li { width:calc(33.3% - 35px); position:relative; }
#boardWrap .stepbox > li:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: #fff; border-radius:15px;border:1px solid #eee; box-sizing:border-box;}
#boardWrap .stepbox > li:after { position: absolute; right:-30px; top:40px; content: ''; width: 20px; height: 20px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; transform: rotate(45deg); }
#boardWrap .stepbox > li:last-child:after{ display:none;}
#boardWrap .stepbox dl { position:relative;  border-radius: 15px; }
#boardWrap .stepbox dt { padding:10px 20px;color: #fff;  border-radius: 15px 15px 0 0; box-shadow: 0 5px 5px rgb(18 123 204 / 14%);}
#boardWrap .stepbox > li:first-child dt { background: #046dbb; }
#boardWrap .stepbox > li:nth-child(2) dt { background: #3f68c2; }
#boardWrap .stepbox > li:last-child dt { background: #7363c8; }
#boardWrap .stepbox dd { display:inline-block; width:100%; padding:15px 10px;}

/* ������ */
.pagination { text-align:center;}
.pagination ul li { display: inline-block;width:35px; height:35px; line-height:35px; text-align:center; margin:0 2px;}
.pagination ul li a, .pagination ul li strong { display: inline-block; width:100%; height:35px; line-height:30px; vertical-align:middle; }
.pagination ul li.first a { border:1px solid #ccc; background:url("../../images/board/page_first.png") no-repeat center;}
.pagination ul li.prev a { border:1px solid #ccc;  background:url("../../images/board/page_prev.png") no-repeat center;}
.pagination ul li.next a { border:1px solid #ccc;  background:url("../../images/board/page_next.png") no-repeat center;}
.pagination ul li.last a { border:1px solid #ccc;  background:url("../../images/board/page_last.png") no-repeat center;}
.pagination ul li.active { color:#333; font-weight:bold; }

/* �Խ��� list */
#boardWrap .infoBox { border-top:1px solid #333; border-bottom:1px solid #ddd; padding:30px; background:#f8f8f8;}
#boardWrap .boTitle { font-size:20px; color:#333;  }
#boardWrap .boTitle .essential { font-size:16px;  }
#boardWrap .tBoard { border-top:2px solid #333; margin-top:10px; border-top:2px solid #333; border-bottom:1px solid #333; }
#boardWrap .tBoard a:hover { text-decoration:underline;}
#boardWrap .tBoard .notice_tr th, .tBoard .notice_tr td {}
#boardWrap .tBoard .notice_tr .board_tit { background:url("../../images/board/notice_icon.png") no-repeat 10px center; padding-left:30px; font-weight:500; color:#333;}
#boardWrap .tBoard .i_no { background:#333; color:#fff; font-size:14px; padding:3px 8px; border-radius:20px;}
#boardWrap .tBoard th, #boardWrap .tBoard td {text-align:center; vertical-align:middle;}
#boardWrap .tBoard th { font-weight:400; border-bottom:1px solid #707686; color:#333; line-height:60px;}
#boardWrap .tBoard td { padding:15px 5px; border-bottom:1px solid #eee; }
#boardWrap .tBoard tbody tr:nth-child(2n) { background:#f8f8f8;}
#boardWrap .tBoard .tleft { text-align:left; padding-left:15px;}
#boardWrap .tBoard .tcen { text-align:center;}
#boardWrap .countText { margin-bottom:10px;}
#boardWrap .countText .count { color:#bd0000; font-weight:500;}
#boardWrap .schBox { margin-bottom:20px;}
#boardWrap .schBox fieldset { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;}
#boardWrap .schBox select { display:inline-block; width:250px; margin:0;height:50px; line-height:48px;}
#boardWrap .schBox input { display:inline-block; width:calc(100% - 335px);height:50px; line-height:48px;}
#boardWrap .schBox .btn_search{ width:70px; display:inline-block; background:#333; border:1px solid #333;color:#fff; margin:0; padding:0 20px; vertical-align:middle; height:50px; line-height:48px; }
#boardWrap .rt_waiting { border-radius:3px; background:#999; color:#fff; font-size:14px; padding:2px 5px;}
#boardWrap .rt_complete {  border-radius:3px;  background:#0177c0; color:#fff; font-size:14px; padding:2px 5px;}

/* �Խ��� view */
.board_view { border-top:2px solid #333;}
.board_view h4 { padding:10px 20px; border-bottom:1px solid #666; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;}
.board_view h4 .view_tit { letter-spacing:-1px;  color:#333; font-weight:500; width:calc(100% - 70px); word-break:keep-all; }
.board_view h4 .view_tit strong { position:relative; font-size:22px;}
.board_view h4 .view_date { font-size:16px; font-weight:400; color:#666; width:60px; margin-top:5px; text-align:right;}
.file_down { padding:20px ; background:#fafafa; border-bottom:1px solid #eee;}
.file_down .file_list { display:block; background:url("../../images/board/i_file.png") no-repeat left center; padding-left:18px; line-height:1.8;}
.file_down a.file_list:hover { text-decoration:underline;}
.file_down .del { background:#fff url("../../images/board/i_file_del.png") no-repeat center; width:14px; height:14px; display:inline-block; text-indent:-999em; vertical-align:middle; margin:0 10px; border:1px solid #999; padding:2px;}
.board_view .detail_cont { padding:30px 20px; }
.board_view .prev_next { border-top:1px solid #555;}
.board_view .prev_next li { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;border-bottom:1px solid #eee; padding:15px 20px;}
.board_view .prev_next strong { display:inline-block; padding-left:20px; width:70px; font-weight:500;}
.board_view .prev_next span {width:calc( 100% - 80px );}
.board_view .prev_next a { color:#777; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:calc( 100% - 80px ); float:left; display:inline-block; box-sizing:border-box;}
.board_view .prev_next .pv { background:url("../../images/board/i_prev.png") no-repeat left center;}
.board_view .prev_next .nt { background:url("../../images/board/i_next.png") no-repeat left center;}

.board_view .no_cont { color:#ddd;}
.board_write .board_title input { height:50px; line-height:50px; padding-left:10px;}
.board_view .detail_answer_cont { padding: 20px; background:#f8f8f8; border:1px solid #555;}
.board_view .answer_tit { color:#fff; font-size:20px; background:#555;}

.board_modify .board_title { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:10px;}

.filebox { position:relative; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 0; }
.filebox .colorbox01 dt { font-weight:500; color:#333;}
.filebox .colorbox01 dd { font-size:15px; }
.filebox .btn_down { position:absolute; top:10px; right:0; background:#555 url("../../images/icon_blank_w.png") no-repeat calc(100% - 20px) center; color:#fff;padding:5px 40px 5px 20px; border-radius:20px; font-size:14px;}
.filebox .drop_zone{ position: relative; float: left; padding: 5px 0; width: calc(50% - 5px); display: flex; flex-wrap: wrap; justify-content: space-between;}
.filebox .drop_zone.dropable { border: 2px dotted rgb(111, 111, 216); }
.filebox .drop_zone .upload-name { pointer-events: none; }

/* FAQ */
.faq_wrap { border-top:2px solid #333;}
.faq_wrap li { border-bottom:1px solid #ddd;}
.faq_wrap li .faq_tit { position:relative; cursor:pointer; font-weight:500; color:#333; padding:20px 25px 20px 0px; background:url("../../images/board/icon_plus.png") no-repeat right center; word-break:keep-all; clear:both; }
.faq_wrap li .faq_tit a{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;}
.faq_wrap li .faq_tit:after { content:""; display:block; clear:both;}
.faq_wrap li .faq_tit .faq_q { color:#0177c0; font-weight:bold; font-size:20px; display:inline-block; width:25px;}
.faq_wrap li .faq_tit strong { display:inline-block; width:calc(100% - 30px); margin-top:3px; font-weight:400;}
.faq_wrap li .faq_view { position:relative; display:none; background:#f6f4fa; padding:20px; border-top:1px solid #ddd;}
.faq_wrap li .faq_view .faq_a { color:#fff; background:#0177c0; border-radius:20px; width:25px; height:25px; box-sizing:border-box; line-height:23px;text-align:center; font-weight:bold; display:inline-block; margin-right:10px;}
.faq_wrap li .faq_tit.on{ background:url("../../images/board/icon_minus.png") no-repeat right center;}
.link_line { border-bottom:1px solid #333;}
.link_line:hover{ font-weight:500; color:#333;}

.tabmenu { display: flex; flex-wrap: wrap; justify-content: space-between;}
.tabmenu > li { background:#ddd;}
.tabmenu > li a { display:block; height:60px; line-height:60px; text-align:center}
.tabmenu > li.active { background:#0177c0; color:#fff;}
.tab02 > li { width:50%;}
.tab03 > li { width:33.33%;}
.tab04 > li { width:25%;}
.tab05 > li { width:20%;}

.formbox { display: flex; flex-wrap: wrap; justify-content: space-between; border-top:1px solid #333;}
.formbox > li{ position: relative; padding: 10px 0; width: 50%; border-bottom:1px solid #ddd;}
.formbox > li.wd_full, .ipbox select.wd_full, .ipbox input.wd_full { width: 100%; clear: both;}
.ipbox { display: flex; flex-wrap: wrap; justify-content: space-between;}
.ipbox .lab { font-weight: 500; color: #333; width:120px; line-height:40px; text-align:center;}
.ipbox textarea.inp{ line-height:1.6;}
.ipbox .inp { width:calc(100% - 120px); line-height:40px; }
.ipbox .inp ul, .ipbox .inp p{ line-height:1.5;}

.calsel_period { display: flex; flex-wrap: wrap; justify-content: space-between; line-height:36px;}
.calsel_period .calselbox { width:calc(50% - 10px); display:inline-block; box-sizing:border-box;}
.calsel_period .calselbox input{ width:100%; }
.calselbox, .telselbox, .emailselbox { position:relative; display: inline-block; display: flex; flex-wrap: wrap; justify-content: space-between; }
.calselbox .calsel { position:absolute; right:10px; top:0; display:inline-block; width:24px; height:100%; background: url("../../images/sel_cal.png") no-repeat center; text-indent:-999em;}
.formbox .sch_area { display:flex; flex-wrap:wrap; justify-content:space-between;}
.formbox .sch_area .schbtn { display:inline-block; width:80px; text-align:center; background:#555; color:#fff; line-height:40px;}
.formbox .sch_area input { width:calc(100% - 80px);}

.calendarWrap {}
.calendar { text-align:center;  }
.cal_header {  padding:10px 20px; position:relative; background:#333; }
.cal_header .month_prev { position:absolute; background:url("../../images/icon_prev.png") no-repeat center; text-indent:-999em; width:30px; height:100%; border-radius:5px; display:inline-block; left:20px; top:0;   }
.cal_header .month_next { position:absolute; background:url("../../images/icon_next.png") no-repeat center; text-indent:-999em; width:30px; height:100%; border-radius:5px; display:inline-block; right:20px; top:0; ;}
.cal_header p {color:#333;  font-size:20px; font-weight:600;color:#fff; }
.calTable { text-align:center; margin:20px 0;}
.calTable th { padding:10px 0; }
.calTable td { height:50px;}
.calTable td span, .calTable td a { display:inline-block; width:40px; height:40px; line-height:40px; }
.calTable td a:hover, .calTable td.sel_active a{ background: #006dbb; border-radius:30px; color:#fff;}
.calTable td.off { filter: opacity(0.3); /* color:#cacaca; */ }
.calTable td.today span{ color: #006dbb; background: #f4f9ff; border-radius:30px;}

#explorWrite .explorBox{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#explorWrite .explorBox > div{ width:350px}
#explorWrite .explorBox > table { width:calc(100% - 400px)}
#explorWrite .explorBox > table .btn_bg { cursor:pointer; border-radius:25px; padding:2px 20px; line-height:30px;}
#explorList .formbox { padding:10px 20px; background:#f8f8f8;border-top:1px solid #ddd; border-bottom:1px solid #ddd;justify-content: center;}
#explorList .formbox label { color:#333; font-weight:500; line-height:40px; margin-right:10px;}
#explorList .btn_search { width: 70px; display: inline-block; background: #333;    border: 1px solid #333; color: #fff; margin: 0; padding: 0 20px;    vertical-align: middle;    height: 40px;    line-height: 38px;}
.state_end{ display:inline-block; border-radius: 25px; padding: 2px 20px; line-height: 30px; background: #666;border:1px solid #555;color:#fff; }
.state_apply{ display:inline-block; border:1px solid #5d9731;  background: #5d9731; border-radius: 25px; padding: 2px 15px; line-height: 30px; color:#fff;}
.state_apply:hover{border:1px solid #5d9731; background:#fff; color:#5d9731;}
.check_agreebox .chk_total .checkbox input[type="checkbox"] + label{ font-weight:500; font-size:20px;background-size: 30px 30px; padding-left:35px; height:30px; line-height:30px;}
.check_agreebox dl { border-top:1px solid #333; border-bottom:1px solid #ddd; background:#f8f8f8; padding:20px; margin-bottom:5px;}
.check_agreebox dl dt { font-weight:500; color:#333;}
.check_agreebox a.btn_popup {  display:inline-block;  border-radius: 25px; padding: 0 10px;  background: #666;border:1px solid #555;color:#fff; margin-left:5px; font-size:14px; }

.kogl_link_btnbox{display: flex; flex-wrap: wrap; justify-content: space-between; }
.kogl_link_btnbox #kogl_link {  width:400px;}
.kogl_link_btnbox #kogl_link .opentype_img{ display:inline-block; width:219px; height:54px; background:url("../../images/board/opentype_img.png") no-repeat center;}
.kogl_link_btnbox #kogl_link .opentype{ font-size:14px;display:block;}
.kogl_link_btnbox .btn_wrap { text-align:right; width:calc(100% - 400px);margin:0;}
.kogl_link_btnbox .btn_wrap a:last-child{ margin-right:0;}

#programList {display: flex; flex-wrap: wrap; justify-content: space-between; border-top:2px solid #333; padding:30px 0 0 0;  }
#programList > li { width:50%;display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ddd; }
#programList > li .thum_img { position:relative; width:130px; border:1px solid #ddd;height:180px}
#boardWrap .target span { color:#fff; display:inline-block; height:20px; line-height:20px; padding:0 5px; font-size:13px; border-radius:3px;vertical-align: text-top; margin-right:3px;}
#boardWrap .target .individual { background:#e7684a}
#boardWrap .target .group{ background:#416fac}
#programList > li .conbox { width:calc(100% - 155px); position:relative;}
#programList > li .conbox dl { margin-bottom:30px;}
#programList > li .conbox dt strong{ display:inline-block;  color:#333; font-size:20px; margin:0 5px 5px 0;}
#programList > li .conbox dd { position:relative; padding-left:8px;}
#programList > li .conbox dd:before { content:''; position:relative; left:-4px; top:-4px; display:inline-block; width:4px; height:4px; background:#ccc;}
#programList > li .conbox .btnbox { text-align:left; position:absolute; left:0; bottom:0;}
#programList > li .conbox .btnbox a { margin-left:0; border-radius:0;}
#programList > li .conbox .btnbox .btn_bg { line-height:1.5; height:auto;}
#programView { border-top:2px solid #333; padding-bottom:20px;}
#programView h4 strong { font-size:20px; color:#333; margin-right:5px;}
#programView h4 {  padding: 10px 20px; border-bottom: 1px solid #666; margin-bottom:20px;  }
#programView h5 { font-size:18px; color:#333; font-weight:bold; margin-bottom:10px;border-bottom:1px solid #333;}
#programView .detail_info {display: flex; flex-wrap: wrap; justify-content: space-between;border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px; }
#programView .detail_info .thum_img { position:relative; width:220px;}
#programView .detail_info .thum_img img{ border:1px solid #ddd;}
#programView .detail_info .conbox { width:calc(100% - 245px)}
#programView .conbox li { position:relative; margin-bottom:8px; word-break:keep-all;display: flex; flex-wrap: wrap; justify-content: space-between;}
#programView .conbox li strong { width:100px; color:#333; font-weight:500;}
#programView .conbox li span{ width:calc(100% - 120px)}
#programView .conbox li:before { content:''; position:relative; left:0px; top:10px; display:inline-block; width:4px; height:4px; background:#ccc;}
#programView .context { padding-bottom:20px; margin-bottom:20px;}

#boardWrap .galBoard {display: flex; flex-wrap: wrap; text-align:center;}
#boardWrap .galBoard li { width:calc(25% - 25px); margin-right:33px; margin-bottom:30px;}
#boardWrap .galBoard li:nth-child(4), #boardWrap .galBoard li:nth-child(8){ margin-right:0;}
#boardWrap .galBoard li a { display:block; border:1px solid #ddd;}
#boardWrap .galBoard li a:hover{ border:1px solid #222;}
#boardWrap .galBoard li a .thum_img { display:block;}
#boardWrap .galBoard li a strong{ font-weight:500; padding:10px 20px; display:inline-block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media screen and (max-width:820px){
    #boardWrap .tBoard th { line-height:1.3; padding:10px 0;}
    #boardWrap .tBoard td { padding:10px 5px; }
    #boardWrap .tBoard .mo_hide { display:none;}
    #boardWrap .schBox select { width:150px; margin:0;}
    #boardWrap .schBox input { width:calc(100% - 155px);}
    #boardWrap .schBox .btn_search{ width:100%; margin-top:10px; margin-bottom:20px; }
    .pagination ul li { width:20px; height:25px; line-height:25px; margin:0;}
    .pagination ul li a, .pagination ul li strong { height:25px; line-height:25px;}
    .pagination ul li.first a, 	.pagination ul li.prev a,	.pagination ul li.next a,	.pagination ul li.last a { border:0;}
    .board_view h4 { line-height:1.5; padding:10px;}
    .board_view h4 .view_tit strong { font-size:18px; padding-left:0px; line-height:1.3;display: inline-block; margin:5px 0;}
    .board_view h4 .view_date { margin-right:0px; font-size:14px;}
    .board_view .detail_cont{ padding:20px 10px;}
    .board_view .detail_answer_cont { padding:10px;}
    .board_view .answer_tit { font-size:16px; padding:10px;}
    .board_view .prev_next li { padding:10px;}
    .board_modify .board_title { margin-bottom:10px;}
    .file_down { padding:15px;}
    .file_down .file_list { background-position:left 5px;}
    .file_down .file_list:last-child{ margin-bottom:0;}
    .faq .tabmenu ul li { margin:0 4px 8px 4px;}
    .faq .tabmenu ul li a { padding:5px 20px;}
    .faq_wrap li .faq_view { padding:20px; }
    .faq_wrap li .faq_tit .faq_q {font-size:16px; width:20px;}
    .faq_wrap li .faq_tit strong { width:calc( 100% - 20px ); margin-top:2px;}
    .faq_wrap li .faq_view .faq_a{ width:20px; height:20px; font-size:13px; line-height:18px;}
    #boardWrap .infoBox { padding:20px;}
    .formbox > li { width:100%;}
    #explorWrite .explorBox { display:block;}
    #explorWrite .explorBox > div, #explorWrite .explorBox > table { width:100%;}
    .kogl_link_btnbox #kogl_link { width:100%;}
    .kogl_link_btnbox{display:block }
    .kogl_link_btnbox .btn_wrap { text-align:center; width:100%;margin:20px 0 0 0;}
    #programList > li {margin-bottom:30px;text-align:center;}
    #programList > li .thum_img{ margin:0 auto 10px auto;}
    #programList > li .conbox { width:100%;}
    #programList > li .conbox dl { margin-bottom:10px;}
    #programList > li .conbox dt strong { font-size:18px;}
    #programList > li .conbox .btnbox {text-align:center; position:relative;}
    #programList > li .conbox .btnbox a { padding:3px 10px; font-size:15px;}
    #programView .detail_info .thum_img { width:180px;}
    #programView .detail_info .conbox { width:calc(100% - 200px);}
    #boardWrap .galBoard { justify-content: space-between; }
    #boardWrap .galBoard li { width:calc(50% - 15px); margin-right:0; }
    #boardWrap .galBoard li a strong{ padding:10px;}
}
@media screen and (max-width:540px){
    .board_view h4 .view_tit strong { font-size:16px;}
    .board_view .prev_next strong { margin-right:0;}
    .board_view .prev_next a {  width:calc( 100% - 80px ); }
    .board_modify h4 .view_tit strong { font-size:16px;}
    .file_down { padding:10px;}
    .filebox .drop_zone{ width:100%;}
    #boardWrap .rt_waiting { font-size:12px; padding:2px 3px; border-radius:2px;}
    #boardWrap .rt_complete { font-size:12px; padding:2px 3px; border-radius:2px;}
    #boardWrap .schBox select, #boardWrap .schBox input{ height:40px; line-height:40px;}
    #boardWrap .schBox .btn_search{ height:40px; line-height:38px; margin-top:5px;}
    .faq .tabmenu ul li { margin:0 2px 4px 2px;}
    .faq .tabmenu ul li a { padding:3px 15px;}
    #boardWrap .stepbox > li { width:100%; margin-bottom:30px;}
    #boardWrap .stepbox > li:after { right:calc(50% - 10px); top:auto; bottom:-20px; transform: rotate(135deg);}
    #boardWrap .stepbox > li:last-child{ margin-bottom:0;}
    #boardWrap .boTitle { font-size:16px;}
    #boardWrap .boTitle .essential{ font-size:13px;}
    .ipbox .lab{ width:105px}
    .ipbox .inp { width:calc(100% - 105px)}
    .check_agreebox .chk_total .checkbox input[type="checkbox"] + label{ background-size:23px 23px; padding-left:28px; line-height:23px; font-size:16px; height:23px;}
    .state_end, .state_apply { padding: 0 10px;}
    #explorList .btn_search { width:100%; margin-top:5px;}
    #explorList .formbox{ padding:10px;}
    #explorList .formbox label{ display:none;}
    .kogl_link_btnbox #kogl_link {text-align:center; word-break:keep-all; font-size:13px;}
    .kogl_link_btnbox #kogl_link .opentype_img{ width:100%;}
    #programList > li{ width:100%; }
    #programView h4 strong { font-size:18px;}
    #programView h5 { font-size:16px;}
    #programView .detail_info{ padding-bottom:5px; margin-bottom:5px;}
    #programView .detail_info .thum_img { width:100%; text-align:center; margin-bottom:10px;}
    #programView .detail_info .conbox { width:100%; }
    #programView .conbox li:before { top:8px;}
    #programView .conbox li { justify-content: space-between;}
    #programView .conbox li strong{ width:50px;}
    #programView .conbox li span{ width:calc(100% - 75px)}
    #programView .context { padding-bottom: 10px; margin-bottom: 10px;}
    #programView .btn_wrap{ margin:10px 0;}
    #boardWrap .galBoard li { width:calc(50% - 5px); margin-bottom:10px;}
}