@charset "utf-8";

/*********** 공통 ***********/
.skip_snb_menu {display:none;}
#fs_container_wrap {}

/* 배경 */
.content_wrap {padding:4rem 0;position:relative;}
.content_wrap::before, .content_wrap::after {content:"";position:absolute;z-index:-1;width:100%;height:100%;}
.content_wrap::before {top:0;left:0;background:url("../../images/fs/main/bg_top.png") no-repeat left top;}
.content_wrap::after {bottom:0;right:0;background:url("../../images/fs/main/bg_bottom.png") no-repeat right bottom;}


/*********** 자주찾는 메뉴 ***********/
.quick_box {display:grid;grid-template-columns:1fr 1.3fr;color:#fff;text-align:center;margin-bottom:4rem;}
.quick_box dl {display:grid;grid-template-columns:1fr 4fr;align-items:center;padding:3.5rem 4rem;}
.quick_box dl dt {margin-right:3.5rem;padding-right:3.5rem;border-right:1px dashed rgba(255,255,255,.5);}
.quick_box dl .icon {display:flex;justify-content:center;align-items:center;width:10rem;height:10rem;border-radius:50%;background:#fff;margin:0 auto 1.5rem;}
.quick_box dl dt strong {font-size:3rem;}
.quick_box .quick_list {display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.quick_box .quick_list a span {display:block;}
.quick_box .quick_list a span.icon {display:flex;width:8.5rem;height:8.5rem;}
.quick_box .quick_list a span.quick_txt {font-weight:500;line-height:1.3;}
/* 이용자, 제공기관 배경색 */
.quick_menu.user {background:#5f83c0;border-radius:1.5rem 0 0 1.5rem;}
.quick_menu.provider {background:#35a7a2;border-radius:0 1.5rem 1.5rem 0;}
    @media only screen and (max-width:1299px){
        .quick_box dl {padding:3rem;}
        .quick_box dl dt {margin-right:2rem;padding-right:2rem;}
    }
    @media only screen and (max-width:1199px){
        .quick_box dl {padding:2rem;}
        .quick_box dl dt {margin-right:1.5rem;padding-right:1.5rem;}
        .quick_box dl dt .icon {width:9rem;height:9rem;margin:0 auto 1rem;}
        .quick_box dl dt .icon img {height:5.5rem;}
        .quick_box .quick_list a span.icon {width:8rem;height:8rem;margin:0 auto 1rem;}
        .quick_box .quick_list a span.icon img {max-width:5rem;}
    }
    @media only screen and (max-width:1099px){
        .quick_box {display:flex;flex-direction:column;}
        .quick_box dl {display:flex;flex-direction:column;align-items:center;gap:1rem;}
        .quick_box dl dt {margin-right:0;padding-right:0;border-right:none;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px dashed rgba(255,255,255,.5);width:100%;}
        .quick_box dl .icon {display:none;margin-bottom:0;}
        .quick_box .quick_list {justify-content:center;gap:4rem;text-align:left;}
        .quick_box .quick_list a {display:flex;align-items:center;gap:1rem;}
        /* 이용자, 제공기관 배경색 */
        .quick_menu.user {border-radius:1.5rem 1.5rem 0 0;}
        .quick_menu.provider {border-radius:0 0 1.5rem 1.5rem;}
    }
    @media only screen and (max-width:1023px){
        .quick_box .quick_list {gap:2rem;}
        .quick_box .quick_list a span.icon {width:7.5rem;height:7.5rem;margin:0;}
        .quick_box .quick_list a span.icon img {max-width:4.8rem;}
    }
    @media only screen and (max-width:767px){
        .quick_box dl dd {width:100%;}
        .quick_box .quick_list {display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem;}
        .quick_box .quick_list a span.icon img {max-width:70%;max-height:70%;}
        .quick_box .quick_list a span.quick_txt {width:calc(100% - 8.5rem);}
        .quick_box .quick_list a span.quick_txt br {display:none;}
    }


/*********** 최신소식, 팝업존 - 공통 ***********/
.con_box {display:grid;grid-template-columns:minmax(calc(50% - 2.4rem),1fr) minmax(calc(50% - 2.4rem),1fr);justify-content:space-between;gap:4.8rem;}
.con_box > div {position:relative;}
.tit_wrap span {display:block;font-weight:300;font-size:1.6rem;line-height:1;}
.tit_wrap em {display:block;font-weight:700;font-size:3rem;color:#000;line-height:1;margin-top:.5rem;}
.con_box > div .con_wrap {height:calc(100% - 6.8rem);}
    @media only screen and (max-width:1399px){
        .con_box {gap:4.8rem 2.4rem;}
    }
    @media only screen and (max-width:1199px){
        .con_box {display:flex;flex-direction:column;}
        .con_box > div {height:auto;width:100%;}
        .con_box > div .con_wrap {height:auto;}
    }


/*********** 최신소식 영역 ***********/
.noti_wrap .flex_box {display:flex;justify-content:space-between;align-items:flex-end;padding-right:6rem;}

/* 탭버튼 */
.noti_wrap .tab_btn {display:flex;gap:2.5rem;margin-top:2rem;}
.noti_wrap .tab_btn li a {display:flex;align-items:center;gap:1rem;position:relative;line-height:1;}
.noti_wrap .tab_btn li:not(:last-child) a::after {position:absolute;top:50%;right:-1.45rem;transform:translateY(-50%);width:4px;height:4px;background:#ddd;border-radius:50%;content:"";}
.noti_wrap .tab_btn li.on a img {filter: brightness(0) saturate(100%) invert(29%) sepia(16%) saturate(4166%) hue-rotate(239deg) brightness(89%) contrast(91%);}
.noti_wrap .tab_btn li.on a span {font-weight:700;font-size:2rem;color:#000;}

/* 게시글 */
.noti_wrap :is(.tab_cbox,.tab_content) {height:100%;}
.noti_wrap .con_tbox {display:flex;flex-direction:column;justify-content:flex-start;height:100%;gap:1rem;}
.noti_wrap .noti_list:has(> li:nth-child(4)) {justify-content:space-between;}
.noti_wrap .con_tbox li a {display:flex;justify-content:space-between;align-items:center;gap:2rem;border:1px solid #ddd;border-radius:1.5rem;padding:2.3rem 2.5rem;background:#fafafa;}
.noti_wrap .con_tbox li a .noti_tit {font-weight:500;color:#222;width:calc(100% - 10rem);}
.noti_wrap .con_tbox li a .noti_tit .new {display:inline-flex;justify-content:center;align-items:center;margin-right:1rem;width:2.4rem;height:2.4rem;font-weight:800;font-size:1.4rem;color:#fff;background:#6b3c9b;border-radius:50%;}
.noti_wrap .con_tbox li a .noti_tit .noti_situ {display:inline-flex;justify-content:center;align-items:center;margin-right:1rem;padding:.3rem 1rem .4rem;font-size:1.5rem;font-weight:600;border-radius:1rem;vertical-align:middle;line-height:1.2;}
.noti_wrap .con_tbox li a .noti_tit .noti_situ.type1 {background:#29a7e1;color:#fff;} /* 모집중 */
.noti_wrap .con_tbox li a .noti_tit .noti_situ.type2 {background:#8fc43d;color:#fff;} /* 모집예정 */
.noti_wrap .con_tbox li a .noti_tit .noti_situ.type3 {background:#f39939;color:#fff;} /* 모집마감 */
.noti_wrap .con_tbox li a .noti_tit .noti_situ.type4 {background:#767676;color:#fff;} /* 교육종료 */
.noti_wrap .con_tbox li a .noti_date {width:14rem;font-size:1.6rem;text-align:right;}
.noti_wrap .more {position:absolute;top:3.2rem;right:2rem;}
    @media only screen and (max-width:1299px){
        .noti_wrap .flex_box {gap:1rem;}
        .noti_wrap .tab_btn {margin-top:1rem;gap:1.5rem;}
        .noti_wrap .tab_btn li:not(:last-child) a::after {right:-0.95rem;}
        .noti_wrap .con_wrap {height:calc(100% - 10rem);}
        .noti_wrap .con_tbox li a {padding:2rem;}
        .noti_wrap .con_tbox li a .noti_tit {width:calc(100% - 5rem);}
    }
    @media only screen and (max-width:767px){
        .noti_wrap .flex_box {flex-direction:column;align-items:flex-start;padding-right:0;}
        .noti_wrap .more {right:0;top:6.5rem;}
    }


/*********** 팝업 영역 ***********/
.popup_wrap .popup_list {height:100%;}
.popup_wrap .swiper-slide {border:1px solid #ddd;background:#fff;border-radius:1.5rem;overflow:hidden;}
.popup_wrap .swiper-slide a {display:block;height:100%;}
.popup_wrap .swiper-slide img {width:100%;height:100%;object-fit:cover;object-position:center;}
.popup_wrap .popup_ctrl {position:absolute;top:3rem;right:0;line-height:1;display:flex;align-items:center;gap:2rem;}
    @media only screen and (max-width:1199px){
        .popup_wrap .swiper-slide a {aspect-ratio:2/1;}
    }


/*********** 배너 영역 ***********/
.banner_wrap {padding:2rem 0;background:#eee;}
.banner_wrap .wrap {padding:0 8rem;position:relative;}

/* 배너 로고 */
.banner_list {position:relative;}
.banner_list .swiper-slide a {display:flex;justify-content:center;align-items:center;background:#fff;height:5.4rem;border-radius:.5rem;padding:0 3rem;}
.banner_list .swiper-slide a img {max-width:100%;}

/* 배너 컨트롤 */
.banner_ctrl button {display:flex;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;background:#aaa;color:#fff;font-size:2rem;position:absolute;top:50%;transform:translateY(-50%);}
.banner_ctrl .banner_prev {left:0;}
.banner_ctrl .banner_next {right:0;}