@charset "utf-8"; /* CSS Document */ #boardWrap .has-before::before, #boardWrap .has-after::after, #boardWrap .view_table .file_box .file_list>li::before, #boardWrap .view_table .file_box .file_list>li .down::before, #boardWrap .view_table .file_box .file_list>li .btn_view .icon::before, #boardWrap .view_table .file_box .file_list>li>a::before, #boardWrap .view_table .view_basics_list .file_list>li::before, #boardWrap .view_table .view_basics_list .file_list>li .down::before, #boardWrap .view_table .view_basics_list .file_list>li .btn_view .icon::before, #boardWrap .view_table .view_basics_list .file_list>li>a::before, .headList .SearchInfo .search_list .btn_listcount::before, .check_label::before, .check_label1::before, .radio_label::before, #boardWrap .view_table .info_list li+li:before, #boardWrap .faq_list>li .question .icon_q::before, #boardWrap .faq_list>li .question>.arr::before, #boardWrap .faq_list>li .faq_list_con .icon_a::before, .gallery_list>ul>li .gl_info>dd.part span+span::before { display:flex; } .list_group .bbs_table { border-bottom:none; } #boardWrap a, #boardWrap button { text-decoration:none; } #boardWrap * { word-break: break-all; } .none_data {width:100% !important;text-align:center;} /* 검색 */ .headList.between .search_more { position:relative; border-radius:40px; font-size:1.03rem; font-weight:500; background:#2c3748; color:#fff; line-height:1; display:flex; align-items:center; height:35px; padding:0 40px 0 20px; } .headList.between .search_more::before { position:absolute; right:20px; top:calc(50% - 2px); width:6px; height:6px; border-style:solid; border-width:0 2px 2px 0; border-color:#fff; content:''; transform:translateY(-50%) rotate(45deg); transition:all ease 0.3s; display:flex; } .headList.between .search_more.active::before { transform:translateY(-50%) rotate(225deg); top:50%; display:flex;} #boardWrap .search_wrap { border-radius:15px; border:2px solid #2c3748; padding:1em; margin-top:1em; font-size:16px; } #boardWrap .search_wrap .list { display:flex; flex-wrap:wrap; align-items:center; border-radius:10px; background:rgba(0,0,0,.1); padding:10px; } #boardWrap .search_wrap .list>li { width:calc(100% / 2); } #boardWrap .search_wrap .list>li.full { width:100%; } #boardWrap .search_wrap .list>li.bt_line { padding-top:10px; margin-top:10px; border-top:1px dashed rgba(0,0,0,.2); } #boardWrap .search_wrap .list>li>dl { display:flex; align-items:center; gap:5px; } #boardWrap .search_wrap .list>li>dl>dt { flex:0 1 auto; width:5em; margin-right:1.5em; font-size:1.03em; font-weight:bold; color:#222; text-align:right; padding-left:1em } #boardWrap .search_wrap .list>li>dl>dd { flex:auto; } #boardWrap .search_wrap .list>li>dl>dd select, #boardWrap .search_wrap .list>li>dl>dd input { width:100%; min-height:45px; border-radius:5px; font-weight:500; color:#222; } #boardWrap .search_wrap .list>li>dl>dd select { min-width:6.5em; } #boardWrap .search_wrap .list>li>dl>dd select { background-position:calc(100% - 1em) 50%; } #boardWrap .search_wrap .search_more_wrap { margin-top:10px; display:none } #boardWrap .search_wrap .search_more_wrap .list>li { padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.2); } #boardWrap .search_wrap .search_more_wrap .list>li:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; } #boardWrap .search_wrap .search_more_wrap .dateinput { position:relative; width:100%; display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center;} #boardWrap .search_wrap .search_more_wrap .dateinput::before { position:absolute; left:50%; top:50%; content:'~'; transform:translate(-50%,-50%); display:flex; } #boardWrap .search_wrap .search_more_wrap .dateinput>li { width:calc((100% - 30px) / 2); position:relative; } #boardWrap .search_wrap .search_more_wrap .dateinput>li>a { position:absolute; right:0; top:0; width:45px; height:100%; display:flex; align-items:center; justify-content:center; } #boardWrap .search_wrap .search_more_btn { display:flex; align-items:center; justify-content:center; margin-top:1.25em; gap:5px; } #boardWrap .search_wrap .search_more_btn button { min-width:150px; border-radius:5px; height:45px; display:flex; align-items:center; justify-content:center; font-size:1.03em; font-weight:500 } #boardWrap .search_wrap .search_more_btn .btn_reset { background:#2c3748; color:#fff; } #boardWrap .search_wrap .search_more_btn .btn_search { background:#f76707; color:#fff; } #boardWrap .search_wrap a:hover { text-decoration:inherit } /* 강좌 목록 */ #boardWrap .app_class_list { display:flex; flex-wrap:wrap; gap:1em; margin-top:3em } #boardWrap .app_class_list>li { position:relative; width:calc((100% - 1em) / 2); display:flex; flex-flow:column; border-radius:15px; border:1px solid rgba(0,0,0,.2); padding:1.5em} #boardWrap .app_class_list>li::before { position:absolute; width:calc(100% + 2px); height:calc(100% + 2px); border:3px solid #2c3748; border-radius:15px; content:''; left:-1px; top:-1px; opacity:0; transition:all ease 0.3s; pointer-events:none; display:flex; } #boardWrap .app_class_list>li:hover::before { opacity:1; } #boardWrap .app_class_list>li>a { display:flex; width:100%; flex-flow:column; } #boardWrap .app_class_list>li>a:hover { text-decoration:inherit } #boardWrap .app_class_list>li .cate_list { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:1em; justify-content:space-between; margin-bottom:20px } #boardWrap .app_class_list>li .cate_list>li>.listnum { display:flex; display:flex; align-items:center; justify-content:center; font-weight:400;line-height:1; height:35px; padding:0 15px; border-radius:20px; background:#000; color:#fff; letter-spacing:.025em; } #boardWrap .app_class_list>li .cate_list>li>.cate, #boardWrap .app_class_list>li .cate_list>li>.state, #boardWrap .app_class_list>li .cate_list>li>.btn_app { display:flex; align-items:center; justify-content:center; font-weight:400;line-height:1; height:35px; padding:0 15px; border-radius:20px; } #boardWrap .app_class_list>li .cate_list>li>.cate1 { border:1px solid #f76707; color:#f76707 } #boardWrap .app_class_list>li .cate_list>li>.cate2 { border:1px solid #2c3748; color:#2c3748 } #boardWrap .app_class_list>li .cate_list>li>.cate3 { border:1px solid #2d8ddf; color:#2d8ddf } #boardWrap .app_class_list>li .cate_list>li>.cate4 { border:1px solid #15bf41; color:#15bf41 } #boardWrap .app_class_list>li .cate_list>li>.cate5 { border:1px solid #c91313; color:#c91313 } #boardWrap .app_class_list>li .cate_list>li>.cate6 { border:1px solid #c511c0; color:#c511c0 } #boardWrap .app_class_list>li .cate_list>li>.state1 { background:#2d8ddf; color:#fff } #boardWrap .app_class_list>li .cate_list>li>.state2 { background:#16b31b; color:#fff } #boardWrap .app_class_list>li .cate_list>li>.state3 { background:#222; color:#fff } #boardWrap .app_class_list>li .cate_list>li>.state4 { background:#99532a; color:#fff } #boardWrap .app_class_list>li .cate_list>li>.btn_app { background:#f74907; color:#fff; font-weight:bold; font-size:1.067em; letter-spacing:0 } #boardWrap .app_class_list>li .tit { display:block; font-size:1.6em; font-weight:bold; color:#222; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden } #boardWrap .app_class_list>li .dt_dl { display:flex; flex-wrap:wrap; align-items:center; margin-top:10px; line-height:1.2; font-weight:500; font-size:1.167em; color:#555; gap:5px 15px; } #boardWrap .app_class_list>li .dt_dl>dt { position:relative; padding-left:10px; min-width:80px; } #boardWrap .app_class_list>li .dt_dl>dt::after { position:absolute; left:0; top:calc(50% - 1px); width:4px; height:4px; border-radius:100%; background:#222; opacity:.3; content:''; transform:translateY(-60%); display:flex; } #boardWrap .app_class_list>li .dt_dl>dd { width:calc(100% - 95px); white-space:nowrap; text-overflow:ellipsis; overflow:hidden } #boardWrap .app_class_list>li .period { color:#2d8ddf; font-size:1.267em; font-weight:bold; margin-top:20px; } #boardWrap .app_class_list>li .period>dt::after { background:#2d8ddf; opacity:1;} #boardWrap .app_class_list>li .medium { font-size:1.2em; font-weight:600; color:#222 } #boardWrap .app_class_list>li .amount { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 2em; background:rgba(0,0,0,.05); border-radius:15px; padding:1em; margin-top:1em; } #boardWrap .app_class_list>li .amount>dl { display:flex; flex-wrap:wrap; align-items:center; gap:10px;} #boardWrap .app_class_list>li .amount>dl>dd { font-size:1.35em; font-weight:bold; color:#333 } #boardWrap .app_class_list>li .amount>dl:has(.icon2)>dd { color:#2d8ddf } #boardWrap .app_class_list>li .amount>dl .icon { position:relative; width:32px; height:32px; border-radius:100%; display:flex; align-items:center; justify-content:center;} #boardWrap .app_class_list>li .amount>dl .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; border-radius:100%; content:''; background-size:auto 100%; background-position:center; background-repeat:no-repeat; display:flex;} #boardWrap .app_class_list>li .amount>dl .icon1 { background-color:#222; } #boardWrap .app_class_list>li .amount>dl .icon2 { background-color:#2d8ddf; } #boardWrap .app_class_list>li .amount>dl .icon1::before { background-image:url(/resource/common/images/bbs/lll/icon_num.svg) } #boardWrap .app_class_list>li .amount>dl .icon2::before { background-image:url(/resource/common/images/bbs/lll/icon_num2.svg)} #boardWrap .app_class_list>li .amount>dl .small { font-weight:400; color:#222; } @media all and (max-width:1024px){ .lll_head .bdTotal { flex:auto } .headList.between .search_more { font-size:1rem; } #boardWrap .search_wrap .list>li>dl>dt { margin-right:.75em; padding-left:.75em; } } @media all and (max-width:968px){ #boardWrap .search_wrap>.list>li { width:100%; padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.2); } #boardWrap .search_wrap>.list>li:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; } #boardWrap .search_wrap .list>li.bt_line { padding-top:0; margin-top:0; border-top:none; } } @media all and (max-width:768px){ #boardWrap .app_class_list>li { width:100%; } } @media all and (max-width:568px){ #boardWrap .search_wrap { font-size:15px; } #boardWrap .search_wrap .list>li>dl { flex-wrap:wrap; } #boardWrap .search_wrap .list>li>dl>dt { width:100%; text-align:left; padding-left:0; } #boardWrap .search_wrap .search_more_btn button { min-width:110px; } #boardWrap .app_class_list { margin-top:2em; } } @media all and (max-width:368px){ #boardWrap .search_wrap .search_more_wrap .dateinput>li { width:100%; } #boardWrap .app_class_list>li { padding:1.5em 1em; } #boardWrap .app_class_list>li .tit { font-size:1.5em; } #boardWrap .app_class_list>li .dt_dl { flex-flow:column; align-items:flex-start; gap:3px } #boardWrap .app_class_list>li .dt_dl>dd { width:100%; padding-left:10px; } #boardWrap .app_class_list>li .cate_list { gap:5px; } #boardWrap .app_class_list>li .cate_list>li>.cate, #boardWrap .app_class_list>li .cate_list>li>.state, #boardWrap .app_class_list>li .cate_list>li>.btn_app, #boardWrap .app_class_list>li .cate_list>li>.listnum { height:30px; padding:0 10px; letter-spacing:-.065em } #boardWrap .app_class_list>li .cate_list>li>.listnum { letter-spacing:.025em; } #boardWrap .app_class_list>li .cate_list>li>.btn_app { font-size:1em; } #boardWrap .app_class_list>li .period { font-size:1.2em ;} #boardWrap .app_class_list>li .medium { font-size:1.167em; } #boardWrap .app_class_list>li .dt_dl { font-size:1.1em; } #boardWrap .app_class_list>li .amount>dl { gap:5px; } #boardWrap .app_class_list>li .amount>dl>dd { font-size:1.3em; } #boardWrap .app_class_list>li .amount>dl .icon { width:28px; height:28px; } } /* 강좌 상세 */ #boardWrap .app_class_list.col01 { margin-bottom:1.5em; } #boardWrap .app_class_list.col01>li { width:100%; border:3px solid #2c3748;} #boardWrap .app_class_list.col01>li:hover::before { display:none; } #boardWrap .view_table a:hover { text-decoration:inherit; color:inherit } /* 강좌 신청 */ #boardWrap .sub_title { position:relative; display:flex; font-size:1.4em!important; font-weight:bold!important; color:#222; margin-top:1.5em; margin-bottom:.3em!important; line-height:1.25!important } #boardWrap .sub_title.mt0 { margin-top:0; } #boardWrap .agree_app { background:rgba(0,0,0,.05); border-radius:10px; padding:1em; } #boardWrap .agree_app .agree_area { display:flex; flex-flow:column; gap:10px; } #boardWrap .agree_app .agree_area>li { display:flex; flex-wrap:wrap; align-items:center; } #boardWrap .agree_app .agree_area>li textarea { width:100%; min-height:200px; } #boardWrap .agree_app label { font-weight:500; color:#222; } #boardWrap .agree_app label>strong { color:red; } #boardWrap .agree_app .check_label::before { border:1px solid rgba(0,0,0,.6); background-color:#fff; display:flex; } #boardWrap .btnArea .btn.red { background:#f76707 } #boardWrap .all_agree { display:flex; align-items:center; justify-content:center; margin-top:1em } /* 마이페이지 */ #boardWrap .lll_table { font-size:16px; } #boardWrap .lll_table thead th { font-weight:500; background:rgba(0,0,0,.05); font-size:1.03em; } #boardWrap .lll_table tbody td { font-weight:500; color:#222; } #boardWrap .lll_table .state1 { color:#2d8ddf; } #boardWrap .lll_table .state2 { line-height:1; padding:7px 10px; border-radius:3px; background:#f74907; color:#fff; } #boardWrap .lll_table .state3 { line-height:1; padding:7px 10px; border-radius:3px; background:#222; color:#fff; } #boardWrap .lll_table .state4 { color:#f74907; } @media all and (max-width:1024px){ #boardWrap .list_group .lll_table tbody tr { display:flex; flex-wrap:wrap; gap:3px 10px; justify-content:space-between; } #boardWrap .list_group .lll_table .bbslist_none { width:100%; } #boardWrap .lll_table .title { order:2; width:100%; font-weight:bold; font-size:1.167em } #boardWrap .lll_table .date { order:3; width:100%; text-align:left} #boardWrap .lll_table .cate { order:4; } #boardWrap .lll_table .inst { order:5; } #boardWrap .lll_table .pay { order:6; } #boardWrap .lll_table .met { order:7; } } @media all and (max-width:868px){ #boardWrap .lll_table .cate, #boardWrap .lll_table .inst, #boardWrap .lll_table .pay, #boardWrap .lll_table .met { width:calc((100% - 10px) / 2); text-align:left } } @media all and (max-width:568px){ #boardWrap .lll_table .cate, #boardWrap .lll_table .inst, #boardWrap .lll_table .pay, #boardWrap .lll_table .met { width:100% } }