@charset "utf-8";

/* Desktop */
@media screen and (max-width: 1700px) {
    /* ###### float_banner ###### */
    .float_banner {
        align-items: flex-end;
        bottom: 16px;
        transform: translateY(0);
        width: auto;
    }
    .donate_go {
        font-size: 1.4rem;
        width: auto;
        margin-bottom: 12px;
    }
    .donate_go::before {
        width: 90%;
        height: 80px;
    }
    .flt_donate {
		align-items: flex-end;
	}
    .flt_donate ul {
        display: none;
    } 

    .flt_view_toggle {
        display: flex;
        aspect-ratio: auto;
        min-height: 42px;
    }
    .flt_btns_inner {
		display: none;
    }
    .flt_view_toggle.active {
		background: var(--pc3) url(/img/arrow_down_white-f8bf9da2ae229cf8e9f453e3c307e8c4.png) no-repeat center right 8px;
		background-size: 20px 20px;
        color: #fff;
        border: 1px solid #000;
    	justify-content: flex-start;
        padding-left: 15px;
    }
    .flt_view_toggle.active + .flt_btns_inner {
        width: 100%;
        display: flex;
	    flex-direction: column;
	    gap: 6px;
    }
    .flt_btns {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .flt {
        word-break: keep-all;
        border-radius: 999px;
        padding: 8px;
        font-size: 1.2rem;
        min-height: 42px;
    }
    
	.float_banner.hidden {
		display: none;
	}
    
    .float_close {
		width: 40px;
		height: 40px;
		margin-bottom: 84px;
		display: block;
		background: #000 url(/img/cancle_2-a44620943924b2ced8edc7562e08a463.png) no-repeat center center;
		background-size: auto 64%;
		border-radius: 8px;
		box-shadow: 0 0 8px #00000024;
		border: 2px solid #fff;
		margin-left: auto;
	}
    
    
    
    
    /* ###### footer ###### */
    footer {
        
    }
    .footer_bottom .inner {
        flex-direction: column;
        padding-right: 100px;
        padding-bottom: 72px;
    }


	/* ###### header ###### */
	.gnb li > a {
		font-size: 1.4rem;
	}
	.submenu a {
		font-size: 1.4rem;
		padding: 8px;
	}
	.login_wrap > a {
		font-size: 1.4rem;
	}
	.submenu_bg {
		top: 63px;
	}
}

@media screen and (max-width: 1600px) {
	.sub_layout {
	    transform: translateX(0);
	}
}

@media screen and (max-width: 1440px) {
	/* ###### header ###### */
	.logo {
		width: 10%;
	}
	.logo img {
        width: 160px;
    }
}



@media screen and (max-width: 1280px) {
    /* ###### Layout CSS ###### */
    .common_layout {
        margin-top: 18px;
        padding-top: 60px;
    }
    .main_layout {
		padding-top: 54px;
	}
    .sidebar {
        display: none;
    }
    .sub_contents {
		width: 100%;
	}
    header {
        padding: 12px;
    }
    /* ###### header ###### */

    .gnb_wrap {
	    display: none;
    }
    .login_wrap {
        display: none;
    }

    /* trigger */
    .trigger {
        display: block;
    }



}


@media screen and (max-width: 1024px) {
    /* total_search_box */
    .total_search_box {
        flex-wrap: wrap;
    }


    /* ###### Main 메인 ###### */
    .slide_title {
        font-size: 2rem;
    }
    .main_title h1 {
        font-size: 2.4rem;
        word-break: keep-all;
    }
    /* mainSec_1 */
    .sns_list {
        flex-wrap: wrap;
    }
    .sns_list li {
        width: 100%;
    }
    .slide_btn {
        gap: 6px;
    } 
    .slide_btn span {
        width: 40px;
        height: 40px;
    }


	/* 메인 팝업 슬라이드:main_pop_wap */
	.main_pop_wrap .inner {
		max-width: calc(100% - 46px - 46px);
	}
	.main_pop_wrap  .slick-prev,
	.main_pop_wrap .slick-next {
		width: 40px;
		height: 40px;
	}
	.main_pop_wrap  .slick-prev {
		left: -40px;
	}
	.main_pop_wrap  .slick-next {
		right: -40px;
	}



}


@media screen and (max-width: 962px) {
	.main_layout {
		background: #fff;
	}
	
	.mainSec_2 {
	    background: url(/img/main_pat_1-d1592804b314601e55702af635803b78.png) no-repeat top 20px left 48px;
	    background-size: 40% auto;
	}

}

/* Tablet */
@media screen and (max-width: 768px) {
	/* 페이징 */
	.pagination li a {
		font-size: 1.4rem;
	}
    .logo img {
        width: 240px;
    }
    /* mainSec_2 */
    .list_common {
		padding: 16px;
	}
	.list_common .date {
		font-size: 1.4rem;
	}
    
    /* ###### sub_contents ###### */
    .sub_visu {
        padding: 20px;
    }
    .sub_visu_title {
        font-size: 2.4rem;
    }
    .sub_visu p {
        font-size: 1.4rem;
    }

    /* total_search_box */
    .search_box {
        width: 100%;
    }
    /* ###### board_wrap:게시판 관련 ###### */
    .board_wrap th,
    .board_wrap td {
        /*font-size: 1.4rem;*/
        font-size: 1.6rem;
    }
    .new_post {
		width: 14px;
		height: 14px;
		margin-bottom: -2px;
	}
    

    /* ## sub_title ## */
    .sub_title h2 {
        font-size: 2.2rem;
    }

    /* ###### gallery_wrap: 갤러리형 게시판 ####### */
/*    .media_list {
        gap: 12px;
    }
    .media_list li {
        width: calc(100% / 3 - 8px);
    }*/
    .media_list li {
        width: calc(100% / 2 - 12px);
    }


    /* ###### table_form_wrap: 테이블 사용 기본 입력폼 ####### */
    .table_form_wrap th,
    .table_form_wrap td {
        font-size: 1.4rem;
        word-break: keep-all;
        font-weight: 500;
    }
    .table_form_wrap input {
        font-size: 1.4rem;
    }

    /* ######## greet_wrap: 인사말 ######## */
    .greet_wrap {
        justify-content: center;
    }
    .greet_wrap .edit_txt_box {
        flex-basis: 100%;
    }



    /* ######## organ_wrap: 조직도 ######## */
    .organ_wrap .edit_txt_box {
        flex-wrap: wrap;
    }
    .organ_wrap .view_edit {
        width: 100%;
    }

    /* ######## donate 기부금 랜딩페이지 ######## */
    .donation .content_sec {
        margin-bottom: 40px
    }
    .content_sec.donate_act {
        margin-bottom: 40px;
    }
    .donate_act_inner {
        width: 100%;
        padding: 16px;
    }
    .donate_act_bg {
        width: 100%;
        left: 0;
        top: 0;
    }
    .invest_area {
        flex-wrap: wrap;
        padding: 12px;
    }
    .invest_area > li {
        width: 100%;
        flex-direction: row;
        padding: 12px;
    }
    .invest_area > li + li {
        border: none;
        border-top: 1px solid var(--bt);
    }
    .invest_img {
        width: 24%;
        margin: 0;
    }
    .be_list {
        flex-wrap: wrap;
    }
    .be_list li {
        width: 50%;
    }
    .be_list li + li {
        border-left: none;
    }
    .dona_contact {
        flex-direction: column;
    }
    .dc_box_wrap {
        width: 100%;
    }
    .public img {
        width: 100%;
    }


    /* ###### Main 메인 ###### */
    /* mainSec_1 */
    .mainSec_1 .inner {
        flex-wrap: wrap;
    }
    .banner_wrap {
        width: 100%;
    }
    .sns_list li {
        width: calc(50% - 8px);
    }
    /* main_slide_wrap */
    .slide_title {
        font-size: 1.8rem;
    }
    .main_slide_wrap {
        width: 100%;
        height: 340px;
    }
    .main_slide .slick-slide {
        height: 340px;
    }
    /* mainSec_2 */
    .mainSec_2 .inner {
        flex-wrap: wrap;
    }
    .mainSec_2 .inner > div {
        width: 100%;
    }
    .list_common li p {
        font-size: 1.6rem;
    }

    /* mainSec_3 */
    .mainSec_3 {
        background: none;
    }
    .mainSec_3 .inner {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0;
        padding: 0 0;
        padding-bottom: 32px;
    }
    .mainSec_3 .secLeft {
        background: url(/img/report_bg_1-c537470b888bb52b2937817e40d7c229.png) no-repeat center center;
        background-size: cover;
        padding: 72px 18px;
        width: 100%;
    }
    .mainSec_3 .secRight {
        background: url(/img/report_bg_2-23e54ec0773a6f3930e49efbdb7e31e9.png) no-repeat center center;
        background-size: cover;
        padding: 40px 0;
        width: 100%;
    }
    .report_list {
        flex-wrap: wrap;
        padding: 0 18px;
    }
    .report_list li {
        width: 100%;
    }

    /* mainSec_4 */
    .mainSec_4 {
        background: url(/img/main_pat_2-b3e445eaa57cdcf1368e964818238dad.png) no-repeat bottom 40px right 36px;
        background-size: 40%;
    }
    .mainSec_4 .inner {
        flex-wrap: wrap;
    }
    .mainSec_4 .inner > div {
        width: 100%;
    }
    .log_title p {
        font-size: 1.8rem;
    }
    .broad_list {
        flex-wrap: wrap;
    }
    .broad_list li {
        width: 100%;
    }



    /* 메인 팝업 슬라이드:main_pop_wap */
    .main_pop_wrap {
        padding: 16px 0;
        padding-bottom: 30px;
    }
    .main_pop_header {
        padding-top: 16px;
    }
    .main_pop_header_l {
        justify-content: space-between;
        width: 100%;
    }
    .main_pop_header_l h1 {
        font-size: 2.2rem;
    }
    .main_pop_header_r {
        width: 100%;
        justify-content: flex-end;
        font-size: 1.6rem;
    }


	/* 댓글영역 */
	.c_enter textarea {
		width: calc(100% - 60px);
	}
	.c_enter .enter_btn {
		width: 60px;
	}

}

/* Mobile */
@media screen and (max-width: 560px) {

    /* total_search_box */
    .total_search_box {
        gap: 4px;
    }
    

    
    /* ###### board_wrap:게시판 관련 ###### */
    .m_t_block {
        display: block;
        color: var(--tdis);
        font-size: 1.2rem;
    }
    .m_t_none {
        display: none;
    }
    .board_wrap .t_title .t_num {
		width: 10%;
	}
	.board_wrap .t_title {
		width: 90%;
	}
	

	/* ###### gallery_wrap: 갤러리형 게시판 ####### */
    .media_list li {
        width: 100%;
    }
    



    /* ######## greet_wrap: 인사말 ######## */
    .greet_wrap .edit_img_box {
        width: 100%;
    }

    /* ######## donate 기부금 랜딩페이지 ######## */
    .donate_link {
        width: 100%;
    }


	/* 메인 팝업 슬라이드:main_pop_wap */
	.main_pop_wrap .inner {
		max-width: calc(100% - 40px - 40px);
	}
	.main_pop_wrap  .slick-prev {
		left: -24px;
	}
	.main_pop_wrap  .slick-next {
		right: -24px;
	}
	.main_pop_header_r {
		justify-content: center;
	}
	
	
	/* ###### 로그인 레이아웃 ####### */
	.login_form {
	    padding: 12px;
	}
	

}

@media screen and (max-width: 430px) {

    
    /* total_search_box */    
    #searchForm {
		flex-wrap: wrap;
		width: 100%;
	}
    .search_box select {
		width: 100%;
	}
	.search_box span {
		width: 100%;
	}

}

@media screen and (max-width: 375px) {
    /* ######## donate 기부금 랜딩페이지 ######## */
    .public {
        flex-wrap: wrap;
    }
    .public li {
        width: 100%;
    }
    .public img {
        width: 40%;
    }
}