@charset "utf-8";

#fs_content {min-height:518px;}

/* 더잠실체 */
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 비주얼 */
.fs_main_visual {position:relative;}
.fs_main_visual .mvis_box {position:relative;display:flex;height:500px;overflow:hidden;}
.fs_main_visual .mvis_box > div {width:50%;}
.fs_main_visual .mvis_box .mvis_slide {display:block;height:100%;}
.fs_main_visual .mvis_box .mvis_slide .imgbox {display:flex;width:100%;height:100%;justify-content: center;align-items: center;}
.fs_main_visual .mvis_box .txt_area {display:flex;align-items:center;padding:0 60px;background:url("./../images/main/mvis_bg.png") no-repeat center;background-size: cover;}
.fs_main_visual .mvis_box .txt_area .t_wrp {display: block;width: 100%;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan {display:flex;align-items:center;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt01 {font-size: 18px;color:#000;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt01 em {display:inline-block;margin:1px;width:30px;height:30px;text-align:center;line-height:30px;background:#ff9500;border-radius:50px;color:#fff;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt01 em:nth-child(2n) {background:#b06905;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02 {position:relative;margin-left:10px;padding-left:23px;color:#000;font-size:18px;line-height:normal;}
.fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02:before {content:'';position:absolute;left:0;top:0;bottom:0;background:url("./../images/main/bg_slogan.png") no-repeat left center;width:13px;height:100%;}
.fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit {margin-top:30px;color:#000;font-size:35px;font-weight:200;}
.fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit br {display: none;}
.fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit strong {color:#df8200;font-size:1.7em;}
.fs_main_visual .mvis_box .icon_area {margin-top:50px;}
.fs_main_visual .mvis_box .icon_area ul {display:flex;justify-content:space-between;text-align:center;color:#fff;font-size:16px;font-weight:500;}
.fs_main_visual .mvis_box .icon_area ul li {width:32%;margin:1%;}
.fs_main_visual .mvis_box .icon_area ul li a {display:block;width:100%;height:100%;padding:40px 10px;background:rgba(0,0,0,.3);border-radius:10px;}
.fs_main_visual .mvis_box .icon_area ul li a:hover {background:rgba(0,0,0,.5);}
.fs_main_visual .mvis_box .icon_area ul li span {display:block;margin-top:20px;}
.fs_main_visual .mvis_box .icon_area ul li span br {display: none;}

/* 컨트롤 */
.mvis_slide .ctrlbox {position:absolute;bottom:0;right:0;width:100%;max-width:220px;z-index: 50;}
.mvis_slide .ctrlbox:before {content:'';position:absolute;right:0;bottom:0;background:rgba(255,255,255,.5);width:100%;height:100%;}
.mvis_slide .ctrlbox .ctrl {position:relative;display:flex;flex-wrap:wrap;justify-content:center;width:100%;background:rgba(255,255,255,.4);height:50px;align-items: center;}
.mvis_slide .ctrlbox .ctrl > div {padding:0 15px;}
.mvis_slide .ctrlbox .ctrl .swiper-button {position:relative;display:block;width:9px;height:17px;color:#fff;opacity:.8;transition:all .4s;-webkit-transition:all .4s;z-index: 11;cursor:pointer;}
.mvis_slide .ctrlbox .ctrl .swiper-button:hover {opacity:1;}
.mvis_slide .ctrlbox .ctrl .swiper-button:after {content:'';position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;background:url("./../images/common/ico_arrow.png") no-repeat center;width:100%;height:100%;background-size:contain;}
.mvis_slide .ctrlbox .ctrl .swiper-button-prev,
.mvis_slide .ctrlbox .ctrl .swiper-button-next {left:unset;right:unset;top:unset;bottom:unset;margin:0;}
.mvis_slide .ctrlbox .ctrl .swiper-button-next:after {transform:rotate(180deg);}
.mvis_slide .ctrlbox .ctrl .swiper-pagination {position:unset;line-height:23px;width:auto;color:#808080;font-size:16px;}
.mvis_slide .ctrlbox .ctrl .swiper-pagination .swiper-pagination-current {color:#df8200;font-weight:bold;font-size:25px;}
.mvis_slide .ctrlbox .ctrl .btn_pause {display:inline-block;width:8px;height:13px;background:url("./../images/main/ctrl_stop.png") no-repeat center;z-index: 10;cursor:pointer;}
.mvis_slide .ctrlbox .ctrl .btn_pause.on {background:url("./../images/main/ctrl_play.png") no-repeat center;}
    /* 반응형 */
    @media only screen and (max-width:1399px){
        .fs_main_visual .mvis_box .txt_area {padding:0 40px;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit {font-size:32px;line-height:normal;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit br {display:block;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .slogan {display:block;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02 {padding-left:0;margin:7px 0 0;opacity:.7}
        .fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02:before {display: none;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02 br {display: none;}
        .fs_main_visual .mvis_box .icon_area {margin-top:30px;}
        .fs_main_visual .mvis_box .icon_area ul li a {padding:30px 10px;}
        .fs_main_visual .mvis_box .icon_area ul li span {line-height: 1.3em;}
        .fs_main_visual .mvis_box .icon_area ul li span br {display:block;}
    }
    @media only screen and (max-width:1023px){
        .fs_main_visual .mvis_box {flex-direction:column;height:auto;}
        .fs_main_visual .mvis_box > div {width:100%;}
        .fs_main_visual .mvis_box .mvis_slide {height:100%;}
        .fs_main_visual .mvis_box .mvis_slide img {max-height:100%;}
        .fs_main_visual .mvis_box .mvis_slide .imgbox {aspect-ratio:16/9;}
        .fs_main_visual .mvis_box .txt_area {padding:40px;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit br {display:none;}
    }
    @media only screen and (max-width:767px){
        .fs_main_visual .mvis_box .mvis_slide {max-height:350px;}
        .fs_main_visual .mvis_box .txt_area {padding:40px 20px;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .slogan .txt02 {font-size: 16px;margin-top:5px;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit {font-size:28px;margin-top:20px;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit br {display: block;}
        .fs_main_visual .mvis_box .txt_area .t_wrp .mvis_tit strong {font-size:1.3em;}
        .fs_main_visual .mvis_box .icon_area {margin-top:15px;}
        .fs_main_visual .mvis_box .icon_area ul {}
        .fs_main_visual .mvis_box .icon_area ul li {margin:0;}
        .fs_main_visual .mvis_box .icon_area ul li span {font-size:14px;margin-top:15px;}

        .mvis_slide .ctrlbox {max-width: 200px;}
        .mvis_slide .ctrlbox .ctrl .swiper-pagination .swiper-pagination-current {font-size:1.2em;}
    }
    @media only screen and (max-width:560px){
        .fs_main_visual .mvis_box .icon_area ul {display:block;}
        .fs_main_visual .mvis_box .icon_area ul li {width:100%;margin:1% 0;}
        .fs_main_visual .mvis_box .icon_area ul li a {padding:10px 20px;display:flex;}
        .fs_main_visual .mvis_box .icon_area ul li span {padding-left:20px;}
        .fs_main_visual .mvis_box .icon_area ul li span br {display: none;}

        .mvis_slide .ctrlbox {max-width: 180px;}
        .mvis_slide .ctrlbox .ctrl {height:40px;}
    }

/* -------------------- 메인 컨텐츠  */
/* 교육감 24시 */
h3.tith3 {font-family: 'TheJamsil5Bold';font-size:50px;color:#000;}
h3.tith3 span {color:#2e70ff;}
.mcon01 {padding:150px 0;position:relative;}
.mcon01:before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url("./../images/main/mcon01_bg.png") no-repeat left top;z-index: -1;opacity: .5;background-size:cover;}
.mcon01 .flexbox {display:flex;}
.mcon01 .tab_area {position:relative;}
.mcon01 .tab_area .tabs {margin-left:50px;display:flex;}
.mcon01 .tab_area .tabs li + li {margin-left:10px;}
.mcon01 .tab_area .tabs li a {display:block;width:100%;min-width:200px;line-height:45px;border:1px solid #ddd;border-radius:50px;overflow:hidden;text-align:center;color:#9d9d9d;font-size:20px;font-weight:500;background:#fff;}
.mcon01 .tab_area .tabs li.active a,
.mcon01 .tab_area .tabs li:hover a, .mcon01 .tab_area .tabs li:focus a, .mcon01 .tab_area .tabs li:active a {color:#fff;background:#2e70ff;}
.mcon01 .g_wrp {position:relative;margin:60px 0 0;padding:0 50px;}
.mcon01 .g_wrp .gallery_slide .swiper-slide {overflow:hidden;aspect-ratio: 8/6;border-radius:15px;}
.mcon01 .g_wrp .gallery_slide .swiper-slide a {position:relative;display:block;width:100%;height:100%;}
.mcon01 .g_wrp .gallery_slide .swiper-slide a .imgbox {display:flex;width: 100%;height:100%;align-items: center;justify-content: center;}
.mcon01 .g_wrp .gallery_slide .swiper-slide a .imgbox img {transition:all .6s;-webkit-transition:all .6s;}
.mcon01 .g_wrp .gallery_slide .swiper-slide:hover a .imgbox img {transform:scale(1.15);}
.mcon01 .g_wrp .gallery_slide .swiper-slide a .tit {position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);color:#fff;line-height:50px;padding:0 20px;text-align: center;font-size:15px;}
.mcon01 .g_wrp .gallery_slide .swiper-slide img {width:100%;height:100%;object-fit:cover;}
.mcon01 .g_wrp  .g_ctrl .g_button {position:absolute;top:0;bottom:0;margin:auto;width:50px;height:50px;background:#fff;border-radius:50px;border:1px solid #ddd;z-index:2;cursor:pointer;}
.mcon01 .g_wrp  .g_ctrl .g_button:after {content:'';position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:url("./../images/common/ico_arrow.png") no-repeat center;width:11px;height:19px;opacity: .5;transition:all .4s;-webkit-transition:all .4s;}
.mcon01 .g_wrp  .g_ctrl .g_button:hover:after {opacity: 1;}
.mcon01 .g_wrp  .g_ctrl .g_button.swiper-prev {left:-25px;}
.mcon01 .g_wrp  .g_ctrl .g_button.swiper-next {right:-25px;}
.mcon01 .g_wrp  .g_ctrl .g_button.swiper-next:after {transform:rotate(180deg);}
.mcon01 .g_more {position:absolute;right:0;top:0;width:45px;height:45px;border-radius:50px;border:1px solid #2e70ff;}
.mcon01 .g_more:hover {background:#2e70ff;}
.mcon01 .g_more:after {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url("./../images/common/ico_more.png") no-repeat center;transition:all .4s;-webkit-transition:all .4s;}
.mcon01 .g_more:hover:after {transform:rotate(90deg);filter:brightness(0) saturate(100%) invert(99%) sepia(9%) saturate(337%) hue-rotate(185deg) brightness(112%) contrast(100%)}

    /* 반응형 */
    @media only screen and (max-width:1399px){
        .mcon01 .g_wrp {padding:0 25px;margin:40px 0 0;}
        /* 컨트롤 */
        .mcon01 .g_wrp .g_ctrl .g_button.swiper-prev {left:0;}
        .mcon01 .g_wrp .g_ctrl .g_button.swiper-next {right:0;}

    }
    @media only screen and (max-width:1023px){
        .mcon01 {padding:120px 0;}
        .mcon01 .flexbox {display:block;}
        .mcon01 .tab_area {text-align:center;}
        .mcon01 .tab_area .tabs {justify-content:center;margin:20px auto 0 ;}
    }
    @media only screen and (max-width:767px){
        h3.tith3 {font-size:44px;}
        .mcon01 {padding:80px 0;}
        .mcon01 .tab_area .tabs li a {line-height:40px;font-size:17px;min-width:unset;padding:0 30px;}

        .mcon01 .tab_container {padding-bottom:65px;}
        .mcon01 .g_more {left:0;margin:auto;bottom:0;top:unset;}

    }