@charset "utf-8";

/* 내용관리 */
.ctt_admin {display:none;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}


/* 테이블 */
table{border-collapse: collapse; border-spacing: 0;}
table {width: 100%; border:1px solid #ddd;  }
table thead th {background: #eee; padding: 20px 0;  font-size:16px; font-weight:400;}
table tbody th {width:15%;background: #eee; padding: 20px 0; text-align: center; font-size:16px; font-weight:400;}
table tbody td {width:35%;padding: 20px 0; text-align: center; font-size:16px; font-weight:400; color:#666;}

table tbody ul li{font-size:16px; margin-top:15px; text-align:left;}
table tbody ul li:first-child{margin-top:0;}
table tbody ul.ty01 li{position:relative;  padding:0 30px 0 44px;}
table tbody ul.ty01 li:before{content:""; display:block; width:6px; height:1px; position:absolute; top:13px; left:30px; background:#666;}
table tbody ul.ty02 li{position:relative;  padding:0 30px 0 30px;}
table tbody ul.ty02 li i:last-child{margin-right:10px;}





#hd{z-index:99999999999;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mt150{margin-top:150px;}
.mt200{margin-top:200px;}

.visual{text-align:center; line-height:400px; color:#000; font-size:60px; font-weight:bold;}

#m_side {display:none;}
#side{height:70px; margin-top:-70px; background:rgba(0,0,0,0.5);}
#side ul{max-width:1200px; margin:0 auto; display:table;}
#side ul li{display:table-cell; width:1%; height:70px; line-height:70px;}
#side ul li a{color:#fff; font-size:16px; display:block; text-align:center;}
#side ul li a.active{background:#fff; height:80px; line-height:80px; color:#333; border-radius:20px 20px 0 0; margin-top:-10px;
	font-size:18px; font-weight:bold;}


.visual{background:url('img/visual01.jpg') no-repeat; background-size:cover; background-position:center;margin-top:40px;}
.visual.subA1{background:url('img/visual02.jpg') no-repeat; background-size:cover; background-position:center;margin-top:40px;}
.visual.subA2{background:url('img/visual02.jpg') no-repeat; background-size:cover; background-position:center;margin-top:40px;}
.visual.subA3{background:url('img/visual02.jpg') no-repeat; background-size:cover; background-position:center;margin-top:40px;}

#ctt{max-width:1200px; margin:100px auto;}
#ctt .common{font-size:30px; text-align:center; font-weight:bold;}

.text{font-size:18px; line-height:26px; color:#333; word-break:keep-all; }


.inner {width:100%; max-width:1200px; margin:0px auto; padding:80px 10px 0px 10px;}
.subtit {text-align:center; font-size:30px; font-weight:600; margin-bottom:50px; }

.inner .content{display:flex;justify-content: space-between; margin-bottom:50px; }
.inner .content .con_txt {width:100%; font-size:18px;  line-height:35px; word-break:keep-all; text-align:center;}
.inner .content .con_txt span {color:#073755}
.inner .content .con_txt h2 {font-size:35px; padding-bottom:30px; line-height:45px; margin:0}
.inner .content .con_txt p {} 
.inner .content .con_img img {width:100%; display:block;}



.tableWrap {position: relative; padding: 18px 0 0; margin-top:100px;}
.tableWrap::before {content: ""; display: block; width: 7px; height: 7px; background: #333; border-radius: 50%; position: Absolute; left: 50%;
    margin-left: -3px; top: 0;}
.tableWrap .his_in {overflow: hidden; clear: both; position: Relative; padding: 0 0 58px; z-index: 1;}
.tableWrap .his_in::before {content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; border:1px solid #333; position: absolute;
    left: 50%; top: 10px; margin-left: -9px; z-index: 5; background-size: 100%; background:#073756;}
.tableWrap .his_in > div {float: left; width: 50%; box-sizing: Border-box;}
.tableWrap .his_in .his_img {text-align: right; padding: 0 53px 0 0; min-height: 5px;}
.tableWrap .his_in .his_img h6 {font-size: 38px; font-weight: 700; color: #073756; line-height: 100%; position: absolute; left: 50%;
    margin-left: 53px; letter-spacing: 0.3pt;}
.tableWrap .his_in > div {float: left; width: 50%; box-sizing: Border-box;}
.tableWrap .his_in .his_txt {padding: 65px 0 0 53px;}
.tableWrap .his_in .his_txt dl {overflow: hidden; clear: both; padding: 0 0 5px;}
.tableWrap .his_in .his_txt dt {color: #333; font-weight: 700; width: 50px; float: left; font-size:18px;}
.tableWrap .his_in .his_txt dt span{font-size:16px;}
.tableWrap .his_in .his_txt dd {letter-spacing: -0.3pt; position: Relative; word-break: keep-all; width: calc(100% - 50px);  float: left;
    box-sizing: Border-box; color: #333; font-size:18px; font-family:'nl';}
.tableWrap .his_in:nth-child(even) > div {float: right;}
.tableWrap .his_in:nth-child(even) .his_img {text-align: left; padding: 0 0 0 53px;}
.tableWrap .his_in:nth-child(even) .his_img h6 {left: auto; right: 50%; margin: 0 53px 0 0;}
.tableWrap .his_in:nth-child(even) .his_txt {text-align: right; padding: 65px 53px 0 0;}
.tableWrap .his_in:nth-child(even) .his_txt dt {float: right;}
.tableWrap:after {content: ""; display: block; width: 1px; height: 100%;
background:#333;  position: absolute; left: 50%; top: 0; z-index: 0;}


.address li {display:flex;align-items: center; border-bottom: 1px solid #eee; padding: 40px;}
.address li:last-child {border-bottom:none;}
.address i {font-size:20px; background:#eee; border-radius:100%; width:100px; height:100px; line-height:100px; text-align:center; margin-right:40px;}
.address h5 {font-size:20px;color:#073756;font-weight:bold;margin-bottom:10px;}
.address p {font-size:16px; }

@media only screen and (max-width: 1024px){

/* 모바일퀵메뉴 */
	#side{display:none;}
	#m_side{display:block; background:#272727; }
	.quick_list > a{font-size:16px; font-weight:400; display:block; position:relative; padding:20px; color:#fff;}
	.quick_list > a:after{content:""; display:block; width:11px; height:7px; background:url('img/arrow_icon.png') no-repeat;
		position:absolute; right:20px; top:50%; transform:translateY(-50%);}
	.quick_list.selected > a:after{background:url('img/arrow_icon2.png') no-repeat;}
	.quick_list .desc_box{position:absolute; display:none; width:100%; z-index:20; }
	.quick_list .desc_box ul li a{background:#fff; font-size:15px; padding:20px; display:block; border-bottom:1px solid #eaeaea;}
/* 모바일퀵메뉴end */

	.visual{height:500px; line-height:500px; font-size:40px;}
	#side{margin-top:0; height:auto;}
	#side ul{display:block;}
	#side ul:after{content:""; display:block; float:none; cleaR:both;}
	#side ul li{display:block; width:50%; float:left;}
	#side ul li a{background:#ccc;}
	#side ul li a.active{height:auto; line-height:70px; border-radius:0; margin-top:0; font-size:16px;}

	
	.tableWrap .his_in {padding: 0 30px 58px 40px;}
	.tableWrap .his_in .his_txt dt{float:none;}
	.tableWrap .his_in .his_txt dd{float:none; width:100%;}
	.tableWrap::before{left:5%;}
	.tableWrap .his_in::before{left:5%;}
	.tableWrap .his_in .his_img{float:none; text-align:left; padding:0; }
	.tableWrap .his_in .his_txt{float:none; width:100%; padding:20px 0  0 0;}
	.tableWrap .his_in .his_img h6{position:initial; left:initial; transform:initial; margin:0;}
	.tableWrap .his_in:nth-child(even) .his_img h6{left:initial; right:initial; position:initial; margin:0;}
	.tableWrap .his_in:nth-child(even) .his_img{float:none; text-align:left; padding:0;}
	.tableWrap .his_in:nth-child(even) .his_txt{float:none; width:100%; padding:20px 0  0 0; text-align:left;}
	.tableWrap .his_in:nth-child(even) .his_txt dt{float:none;}
	.tableWrap:after{left:5%;}
	


}



/* sub01 */

.ctt_sub01 .inner .content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 세로 정렬 */
    margin-bottom: 50px;
}

.ctt_sub01 .inner .content .con_txt {
    width: 50%; /* 텍스트 영역 너비 */
    font-size: 18px;
    line-height: 35px;
    word-break: keep-all;
    text-align: left;
}

.ctt_sub01 .inner .content .con_txt h2 {
    font-size: 35px;
    padding-bottom: 30px;
    line-height: 45px;
    margin: 0;
}

.ctt_sub01 .inner .content .con_imgs {
    width: 50%; /* 이미지 영역 너비 */
    display: flex;
    flex-direction: column; /* 세로 정렬 */
	flex-wrap: wrap
    gap: 10px; /* 이미지 간격 */
}

.ctt_sub01 .inner .content .con_imgs img {
    width: 80%;
    display: block;
	margin-left:50px;
}

@media only screen and (max-width:700px){
.ctt_sub01 .inner .content .con_imgs {
    width: 100%; /* 이미지 영역 너비 */
    display: flex;
    flex-direction: column; /* 세로 정렬 */
	flex-wrap: wrap
    gap: 0px; /* 이미지 간격 */
}

.ctt_sub01 .inner .content .con_imgs img {
    width: 100%;
    display: block;
	margin-left:0px;
}
}

@media only screen and (max-width:500px){

.inner .content {flex-direction: column-reverse;}
.ctt_sub01 .inner .content .con_txt {width:100%; margin-top:20px;}
.ctt_sub01 .inner .content .con_txt h2 {font-size:23px;line-height:30px;}
.ctt_sub01 .inner .content .con_txt p {line-height:25px;}
.ctt_sub01 .inner .content .con_imgs {
    width: 100%; /* 이미지 영역 너비 */}

.address li {display:block; text-align:center;}
.address i {margin-right:0; margin-bottom:20px; width:70px; height:70px; line-height:70px}



}




/* sub02 */

.greeting-box{display:flex; flex-wrap:wrap; margin:50px 0; justify-content: space-between; } 
.greeting-box .greeting-txt {font-size:1.5em; line-height:1.9em; width:50%; padding-right:20px; word-break:keep-all;margin-top:70px;}
.greeting-box .greeting-txt h1 {font-size:1.2em; font-weight:400; line-height:1.9em;; }
.greeting-box .greeting-txt .sign {margin-top:30px; font-size:1.5em; font-family: 'MYHaemalgeunSangsang'; line-height:40px;}
.greeting-box .greeting-txt .sign b { }
.greeting-box .greeting-img {width:48%; height:700px; overflow:hidden;text-align:center;margin-top:100px;}
.greeting-box .greeting-img img {max-width:100%; display:block;}


@media only screen and (max-width: 1024px){
.greeting-box .greeting-img {width:80%; height:500px; overflow:hidden;display:flex; justify-content:center;}
.greeting-box .greeting-txt {width:100%;}
.greeting-box .greeting-txt h1 {font-size:1.1em; }
.greeting-box .greeting-img img {max-width:100%; }
}



  
.ctt_sub03 .wrap {margin-bottom:300px;}
.ctt_sub03 .wrap > h1 {padding: 7px 0;font-weight: 400;font-size: 25px;width: 275px;border: solid #414141;color: #c3c3c3;border-width: 4px 0;margin-bottom: 90px;}
.ctt_sub03 .wrap > h1 > b {font-size: 35px;display: block;color: #034ea2;}
.ctt_sub03 .wrap > .timeline {position: relative;overflow: hidden;}
.ctt_sub03 .wrap > .timeline:before {content:'';position: absolute;display: block;top: 0;bottom: 0;width: 1px;background: #ededed;left: 0;right: 0;margin: auto;}
.ctt_sub03 .wrap > .timeline > div {width: 47%;margin: 20px 0 20px auto;}
.ctt_sub03 .wrap > .timeline > div:before{position: absolute;left: 0;right: 0;content:"";background: url('../img/h_y.png') center no-repeat;height: 23px;display: block;}
.ctt_sub03 .wrap > .timeline > div > b {float: left;color: #034ea2;font-size: 18px;line-height: 26px;}
.ctt_sub03 .wrap > .timeline > div > p {position: relative;padding: 4px 0;padding-left: 121px;line-height: 18px;font-size: 16px;}
.ctt_sub03 .wrap > .timeline > div > p:before{position: absolute;content: "";background: url('../img/h_m.png') center no-repeat;width: 7px;height: 25px;display: block;top: 0;left: 104px;}
.ctt_sub03 .wrap > .timeline > div.left > p:before{left: inherit;right: 104px;}
.ctt_sub03 .wrap > .timeline > div > p > b {position: absolute;top: 0;left: 75px;line-height: 25px;}
.ctt_sub03 .wrap > .timeline > div.left {text-align: right;margin: 20px 0;}

.ctt_sub03 .wrap > .timeline > div.left > b {float: right;}
.ctt_sub03 .wrap > .timeline > div.left > p {padding: 4px 121px 4px 0;}
.ctt_sub03 .wrap > .timeline > div.left > p > b {float: right;left: inherit;right: 75px;line-height: 26px;}


@media only screen and (max-width:800px){


  .ctt_sub03 .inner .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
			display:inline-block;
			float:left;
        }

.ctt_sub03 .inner .container2 {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
			display:inline-block;
        }

.ctt_sub03 .wrap > .timeline > div{padding-left: 10px;width: auto;}
.ctt_sub03 .wrap > .timeline > div.left p:before{left: 104px;right: inherit;}
.ctt_sub03 .wrap > .timeline > div:before{display: none;}
.ctt_sub03 .wrap > .timeline > div.left > b{float:left}
.ctt_sub03 .wrap > .timeline > div.left > p{text-align: left;position: relative;padding: 4px 0;padding-left: 121px;line-height: 18px;font-size: 13px;}
.ctt_sub03 .wrap > .timeline > div.left > p > b{float: none;right: auto;position: absolute;top: 0;left: 75px;}
.ctt_sub03 .wrap > .timeline:before{display:none;}



}





.ctt_sub04 .inner .content .container{
 
            margin: 50px auto;
            width: 300px;
        }

 .ctt_sub04 .inner .content .container .box, .arrow{
           background-color: white;
            padding: 15px;
            margin: 5px auto;
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
			text-align:center;
        }
      .ctt_sub04 .inner .content .container .arrow {
            background: none;
            border: none;
            box-shadow: none;
            font-size: 24px;
            color: blue;
			
        }

.hope-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 60px auto;
    padding: 40px 20px;
    gap: 40px;
}

.hope-text {
    flex: 1 1 500px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
}

.hope-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.hope-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40%;
    height: 3px;
    background-color: #e11d48; /* rose-600 */
    border-radius: 2px;
}

.hope-text p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 10px;
}

.hope-text p.highlight {
    font-weight: 600;
    margin-top: 20px;
}

.hope-button {
    margin-top: 30px;
}

.hope-button a {
    display: inline-block;
    background-color: #fff;
    border: 2px solid #e11d48;
    color: #e11d48;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hope-button a:hover {
    background-color: #e11d48;
    color: #fff;
}

.hope-image {
    flex: 1 1 400px;
    max-width: 500px;
}

.hope-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Responsive */
@media screen and (max-width: 768px) {
    .hope-section {
        flex-direction: column;
        text-align: center;
    }

    .hope-text h2::after {
        left: 50%;
        transform: translateX(-50%);
    }
}


/*subA1*/

		/* 헤더 섹션 */
 .ctt_subA1 .hero {
    background: url('img/subA2_main.jpg') no-repeat center center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
	margin-top:50px;
}

.ctt_subA1 .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 어두운 오버레이 */
}

.ctt_subA1 .hero-text {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.ctt_subA1 .hero-text h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.ctt_subA1 .hero-text p {
    font-size: 18px;
}

/* 소개 섹션 */
.intro {
    text-align: center;
    padding: 40px 20px;
    background: #f5f5f5;
    font-size: 18px;
}

/* 지원 분야 */
.support {
    padding: 50px 20px;
    text-align: center;
}

.support h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

/* 지원 분야 그리드 */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
	margin-top:40px;
}

/* 지원 카드 */
.support-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.support-card:hover {
    transform: translateY(-5px);
}

.support-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.support-card h3 {
    font-size: 20px;
    margin: 15px;
}

.support-card p {
    padding: 0 15px 20px;
    font-size: 16px;
}


/*subA2*/


.ctt_subA2 .hero {
    background: url('img/subA3_main.jpg') no-repeat center center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
	margin-top:50px;
}

.ctt_subA2 .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 어두운 오버레이 */
}

.ctt_subA2 .hero-text {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.ctt_subA2 .hero-text h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.ctt_subA2 .hero-text p {
    font-size: 18px;
}


/*subA3*/

.ctt_subA3 .hero {
    background: url('img/subA1_main.jpg') no-repeat center center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
	margin-top:50px;
}

.ctt_subA3 .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 어두운 오버레이 */
}

.ctt_subA3 .hero-text {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.ctt_subA3 .hero-text h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.ctt_subA3 .hero-text p {
    font-size: 18px;
}

.donation-process {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 요소 간 간격 */
    padding: 50px;
    flex-wrap: wrap; /* 화면 크기에 따라 자동 줄바꿈 */
}

.process-step {
    background: #f8f8f8;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 180px;
    flex: 1; /* 요소 크기 자동 조정 */
    max-width: 250px; /* 최대 크기 설정 */
}

.process-step h3 {
    margin: 0;
    font-size: 18px;
}

.process-step p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
}

.process-arrow {
    font-size: 24px;
    font-weight: bold;
    color: #007BFF; /* 파란색 화살표 */
}

/* 📌 반응형: 모바일 화면에서 세로 정렬 */
@media (max-width: 768px) {
    .donation-process {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .process-step {
        width: 80%;
        max-width: 300px;
    }

    .process-arrow {
        transform: rotate(90deg); /* 화살표 방향 변경 */
    }
}