@charset "utf-8";

/* body {background: url('../images/main.jpg') no-repeat top ;} */

/* main popup 메인 팝업존 */
.main_popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%;  z-index: 9999;}
.main_popup .main_popup_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:fit-content; max-width: 1200px; z-index: 1; margin: 0 auto;}
.main_popup .main_popup_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 33, 39, .8); backdrop-filter: blur(4px);}
.main_popup .main_popup_top {display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
.main_popup .main_popup_top > h3 {font-size: 24px; font-weight: 600; color: #fff;}
.main_popup_wrap .ctrl_box {display: inline-block;}
.main_popup_wrap .ctrl_box .ctrl {display: inline-block; width: 40px; height: 40px; background: transparent no-repeat 50% 50%; background-color: #fff; background-size: auto 14px; border: 1px solid #eee; border-radius: 50%; margin-left: 5px;}
.main_popup_wrap .ctrl_box .ctrl.ctrl_prev {left: -60px; background-image: url('/images/page/common/icon_prev.png');}
.main_popup_wrap .ctrl_box .ctrl.ctrl_next {right: -60px; background-image: url('/images/page/common/icon_next.png');}
.main_popup_wrap .ctrl_box .ctrl.swiper-button-disabled {opacity: .5;}
.main_popup_slide {overflow: hidden;}
.main_popup_slide .swiper-slide {position: relative; display: block; width:calc((1200px - 90px)/3) !important; margin:0 15px; transition: width 0.4s;}
.main_popup_slide .swiper-slide a {display: block; border-radius:8px; overflow: hidden; border: 0;}
.main_popup_slide .swiper-slide a > img {inset:0; width: 100%; height:100%; object-fit: cover;}
.main_popup_bottom {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px;}
.main_popup_bottom .designChk span {color: #fff;}
.main_popup_bottom .modal_btn {display: block;}
.main_popup_bottom .modal_btn button {position: relative; width: 60px; height: 60px; background-color: #fff; border-radius: 50%;}
.main_popup_bottom .modal_btn button:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: .2; transform: scale(1.3); animation: ping 1.3s ease-in-out infinite both; z-index: -1;}
.main_popup_bottom .modal_btn button > i {font-size: 30px; vertical-align: middle;}

@keyframes ping {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
		opacity: 0;
	}
}

/* main common */
.mainContainer {position: relative; margin-top: 120px;}
.section + .section {padding: 40px 0;}
.section .inner {display: flex; justify-content: space-between; gap: 40px 40px;}

.cont_tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.cont_tit h3 {font-size: 24px; font-weight: 700; color: #000;}

/* more icon btn */
.more_icon {display: block; width: 20px; height: 20px; background: url('/images/page/common/icon_more.png') no-repeat 50% 50%; background-size: contain; opacity: .4;}

/* 이미지 슬라이드 공통 */
.slide_ctrl button {background-color: rgba(0, 0, 0, .3); width: 40px; height: 40px; border-radius: 50%;}
.slide_ctrl button:after {content: ''; display: block; width: 13px; height: 13px; background: no-repeat 50% 50%; background-size: auto 13px;}
.slide_ctrl .swiper-button-prev:after {background-image: url('/images/page/common/icon_prev_wh.png');}
.slide_ctrl .swiper-button-next:after {background-image: url('/images/page/common/icon_next_wh.png');}
.slide_pager .swiper-pagination-bullet {opacity: .3;}
.slide_pager .swiper-pagination-bullet-active {background-color: #fff; opacity: 1;}


/* section1 */
.section1 {padding: 40px 0;}
/* section1 - main left banner popup */
.section1 .left_cont {max-width: 960px; width: 100%;}
.main_banner {position: relative; width: 100%; height: 400px; background-color: #000; border-radius: 20px; overflow: hidden;}
.main_banner .main_title {position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 120px; z-index: 10; width: 100%;}
.main_banner .main_title p {font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 24px;}
.main_banner .main_title h1 {font-size: 42px; font-weight: 700; color: #fff;}
.main_banner .swiper-slide a {display: block; width: 100%; height: 100%;}
.main_banner .swiper-slide a img {position: relative; display: block; width: 100%; height: 100%; z-index: 1; overflow: hidden; object-fit: cover;}

/* section1 - main right 날씨, 검색, 퀵메뉴 */
.section1 .right_cont {display: flex; flex-direction: column; justify-content: center; gap: 20px 0; max-width: calc(100% - 1000px); width: 100%;}
.weather {width: 100%;}
.weather_item {padding:25px; border:1px solid #ddd; border-radius:20px; display:flex; flex-wrap: wrap; justify-content: center;}
.weather .weather_item strong {display: block; width:100%; font-size: 18px; color: #000; font-weight: 700; margin-bottom: 10px;}
.weather .weather_info {display: inline-block; padding-right: 20px; border-right: 1px solid var(--gray-200);}
.weather .weather_info .date {color: var(--gray-400);}
.weather .weather_info > div {display: block;}
.weather .weather_info span {vertical-align: middle; margin: 0 5px;}
.weather_state {display: inline-block; width: 22px; height: 22px; background: no-repeat 50% 50%; background-size: 22px auto;}
.weather_state.type01 {background-image: url('/images/page/weather/state1.png');}
.weather_state.type02 {background-image: url('/images/page/weather/state2.png');}
.weather_state.type03 {background-image: url('/images/page/weather/state3.png');}
.weather_state.type04 {background-image: url('/images/page/weather/state4.png');}
.weather_state.type05 {background-image: url('/images/page/weather/state5.png');}
.weather_state.type06 {background-image: url('/images/page/weather/state6.png');}
.weather_state.type07 {background-image: url('/images/page/weather/state7.png');}
.weather_state.type08 {background-image: url('/images/page/weather/state8.png');}
.weather_state.type09 {background-image: url('/images/page/weather/state9.png');}
.weather_state.type010 {background-image: url('/images/page/weather/state10.png');}
.weather_state.type011 {background-image: url('/images/page/weather/state11.png');}
.weather_state.type012 {background-image: url('/images/page/weather/state12.png');}
.weather_state.type013 {background-image: url('/images/page/weather/state13.png');}
.weather_state.type014 {background-image: url('/images/page/weather/state14.png');}
.weather_state.type015 {background-image: url('/images/page/weather/state15.png');}
.weather_celsius {font-size: 20px; font-weight: 800;}
.weather_indicator {display: inline-block; padding-left: 20px;}
.weather_air,
.weather_humidity {display: block;}
.weather_air span,
.weather_humidity span {color: #000; font-weight: 600;}
.weather_humidity span b {color: var(--sub-color);}
.weather_air .tit,
.weather_humidity .tit {color: var(--gray-400); margin-right: 10px; font-weight: 400;}

/* section1 - main search */
.main_search {width: 100%;}
.main_search .search_input {position: relative; display: flex; align-items: center; width: 100%; height: 50px; border-radius: 25px; border: 2px solid var(--main-color); background-color: var(--gray-100);}
.main_search .search_input > input {border: 0; background-color: transparent; width: 100%; font-size: 1rem; padding: 0 50px 0 20px;}
.main_search .search_input .search_btn {position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; background-color: var(--main-color); border-radius: 50%; text-align: center; line-height: 36px;}
.main_search .search_input .search_btn > i {font-size: 18px; font-weight: 400; color: #fff;}
.main_search .hit_keyword {margin-top: 10px; width: 100%; vertical-align: middle; padding: 0 24px; font-size: 0;}
.main_search .hit_keyword > li {display: inline-block; max-width: 33.3%; margin-right: 20px; overflow: hidden;}
.main_search .hit_keyword > li > a {display: flex; flex-wrap: wrap; align-items: center; color: #000; font-size: 1rem; font-weight: 400; transition: all .25s;}
.main_search .hit_keyword > li > a .num {width: 10px; font-weight: 400; color: var(--main-color);}
.main_search .hit_keyword > li > a > span {vertical-align: middle; width: calc(100% - 10px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

/*  section1 - main quick menu */
.main_quick > ul {display: flex; align-items: center; justify-content: space-between;}
.main_quick > ul > li > a {display: block; text-align: center;}
.main_quick > ul > li .icon {display: block; width: 70px; height: 70px; background: var(--gray-100) no-repeat 50% 50%; background-size: 40%; border-radius: 24px; transition: all .25s;}
.main_quick > ul > li .icon.icon1 {background-image: url('/images/page/main/quick_icon1.png');}
.main_quick > ul > li .icon.icon2 {background-image: url('/images/page/main/quick_icon2.png');}
.main_quick > ul > li .icon.icon3 {background-image: url('/images/page/main/quick_icon3.png');}
.main_quick > ul > li .icon.icon4 {background-image: url('/images/page/main/quick_icon4.png');}
.main_quick > ul > li strong {display: block; font-size: 1rem; font-weight: 600; color: #000; margin-top: 20px;}

.main_quick > ul > li:hover .icon {background-color: var(--main-color); border-radius: 34px;}
.main_quick > ul > li:hover .icon.icon1 {background-image: url('/images/page/main/quick_icon1_on.png');}
.main_quick > ul > li:hover .icon.icon2 {background-image: url('/images/page/main/quick_icon2_on.png');}
.main_quick > ul > li:hover .icon.icon3 {background-image: url('/images/page/main/quick_icon3_on.png');}
.main_quick > ul > li:hover .icon.icon4 {background-image: url('/images/page/main/quick_icon4_on.png');}
.main_quick > ul > li:hover strong {color: var(--main-color);}

/* section2 */
.section2{background:var(--gray-100);}
/* section2 - 공지사항 */
.main_board {display: flex; width: 50%; justify-content: space-between; align-items: stretch;}
.main_board .tab {width: 140px; display: flex; flex-direction: column; gap: 10px 0; margin-top: 30px;}
.main_board .tab .tab_item {position: relative; display: block;}
.main_board .tab .tab_item:before {content: ''; opacity: 0; visibility: hidden; position: absolute; display: block; width: 160px; height: 40px; border-radius: 20px; background-color: var(--main-color);}
.main_board .tab .tab_item.active:before {opacity: 1; visibility: visible;}
.main_board .tab .tab_item span {position: relative; font-size: 18px; color: var(--gray-400); font-weight: 500; line-height: 40px;}
.main_board .tab .tab_item.active span {color: #fff; font-weight: 700; padding: 0 30px;}
.main_board .tab_cont {width: calc(100% - 140px); background-color: #fff; border-radius: 20px; padding: 50px 50px;}

.main_board .tab .tab_item:hover:not(.active) span {color: var(--main-color); font-weight: 700;}

.main_board .board_first {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.main_board .board_first .date {width: 70px; height: 60px; background-color: var(--main-color); border: 2px solid transparent; border-radius: 16px; text-align: center; padding: 5px 0; transition: all .25s;}
.main_board .board_first .date em {font-size: 18px; font-weight: 700; color: #fff;}
.main_board .board_first .date span {font-size: 14px; font-weight: 400; color: #fff;}
.main_board .board_first .first_tit {width: calc(100% - 70px); padding-left: 20px;}
.main_board .board_first .first_tit .tit {font-size: 1rem; font-weight: 600; color: #000;}
.main_board .board_first .first_tit p {font-size: 15px; font-weight: 400; color: var(--gray-400); margin-top: 5px;}

.main_board .board_first:hover .date {border: 2px solid var(--main-color); background-color: transparent;}
.main_board .board_first:hover .date em,
.main_board .board_first:hover .date span {color: var(--main-color);}
.main_board .board_first:hover .first_tit .tit {text-decoration: underline;}

.main_board .board_list li {margin-top: 15px;}
.main_board .board_list li a {display: flex; align-items: center; justify-content: space-between;}
.main_board .board_list li .tit {max-width: 350px; font-size: 1rem; font-weight: 600; color: #000;}
.main_board .board_list li .date {font-size: 14px; font-weight: 400; color: var(--gray-400);}

.main_board .board_list li:hover .tit {text-decoration: underline;}

/* section2 - 사업공고 */
.main_biz {width: 50%;}
.main_biz .biz_list {display: flex; align-items: stretch; justify-content: space-between; gap: 20px 20px; flex-wrap: wrap;}
.main_biz .biz_list li {width: calc((100% - 20px) / 2);}
.main_biz .biz_list li a {position: relative; display: block; padding: 50px 40px; background:#fff; border: 1px solid var(--gray-200); border-radius: 20px; overflow: hidden; transition: all .25s;}
.main_biz .biz_list li a:after {content: ''; position: absolute; bottom: 0; right: 0; width: 151px; height: 60px; background: url('/images/logo_symbol.png') no-repeat 50% 50%; background-size: contain; opacity: .05; transition: all .25s;}
.main_biz .biz_list li .txt_box {border-bottom: 1px solid var(--gray-200); padding-bottom: 15px;}
.main_biz .biz_list li .txt_box .badge {display: inline-block; height: 26px; min-width: 70px; font-size: 15px; font-weight: 500; color: #fff; background-color: #000; border-radius: 13px; text-align: center; line-height: 26px; vertical-align: middle;}
.main_biz .biz_list li .txt_box .badge.apply {background-color: var(--main-color);}
.main_biz .biz_list li .txt_box .badge.end {background-color: var(--gray-400);}
.main_biz .biz_list li .txt_box .tit {font-size: 18px; font-weight: 700; color: #000; margin-top: 15px; height: 2.8em;}
.main_biz .biz_list li .date {font-size: 15px; font-weight: 400; color: var(--gray-400); margin-top: 15px;}

.main_biz .biz_list li:hover a {border-color: var(--main-color);}
.main_biz .biz_list li:hover a:after {opacity: .15;}
.main_biz .biz_list li:hover .txt_box .tit {text-decoration: underline;}


/* section3 */
/* section3 - 협회소식 */
.main_news {max-width: 960px; width: 100%;}
.main_news .news_cont {display: flex; gap: 20px;}

/* section3 - main news common */
.main_news .txt_box .tit {font-size: 18px; font-weight: 700; color: #000; height: 2.8em;}
.main_news .txt_box .date {font-size: 15px; font-weight: 400; color: var(--gray-400); margin-top: 20px;}

.main_news .news_first {width: calc((100% - 40px)/3);}
.main_news .news_first > a{display:block; width:100%;}
.main_news .news_first .thumb {position: relative; max-width: 100%; height: 200px; width: 100%;background-color: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 20px; overflow: hidden;}
.main_news .news_first .thumb > img {position: relative; top: 50%; left: 50%; object-fit: cover; width: 100%; height: 100%; max-width: none; min-width: 0; transform: translate(-50%, -50%);}
.main_news .news_first .txt_box {margin-top: 20px;}

.main_news .news_first:hover .txt_box .tit {text-decoration: underline;}

/*.main_news .news_list {width: calc(100% - 290px);}
.main_news .news_list li + li {margin-top: 20px;}
.main_news .news_list li a {display: flex; align-items: center; gap: 20px 20px; width: 100%; height: 100%;}
.main_news .news_list li .thumb {position: relative; max-width: 180px; height: 146px; width: 100%;background-color: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 20px; overflow: hidden;}
.main_news .news_list li .thumb > img {position: relative; top: 50%; left: 50%; object-fit: cover; width: 100%; height: 100%; max-width: none; min-width: 0; transform: translate(-50%, -50%);}
.main_news .news_list li .txt_box {width: calc(100% - 180px);}

.main_news .news_list li:hover .txt_box .tit {text-decoration: underline;}
*/

/* section3 - main link */
.main_link {max-width: 440px; width: 100%;}

.link_group{display:flex; flex-direction: column; gap: 20px;}
.link_item {position: relative; display: block; padding: 25px 40px; border-radius: 20px; overflow: hidden;}
.link_item:before {content: ''; position: absolute; top:0; bottom:0; right: 15px; margin:auto; width: 40%; height:100%; background-repeat: no-repeat; background-size: contain; background-position: center;}

.main_link li:nth-child(2n+1) .link_item:first-child {background: linear-gradient(90deg, #5a4ed6 0, #515bd4 100%);}
.main_link li:nth-child(2n+1) .link_item:last-child {background: linear-gradient(90deg, #00339f 0, #121e4a 100%);}

.main_link li:nth-child(2n) .link_item:first-child {background: linear-gradient(90deg, #00339f 0, #121e4a 100%);}
.main_link li:nth-child(2n) .link_item:last-child {background: linear-gradient(90deg, #5a4ed6 0, #515bd4 100%);}

.link_item.lms:before {background-image: url('/images/page/main/future_bg.png'); }
.link_item.sw:before {background-image: url('/images/page/main/swa_bg.png');}
.link_item.xr:before {background-image: url('/images/page/main/metaverse2_bg.png');}
.link_item.ms:before {background-image: url('/images/page/main/metaverse_bg.png');}

.link_item .txt_box .tit {display: block; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; transition: all .25s; line-height:125%;}
.link_item .txt_box .arw_icon {display: block; width: 40px; height: 40px; background: url('/images/page/common/icon_arw_wh.png') no-repeat 50% 50%; background-size: auto 10px; background-color: rgba(255, 255, 255, .2); border-radius: 50%; transition: all .25s;}

.main_link li:nth-child(2n+1) .link_item:first-child:hover {background: #333A87;}
.main_link li:nth-child(2n+1) .link_item:last-child:hover {background: #121e4a;}

.main_link li:nth-child(2n) .link_item:first-child:hover {background: #121e4a;}
.main_link li:nth-child(2n) .link_item:last-child:hover {background: #333A87;}

.link_item:hover .txt_box .tit {letter-spacing: 1px; margin-left: 5px;}
.link_item:hover .txt_box .arw_icon {background-color: rgba(255, 255, 255, .4);}

.swiper-container-horizontal > .swiper-pagination-bullets.link_ctrl, .swiper-pagination-custom.link_ctrl, .swiper-pagination-fraction.link_ctrl{display:flex; justify-content: center; align-items: center; gap: 4px; position:absolute; bottom:0; left:0; right: 0; margin:auto;}
.link_ctrl > span{width:8px; height:8px; display:block; border:1px solid #ddd; border-radius:50%;}
.link_ctrl > span.swiper-pagination-bullet-active{background:var(--main-color);}


/* section4 */
.section4{background:#222;}
/* section4 관련기관 및 참여기관 */
.section4 .inner {align-items: flex-end;}
.section4 .cont_tit {max-width: 240px; width: 100%; display: block; margin-bottom: 0;}
.section4 .cont_tit h3{color:#fff;}
.section4 .partner_ctrl {margin-top: 20px;}
.section4 .partner_ctrl button {position: relative; top: auto; left: auto; right: auto; bottom: auto; display: inline-block; margin-top: 0; width: 28px; height: 28px; background: no-repeat 50% 50%; background-size: auto 12px; opacity: 1; vertical-align: middle;}
.section4 .partner_ctrl button:before,
.section4 .partner_ctrl button:after {content: none;}
.section4 .partner_ctrl button.play {background-image: url('/images/page/common/icon_play.png');}
.section4 .partner_ctrl button.pause {background-image: url('/images/page/common/icon_pause.png');}
.section4 .partner_ctrl button.prev {background-image: url('/images/page/common/icon_prev.png');}
.section4 .partner_ctrl button.next {background-image: url('/images/page/common/icon_next.png');}

.section4 .partner_ctrl .autoplay {position: relative; display: inline-block; width: 28px; height: 28px; vertical-align: middle; cursor: pointer;}
.section4 .partner_ctrl .autoplay button {position: absolute; top: 0; left: 0;}
.section4 .partner_ctrl .autoplay button.play {opacity: 0; visibility: hidden;}
.section4 .partner_ctrl .autoplay.on button.play {opacity: 1; visibility: visible;}
.section4 .partner_ctrl .autoplay.on button.pause {opacity: 0; visibility: hidden;}

.main_partner {width: calc(100% - 240px);}
.main_partner a {display: flex; justify-content: center; padding: 15px 20px; background:#fff; align-items: center; width: 100%; height: 60px; border: 1px solid var(--gray-200); border-radius: 10px;}
.main_partner a > img {object-fit: contain; width: 100%; height: 100%;}



/* **************************************** *
 * **************************************** */
@media (max-width: 1600px) {

}

@media (max-width: 1440px) {
    /* main common */
    .section .inner {gap: 40px 20px;}

    /* section1 */
    /* section1 - main left banner popup */
    .section1 .left_cont {max-width: 65%;}
    .main_banner .main_title {padding: 0 60px;}
    .main_banner .main_title p {font-size: 18px;}
    .main_banner .main_title h1 {font-size: 38px;}

    /*section1 - main right 날씨, 검색, 퀵메뉴 */
    .section1 .right_cont {max-width: calc((100% - 65%) - 20px);}

    /* section3 */
    /* section3 - 협회소식 */
    .main_news {max-width: 65%;}
    .main_link {width: 35%; max-width: none;}
    
}

@media (max-width: 1280px) {
    /* main popup 메인 팝업존 */
	.main_popup .main_popup_wrap {max-width:876px;}
	.main_popup_slide .swiper-slide{width:calc((876px - 90px)/3) !important;}
}

@media (max-width: 1024px) {
    /* main popup 메인 팝업존 */
	.main_popup .main_popup_wrap {max-width:640px;}
	.main_popup_slide .swiper-slide{width:calc((640px - 40px)/2) !important; margin:0 10px;}

    /* main common */
    .section .inner {flex-direction: column;}

    .cont_tit {margin-bottom: 20px;}

    /* section1 */
    /* section1 - main left banner popup */
    .section1 {padding-top: 0;}
    .section1 .left_cont {max-width: none; width: 100%;}
    .main_banner .main_title h1 {font-size: 34px;}

    /*section1 - main right 날씨, 검색, 퀵메뉴 */
    .section1 .right_cont {width: 100%; gap: 30px 20px; max-width: none;}
    .weather {text-align: center;}

    /*  section1 - main quick menu */
    .main_quick > ul > li {width: calc(100% / 4);}
    .main_quick > ul > li .icon {margin: 0 auto;}

    /* section2 */
    /* section2 - 공지사항 */
    .main_board,
    .main_biz {width: 100%;}

    .main_news {max-width: 100%;}
    .main_link {width: 100%; padding-bottom:20px;}

    /* section3 */
    /* section3 - main link */
    .link_group{flex-direction: row;}

    .link_item {width:calc((100% - 20px)/2); padding:20px 30px;}
    /*.link_item :before {right: 10px;}*/
    .link_item .txt_box .tit {font-size: 18px;}

    /* section4 */
    /* section4 관련기관 및 참여기관 */
    .section4 .inner {gap: 20px 0 !important;}
    .section4 .cont_tit {display: flex; max-width: none;}
    .main_partner {width: 100%;}
}


@media (max-width: 768px) {
    /* main popup 메인 팝업존 */
	.main_popup .main_popup_wrap {max-width:340px;}
	.main_popup_slide .swiper-slide{width:320px !important;}

	.main_popup_bottom .modal_btn button {width: 50px; height: 50px;}

    /* section2 */
    /* section2 - 공지사항 */
    .main_board .tab .tab_item span {font-size: 17px;}

    /* section2 - 사업공고 */
    .main_biz .biz_list li a {padding: 40px 30px;}
    .main_biz .biz_list li .txt_box .tit {font-size: 17px;}

    /* seciton3 */
    /* section3 - 협회소식 */
    .main_news .news_cont {gap: 20px 20px;}

    /* main news common */
    .main_news .txt_box .tit {font-size: 17px;}

}

@media (max-width: 640px) {
    /* section3 */
    /* section3 - 협회소식 */
    .main_news .news_cont {flex-direction: column;}
    .main_news .news_first {width: 100%;}
    .main_news .news_first a {display: flex; align-items: center; gap: 20px 20px; width: 100%; height: 100%;}
    .main_news .news_first .thumb {max-width: 180px; height: 146px;}
    .main_news .news_first .txt_box {width: calc(100% - 180px);}
    .main_news .news_list {width: 100%;}
}

@media (max-width: 576px) {
    /* main common */
    .section {padding-bottom: 50px;}
    .section .inner {gap: 30px 20px;}
    .cont_tit h3 {font-size: 20px;}

    /* section1 */
    /* section1 - main left banner popup */
    .main_banner .main_title {padding: 0 4%; text-align: center;}
    .main_banner .main_title p {font-size: 1rem;}
    .main_banner .main_title h1 {font-size: 28px;}
    .main_banner .banner_ctrl {display: none;}

    /* section2 */
    /* section2 - 공지사항 */
    .main_board {flex-direction: column;}
    .main_board .tab {width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; -msd-overflow-style: none; scrollbar-width: none;}
    .main_board .tab .tab_item {padding: 10px; border-radius: 10px 10px 0 0;}
    .main_board .tab .tab_item span {line-height: normal; font-size: 1rem;}
    .main_board .tab .tab_item.active:before {content: none;}
    .main_board .tab .tab_item.active {background-color: var(--main-color);}
    .main_board .tab .tab_item.active span {padding: 0;}
    .main_board .tab_cont {width: 100%; padding: 20px; border-top-left-radius: 0;}

    .main_biz .biz_list{gap:10px;}
    .main_biz .biz_list li{width: calc((100% - 10px)/2);}
    .main_biz .biz_list li a{padding:30px 20px;}
    .main_biz .biz_list li .txt_box .badge{min-width:50px; font-size:12px; height:22px; line-height: 22px;}
    .main_biz .biz_list li .txt_box .tit{font-size:16px;}
    .main_biz .biz_list li .date{font-size:13px;}

    /* section3 */
    /* section3 - main link */
   .link_group {flex-direction: column;}
   .link_item{width:100%;}
}

@media (max-width: 420px) {
    /* section1 */
    /* section1 - main left banner popup */
    .main_banner .main_title h1 {font-size: 24px;}

    /*  section1 - main quick menu */
    .main_quick > ul {flex-wrap: wrap; gap: 15px;}
    .main_quick > ul > li {width: calc((100% - 15px)/2);}
    .main_quick > ul > li > a {display: flex; align-items: center; gap: 0 15px;}
    .main_quick > ul > li .icon {margin: 0; width:60px; height:60px; border-radius:15px; background-size: 45% auto;}
    .main_quick > ul > li strong {margin-top: 0;}

    /* section2 */
    /* section2 - 사업공고 */
    .main_biz .biz_list li {width: 100%;}

    /* section3 */
    .main_news .news_first a,
    .main_news .news_list li a {flex-direction: column;}
    .main_news .news_first .thumb,
    .main_news .news_list li .thumb{max-width: 100%;}
    .main_news .news_first .txt_box,
    .main_news .news_list li .txt_box{width:100%; margin-top:0;}
}

@media (max-width: 360px) {
    /*  section1 - main quick menu */
    .main_quick > ul > li {width: 100%; border:1px solid #ddd; border-radius:10px; padding:10px;}

    .main_board .tab .tab_item span{font-size:14px;}
}