@charset "utf-8";

/* 융합교육과정 FAQ 게시판 스킨 (huss_faq) */
.fq_bo{padding-bottom:160px; color:#204c75; word-break:keep-all;}
.fq_bo *, .fq_bo *:before, .fq_bo *:after{box-sizing:border-box;}
.fq_bo ul, .fq_bo li{list-style:none; margin:0; padding:0;}
.fq_bo button{font-family:inherit; cursor:pointer;}
.fq_bo .m_br{display:none;}
.fq_bo p{word-break:keep-all;}

/* 버튼 */
.fq_btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 24px; border:1px solid #204c75; border-radius:100px; background:#fff; font-size:15px; font-weight:700; color:#204c75; transition:background .3s ease, color .3s ease, border-color .3s ease;}
.fq_btn i{font-size:18px;}
.fq_btn:hover, .fq_btn:focus-visible{background:#204c75; color:#fff;}
.fq_btn.pt{border-color:#246ba5; background:#246ba5; color:#fff;}
.fq_btn.pt:hover, .fq_btn.pt:focus-visible{border-color:#204c75; background:#204c75;}
.fq_btn.del{border-color:#d64545; color:#d64545;}
.fq_btn.del:hover, .fq_btn.del:focus-visible{background:#d64545; color:#fff;}
.fq_foot{display:flex; justify-content:center; gap:8px; margin-top:40px;}

/* 상단 */
.fq_top{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) 520px; align-items:center; gap:40px; padding:56px 60px; border-radius:36px; background:linear-gradient(125deg, #204c75 0%, #246ba5 55%, #348bc1 100%); color:#fff;}
.fq_top:before{content:""; position:absolute; right:-120px; top:-160px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(169,220,245,.28) 0%, rgba(169,220,245,0) 70%);}
.fq_top > *{position:relative; z-index:1;}
.fq_top .t_txt em{display:inline-block; padding:7px 14px; border-radius:100px; background:rgba(255,255,255,.12); font-style:normal; font-size:12px; font-weight:700; color:#a9dcf5; letter-spacing:1.5px; text-transform:uppercase;}
.fq_top .t_txt strong{display:block; margin-top:18px; font-size:34px; font-weight:600; letter-spacing:-1.2px; line-height:1.35;}
.fq_top .t_txt p{margin-top:12px; font-size:17px; color:rgba(255,255,255,.75); line-height:1.6;}
.fq_sch{position:relative; display:flex; align-items:center; height:66px; padding:0 8px 0 56px; border-radius:100px; background:#fff; box-shadow:0 20px 40px rgba(0,0,0,.2);}
.fq_sch i{position:absolute; left:24px; top:50%; margin-top:-11px; font-size:22px; color:#246ba5;}
.fq_sch input{flex:1 1 auto; min-width:0; height:100%; border:0; background:none; font-size:16px; color:#204c75; outline:none;}
.fq_sch button{flex:0 0 auto; height:50px; padding:0 26px; border:0; border-radius:100px; background:#204c75; font-size:15px; font-weight:700; color:#fff; transition:background .3s ease;}
.fq_sch button:hover, .fq_sch button:focus-visible{background:#246ba5;}

/* 최고관리자 */
.fq_admin{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; padding:16px 20px; border:1px dashed #c4dcee; border-radius:18px; background:#f5fafe;}
.fq_admin .a_tit{display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:15px; font-weight:700; color:#246ba5;}
.fq_admin .a_tit i{font-size:18px;}
.fq_admin > a{display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 18px; border:1px solid #204c75; border-radius:100px; font-size:14px; font-weight:700; color:#204c75; transition:background .3s ease, color .3s ease;}
.fq_admin > a i{font-size:17px;}
.fq_admin > a.pt, .fq_admin > a:hover, .fq_admin > a:focus-visible{background:#204c75; color:#fff;}

/* 분류 탭 */
.fq_tabs{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:40px;}
.fq_tabs a{display:flex; align-items:center; gap:10px; height:72px; padding:0 22px; border:1px solid #dcebf5; border-radius:22px; background:#fff; font-size:17px; font-weight:700; color:#4b5468; transition:all .3s ease;}
.fq_tabs a i{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:14px; background:#e5f3fb; font-size:20px; color:#246ba5; transition:all .3s ease;}
.fq_tabs a span{flex:1 1 auto; min-width:0; letter-spacing:-.4px;}
.fq_tabs a b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:16px; font-weight:700; color:#9aa3b5;}
.fq_tabs a:hover, .fq_tabs a:focus-visible{border-color:#c4dcee; color:#204c75;}
.fq_tabs a.on{border-color:transparent; background:#204c75; color:#fff; box-shadow:0 14px 28px rgba(32,76,117,.22);}
.fq_tabs a.on i{background:rgba(255,255,255,.14); color:#fff;}
.fq_tabs a.on b{color:#a9dcf5;}

.fq_result{margin-top:30px; font-size:16px; color:#4b5468;}
.fq_result b{font-weight:800; color:#246ba5;}
.fq_result a{margin-left:8px; font-size:14px; color:#7b8497; text-decoration:underline;}

/* 목록 */
.fq_wrap{margin-top:50px;}
.fq_grp + .fq_grp{margin-top:56px;}
.fq_gtit{display:flex; align-items:center; gap:8px; margin:0 0 16px; font-size:22px; font-weight:800; color:#204c75; letter-spacing:-.6px;}
.fq_gtit span{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:24px; padding:0 8px; border-radius:100px; background:#e5f3fb; font-size:13px; font-weight:800; color:#246ba5;}
.fq_list{border-top:2px solid #204c75;}
.fq_item{border-bottom:1px solid #dcebf5;}
.fq_q{margin:0;}
.fq_q button{display:flex; align-items:center; gap:18px; width:100%; min-height:86px; padding:22px 24px; border:0; background:#fff; text-align:left; transition:background .3s ease;}
.fq_q .mk, .fq_a .mk, .fq_view .mk{flex:0 0 42px; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; font-family:'Outfit', 'Pretendard', sans-serif; font-size:19px; font-weight:700;}
.fq_q .mk{background:#e5f3fb; color:#246ba5; transition:background .3s ease, color .3s ease;}
.fq_q .tx{flex:1 1 auto; min-width:0; font-size:19px; font-weight:600; color:#333; letter-spacing:-.5px; line-height:1.5;}
.fq_q .tx em{display:inline-block; margin-right:8px; padding:3px 10px; border-radius:100px; background:#f5fafe; font-style:normal; font-size:13px; font-weight:700; color:#4b5468; vertical-align:2px;}
.fq_q .ic{position:relative; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#f5fafe; transition:background .3s ease, transform .3s ease;}
.fq_q .ic:before, .fq_q .ic:after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:2px; background:#204c75; transition:transform .3s ease, background .3s ease;}
.fq_q .ic:after{transform:rotate(90deg);}
.fq_q button:hover, .fq_q button:focus-visible{background:#f5fafe;}
.fq_q button:focus-visible{outline:2px solid #348bc1; outline-offset:-2px;}
.fq_item.on .fq_q .mk{background:#246ba5; color:#fff;}
.fq_item.on .fq_q .ic{background:#204c75; transform:rotate(180deg);}
.fq_item.on .fq_q .ic:before{background:#fff;}
.fq_item.on .fq_q .ic:after{background:#fff; transform:rotate(0);}
.fq_a[hidden]{display:none;}
.fq_a .a_in{display:flex; gap:18px; margin:0 0 22px; padding:26px 24px; border-radius:20px; background:#f5fafe;}
.fq_a .mk{background:#204c75; color:#fff;}
.fq_a .a_body{flex:1 1 auto; min-width:0; padding-top:8px;}
.a_txt{font-size:17px; font-weight:500; color:#4b5468; line-height:1.8; letter-spacing:-.3px; overflow-wrap:anywhere;}
.a_txt p{margin:0;}
.a_txt img{max-width:100%; height:auto;}
.a_link{display:inline-flex; align-items:center; gap:6px; margin-top:16px; height:42px; padding:0 18px; border:1px solid #246ba5; border-radius:100px; background:#fff; font-size:14px; font-weight:700; color:#246ba5; transition:background .3s ease, color .3s ease;}
.a_link:hover, .a_link:focus-visible{background:#246ba5; color:#fff;}
.a_mng{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; padding-top:14px; border-top:1px dashed #c4dcee;}
.a_mng label{display:inline-flex; align-items:center; gap:4px; margin-right:6px; font-size:13px; font-weight:600; color:#4b5468;}
.a_mng a{display:inline-flex; align-items:center; gap:3px; height:32px; padding:0 12px; border-radius:100px; background:#fff; font-size:13px; font-weight:700; color:#204c75; box-shadow:inset 0 0 0 1px #c4dcee; transition:background .3s ease, color .3s ease;}
.a_mng a:hover, .a_mng a:focus-visible{background:#204c75; color:#fff;}

.fq_empty{margin-top:50px; padding:80px 20px; border:1.5px dashed #c4dcee; border-radius:24px; text-align:center;}
.fq_empty i{font-size:50px; color:#c4dcee;}
.fq_empty p{margin-top:8px; font-size:17px; color:#7b8497;}

/* 페이징 */
.fq_bo .pg_wrap{margin-top:30px;}

/* 보기 (관리자) */
.fq_vbox{padding:40px 44px; border:1px solid #dcebf5; border-radius:28px; background:#fff;}
.fq_vbox .v_ca{display:inline-block; padding:5px 12px; border-radius:100px; background:#e5f3fb; font-size:13px; font-weight:800; color:#246ba5;}
.fq_vbox h3{display:flex; align-items:flex-start; gap:14px; margin:14px 0 0; font-size:24px; font-weight:800; letter-spacing:-.7px; line-height:1.45;}
.fq_vbox h3 .mk{background:#e5f3fb; color:#246ba5;}
.fq_vbox .v_info{margin-top:10px; padding-left:56px; font-size:14px; color:#7b8497;}
.fq_vbox .v_info b{color:#204c75;}
.fq_vbox .v_body{display:flex; gap:14px; margin-top:26px; padding:26px 24px; border-radius:20px; background:#f5fafe;}
.fq_vbox .v_body .mk{background:#204c75; color:#fff;}
.fq_vbox .v_body .a_txt{padding-top:8px;}
.fq_vbox .v_link{padding-left:56px;}

/* 쓰기 */
.fq_form{padding:40px 44px; border:1px solid #dcebf5; border-radius:28px; background:#fff;}
.fq_form .f_head{padding-bottom:22px; border-bottom:2px solid #204c75;}
.fq_form .f_head strong{font-size:24px; font-weight:800; letter-spacing:-.6px;}
.fq_form .f_head p{margin-top:6px; font-size:14px; color:#7b8497;}
.fq_form b{color:#e8484f;}
.fq_form .f_grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 24px; margin-top:28px;}
.fq_form .f_full{grid-column:1 / -1;}
.fq_form label{display:block; margin-bottom:8px; font-size:15px; font-weight:700; color:#204c75;}
.fq_form input[type="text"], .fq_form input[type="number"], .fq_form input[type="url"], .fq_form select{width:100%; height:52px; padding:0 18px; border:1px solid #dcebf5; border-radius:14px; background:#fff; font-size:15px; color:#204c75; outline:none; transition:border-color .3s ease, box-shadow .3s ease;}
.fq_form input:focus, .fq_form select:focus{border-color:#246ba5; box-shadow:0 0 0 4px rgba(36,107,165,.1);}
.fq_form .f_help{margin-top:6px; font-size:13px; color:#9aa3b5;}
.fq_form .f_editor textarea{width:100%; min-height:260px; padding:16px 18px; border:1px solid #dcebf5; border-radius:14px; font-size:15px; line-height:1.7;}
.fq_form .f_captcha{margin-top:24px;}

/* 반응형 */
@media (max-width: 1170px){
	.fq_bo{padding-bottom:100px;}
	.fq_top{grid-template-columns:1fr; gap:28px; padding:46px 44px;}
	.fq_top .t_txt strong{font-size:30px;}
	.fq_tabs a{height:66px; padding:0 16px; font-size:16px;}
}
@media (max-width: 980px){
	.fq_tabs{grid-template-columns:repeat(2, minmax(0, 1fr));}
	.fq_q .tx{font-size:18px;}
	.fq_form .f_grid{grid-template-columns:1fr;}
}
@media (max-width: 767px){
	.fq_bo{padding-bottom:60px;}
	.fq_bo .m_br{display:block;}
	.fq_top{gap:22px; padding:34px 22px; border-radius:26px;}
	.fq_top .t_txt em{font-size:11px; letter-spacing:1px;}
	.fq_top .t_txt strong{margin-top:14px; font-size:24px;}
	.fq_top .t_txt p{font-size:15px;}
	.fq_sch{height:56px; padding:0 6px 0 46px;}
	.fq_sch i{left:18px; font-size:20px; margin-top:-10px;}
	.fq_sch input{font-size:14px;}
	.fq_sch button{height:44px; padding:0 18px; font-size:14px;}
	.fq_admin{padding:14px 16px;}
	.fq_admin .a_tit{width:100%;}
	.fq_tabs{gap:6px; margin-top:28px;}
	.fq_tabs a{gap:8px; height:56px; padding:0 12px; border-radius:16px; font-size:14px;}
	.fq_tabs a i{width:32px; height:32px; border-radius:10px; font-size:16px;}
	.fq_tabs a b{font-size:14px;}
	.fq_wrap{margin-top:36px;}
	.fq_grp + .fq_grp{margin-top:40px;}
	.fq_gtit{font-size:19px;}
	.fq_q button{gap:12px; min-height:70px; padding:18px 8px;}
	.fq_q .mk, .fq_a .mk, .fq_view .mk{flex-basis:34px; width:34px; height:34px; font-size:16px;}
	.fq_q .tx{font-size:16px;}
	.fq_q .tx em{font-size:12px;}
	.fq_q .ic{flex-basis:32px; width:32px; height:32px;}
	.fq_q .ic:before, .fq_q .ic:after{width:12px; margin-left:-6px;}
	.fq_a .a_in{gap:12px; margin-bottom:16px; padding:20px 16px; border-radius:16px;}
	.fq_a .a_body{padding-top:5px;}
	.a_txt{font-size:15px;}
	.a_link{height:40px; font-size:13px;}
	.fq_vbox, .fq_form{padding:28px 20px; border-radius:22px;}
	.fq_vbox h3{gap:10px; font-size:19px;}
	.fq_vbox .v_info, .fq_vbox .v_link{padding-left:0;}
	.fq_vbox .v_body{padding:20px 16px;}
	.fq_form .f_head strong{font-size:20px;}
	.fq_form input[type="text"], .fq_form input[type="number"], .fq_form input[type="url"], .fq_form select{height:48px; font-size:14px;}
	.fq_btn{height:46px; padding:0 20px; font-size:14px;}
}
@media (max-width: 520px){
	.fq_tabs{grid-template-columns:1fr;}
	.fq_tabs a{height:52px;}
}