@charset 'utf-8';


/*스타일 01*/
.controls_01 {position: absolute;bottom: 30px;left: 0;width: 100%;height: 40px;padding: 0 30px;display:flex;justify-content: space-between;align-items:center;}
.controls_01>span{display: flex;align-items: center;margin-right: 30px;justify-content: space-between;}
.controls_01 .nav{display: flex;}
.controls_01 .nav>button{position: static;opacity: 0.8;flex-shrink:0;display:block;width:40px;height:40px;border-radius:50%;text-indent:-9999px;cursor:pointer;background-position:center;background-repeat:no-repeat;transition:all 0.4s;}
.controls_01 .nav .prev {margin: 0;background:rgba(0,0,0,0.4) url('../images/main/sth_icon_next_01.svg') center 50% no-repeat; margin-right: 10px;}
.controls_01 .nav .next {margin: 0; background:rgba(0,0,0,0.4) url('../images/main/sth_icon_prev_01.svg') center 50% no-repeat;}
.controls_01 .nav>button:hover {background-color: rgba(0,0,0,0.99); opacity: 1;}
.controls_01 .page {position: static; width: auto; color:#000;font-size: 20px; font-weight: 200; margin: 0;display: flex;align-items: center;justify-content: center;}
.controls_01 .page .swiper-pagination-current {display: flex; width: 30px; font-weight: 600;align-items: center; justify-content: center;}
.controls_01 .page .swiper-pagination-total{ display: flex; font-weight: 200; justify-content: center; align-items: center; width: 30px;}
/*더보기*/
.sth_more_01{position:absolute; top:0; right:0;}
.sth_more_01 .sth_morePlus{display: inline-block; width: 30px; height: 30px; background:url('../images/main/sth_more_icon.svg') center 50% no-repeat; text-indent: -9999px; font-size: 0;}
/*도트 공통 원형 스타일 01*/
.swiper-pagination .swiper-pagination-bullet{width:10px; border-radius: 10px; height:10px;padding:0;opacity: 1; border:none;outline:none;cursor:pointer;text-indent:-9999px;overflow:hidden;background-color:#D5DCE3;transition:background-color .3s ease;}
.swiper-pagination .swiper-pagination-bullet:focus {outline: 2px solid #008460 !important; outline-offset: 2px;}
.swiper-pagination .swiper-pagination-bullet-active{background-color:#000;}
/*sth_notice_1: 세로 스와이프지만 페이지네이션 점은 가로로 배치*/
#sth_pager_notice.swiper-pagination-vertical, #sth_pager_faq.swiper-pagination-vertical{position: static; top: auto; right: auto; transform: none; display: flex; justify-content: center; align-items: center; margin-left: 20px;}
#sth_pager_notice.swiper-pagination-vertical .swiper-pagination-bullet, #sth_pager_faq.swiper-pagination-vertical .swiper-pagination-bullet{display: inline-block; margin: 0 4px !important;}
div.swiper-pagination-horizontal.swiper-pagination-bullets{top: 20px; height: 20px; width: auto; right: 20px; left: auto;}

.swiper-slide:focus::before {position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; content: ''; border: 2px solid #008460;}



/*롤링 컨트롤 스타일*/
/* Swiper 기본 화살표(SVG/폰트) 제거 */
.swiper-button-next:after, .swiper-button-prev:after {display: none !important;}
/* 네비게이션 버튼 기본 스타일 초기화 */
.swiper-button-next, .swiper-button-prev {position: static; width: auto; height: auto; margin: 0; color: inherit;}
body .swiper-wrappe, body .swiper, body .swiper *{box-sizing: border-box;/* display: flex; flex: 1;*/ width: 100%;}
*, *::before, *::after {box-sizing: inherit;}
.swiper-slide {width: auto;}
.swiper-wrapper {align-items: stretch;}


/*공통컨트롤*/
.sth_control_box_all{position: absolute;width: 180px;display: flex;align-items: center;top: 0;right: 80px;z-index: 40;}
.sth_control_box_all .nav{display: flex; align-items: center;}
.sth_control_box_all .nav> button {opacity: 0.8; flex-shrink:0; display:block; position: static; right: inherit; top: inherit; left: inherit; margin: 0; width:30px; height:40px; text-indent:-9999px; font-size: 0; cursor:pointer; background-position:center; background-repeat:no-repeat; transition:all 0.4s; }
.sth_control_box_all .nav .prev {background: url('../images/main/icon_prev_02.svg') center 50% no-repeat;}
.sth_control_box_all .nav .next {background: url('../images/main/icon_next_02.svg') center 50% no-repeat;}
.sth_control_box_all button:hover {opacity: 1;}
.sth_control_box_all .page {color:#000;font-size: 20px;margin: 0;position: static; right: inherit; top: inherit; left: inherit;display: flex;align-items: center;}
.sth_control_box_all .page .swiper-pagination-current {display: flex; font-weight: 600; width: 40px; align-items: center; justify-content: center;}
.sth_control_box_all .page .swiper-pagination-total{ display: flex; font-weight: 200; justify-content: center; align-items: center; width: 40px;}
.sth_control_box_all .nav .toggle_btn {background: url('../images/main/sth_stop_ovbtn.svg') no-repeat center;cursor: pointer;}
.sth_control_box_all .nav .toggle_btn.paused {background: url('../images/main/sth_play_ovbtn.svg') no-repeat center;}


/*공통더보기*/
div a.sth_all_more_box{position: absolute;right: 0;top: 0;width: 40px;height: 40px;font-size: 0;z-index: 40;text-indent: -9999px;background: url("../images/main/sth_more_icon.svg") center 50% no-repeat;}
/*공통 다음이전 센터*/
.controls_center {}
.controls_center .nav .prev{position: absolute; left: -10px; /*top: calc(50% - 25px);*/ z-index: 40; text-indent: -9999px; width: 50px; height: 50px; border-radius: 30px; background: rgba(0,0,0,.0) url('../images/main/icon_prev_02.svg') center 50% no-repeat; }
.controls_center .nav .prev:hover{background: rgba(0,0,0,.05) url('../images/main/icon_prev_02.svg') center 50% no-repeat; }
.controls_center .nav .next{position: absolute; right: -10px; /*top: calc(50% - 25px);*/ z-index: 40; text-indent: -9999px; width: 50px; height: 50px; border-radius: 30px; background: rgba(0,0,0,.0) url('../images/main/icon_next_02.svg') center 50% no-repeat; }
.controls_center .nav .next:hover{background: rgba(0,0,0,.05) url('../images/main/icon_next_02.svg') center 50% no-repeat; }
/*주요서비스 이전/다음 버튼: 휴대폰(~640px)에서만 노출, 그 이상(태블릿/PC)에서는 숨김*/
.sth_main_services_box .controls_center .nav{display: none;}

.sth_item_box_01 .next, .sth_item_box_01 .prev, .sth_main_life_box .next, .sth_main_life_box .prev {
    display: flex !important;       /* [중요] Swiper의 숨김 기능을 무시하고 강제 노출 */
    visibility: visible !important;  /* [중요] hidden 상태 방지 */
    opacity: 1;                      /* 기본 투명도 100% */
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.3s ease;   /* 부드러운 상태 변화 */
}
.next.swiper-button-disabled, .prev.swiper-button-disabled, .next.swiper-button-lock, .prev.swiper-button-lock, .next.is-disabled, .prev.is-disabled {
    display: flex !important;       /* 비활성 상태에서도 절대 사라지지 않음 */
    opacity: 0.3 !important;        /* [요청사항] 투명도 30% 설정 */
    pointer-events: none !important; /* 클릭 이벤트는 차단 */
    cursor: default !important;
}
.next svg, .prev svg, .swiper-button-next::after, .swiper-button-prev::after {display: none !important; content: "" !important;}

/*공통*/
.sth_item_txt{margin-top: 20px;}
.sth_item_txt .sth_region{margin-bottom: 5px; font-size: 18px; font-weight: 400; color: #555555;}
.sth_item_txt .sth_title{margin-bottom: 20px; font-size: 20px; font-weight: 600; color: #202020;}
.sth_item_txt .sth_date{/*margin-top: 20px; */font-size: 16px; font-weight: 400; color: #555555;}
.sth_img{overflow: hidden;}
.sth_item_info_01{}
.sth_item_info_01>li{margin-bottom: 5px; font-size: 18px; font-weight: 400; color: #8B9BA8;}
.sth_item_info_01>li>span{color: #000; position: relative; padding-left: 10px; display: inline-block; margin-right: 10px;}
.sth_item_info_01>li>span::before{content: ''; position: absolute; left: 0; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 10px; background-color: #000;}

div .sth_value>span{display: none; font-size: 18px; width: 110px; height: 50px; line-height: 100%; align-items: center; justify-content: center; font-weight: 400; color: #fff; border-radius: 20px 0px;}
div .sth_value>span.step_on{display: flex;}
.sth_value .sth_step_01{background-color: #006BB8;}
.sth_value .sth_step_02{background-color: #00A46D;}
.sth_value .sth_step_03{background-color: #DB9148;}

.sth_vstep{display: flex; align-items: center;}
.sth_vstep>li{margin-right: 10px;}
.sth_vstep>li>span{display: flex; align-items: center; justify-content: center; min-width: 58px; height: 26px; border-radius: 30px; padding: 0 14px; background-color: #fff; font-size: 16px; font-weight: 400; color: #000; border: 1px solid #22a478;}
.sth_vstep>li>span.on{background-color: #22A478; color: #fff;}

.sth_infor{ color: #555555;}
.sth_infor>li{font-size: 18px; margin-bottom: 5px;}
.sth_infor>li:last-child{margin-bottom: 0;}
.sth_infor>li>strong{display: inline-block; margin-right: 10px; font-weight: 600;}
.sth_infor>li>span{font-weight: 300;}

@media all and (max-width:1500px) {
}

@media all and (max-width:1024px){
    .controls_all {justify-content: center;}
}
@media all and (max-width:768px){
    .sth_control_box_all{right: 60px;}
}


@media all and (max-width:460px){
    .sth_control_box_all {
        position: relative;
        right: 0;
        z-index: 999;
        margin: 5px auto 0;
    }
}









/* ======== 01 메인 콘텐츠 ======== */
.sth_section_box_01{display: flex;justify-content: space-between;/* gap:20px; */max-width: 1440px;margin: 0 auto;}


/*좌측*/
.sth_main_img_box{max-width: 910px; flex: 1; width: 100%; margin-right: 20px;}
    /* 초기 로딩 시 이미지 겹침 방지 기본 CSS */
    .sth_main_img {position: relative; height: 510px;border-radius: 30px;overflow: hidden;background: #fff;}
    .sth_img_item { width: 100% !important; height: 100%;display: flex !important;justify-content: center; align-items: center; position: relative;}
    .sth_img_item a {display: block;width: 100%;height: 100%;}
    .sth_img_item img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
    .sth_img_item .main_mobile{display: none;}
    /*텍스트*/
    .sth_titleimg_txt_box_01{position: absolute; left: 9%; top:20%; padding-right: 9%; display: none;}
    .sth_titleimg_txt_box_01>p.sth_txt_01{font-size: 66px; color: #1B7ED9; font-weight: 700; line-height: 110%;}
    .sth_titleimg_txt_box_01>p.sth_txt_02{font-size: 40px; color: #fff; font-weight: 500; margin-top: 20px;line-height: 110%; word-break: keep-all; }
    .sth_titleimg_txt_box_01>p.sth_txt_02>span{display: block;}

    .sth_titleimg_txt_box_02{position: absolute; left: 4%; top:27%; display: none;}
    .sth_titleimg_txt_box_02>p.sth_txt_03{font-size: 38px; color: #8871E2; font-weight: 600; line-height: 110%;word-break: keep-all; }
    .sth_titleimg_txt_box_02>p.sth_txt_03>span{display: block; margin-bottom: 0px;}
    .sth_titleimg_txt_box_02>p.sth_txt_04{font-size: 40px; color: #fff; font-weight: 500; margin-top: 40px;line-height: 110%;}
    .sth_titleimg_txt_box_02>p.sth_txt_04>span{display: block;}




    .bl_notice_box, .bl_news_box{position: relative; display: flex; justify-content: space-between; align-items: center;}
    .bl_notice_box .icon_notice_01{}
    .sth_notice_list_box{height: 30px; overflow: hidden;}
    .hp_ellipsis{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .sth_notice_list_box .sth_notice_list .swiper-slide{display: flex; align-items: center; font-size: 20px; font-weight: 500; flex: 1;}
    .sth_notice_list_box .sth_notice_list .swiper-slide>span{display: flex; align-items: center;}
    .bl_notice_box .swiper-pagination{}


    @media all and (max-width:1500px){
        .sth_section_box_01{padding: 0 25px;}
    }
    @media all and (max-width:1024px){
        .bl_notice_box, .bl_news_box{width: 100%;}
        .bl_news_box{display: none;}
        .sth_titleimg_txt_box_01{top:15%;}
        .sth_titleimg_txt_box_01>span{font-size: 18px; margin-bottom: 20px;}
        .sth_titleimg_txt_box_01>p{font-size: 40px;}
        .sth_titleimg_txt_box_01>p.sth_txt_01{font-size: 40px;}
        
        .sth_main_home{background-color: #F7F7FE;}
        .sth_guide_home{background-color: #fff;}
        .sth_education_home{background-color: #fff;}
        .sth_experience_home{background-color: #fff;}
        .sth_settlement_home{background-color: #fff;}
        .sth_community_home{background-color: #fff;}
        .sth_greennews_home{background-color: #fff;}
        .sth_section_box_01{flex-direction: column; padding: 0;}
        .sth_main_img {border-radius: 0; max-width: none;width: 100%; height: 450px;}
        .sth_main_img_box {max-width: none;width: 100%; margin-top: 60px;}
        .sth_main_home, .sth_guide_home, .sth_education_home, .sth_experience_home, .sth_settlement_home, .sth_community_home, .sth_greennews_home{padding: 0px 0 100px 0;}
        .sth_topmenu_atv .sth_guide_home, .sth_topmenu_atv .sth_education_home, .sth_topmenu_atv .sth_experience_home, .sth_topmenu_atv .sth_settlement_home, .sth_topmenu_atv .sth_community_home, .sth_topmenu_atv .sth_greennews_home{padding: 71px 0 100px 0;}
        .sth_topmenu_atv .sth_main_con{top: -10px; position: relative;}
        
    .sth_titleimg_txt_box_02{top:23%;}
    }
    @media all and (max-width:768px){
        .sth_titleimg_txt_box_02{top:26%;}
    }
    @media all and (max-width:640px){
        .sth_img_item .main_mobile{display: block;}
        .sth_img_item .main_pc{display: none;}
        .sth_titleimg_txt_box_01>span{font-size: 18px; margin-bottom: 20px;}
        .sth_titleimg_txt_box_01>p{font-size: 34px;}
        .sth_titleimg_txt_box_01>p.sth_txt_02>span{display: inline;}
        /*.sth_titleimg_txt_box_01>p.sth_txt_01{font-size: 34px;}
        .sth_titleimg_txt_box_01>p.sth_txt_02{font-size: 16px;}*/
        .sth_titleimg_txt_box_02{top:28%;}
        .sth_titleimg_txt_box_02>p.sth_txt_03{font-size: 28px;}
        .sth_titleimg_txt_box_02>p.sth_txt_04{font-size: 28px; margin-top: 40px;}
    }
    @media all and (max-width:440px){
        .sth_titleimg_txt_box_02{top:25%;}
        .sth_titleimg_txt_box_02>p.sth_txt_03{font-size: 22px;}
        .sth_titleimg_txt_box_02>p.sth_txt_04{font-size: 22px; margin-top: 70px;}
    }
    @media all and (max-width:365px){
        .sth_titleimg_txt_box_01>span{font-size: 16px; margin-bottom: 20px;}
        .sth_titleimg_txt_box_01>p{font-size: 30px;}
        /*.sth_titleimg_txt_box_01>p.sth_txt_01{font-size: 30px;}
        .sth_titleimg_txt_box_01>p.sth_txt_02{font-size: 16px;}*/
    }


/*우측*/
.sth_right_login_box{display: flex;gap:15px 0;flex: 1;max-width: 470px;flex-direction: column;}
    /*주요서비스*/
    .sth_main_services_box{position: relative; padding: 25px 20px 5px 20px; display: flex; align-items: center; justify-content: center; width: 100%; background: #E3F3FF 0% 0% no-repeat padding-box; border-radius: 20px;}
    .sth_main_services_box>.swiper-container{overflow: hidden; /*max-width: 360px;*/}
    .sth_main_services_box .sth_main_services_list{display: flex;/* padding: 0 15px;*/}
    .sth_main_services_box .sth_main_services_list a{margin-bottom: 20px;}
    .sth_main_services_box .sth_main_services_list a.sth_mobile{display: none;}
    .sth_main_services_box .sth_main_services_list a{display: flex; flex-direction: column; align-items: center; width: auto;}

    .sth_main_services_box .sth_main_services_list a>span{position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: #fff; border: 1px solid #D5DFEB; border-radius: 30px; padding: 10px; margin-bottom: 5px;}
    .sth_main_services_box .sth_main_services_list a:hover>span{background-color: #F7FBFE;}
    .sth_main_services_list a:hover>p{color: #000;}
    .sth_main_services_box .sth_main_services_list a.sth_newicon>span::before{content: 'N'; animation: blink 1s ease-in-out infinite; color: #fff; line-height: 100%; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; background-color: #FEAD5E; width: 23px; height: 23px; border-radius: 10px;}
    @keyframes blink {
        0% {opacity: 1;}
        50% {opacity: 0.3;}
        100% {opacity: 1; }
    }
    .sth_main_services_list a>span>img{max-width: 100%; height: auto; object-fit: cover;}
    .sth_main_services_list a>p{font-size: 18px; font-weight: 500; color: #555555; text-align: center;}


    .sth_item_job_box_01{position: relative;}
    .sth_item_job_box_01 .swiper-slide{text-align: center; width: 100% !important; max-height: 200px !important;}
    
    .sth_item_job_box_01 .job_item_01{background-color: #B29EFF; border: 1px solid #B29EFF; border-radius: 15px;}
    .sth_item_job_box_01 .job_item_02{background-color: #fff; border: 1px solid #D5DCE3; border-radius: 15px;}

    @media all and (max-width:1500px) {
       .sth_section_box_02{padding: 0 25px;}
    }
    @media all and (max-width:1152px){
        .sth_main_services_list a>span{width: 85px; height: 85px;}
    }
    @media all and (max-width:1024px){
        .sth_right_login_box{max-width: 100%;}
        .sth_main_services_box{border-radius: 0; padding: 25px 20px}
        .sth_section_box_02{padding: 0;}
        .sth_main_services_box .sth_main_services_list a{margin-bottom: 0}
        .sth_main_services_list a.sth_mobile{display: block;}
        .sth_main_services_list a>span{width: 75px; height: 75px; border-radius: 25px; margin-bottom: 15px;}
        .sth_main_services_list a>p{font-size: 16px;}
        
        .sth_item_box_04{padding: 5px 15px;}
    }
    @media all and (max-width:768px){
        .sth_main_services_box .sth_main_services_list a>span{width: 65px; height: 65px; border-radius: 20px; margin-bottom: 10px; padding: 15px;}
        .sth_main_services_box>.swiper-container{height: 100px;}
    }
    @media all and (max-width:640px){
        .sth_main_services_title{flex-direction: column; align-items: center; margin-bottom: 40px;}
        .sth_main_services_title>h2{font-size: 26px; margin-right: 0px; margin-bottom: 10px;}
        .sth_main_services_title>p{font-size: 18px; margin-bottom: 0;}
        .sth_section_box_02{margin-top: 50px;}
        .sth_main_services_list a.sth_newicon>span::before{font-size: 12px; width: 20px; height: 20px; border-radius: 8px;}
        .sth_main_services_box{padding: 15px 25px;}
        .sth_main_services_box .controls_center .nav{display: block;}
        
        .sth_item_job_box_01 .swiper-slide img{max-height: 150px;}
    }
    @media all and (max-width:500px){

    }


/*온라인교육*/
.sth_section_box_07{display: flex; max-width: 1440px; margin: 0 auto; margin-top: 70px; position: relative;}
.sth_writer_box{position: relative; width: 100%;}
.sth_writer_title{display: flex;align-items: center;height: 40px; margin-bottom: 10px;}
.sth_writer_title>h2{font-size: 32px;font-weight: 600;line-height: 100%;color: #1A1311;z-index: 1;margin-bottom: 0px;}
.sth_main_writer_box{width: 100%; overflow: hidden; box-sizing: border-box; padding: 10px 5px 30px;}
.sth_main_writer_list{width: 100%; /*gap: 32px; */display: flex;}
.sth_main_writer_list li{/*max-width: 260px;*/}
.sth_main_writer_list li>a{}

@media all and (max-width:1600px) {
}
@media all and (max-width:1500px) {
    .sth_section_box_07{margin: 40px 25px 0;}
}
@media all and (max-width:1440px){
}
@media all and (max-width:1280px){
}
@media all and (max-width:1024px){
}
@media all and (max-width:768px){
}
@media all and (max-width:640px){
    .sth_section_box_07{margin-top: 40px; padding-bottom: 40px;}
    .sth_writer_title{margin-bottom: 20px;}
    .sth_writer_title>h2{font-size: 26px;}
}
@media all and (max-width:460px){
}
@media all and (max-width:375px){
}