@charset "UTF-8";

@media screen and (max-width:1700px){
	.main_visual .scroll_down {left:1%}
}

@media screen and (max-width:1400px){
	.main_tit {font-size:32px}
	.main_txt {font-size:17px}
	.section {padding:65px 0}
	.section .typo {margin-bottom:25px}
	.section.flex_btw, 
	.section.flex_btw2 {column-gap:30px}
	
	.main_visual {}
	.main_visual .container {display:grid;grid-template-columns:65% 32%;column-gap:35px}
	.main_visual .left {width:auto;height:100%}
	.main_visual .right {width:auto}
	.main_visual .slide_wrap .slide_box {height:100%}
	.main_visual .slide_wrap .img_box {padding-bottom:59.3%}
	.main_visual .slide_btn .ctrl .btn {width:50px;height:50px;top:calc(50% - 25px)}
	.main_visual .slide_btn .btn.prev {left:-25px}
	.main_visual .slide_btn .btn.next {right:-25px}
	.main_visual .slide_btn .btn.prev::after, 
	.main_visual .slide_btn .btn.next::after {font-size:24px}
	.main_visual .slide_btn .btn.stop, 
	.main_visual .slide_btn .btn.play {width:40px;height:40px}
	.main_visual .slide_btn .btn.stop::after, 
	.main_visual .slide_btn .btn.play::after {font-size:18px}
	.main_visual .br_wrap .text {font-size:22px}
	.main_visual .scroll_down {display:none}
	
	.about_list {gap:20px}
	
	.donors_slide_wrap .img_obj {margin:0 8px}
}

@media screen and (max-width:1280px){
	.main_tit {font-size:30px}
	.section {padding:45px 0}
	.section .typo {margin-bottom:18px}
	.section > div:not(.sec04) .subject {font-size:17px}
	.section .no_contents {padding:40px 10px}
	.section .no_contents .img {width:80px}
	
	.main_visual {}
	.main_visual .container {grid-template-columns:65.5% 31.5%;column-gap:30px}
	.main_visual .slide_btn {margin-top:12px}
	.main_visual .slide_btn .ctrl .btn {width:44px;height:44px;top:calc(50% - 22px)}
	.main_visual .slide_btn .btn.prev {left:-20px}
	.main_visual .slide_btn .btn.next {right:-20px}
	.main_visual .slide_btn .btn.prev::after, 
	.main_visual .slide_btn .btn.next::after {font-size:18px}
	.main_visual .slide_btn .paging {font-size:16px}

	.main_visual .br_wrap {padding:16px}
	.main_visual .br_wrap .text {margin-bottom:9px;font-size: 20px; white-space: nowrap; }
	.main_visual .br_wrap .sub_t {font-size: 16px; }
	.main_visual .br_wrap .sbj {margin-bottom:15px;font-size: 14px; }

	.about_list .about .text {  font-size: 19px; }
	.about_list .about a {padding:20px 10px}
	.about_list .about a:before { width: 100px; height: 100px; background-size: contain;}	
}

@media screen and (max-width:1080px){
	.main_tit {font-size:28px}
	.section.flex_btw, 
	.section.flex_btw2 {flex-wrap:wrap}
	.section > div:not(.sec04) .subject {font-size:16px}
	.section .no_contents {padding:30px 10px}
	.section .no_contents .img {width:50px;margin-bottom:15px}
	.section .no_contents .text {font-size:1em}
	
	.main_visual {}
	.main_visual .container {display:block}
	.main_visual .left {width:auto;margin-bottom:30px}
	.main_visual .right {widtH:auto}
	.main_visual .slide_wrap .img_box img {width:100%}
	.main_visual .slide_btn .btn.prev {left:-12px}
	.main_visual .slide_btn .btn.next {right:-12px}

	.main_visual .br_wrap { display: flex; gap: 20px; align-items: flex-end; }
/* 	.main_visual .br_wrap > div { flex:1 } */
	.main_visual .br_wrap .sub_t {margin-top:0;font-size:17px}
	.main_visual .br_wrap .sbj {height:78px}
	
	.about_list {gap:16px}
	.about_list .about {border-radius:16px}
	.about_list .about a:before { width: 85px; height: 85px; }
	.about_list .about:after { right: -30px;  top: -30px;  width: 30px; height: 30px; background-size: contain; }
	.about_list .about:hover::after,.about_list .about:focus::after { right: 10px; top:10px; }
	.about_list .about .text {margin-top:12px}
	
	.donors_slide_wrap .img_obj {height:70px}
	.donors_slide_wrap .img_obj img {max-height:55px}
}	

@media screen and (max-width:768px){
	.main_tit {font-size:23px}
	.main_txt {font-size:15px}
	.section {padding:30px 0}
	
	.main_visual {}
	.main_visual .left {margin-bottom:20px}
	.main_visual .slide_wrap {border-radius:16px}
	.main_visual .slide_wrap .img_box:focus img {border-radius:16px}
	.main_visual .slide_btn {margin-top:9px}
	.main_visual .slide_btn .ctrl {display:none}
	.main_visual .slide_btn .btn.stop, 
	.main_visual .slide_btn .btn.play {width:34px;height:34px;border-width:2px}
	.main_visual .slide_btn .btn.stop::after, 
	.main_visual .slide_btn .btn.play::after {font-size:16px}
	.main_visual .slide_btn .paging {font-size:13px}

	.main_visual .br_wrap { display: block; padding: 14px;}
	.main_visual .br_wrap img { width: 100%; }
	.main_visual .br_wrap .text { font-size: 18px; white-space: normal; }
	.main_visual .br_wrap .sub_t {margin-top:18px;font-size:16px}
	.main_visual .br_wrap .sbj {height:auto;font-size: 13px; }
	
	.about_list {flex-wrap: wrap;gap:12px}
	.about_list .about { flex: 1 0 48%; }
	.about_list .about .text {font-size:16px}
	.about_list .about a {padding:10px}
	.about_list .about a:before { width: 70px; height: 70px; }
	
	.donors_slide_wrap .img_obj {height:60px;margin:0 5px}
	.donors_slide_wrap .img_obj img {max-height:50px}
}

@media screen and (max-width:480px){
	.section .typo {margin-bottom:15px}
	.section > div:not(.sec04) .subject {-webkit-line-clamp:2;font-size:15px}
	.section .no_contents {padding:25px 10px}
	.section .no_contents .img {width:38px;margin-bottom:12px}
	
	.about_list {gap:10px}
	.donors_slide_wrap .img_obj {margin:0 2px}
	.donors_slide_wrap .img_obj img {max-height:47px}
}