#main { position: relative; } 
#section1 { overflow: hidden; } 
.msec1 { position: relative; } 
.msec1 .swiper-slide { overflow:hidden } 
.msec1 .swiper-slide .slogan { position:absolute; z-index:10; top:16rem; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); } 
.msec1 .swiper-slide .slogan p { color:#fff; font-weight: bold; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1); text-align: center; } 
.msec1 .swiper-slide .slogan .text1 { top:0; opacity:0; transition:0.5s 0.5s; font-size: 6rem;  } 
.msec1 .swiper-slide .slogan .text1 span {background: linear-gradient(0deg,rgba(28, 222, 222, 1) 0%, rgba(153, 243, 65, 1) 100%);background-clip: text; -webkit-background-clip: text; color: transparent; } 
.msec1 .swiper-slide .slogan .text2 { top:10px; opacity:0; filter: blur(10px); font-size:2.6rem;  transition:0.5s 1s } 
.msec1 .swiper-slide .slogan .text2 span{display: block}



.msec1 .swiper-slide .bg { transform:scale(1.1); transition:10s; height:90rem; position: relative; } 
.msec1 .swiper-slide .bg::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } 
.msec1 .swiper-slide .bg img { width:100%; height: 100%; object-fit: cover; } 

.msec1 .swiper-slide-active .bg { transform:scale(1) } 
.msec1 .swiper-slide-active .slogan .text1 { top:0; opacity:1; letter-spacing:normal; } 
.msec1 .swiper-slide-active .slogan .text2 { top:0; opacity:1; filter:blur(0) } 


/*swiper*/
.msec1 .swiper-pagination { max-width:var(--container); padding:0 2rem; color:#fff; text-align: center; position: absolute; left: 50%; transform: translate(-50%); top: 37rem; } 
.msec1 .swiper-pagination-bullet{background: #fff; width: 13px; height: 13px;}
.msec1 .swiper-pagination-bullet-active{background: linear-gradient(0deg,rgba(28, 222, 222, 1) 0%, rgba(153, 243, 65, 1) 100%);}

/* 메인 컨텐츠 */
.main_con{display: flex; gap:5rem; max-width:var(--container); width:100%; padding: 0 2rem; position: absolute; top:47.3rem; left:50%; transform: translateX(-50%); z-index: 8; }

/* 메인 공지사항 */
.main_board{border-radius:2rem; background: #fff;width:33%; height: 34.2rem;}
.main_board h2{background:#1CDEDE; color:#fff; font-weight: 600; font-size:2.2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; padding:1.5rem 0 1.5rem 3rem; position: relative;}
.main_board h2 span{position: absolute; top: 1rem; right:3rem}
.main_board ul{padding:3rem}
.main_board ul li{display: flex; gap:2rem; margin-bottom: 1rem;}
.main_board ul li span{width:10% ;}
.main_board ul li a{display: block; font-weight: 500; width: calc(90% - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.case1{color:#00C2C2;}
.case2{color:#FBAA1F;}

/* 팝업존 */
.main_popupzone{border-radius:2rem; background: #fff;width:33%; height: 34.2rem; position: relative; overflow: hidden;}
.main_popupzone h2{background:#84DE61; color:#fff; font-weight: 600; font-size:2.2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; padding:1.5rem 0 1.5rem 3rem; position: relative;}
.popupzone_slide .swiper-slide{width: 100%; height: 28.12rem; position: relative;}
.popupzone_slide img{width: 100%; height: 100%; object-fit: cover;}
.popupzone_slide .swiper-button-next,
.popupzone_slide .swiper-button-prev{background: none; width: 11px; height: 17px; position: absolute; top:4rem}
.popupzone_slide .swiper-button-next{right:3rem}
.popupzone_slide .swiper-button-prev{right:11rem; left:auto}
.popupzone_slide .swiper-pagination-fraction{position: absolute; top:2rem; left:auto; right:6rem; width:auto; text-align: left; color:#fff; font-weight: bold; font-size:1.5rem}

/* 메인 인포 */
.main_info{width:33%; height: 34.2rem; margin-bottom: 3.8rem; position: relative; display: flex; flex-direction: column; justify-content: space-between;}

/* 자원봉사모집 */
.main_volunteer{background:#FBAA1F;  border-radius: 2rem; height: 15.2rem; padding:3rem}
.main_volunteer a{display: block; color:#fff;}
.main_volunteer dl dt{font-weight: 600; font-size:2.2rem; margin-bottom: 1.3rem; position: relative;}
.main_volunteer dl dt span{position: absolute; top: 0; right:0}

/* 고객센터 */
.main_cusromer{background: #1CDEDE; border-radius: 2rem; height: 15.2rem; padding:3rem; color:#fff; position:relative;}
.main_cusromer dl dt{font-weight:600;}
.main_cusromer dl dd{font-size: 1.6rem;}
.main_cusromer dl dd span{display: block; font-weight: bold; font-size:3.6rem}
.main_cusromer p{position: absolute; bottom: 0; right: 0;}

/* 자가진단 */
.main_test{background: linear-gradient(90deg,rgba(28, 222, 222, 1) 0%, rgba(153, 243, 65, 1) 100%); background: var(--main_color); color:#fff; padding:3rem 0}
.main_test .inner{display: flex; justify-content: space-between;}
.main_test h2{width: 42.5rem;}
.main_test h2 span{display: block; font-weight: bold; font-size:3rem; margin-bottom: 2rem;}
.main_test ul{width: calc(100% - 42.5rem); display: flex; justify-content: space-between;}
.main_test ul li{border-right: 1px dashed #fff; flex:1; text-align: center;}
.main_test ul li:last-child{border: none;}
.main_test ul li img{display: block; margin: auto; margin-bottom: 2rem; width: 5rem;  height: 5rem;}
.main_test ul li a{color:#fff; font-weight: 600; font-size:2rem}

/* 포토갤러리 */
.main_photo{text-align: center; padding:10rem 0; position: relative;}
.main_photo .inner{overflow: hidden;}
.main_photo h2{font-weight: 400; margin-bottom: 5rem;}
.main_photo h2 span{display: block; font-weight: bold; font-size:5rem; margin-bottom: 2.7rem; }

.photo_slide{position: relative;}
.photo_slide p{overflow: hidden; border-radius: 2rem; height: 22rem; margin-bottom: 2.3rem;}
.photo_slide p img{width: 100%;height: 100%; object-fit: cover ; transition: .5s;}
.photo_slide p img:hover{transform: scale(1.2);}
.photo_slide span{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main_photo .swiper-button-next,
.main_photo .swiper-button-prev{background: none; width: 6rem; height: 6rem; top:37rem}

/* 유관기관 */
.main_site{padding:3rem 0; border-top:1px solid #ccc}
.main_site .inner{display: flex;  justify-content: space-between; align-items: center;}
.main_site  h2{width:10%; font-weight: bold; font-size: 3rem;}
.site_slide{width: 90%; overflow: hidden;}