@charset "UTF-8";

:root {
    --font-32 : 32px;
    --font-23 : 23px;
    --font-21 : 21px;
    --font-20 : 20px;
    --font-19 : 19px;
    --font-18 : 18px;
    --font-16 : 16px;
    --font-15 : 15px;
    --font-14 : 14px;
    --font-13 : 13px;
}

@media screen and (max-width: 890px){
    :root {
        --font-32 : 30px;
        --font-23 : 20px;
        --font-21 : 20px;
        --font-18 : 16px;
        --font-16 : 14px;
        --font-15 : 14px;
        --font-14 : 13px;
        --font-13 : 12px;
    }
}

@media screen and (max-width:640px) {
    :root {
        --font-32 : 27px;
        --font-23 : 16px;
        --font-21 : 15px;
        --font-20 : 15px; 
        --font-19 : 16px; 
        --font-18 : 13px;
        --font-16 : 13px;
        --font-15 : 13px;
        --font-14 : 11px;
        --font-13 : 10px;
    }
}
html { width: 100%; overflow-x: hidden; min-width: 320px; }
.header__box { box-shadow: 0 10px 35px rgba(45,49,53,0.1);  }
.header__box:after { top:121px }
.main_container { padding-top: 110px; margin-bottom: 0 !important; background: url(../img/main_new/bg_visual.png) no-repeat; background-position:calc(50% + 724px) -116px }
.main_container img { vertical-align: top;  }

/*더보기 버튼*/
.btn__more { position: absolute; width: 44px; height: 44px; border:2px solid #406eff;  border-radius: 8px; background-color: #406eff; box-sizing: border-box; transition: all 0.4s; }
.btn__more::before,
.btn__more::after { position: absolute; background-color: #fff; content: "";  transition: background-color 0.4s; }
.btn__more::before { top:calc(50% - 1px); left:calc(50% - 8px); width: 16px; height: 2px;  }
.btn__more::after { left:calc(50% - 1px); top:calc(50% - 8px); width: 2px; height: 16px; }
.btn__more:hover { background-color: transparent; }
.btn__more:hover::before,
.btn__more:hover::after { background-color: #406eff; }
.badge--new { display: inline-block; width: 16px; height: 16px; margin-left: 10px; margin-top: 2px; border-radius: 50%; background: #fb681f url(../img/main_new/icon__badge--new.png) no-repeat ; background-size: cover; }
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: 0; margin: 0; top:0; }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: 0; margin: 0; top:0; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 1px; color: transparent; }

/*메인 visual 영역*/
.main__visual_wrap { margin-bottom: 40px; display: flex; position: relative; background-color: #25416d; }
.main__visual_wrap .swiper { width: 59.5%; max-width: 720px; flex-shrink: 0; margin: 0; }
.main__visual_wrap .swiper__buttons { position: absolute; left: 0; bottom: 0; display: flex; justify-content: space-between; width: 152px; height: 50px; z-index: 1; }
.visualSwiper [class^="swiper-button-"] { width: 50px; height: 50px; background-color: #1d1e1f; background-repeat: no-repeat; background-position: 50%; background-size: 10px auto; transition: background-color 0.4s; cursor: pointer;  }
.visualSwiper [class^="swiper-button-"]:hover { background-color: #000; }
.visualSwiper [class^="swiper-button-"]:focus { outline: 0;background-color: #000; }
.visualSwiper .swiper-button-prev { background-image: url(../img/common_new/icon__visual_swiper--prev.png); }
.visualSwiper .swiper-button-next { background-image: url(../img/common_new/icon__visual_swiper--next.png); }
.visualSwiper .swiper_autoCtrl { position: absolute; left: 51px; width: 50px; height: 50px; background-color: #1d1e1f; }
.visualSwiper .swiper_autoCtrl button { position: absolute; left: 0; top: 0; }
.visualSwiper .swiper-button-start {  display: none; background-image: url(../img/common_new/icon__visual_swiper--start.png); } 
.visualSwiper .swiper-button-stop {background-image: url(../img/common_new/icon__visual_swiper--stop.png); } 
.visualSwiper .swiper_autoCtrl.stop .swiper-button-stop { display: none; }
.visualSwiper .swiper_autoCtrl.stop .swiper-button-start { display: block; }
.visualSwiper a { display: block; width: 100%; height: 100%; }
.visualSwiper img { width: 100%; height: 100%; object-fit: cover; object-position: left top }
.visualSwiper .pc { display: block; }
.visualSwiper .mo { display: none; }

.main_notice_box { position: relative; width: 40.5%; max-width: 490px; max-height: 380px; padding: 2.5% 2.4% 2.5%;  background-color: #25416d; box-sizing: border-box; }
.main_notice_box .tab_wrap { display: flex; padding-right: 58px; padding-bottom: 20px; position:relative; }
.main_notice_box .tab_wrap > li { flex: 1 1 0; margin-left: 8px; }
.main_notice_box .tab_wrap > li:first-child { margin-left: 0; }
.main_notice_box .tab_wrap .btn__tab { display: inline-block; width: 100%; padding: 0 5px; height: 50px; border-radius: 8px; font-size: var(--font-16); font-weight: 600; color: var(--sub-color); background-color: rgba(255,255,255, 0.55); transition: 0.4s; }
.main_notice_box .tab_wrap .btn__tab.on,
.main_notice_box .tab_wrap .btn__tab:hover,
.main_notice_box .tab_wrap .btn__tab:focus { background-color: rgba(255,255,255,1); color: var(--main-color); }

.main_notice_box .tab__pannel { position: relative; display: none; }
.main_notice_box .tab__pannel.on { display: block; }
.main_notice_box .tab__pannel .notice_list > li { margin-bottom: 10px; }
.main_notice_box .tab__pannel .notice_list > li:last-child {margin-bottom: 0; }
.main_notice_box .tab__pannel li a { display: block; border-radius: 10px; padding: 15px 20px; background: rgba(255,255,255,0.07); color: #fff; }
.main_notice_box .tab__pannel .title_box { display: flex;} 
.main_notice_box .tab__pannel .title { display: inline-block; max-width: 100%; font-size: var(--font-16); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.main_notice_box .tab__pannel .date { padding-top: 11px; font-size: var(--font-14); color: #ccc; }
.main_notice_box .badge--new { flex-shrink: 0; }
.main_notice_box .btn__more { top:-70px; right:0; width: 50px; height: 50px;  }
.main_notice_box .btn__more:hover { background-color: #fff; border-color: #fff; }
.main_notice_box .tab__pannel.on  + .btn__more { display: block; }

@media screen and (max-width: 1200px){ 
    .main_notice_box {width: 35%; padding: 2.5% 1.5% 2.5%; }
    .main__visual_wrap .swiper { width: 65%;}
}
/*사업신청 영역*/
.apply_wrap { display: flex; width: 100%; padding-bottom: 80px; }
.apply_wrap .business__apply { display: flex;  width: 60%;}
.apply_wrap [class^="btn__business"] { position: relative; display: flex; align-items: center; justify-content: center; width: 50%; height: 120px; padding: 0 20px; font-size: 20px; line-height: 22px; color: var(--main-color); font-weight: 600; background-color: #e5e8ed; }
.business__apply [class^="btn__business"] div { display: flex; align-items: center; justify-content: center;  height: 50px; padding-left: 67px; background-size: 42px auto; background-repeat: no-repeat; background-position: 0 50%; }
.business__apply .btn__business--apply::after { position: absolute; right:0; width: 1px; top:35px; bottom: 35px; background-color: #c9ccd0; content: ""; }
.business__apply .btn__business--apply div { background-image: url(../img/main_new/icon__business--apply.png); }
.business__apply .btn__business--activity div { background-image: url(../img/main_new/icon__business--activity.png); }
.apply_wrap .btn__business--webzine { flex-wrap: wrap; justify-content: flex-start; padding:0 4.5% 0 4%; width: 100%; background-color: #d7dde5; box-sizing: border-box; }
.apply_wrap .btn__business--webzine div { position: relative; padding-right: 77px; width: 100%; }
.apply_wrap .btn__business--webzine span { display: block;  width: 100%; /*max-width: 315px;*/ padding-top: 4px; font-size: 14px; line-height: 16px; color: #555; font-weight: 400; }
.apply_wrap .btn__business--webzine div::before { position: absolute; top:-10px; left:0; width: 68px; height: 6px; background: url(../img/main_new/icon__business-bgbar.png) no-repeat; background-size: contain; content: ""; }
.apply_wrap .btn__business--webzine div:after { display: block; right: 0; top:calc(50% - 25px);; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #edf0f4 url(../img/main_new/icon__business-arrow.png) no-repeat; background-size: contain; content: ""; }

/*section 공통*/
.main__section { padding-bottom: 80px; }
.main__section .inner { position: relative; }
.section__title { position: relative; font-size: var(--font-32); font-weight: 800; color: var(--main-color); letter-spacing: -1px; }
.section__title span { color: #1c4ab4; }
.section__title--sub { padding: 6px 0 36px; font-size: 18px; color: #000; font-weight: 400; }

/* swiper 컨텐츠 buttons */
.swiper__buttons_group .swiper-button-lock,
.swiper__buttons_group .swiper-pagination-lock { display: block; }
.swiper__buttons_group { position: relative;display: flex; justify-content: space-between; width: 100px; height: 22px; cursor: pointer; }
.swiper__buttons_group [class^="swiper-button-"] { width: 22px; height: 22px; background-repeat: no-repeat; background-position: 50%; background-size: auto 12px; }
.swiper__buttons_group .swiper-button-prev { background-image: url(../img/main_new/icon__news_arrow--left.png); }
.swiper__buttons_group .swiper-button-next { background-image: url(../img/main_new/icon__news_arrow--right.png); }
.swiper__buttons_group .swiper-pagination { width: 50px; left: calc(50% - 25px); bottom: 0;line-height: 22px; font-size: 14px; color: var(--main-color); }
.swiper__buttons_group .swiper-pagination-current,
.swiper__buttons_group .swiper-pagination .this_page { font-weight: 700; }

/* 재외동포재단 24시 */
.main__section.hours24 .inner::before { position: absolute; left:-563px; top:0;  width: 820px; height: 270px; background-color: #f5f5f5; content: "";  }
.main__section.hours24 .section__title { position: relative; padding-top: 11px; }
.main__section.hours24 .tab__pannel { display: none; }
.main__section.hours24 .tab__pannel.on { display: block; }
.card__wrap { margin-right: -2.42%; }
.card__wrap:after { position: absolute; right:-11px; width: 2.43%; background-color: #fff; bottom: 0; height: 100%; z-index: 1; content: "";}/*20221213 추가*/
.card__list { width: calc(25% - 2.42%);  height: auto; margin-right: 2.43%; min-width: 195px;  } /*20221213 수정*/
/*20221208 수정 - s*/
.card__thumbnail {position: relative;width: 100%; padding-bottom: 72%; overflow: hidden; }
.card__thumbnail img { position: absolute; left:0; top:0;  width: 100%; height: 100%; object-fit: fill;  }
/*20221208 수정 -e*/
.card__text { display: block; padding: 25px 20px; box-sizing: border-box; background-color: #f2f2f2;  }
.card__text .summary { padding-bottom: 13px; color: var(--sub-color); font-size: var(--font-15); line-height: 1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.card__text .title { color: var(--main-color); font-size: var(--font-19); font-weight: 500; line-height: 1.3em; height: 3.9em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.card__text .text { margin-top: 26px; padding-top: 26px; border-top: 2px solid #333;  }
.card__text .text div { font-size: var(--font-15); color: var(--sub-color); line-height: 1.3em; /*height: 5.2em;*/  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.card__text .date { padding-top: 22px; color: var(--etc-color); font-size:  var(--font-14); line-height: 1em; }
.card__text:only-child { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 33px !important; }
.card__text:only-child .text { margin-bottom: auto; }
.card__wrap .btn__more { position: absolute; right: 20px; top:11px; }

.news_swiper_wrap { padding-top: 46px; }
.news_swiper_wrap .swiper__buttons { position: absolute; right:78px; top:23px; height: 22px; }

/*government*/
.government { padding: 60px 0 70px; background-color: #f2f4f6; }
.government .card__text { padding: 17px 20px 25px; background-color: #fff; border-bottom: 2px solid #0e1436;}
.government .card__text .text { padding: 12px 15px; margin-top: 20px; border: 1px solid #ddd; border-radius: 10px; }
.government .card__text .title { line-height: 1.15em; height: 3.45em; }
.government .card__text .date { padding-top: 17px; }
.government .section__title { padding-bottom: 30px; }
.government .btn__more { top:0; }

.government .swiper__buttons_group { position: absolute; right: 78px; top: 12px; height: 22px; }/*20221213 이전=display: none; 수정*/
.government .card__wrap:after { background-color: #f2f4f6; } /*20221213 추가*/

/*주요 서비스*/
.main_services { padding: 0; background:url(../img/main_new/bg_main_service.jpg) no-repeat 50% 0; background-size: cover; }
.main_services__list { display: flex; padding: 55px 240px; box-sizing: border-box; }
.main_services__list li { width: 50%; flex-shrink: 0;padding: 0 40px; box-sizing: border-box;}/*20230525 수정*/
.main_services__list a { display: block; position: relative; padding: 32px 10px 10px; height: 220px; box-sizing: border-box; text-align: center; border-radius: 30px; background-color: rgba(28, 74, 190, 0); transition: background-color 0.4s; }
.main_services__list a:hover { background-color: rgba(28, 74, 190, 0.7); }
.main_services__list a::before { display: block; width: 100%; height: 60px; background-image: url(../img/main_new/icon__main_service_en.png); background-size: 90px auto; background-repeat: no-repeat; background-position-x: 50%; content: ""; }
.main_services__list a.service_01::before { background-position-y: 0; }
.main_services__list a.service_02::before { background-position-y: -60px; }
.main_services__list a.service_03::before { background-position-y: -120px; }
.main_services__list a.service_04::before { background-position-y: -180px; }
.main_services__list a.service_05::before { background-position-y: -240px; }

.main_services__list .service__name { padding-top: 37px; color: #fff; font-size: 20px; font-weight: 500; }
.main_services__list .service__name span { display: inline-block; }
@media screen and (max-width: 1250px){ 
    .main_container { padding-top: 9vw; }
}
@media screen and (max-width: 1080px){ 
    .overview { padding-left: 20px; }
    .news__group { padding-right: 20px; }
    .news_swiper_wrap { padding-top: 34px; }
}
@media screen and (max-width: 890px){
    .visualSwiper .pc { display: none; }
    .visualSwiper .mo { display: block; }
    .main_container { padding-top: 0; }
    .section__title { text-align: center;  }
    .section__title--sub { text-align: center; font-size: 11px; }

    /* 메인 visual */
    .main__visual_wrap { display: block; }
    .main__visual_wrap .swiper { width: 100%; max-width: none; }

    /* 최신 게시물 컨텐츠 */
    .main_notice_box { width: 100%; padding: 20px; max-width: none; }
    .main_notice_box .tab_wrap { padding-bottom: 15px; }
    .main_notice_box .btn__more { top: -65px; }

    /* 사업신청 영역 */
    .apply_wrap { display: block; padding-bottom: 70px; }
    .apply_wrap .business__apply { display: block; width: 100%; }
    .apply_wrap [class^="btn__business"] { width: 100%; height: 90px; padding: 0 50px; justify-content: flex-start; box-sizing: border-box; }
    .apply_wrap .btn__business--webzine { height: auto; padding: 50px 50px 40px; }
    .apply_wrap .btn__business--webzine span { display: none; }
    .business__apply .btn__business--apply::after { top:auto; bottom:0; left:30px; right: 30px; height: 1px; width: auto; }


    /*재외동포 24시*/
    .main__section.hours24 .inner::before { display: none; }
    .main__section.hours24 .section__title { padding: 0; }
    .card__wrap { margin: 0 -20px; }
    .card__wrap .swiper-wrapper { padding:0 20px;}
    .card__wrap .btn__more { top:-4px;}
	.card__wrap:after { display: none; } /*20221213 추가*/
    .card__list { width: 195px; margin-right: 20px; }
    .card__list:last-child { padding-right: 20px; }
    .card__thumbnail .badge { min-width: 63px; line-height: 1em; }
    .news_swiper_wrap .swiper__buttons  { position: relative; top:0; left: 0; margin: 16px auto 0; }

    /*government*/
    .government .swiper__buttons_group { position: relative; top: 0; left: 0; margin: 16px auto 0; }/*20221213 이전=display: flex; margin: 16px auto 0; 수정*/

    /* 주요 서비스 */
    .main_services { margin: 0 20px 50px; padding: 0; }
    .main_services .inner { padding: 0; }
    .main_services__list { display: block; padding: 0; }
    .main_services__list li { width: 100%; border-bottom: 1px solid rgba(255,255,255, 0.12);}
    .main_services__list a { display: flex; align-items: center; padding: 10px 50px; height: 90px; text-align: left; border-radius: 0; }
    .main_services__list a:hover { background-color: transparent; }
    .main_services__list .service__name { padding: 0; }
    .main_services__list a::before { position: absolute; width: 62px; height: 40px; right: 50px; top: calc(50% - 20px); background-size: 61px auto; }
    .main_services__list a.service_01::before { background-position-y: -4px; }
    .main_services__list a.service_02::before { background-position-y: -42px; }
    .main_services__list a.service_03::before { background-position-y: -82px; }
    .main_services__list a.service_04::before { background-position-y: -122px; }
    .main_services__list a.service_05::before { background-position-y: -163px; }


}
@media screen and (max-width: 800px){
    .header__box { box-shadow: none; border-bottom: 0;}
}
@media screen and (max-width:640px) {
    /* 공통 */
    .main__section { padding-bottom: 50px; }

    .btn__more { width: 30px; height: 30px; border-radius: 4px; }
    .btn__more::before { width: 12px; left:7px; }
    .btn__more::after { height: 12px; top:7px }
    .badge--new { width: 11px; height: 11px; margin-left: 4px; }
    .main__visual_wrap { margin-bottom: 30px; }
    .main__visual_wrap .swiper__buttons { height: 30px; width: 92px; }
    .visualSwiper [class^="swiper-button-"] { width: 30px; height: 30px; background-size: 7px; }
    .visualSwiper .swiper_autoCtrl { width: 30px; height: 30px; left: 31px; }

    /* 최신 게시물 컨텐츠 */
    .main_notice_box { padding: 20px 15px; }
    .main_notice_box .tab_wrap { padding-right: 35px; }
    .main_notice_box .tab_wrap .btn__tab { padding: 0 10px; height: 30px; line-height: 13px; border-radius: 4px; }
    .main_notice_box .tab__pannel li > a { padding: 11px 15px; border-radius: 5px; }
    .main_notice_box .tab__pannel .date { padding-top: 6px; font-size: 11px; }
    .main_notice_box .btn__more { top: -45px; width: 30px; height: 30px; }
    

    /* 사업신청 영역 */
    .apply_wrap { padding-bottom: 50px; }
    .apply_wrap [class^="btn__business"] { height: 80px; padding: 0 34px; font-size: 16px; }
    .business__apply [class^="btn__business"] div { background-size: 30px auto; }
    .business__apply .btn__business--apply::after { left: 22px; right: 22px }
    .apply_wrap .btn__business--webzine { height: auto; padding: 50px 22px 40px; }
    .apply_wrap .btn__business--webzine p { font-size: 18px; }
    .apply_wrap .btn__business--webzine div::before { top:-7px; height: 3px; }
    .apply_wrap .btn__business--webzine div:after { width: 40px; height: 40px; }

    /*government*/
    .government { padding: 24px 0; }
    .government .section__title { padding-bottom: 26px; width: 250px; margin: 0 auto; text-align: center;}
    .government .card__text { padding: 13px 13px 20px; } 
    .government .card__text .text { padding: 10px; }
    .government .card__wrap .btn__more { top: 16px; }

    /* 재외동포 24시 */
    .news_swiper_wrap { padding-top: 30px; }
    .card__text { padding: 13px 13px 20px; }
    .card__wrap .btn__more { top: 0; }
    .card__list { width: 190px;  }
    .card__text:only-child { padding-top: 18px !important; }
    .card__text .text { margin-top: 13px; padding-top: 13px; }
    .news_overview { padding: 0; }


    .overview__btns { display: flex; }


    /* 주요 서비스 */
    .main_services { padding-bottom: 0; margin-top: 50px; }
    .main_services__list .service__name { font-size: 18px; }
    .main_services__list a { height: 80px; padding: 10px 78px 10px 36px; letter-spacing: -0.3px; }
    .main_services__list a::before {right: 25px;width: 51px;height: 32px;background-size: 45px auto; }
    .main_services__list a.service_01::before {background-position-y: -1px;}
    .main_services__list a.service_02::before {background-position-y: -31px;}
    .main_services__list a.service_03::before {background-position-y: -63px;}
    .main_services__list a.service_04::before {background-position-y: -94px; height: 26px;}
    .main_services__list a.service_05::before {background-position-y: -120px;}
}