@charset "utf-8"; /* view */
/* #bo_v { margin-bottom: 200px; } */
#bo_v_atc { } 
#bo_v_info > .title { width: 100%; margin: 20px auto; border-radius: 5px 5px 0 0; position: relative; top: 0; left: 0; } 
#bo_v_info > .title .tit { padding: 0 0 20px; border-bottom: 2px solid var(--color-main); font-size: 1.30em; font-weight: 700; } 
#bo_v_info > .info { display: flex; justify-content: space-between; padding: 0 10px; box-sizing: border-box; } 
#bo_v_info > .info > p { color: #6c757d; font-size: 16px; } 
#bo_v_btn { padding: 10px; } 
#bo_v_btn * { font-size: 16px; } 
#bo_v #bo_v_con { width: 100%; margin: 0 auto; padding: 40px 20px; border-top: 2px solid #000; margin-bottom: 0 !important; } 
#bo_v #bo_v_con img { display: inline-block; border-radius: 0 !important; } 
#bo_v_data { width: 100%; margin: 30px auto 0; font-size: 16px; } 
/* #bo_v_data ul li > div { display: flex !important; justify-content: space-between; flex-flow: row wrap; } 
#bo_v_data ul li.atchfile > div:first-child { width: 100%; padding: 10px 20px; background: #f5f5f5; color: #000; font-size: 16px; font-weight: 500; } 
#bo_v_data ul li.atchfile > div:last-child { width: 100%; padding: 10px 20px; border: 1px solid #f5f5f5; margin-bottom: 40px; } 
#bo_v_data ul li.atchfile > div > div { width: 100%; color: #939393 } 
#bo_v_data ul li.atchfile > div > div a, 
#bo_v_data ul li.atchfile > div > div .date { color: #939393; font-size: 16px } */

#bo_v_link h2 { position:absolute; font-size:0; line-height:0; overflow:hidden } 
#bo_v_link ul { margin:0; list-style:none } 
#bo_v_link li { padding:15px; position:relative; margin:10px 0; border:1px solid #dfdfdf; border-radius:5px; -webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); -moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%) } 
#bo_v_link li i { float:left; color:#b2b2b2; font-size: 2.35em !important; margin-right:20px } 
#bo_v_link a { float:left; display:block; text-decoration:none; word-wrap:break-word; color:#000 } 
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active { text-decoration:underline; color:var(--color-main) } 
#bo_v_link .bo_v_link_cnt { color:#b2b2b2; font-size:0.92em } 
#bo_v_link li:hover { border-color:var(--color-main); color:var(--color-main) } 
#bo_v_link li:hover i { color:var(--color-main) } 
#bo_v_link li:hover .bo_v_link_cnt { color:var(--color-main) } 

#bo_v_file h2 { position:absolute; font-size:0; line-height:0; overflow:hidden } 
#bo_v_file ul { margin:0; list-style:none } 
#bo_v_file li { padding:15px; position:relative; margin:10px 0; border:1px solid #dfdfdf; border-radius:5px; -webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); -moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%) } 
#bo_v_file li i { float:left; color:#b2b2b2; font-size:2.35em !important; margin-right:20px } 
#bo_v_file a { float:left; display:block; text-decoration:none; word-wrap:break-word; color:#000 } 
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active { text-decoration:underline; color: var(--color-main); } 
#bo_v_file img { float:left; margin:0 10px 0 0 } 
#bo_v_file .bo_v_file_cnt { color:#b2b2b2; font-size:0.92em } 
#bo_v_file li:hover { border-color: var(--color-main); color: var(--color-main); } 
#bo_v_file li:hover i { color: var(--color-main); } 
#bo_v_file li:hover .bo_v_file_cnt { color: var(--color-main); } 



#bo_v_data li.prev_list,
#bo_v_data li.next_list { padding: 10px; gap: 10px; align-items: center; color: #787878; } 
#bo_v_data li.prev_list .prev_tit { width: 50px; } 
#bo_v_data li.prev_list .prev_txt { overflow: hidden; width:calc(100% - 50px); } 
#bo_v_data li.prev_list .prev_txt .alink { width: 95%; } 
#bo_v_data li.prev_list .prev_txt .alink a { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%; } 
#bo_v_data li.next_list .next_tit { width: 50px; } 
#bo_v_data li.prev_list .next_txt { overflow: hidden; width:calc(100% - 50px); } 
#bo_v_data li.prev_list .next_txt .alink { width: 95%; } 
#bo_v_data li.prev_list .next_txt .alink a { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%; } 
#bo_v_data li.prev_list div:hover a,
#bo_v_data li.next_list div:hover a { color: var(--color-main); } 
#bo_v_data li.prev_list div i,
#bo_v_data li.next_list div i { color: #787878; } 
.d-none { display: block !important; flex-grow: 1 !important; } 
#bo_btn_top>div>div { padding: 0 !important; } 
#bo_btn_top>div>div .border-top { border-top: unset !important; } 
#bo_btn_top>div>div .btn { font-size: 16px; } 

#viewcomment #bo_vc { margin-top: 10px; } 
#viewcomment #bo_vc .cmt-btn { display: flex; justify-content: flex-end; padding: 10px 20px; } 
#viewcomment #bo_vc .cmt-btn ul > li { display: inline-block } 
#viewcomment #bo_vc .cmt-btn ul > li > a { color: #444444; font-size: 16px; font-weight: 500; } 
#viewcomment #bo_vc .cmt-btn ul > li > a:hover { color: var(--color-main); } 

#bo_vc_w #captcha { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 20px; } 
#bo_vc_w #captcha #captcha_key { margin-right: 4px; font-size: 1.0em; } 
#bo_vc_w #captcha #captcha_mp3 { display: none; margin-right: 4px; } 
#bo_vc_w #captcha #captcha_audio { display: none; } 
#bo_vc_w #captcha #captcha_info { width: 100%; font-size: 16px; } 

#bo_vc_w #captcha.m_captcha #captcha_img { width: auto; margin: 0; height: 40px; } 
#bo_vc_w #captcha.m_captcha #captcha_key { height: 40px; } 

@media all and (max-width: 1200px){
 #bo_v { margin-bottom: 150px; } 
 }
@media all and (max-width: 640px){
 #bo_v_link li i,
#bo_v_file li i { display: block; float:none; font-size:1.50em !important; margin-right: 0; } 
 }

/* list */
#bo_list_wrap { } 
#bo_list_wrap form { width: 100%; margin: 0 auto; } 
#bo_list_wrap form #bo_list { margin-top: 20px; margin-bottom: 100px; border-top:2px solid #000; border-bottom:2px solid #000 } 
#bo_list_wrap form #bo_list .list_head { height: 75px; font-size: 1.10em; font-weight: 500; } 
#bo_list_wrap form #bo_list .list_head a { color: var(--color-main) !important; } 
#bo_list_wrap form #bo_list .list_con { color: #666; } 
#bo_list_wrap form #bo_list .list_head li { height: 100%; } 
#bo_list_wrap form #bo_list .list_con li { padding: 22px 0; border-bottom: 1px solid #EAEAEA; } 
#bo_list_wrap form #bo_list .list_con li:hover { background: #FAFAFA; } 
#bo_list_wrap form #bo_list .list_head li,
#bo_list_wrap form #bo_list .list_con li { display: flex; justify-content: space-between; align-items: center; /* padding: 0 10px; */text-align: center; } 
#bo_list_wrap form #bo_list .list_head li .num,
#bo_list_wrap form #bo_list .list_con li .num { width: 120px; } 
#bo_list_wrap form #bo_list .list_head li .date,
#bo_list_wrap form #bo_list .list_con li .date { width: 150px; } 
#bo_list_wrap form #bo_list .list_head li .hit,
#bo_list_wrap form #bo_list .list_con li .hit { width: 120px; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap,
#bo_list_wrap form #bo_list .list_con li .subject_wrap { width: calc(100% - 390px); display: flex; align-items: center; padding: 0 10px; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap p { display: block; width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap label { margin: 0; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap label input { margin-right: 10px; } 
#bo_list_wrap form #bo_list .list_con li .num { color: #4D4D4D; text-align: center; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap .subject { width: 100%; cursor: pointer; display: -ms-flexbox; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; color:#202020; font-weight:500; } 
#bo_list_wrap form #bo_list .list_con li:hover .subject_wrap .subject { color: #000; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit { font-size: 16px; font-weight: 500; color: #fff !important; background: #333; margin-right: 10px; padding: 3px 6px; border-radius: 3px; cursor: pointer; } 
#bo_list_wrap form #bo_list .list_con li.notice .num { position: relative; } 
#bo_list_wrap form #bo_list .list_con li.notice .num{  display: block; margin: 0 auto; color:#006ED8; font-weight: bold;    text-align: center; } 
#bo_list_wrap form #bo_list .list_con li.notice .subject_wrap p { color: #000; font-weight: 500; } 
#bo_list_wrap form #bo_list .list_con li.notice .subject_wrap p { color: #000; font-weight: 500; } 
#bo_list_wrap form #bo_list .list_con li #bo_btn_top>div> .btn { font-size: 16px; cursor: pointer; } 
#bo_btn_top { margin-top:30px; } 


@media all and (max-width: 1024px){
 #bo_list_wrap form #bo_list { margin-bottom: 60px; } 
#bo_list_wrap form #bo_list .list_head li .num,
#bo_list_wrap form #bo_list .list_con li .num { width: 70px; } 
#bo_list_wrap form #bo_list .list_head li .date,
#bo_list_wrap form #bo_list .list_con li .date { width: 120px; } 
#bo_list_wrap form #bo_list .list_head li .hit,
#bo_list_wrap form #bo_list .list_con li .hit { width: 70px; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap,
#bo_list_wrap form #bo_list .list_con li .subject_wrap { width: calc(100% - 260px); } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit { font-size: 14px; } 
 }

@media all and (max-width:768px){
 #bo_list_wrap form #bo_list .list_head { height: 45px; font-size: 16px; } 
#bo_list_wrap form #bo_list .list_con { font-size: 16px; border-top:2px solid #000 } 
#bo_list_wrap form #bo_list .list_con li { padding: 16px 0; } 
#bo_list_wrap form #bo_list .list_con li.notice .num::before { width: 20px; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap .subject { font-size: 18px; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit { font-size: 12px; } 
#bo_list_wrap #bo_search form#fsearch { width: 70%; } 
#bo_list_wrap #bo_search form#fsearch select { width: 120px; } 
#bo_list_wrap #bo_search form#fsearch .sch_bar { width: calc(100% - 135px); } 
 }
@media all and (max-width: 640px){
 #bo_btn_top>div> .btn { font-size: 14px; } 

#bo_list_wrap form #bo_list { border-top: 3px solid var(--color-main); } 
#bo_list_wrap form #bo_list .list_head { display: none; } 
#bo_list_wrap form #bo_list .list_con li { flex-wrap: wrap; justify-content: normal; gap: 5px 0; height: auto; padding: 15px 10px; text-align: left; } 
#bo_list_wrap form #bo_list .list_con li .num { display: none; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap { width: 100%; padding: 0; } 
#bo_list_wrap form #bo_list .list_con li .name { width: auto; margin: 0 20px 0 10px; } 
#bo_list_wrap form #bo_list .list_con li.notice .num { display: block; } 
#bo_list_wrap form #bo_list .list_con li.notice .num::before { margin: inherit; } 

#bo_list_wrap form #bo_list .list_con li .date,
#bo_list_wrap form #bo_list .list_con li .hit { display: flex; align-items: center; gap: 0 7px; width: auto; margin-right: 12px; padding-right: 12px; font-size: 14px; position: relative; line-height: 1.0; } 
#bo_list_wrap form #bo_list .list_con li .date::before,
#bo_list_wrap form #bo_list .list_con li .hit::before { content: attr(data-name); } 
#bo_list_wrap form #bo_list .list_con li .date::after { content: ''; display: block; width: 1px; height: 10px; background: #666; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; } 

#bo_list_wrap #bo_search form#fsearch { width: 100%; } 
 }
@media all and (max-width: 480px){
 #bo_list_wrap form #bo_list { border-top: 2px solid var(--color-main); } 
#bo_list_wrap form #bo_list .list_head { display: none; } 
#bo_list_wrap form #bo_list .list_con li { flex-wrap: wrap; justify-content: normal; height: auto; padding: 15px 10px; } 
#bo_list_wrap form #bo_list .list_con li .subject_wrap { width: 100%; } 
#bo_list_wrap form #bo_list .list_con li .name { width: auto; margin: 0 20px 0 10px; } 
#bo_list_wrap form #bo_list .list_con li .date { width: auto; } 
 }
@media all and (max-width:420px){
 #bo_list_wrap #bo_search form#fsearch select { width: 100px; } 
#bo_list_wrap #bo_search form#fsearch .sch_bar { width: calc(100% - 115px); } 
 }

/* 페이징 */
#bo_list_wrap .pagination li { width: auto; min-width: 30px; } 
.page-link { border: 0 !important; font-size: .90em; color: #7E7E7E; padding: 0 !important; height: 100%; line-height: 30px; text-align: center; } 
.page-link:hover { background: transparent !important; } 
.page-link:focus { box-shadow: none !important; } 
.page-item:first-child .page-link,
.page-item:last-child .page-link { display: flex; justify-content: center; align-items: center; } 
.page-item:first-child .page-link:hover img { content: url('/img/pg_prev_btn_on.svg'); } 
.page-item:last-child .page-link:hover img { content: url('/img/pg_next_btn_on.svg'); } 
.page-link img { max-width: 100%; } 
.page-item.active .page-link { background-color: transparent !important; color: var(--color-main) !important; font-weight: 600; border: 1px solid #333 !important; border-radius: 50%; } 



/* 검색창 */
#bo_list_wrap #bo_search { margin-top: 50px; } 
#bo_list_wrap #bo_search form#fsearch { text-align:left; margin: 0 auto; overflow-y:auto; border-radius:0; } 
#bo_list_wrap #bo_search form#fsearch h3 { padding:15px; border-bottom:1px solid #e8e8e8 } 
#bo_list_wrap #bo_search form#fsearch legend { background:red } 
#bo_list_wrap #bo_search form#fsearch form { display:block } 
#bo_list_wrap #bo_search form#fsearch select { float:left; margin-right:13px; border:0; width:150px; height:45px; border:1px solid #E6E6E6; border-radius:0; padding: 0 10px; color: #C5C5C5; font-size: .90em; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/img/sch_arrow.svg') no-repeat 94% 50%; } 
#bo_list_wrap #bo_search form#fsearch select:focus { border: none !important; outline: none !important; box-shadow: none !important; color: #000; border-radius:0; } 
#bo_list_wrap #bo_search form#fsearch select option { color: #000; } 
#bo_list_wrap #bo_search form#fsearch .sch_bar { display:inline-block; float:left; border-radius:0; } 
#bo_list_wrap #bo_search form#fsearch .sch_input { width:calc(100% - 45px); height:45px; padding:0 10px; background-color:transparent; float:left; font-size: .90em; color: #000; font-weight: 400; border-radius: 0 !important; border:0!important } 
#bo_list_wrap #bo_search form#fsearch .sch_input:focus { border:none!important } 
#bo_list_wrap #bo_search form#fsearch .sch_input::placeholder { color: #C5C5C5; } 
#bo_list_wrap #bo_search form#fsearch .sch_btn { border-radius: 0; background-color: var(--color-main); color:#fff } 
/* #bo_list_wrap #bo_search form#fsearch .sch_btn:hover { background-color: var(--color1) !important; border-color: var(--color1) !important; } */
#bo_list_wrap #bo_search form#fsearch .bo_sch_cls { position:absolute; right:0; top:0; color:#b5b8bb; border:0; padding:12px 15px; font-size:16px; background:#fff } 
@media all and (max-width:768px){
 #bo_list_wrap #bo_search form#fsearch { width: 70%; } 
#bo_list_wrap #bo_search form#fsearch select { width: 120px; } 
#bo_list_wrap #bo_search form#fsearch .sch_bar { width: calc(100% - 135px); } 
 }
@media all and (max-width:600px){
 #bo_list_wrap #bo_search form#fsearch { width: 100%; } 
 }
@media all and (max-width:420px){
 #bo_list_wrap #bo_search form#fsearch select { width: 100px; } 
#bo_list_wrap #bo_search form#fsearch .sch_bar { width: calc(100% - 115px); } 
 }





/* write */
#bo_w { margin-bottom: 200px; } 
#bo_w form { width: 100%; margin: 0 auto; } 
#bo_w form>ul li { display: flex; justify-content: space-between; align-items:center; flex-flow: row wrap; margin-bottom: 20px; } 
#bo_w form>ul li:last-child { margin-bottom: 80px; } 
#bo_w form>ul li>label { display: flex; align-items: center; width: 70px; margin-bottom: 0; color: #000; font-size: 18px; font-weight: 700; } 
#bo_w form>ul li>label span { color: var(--color5); margin-left: 10px; display: block; font-weight: normal; } 
#bo_w form>ul li>div { width: calc(100% - 80px); display: flex; align-items: center; flex-flow: row wrap; margin: 0 !important; } 
#bo_w form>ul li>div>label { font-size: 1.0em; font-weight: normal; cursor: pointer; margin-right: 25px; display: flex; align-items: center; width: fit-content; } 
#bo_w form>ul li div input[type='text'] { width: 100%; height: 50px; line-height: 50px; background: #fff; border-radius: 5px; border: 1px solid #D9D9D9; padding: 0 20px; font-size: var(--font-20); color: #000; } 
#bo_w form>ul li div>input:active,
#bo_w form>ul li div>input:valid,
#bo_w form>ul li div>input:focus { box-shadow: unset; } 
#bo_w form>ul li div.link_wrap { } 
#bo_w form>ul li div.link_wrap>div { width: 100%; } 
#bo_w form>ul li div.file_wrap { } 
#bo_w form .btn_wrap { display: flex; justify-content: space-between; align-items: center; flex-flow: row-reverse; margin-top: 80px; } 
#bo_w form .btn_wrap button,
#bo_w form .btn_wrap a { display: block; height: 100%; padding: 14px 0; margin:0; font-size: 1.0em; text-align: center; font-weight: bold; border-radius: 5px !important; width: calc(50% - 10px); } 
.cke_sc { display: none !important; } 

@media all and (max-width:1199px){
 #bo_w { margin-bottom: 150px; } 
#bo_w form>ul li>label { width: 110px; } 
#bo_w form>ul li>div { width: calc(100% - 120px); } 
 }
@media all and (max-width:768px){
 #bo_w form>ul li>div>label { width: 50%; margin-right: 0; margin-bottom: 10px; } 
#bo_w form>ul li>div>.privacy_label { width: fit-content; margin-bottom: 0; } 
.sub-page .page-tit { margin-bottom:30px!important; } 
 #bo_list_wrap form #bo_list .list_con li .date, #bo_list_wrap form #bo_list .list_con li .hit { display:none } 
 }

@media all and (max-width:640px){
 #bo_w form>ul li { gap: 5px 0; margin-bottom: 15px; } 
#bo_w form>ul li>div>label { width: 50%; margin-right: 0; margin-bottom: 10px; } 
#bo_w form>ul li>label { width: 100% } 
#bo_w form>ul li>div { width: 100% } 

.form-row { margin-top:30px!important; } 
 #bo_search form#fsearch .sch_bar { width:100%!important } 
 #bo_list_wrap #bo_search form#fsearch .sch_input { width:100%!important } 
 #sub-visual .inner { padding:80px 0 } 
 .sub-visual__img { min-height:200px } 
 .sub-visual__img img { position:absolute; width:auto; height:100% } 
#bo_list_wrap #bo_search { margin-top:0 } 
 }


.sub-page .tit { font-size:2.5em; text-align: center; } 
.sub-page .page-tit { margin-bottom:100px; } 
#bo_list_wrap form #bo_list .list_head li .subject_wrap, #bo_list_wrap form #bo_list .list_con li .subject_wrap { width:auto } 
.flex_wrap { display:flex; align-items: center; } 
#bo_list_wrap #bo_search form#fsearch .sch_input { width:300px } 
.input-group { display: flex; flex-wrap:nowrap; border:1px solid #C0C0C0 } 
.form-row { justify-content: flex-end; } 
.flex_box { display: flex; justify-content: space-between; align-items: center; } 
.flex_box#bo_v_info > .title { width:auto; margin:0; display:flex; align-items: center; gap:10px; } 
.flex_box#bo_v_info > .title .tit { padding:10px 0 } 
.flex_box#bo_v_info > .title .num { font-size: 1.30em; font-weight: 700; } 

#bo_v_btn .go_listpage { position: relative; top:30px; left: 50%; transform: translateX(-50%); width: 250px; border: 1px solid #262262; display: flex; align-items: center; justify-content: center; height: 70px; font-size: 1.25em; border-radius: 0; box-sizing: border-box; color: #262262; } 
#bo_v_btn .go_listpage:hover { background: #262262; color:#fff; } 



.list_head li,
.list_con li { display:flex; align-items:center; width:100%; border-bottom:1px solid #ddd; } 
.list_head li { border-top:1px solid #222; border-bottom:1px solid #ddd; padding:18px 0; color:#888; font-size:14px; } 
.list_con li { padding:22px 0; } 
.num { width:120px; flex:0 0 120px; text-align:center; } 
.subject_wrap { flex:1; min-width:0; } 
.subject { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; text-align: left; } 
.name { width:110px; flex:0 0 110px; text-align:center; } 
.hit { width:90px; flex:0 0 90px; text-align:center; } 
.date { width:140px; flex:0 0 140px; text-align:center; } 
.notice .num { color:#0d6efd; font-weight:600; } 

.flex_box,
.flex_wrap { width:calc(100% - 120px - 90px - 140px); display:flex; align-items:center; min-width:0; } 




@media (max-width: 1024px){
 .flex_box,
 .flex_wrap { width:calc(100% - 100px - 80px - 120px); } 

 .num { width:56px; flex:0 0 56px; font-size:14px; } 

 .name { width:100px; flex:0 0 100px; font-size:14px; } 

 .hit { width:80px; flex:0 0 80px; font-size:14px; } 

 .date { width:120px; flex:0 0 120px; font-size:14px; } 

 .list_head li { padding:16px 0; } 

 .list_con li { padding:18px 0; } 

 .subject { font-size:15px; } 
 }


@media (max-width: 768px) {
 .list_head { display:none; } 
 .list_con li { display:block; padding:16px 14px; border-bottom:1px solid #e5e5e5; } 
 .flex_wrap { width:100%; display:flex;  gap:10px; } 
 .num { width:auto; flex:0 0 auto; min-width:34px; text-align:left; font-size:13px; line-height:1.4; margin-top:2px; } 
 .subject_wrap { flex:1; min-width:0; display:block; } 
 .subject { display:block; white-space:normal; overflow:visible; text-overflow:unset; word-break:keep-all; line-height:1.5; font-size:15px; } 
 .edit { display:inline-block; margin-bottom:6px; font-size:12px; } 
 .name,
 .hit,
 .date { width:auto; flex:none; text-align:left; display:inline-block; font-size:12px; color:#777; margin-top:10px; vertical-align:middle; } 
 .name::before,
 .hit::before,
 .date::before { color:#999; margin-right:4px; } 
 .name::before { content: attr(data-name) " :"; } 
 .hit::before { content: attr(data-name) " :"; } 
 .date::before { content: attr(data-name) " :"; } 
 .hit,
 .date { margin-left:12px; } 
 .notice .num { display:inline-flex; align-items:center; justify-content:center; min-width:42px; padding:5px 10px; border:1px solid #0d6efd; border-radius:20px; font-size:14px; } 
 }

@media (max-width: 480px){
 .list_con li { padding:14px 10px; } 
 .flex_wrap { gap:8px; } 
 .subject { font-size:14px; } 
 .name,
 .hit,
 .date { display:block; margin-left:0; margin-top:6px; font-size:12px; } 
 .hit,
 .date { margin-left:0; } 
 .num { min-width:30px; font-size:12px; } 
 .notice .num { min-width:auto; padding:2px 7px; font-size:11px; } 
 }