@font-face { font-family: 'Yeongwol'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2') format('woff2'); font-weight: normal; font-display: swap; } 

/* 공통 */
.img_wrap img { width:100% } 
 .inner { width:92%; max-width:1600px; margin:0 auto; position:relative; padding-top:100px; box-sizing: border-box; overflow:hidden } 
.flex-box { display: flex } 
.flex-column { flex-direction: column; } 
.sec_sub_tit { font-size: 1.25em; font-weight: 500; font-family: 'outfit'; margin-bottom: 20px; display: block; color: #000; } 
.sec_tit { font-family: 'Escoredream'; font-size:3.5em; font-weight:300; } 
.sec_tit strong { font-weight:600; } 
.link_wrap a { border-radius: 30px; font-size: .8em; border: 1px solid #c7c7c7; padding: 15px 40px; color: #000; position: relative; } 
.link_wrap a span { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); height: 100%; aspect-ratio: 1 / 1; background: #1C2451; border-radius: 50%; font-size: 25px; color: #fff; display: flex; justify-content: center; align-items: center; opacity:0; transition:.5s } 
.link_wrap:hover span { opacity:1; transition:.5s } 
.fp-watermark { display:none } 

.footer { padding: 50px 0 100px; background: #1F2228; min-height:auto!important } 

/* sub01 */
.sub-page.sub1 { padding:0; padding-top:100px; } 
#fullpage .section { height:100vh } 
.sub-page.sub1 section { padding:0 } 

.sub1 .sec01 { background:url(../img/sub/sub1_sec1.png)no-repeat center center/ cover } 
.sub1 .sec01 .inner { display:flex; align-items: center; justify-content: center; } 
.sub1 .sec01 .inner img { max-width:70% } 

.sub1 .sec02 { background:url(../img/sub/sub1_sec2.png)no-repeat center center/ cover } 
.sub1 .sec02 .inner { padding-top:0 } 
.sub1 .sec02 .flex-box { display: flex; justify-content: center; } 
.sub1 .sec02 .left { padding-right:150px; padding-bottom: 80px; color: var(--color-main); } 
.sub1 .sec02 .right { display: flex; align-items: flex-end; } 
.sub1 .sec02 .right p { font-size:1.25em; line-height:1.6; font-weight:500; position:relative; padding:30px } 
.sub1 .sec02 .right p:before { position:absolute; content:''; left:0; top:0; background:url(../img/sub/sub1_sec2_icon.png)no-repeat center center; width:30px; aspect-ratio: 1/1; } 
.sub1 .sec02 .right p:after { position:absolute; content:''; right:0; bottom:0; background:url(../img/sub/sub1_sec2_icon02.png)no-repeat center center; width:30px; aspect-ratio: 1/1; } 

.sub1 .sec03 { background:url(../img/sub/sub1_sec3.png)no-repeat center center/ cover; color:#fff } 
.sub1 .sec03 .inner { display: flex; flex-direction: column; } 
.sub1 .sec03 .sec_tit { text-align:center; margin-bottom:100px; } 
.sub1 .sec03 .list_wrap { display: flex; flex-wrap: wrap; gap: 50px; width: 100%; max-width: 1400px; margin: 0 auto; } 
.sub1 .sec03 .list_wrap li { width: calc(100% / 4 - 40px); background: rgba(0, 0, 0, .3); border-radius: 20px; padding: 45px 0; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; } 
.sub1 .sec03 .list_wrap li span { font-family: 'Outfit'; font-size: 1.1em; font-weight: bold; } 
.sub1 .sec03 .list_wrap li p { font-size: 1.1em; font-weight: 500; } 

.sub1 .sec04 { background:url(../img/sub/sub1_sec4.png)no-repeat center center } 
.sub1 .sec04 .inner { display: flex; justify-content: space-between; height: 100vh; overflow: hidden; } 
.sub1 .sec04 .left { color: var(--color-main); padding-top: 150px; } 
.sub1 .sec04 .left h2 { } 
.sub1 .sec04 .left p { color: #000; font-size: 1em; line-height: 1.6; margin-top: 25px; } 
.sub1 .sec04 .left .tag_wrap { margin-top: 80px; display: flex; align-items: center; gap: 10px; } 
.sub1 .sec04 .left .tag_wrap li { border-radius: 30px; border: 1px solid var(--color-main); width: 160px; display: flex; align-items: center; justify-content: center; padding: 5px 0; } 
.sub1 .sec04 .right { width: 28%; max-width: 700px; box-sizing: border-box; } 
.sub1 .sec04 .right .list_wrap { display: flex; justify-items: center; flex-wrap: wrap; align-items: flex-end; gap: 20px; } 
.sub1 .sec04 .right .list_wrap li { width:calc(50% - 10px) } 
.sub1 .sec04 .right .list_wrap li:first-child img { position:relative; top:30px } 
.sub1 .sec04 .right .list_wrap li:nth-child(3) img { position:relative; top:30px } 
.sub1 .sec04 .right .list_wrap li img { width:100% } 

.sub1 .sec05 { background:url(../img/sub/sub1_sec5.png)no-repeat center center/ cover; color:#fff } 
.sub1 .sec05 .inner { display: flex; flex-direction: column; align-items: center; height:100vh; justify-content: center; } 
.sub1 .sec05 .sec_sub_tit { color:#fff; text-align:center } 
.sub1 .sec05 .sec_tit { text-align:center } 
.sub1 .sec05 .link_wrap { text-align:center; margin-top:165px } 
.sub1 .sec05 .link_wrap a { color:#fff; } 
.sub1 .sec05 .link_wrap a span { background:#fff; color:#000 } 


@media(max-width:1399px){
 .sec_tit { font-size:3em } 
 .sub1 .sec04 .right { width:40% } 
 }

@media(max-width:1199px){
 .sub1 .sec02 .left { width:50%; padding-right:0 } 
 .sub1 .sec02 .right { width:45% } 
 .sub1 .sec03 .sec_tit { margin-bottom:60px; } 
 .sub1 .sec03 .list_wrap { gap:30px } 
 .sub1 .sec03 .list_wrap li { width:calc(25% - 25px) } 
 .sub1 .sec04 .right .list_wrap { gap:30px; } 
 .sub1 .sec04 .right .list_wrap li { width: calc(50% - 15px); } 
 }

@media(max-width:1024px){
 .sec_tit { font-size:2.5em } 
 }

@media (max-width: 768px){
 .sub-page.sub1 { padding-top:80px; } 
 .section .inner { padding:100px 0 } 
 .sub1 .sec02 .inner { padding-top:100px } 
 #fullpage { height: auto !important; } 
 .section { height: auto !important; min-height:none!important; } 
 #fullpage .section { min-height:auto!important } 
 .fp-overflow { overflow: visible !important; max-height:none !important } 
 .sub1 .sec02 .flex-box { flex-direction: column; align-items: center; } 
 .sub1 .sec02 .left { text-align:center; padding-bottom: 30px; } 
 .sub1 .sec02 .right { width:100%; text-align:center; justify-content: center; } 
 .sub1 .sec03 .list_wrap li { width:calc(50% - 15px) } 
 .sub1 .sec04 .inner { height:auto; flex-direction: column; } 
 .sub1 .sec04 .left { padding-top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } 
 .sub1 .sec04 .left .tag_wrap { margin-top:30px } 
 .sub1 .sec04 .right { max-width:none; width:100%; padding-top:50px; } 
 .sub1 .sec05 .inner { height:auto } 
 .msec_footer.section { min-height:auto } 
 }

@media (max-width: 640px){
 .sec_tit { font-size:1.8em } 
 .sec_sub_tit { font-size:1em } 
 .sub1 .sec02 .right p:before { background-size:contain; width:20px; } 
 .sub1 .sec02 .right p:after { background-size:contain; width:20px; } 
 .sub1 .sec02 .right p { font-size:1em } 
 .sub1 .sec03 .list_wrap li { padding:25px 0; gap:20px } 
 .sub1 .sec03 .list_wrap li img { width:30% } 
 .sub1 .sec04 .left .tag_wrap { flex-wrap:wrap } 
 .sub1 .sec04 .left .tag_wrap li { font-size:0.9em; width:140px; } 
 .sub1 .sec05 .link_wrap { margin-top:80px; } 
 }

/* sub02 */
.sub2 { padding-bottom:150px; background: linear-gradient(to bottom, #fff 0%, #F4F6FF 100%); } 
.sub2 .sec1 { background:#d7ebfe url(../img/sub/sub2_sec1_bg.png)no-repeat center center; height:100vh } 
.sub2 .inner { max-width:1400px; } 
.sub2 .sec1 .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height:100% } 
.sub2 .sec1 .inner > img { } 
.sub2 .sec1 .inner .sub_tit { font-family: 'Escoredream'; font-size: 3em; text-align: center; color: var(--color-main); font-weight: 900; margin-top: 30px; } 
.sub2 .sec2 { } 
.sub2 .sec2 .sec2_1 { } 
.sub2 .sec2 .sec2_1 .inner { } 
.sub2 .sec2 .sec2_1 .inner .title_wrap { } 
.sub2 .sec2 .sec2_1 .inner .title_wrap h2 { font-family: 'Escoredream'; font-size: 2.25em; color: var(--color-main); text-align: center; font-weight: bold; } 
.sub2 .sec2 .sec2_1 .inner .title_wrap span { color: #6C6C6C; font-size: 1.1em; text-align: center; display: block; margin-bottom: 50px; } 
.sub2 .sec2 .sec2_1 .inner .content { position:relative } 
.sub2 .sec2 .sec2_1 .inner .content > img { width:100% } 
.sub2 .sec2 .sec2_1 .inner .content > ul { display: flex; flex-direction: column; gap: 80px; position: relative; left: 50%; top: 0; transform: translateX(-50%); width: 100%; max-width: 1400px; border: 5px solid #1C2451; background: #fff; padding: 100px 0 100px 0; border-radius: 0 0 30px 30px; position:relative } 
.sub2 .sec2 .sec2_1 .inner .content > ul:before { position:absolute; left:50%; width:5px; height:93%; bottom:0; background:#1C2451; transform: translateX(-50%); content:''; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse { flex-direction: row-reverse; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li { width:100% } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .img_wrap { width: 50%; box-sizing: border-box; padding: 0 80px; display: flex; justify-content: flex-end; align-items: center; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap { width: 50%; position: relative; display: flex; justify-content: flex-start; padding:0 80px; flex-direction: column; gap: 35px; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap:before { position: absolute; top: 0; content: ''; width: 50px; aspect-ratio: 1 / 1; background: var(--color-main); border: 15px solid #EEF1FF; border-radius: 50%; left: -25px; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap h3 { font-family: outfit; font-size: 1.75em; font-weight: bold; color: var(--color-main); } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul { display: flex; flex-direction: column; gap: 15px; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul li { display: flex; gap: 20px; align-items: baseline; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul li span { width: 60px; font-size: 1.1em; font-weight: bold; color: var(--color-main); } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul li div { } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul li div p { font-size: .9em; color: #666; line-height: 1.5; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .img_wrap { justify-content: flex-start } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap { align-items: flex-end; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap:before { left:auto; right:-25px; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap ul li { flex-direction: row-reverse; } 
.sub2 .sec2 .sec2_2 { position: relative; padding: 150px 0; background: url(../img/sub/sub2_sec3_img05.jpg) no-repeat 85% bottom; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap { position: relative; width:92%; max-width:1600px; left:50%; transform: translateX(-50%); } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right { position: absolute; right: 0; top: 122px; width: 253px; height: 325px; border: 2px solid #404666; border-left: none; border-radius: 0 50% 50% 0; z-index: 0; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-left { position: absolute; left: 0; top: 50%; width: 253px; height: 326px; border: 2px solid #404666; border-right: none; border-radius: 50% 0 0 50%; z-index: 0; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul { width:100%; margin: 0 auto; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; position:relative; left: 50%; transform: translateX(-50%); } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(3) { margin-bottom: 80px; padding-right:15%; position:relative } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4) { margin-bottom: 80px; padding-left:10%; flex-direction: row-reverse; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5) { padding-left:25% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li { width: calc(100% / 3); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; z-index: 1; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul:before { position: absolute; content: ''; left: 0; top: 50%; background: #404666; width: 100%; height: 2px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(3):before { width: 100%; right: 15%; left: unset; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4):before { width:75%; right:10%; left:unset } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):before { width:40%; left:14% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):after { transform: translateY(-50%); content: ''; position: absolute; content: ''; left: 53.5%; top: 50%; background: url(../img/sub/sub2_sec3_icon.png) no-repeat center center; width: 19px; height: 15px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li img { margin-bottom: 15px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .dot { width: 12px; aspect-ratio: 1 / 1; background: #404666; border-radius: 50px; margin-bottom: 18px; position: relative; z-index: 1; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt span { text-align: center; line-height: 1.4; color: #4c4c4c; font-size: .9em; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt .date_info { display: flex; background: #1C2451; color: #fff; font-family: 'Outfit'; align-items: center; justify-content: center; border-radius: 30px; width: 150px; height: 40px; font-weight: 500; } 
.sec2_2_list_wrap li { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; } 
.sec2_2_list_wrap li.is-show { opacity: 1; transform: translateY(0); } 

@media (max-width: 1600px){
 .sub2 .sec2 .sec2_2 { background: url(../img/sub/sub2_sec3_img05.jpg) no-repeat 90% bottom; } 
 }
@media (max-width: 1399px){
 .sub2 .sec2 .sec2_2 { background: url(../img/sub/sub2_sec3_img05.jpg) no-repeat 90% 90%; background-size: 38%; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right { top:121px; height:326px; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-left { height: 325px; } 
 }
@media (max-width: 1199px){
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right { top: 122px; height: 325px; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul { width:90% } 
 }
@media (max-width: 1024px){
 .sub2 .sec2 .sec2_1 .inner .content > ul { padding:80px 0 } 
 .sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap { gap:15px; } 
 .sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap ul li { flex-direction: column; gap:0 } 
 .sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap ul li { flex-direction: column; text-align: right; align-items: flex-end; gap:0 } 

 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right { top: 119px; height: 320px; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-left { height: 320px; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(3) { padding:0; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4) { padding:0; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5) { padding:0 } 
 }

@media (max-width: 768px){
 .sub2 .sec1 { height:auto; padding:100px 0 } 
.sub2 .sec1 .inner > img { width:70% } 
.sub2 .sec1 .inner .sub_tit { font-size:2.3em } 
.sub2 .sec2 .sec2_1 .inner .title_wrap h2 { font-size:1.8em } 
.sub2 .sec2 .flex-box { flex-direction: column; } 
.sub2 .sec2 .sec2_1 .inner .content > ul { gap:30px; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse { flex-direction: column; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap { align-items: flex-start; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap ul li { text-align: left; align-items: flex-start; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .img_wrap { justify-content: flex-start; } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .img_wrap,
 .sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap { width:100%; padding:0 10px 0 50px } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li .txt_wrap:before { width:30px; left:1%; border:7px solid #EEF1FF; display:none } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li { position:relative } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li:before { position: absolute; top: 0; content: ''; width: 30px; aspect-ratio: 1 / 1; background: var(--color-main); border: 7px solid #EEF1FF; border-radius: 50%; left: 1%; } 
.sub2 .sec2 .sec2_1 .inner .content > ul:before { left:5%; width:3px; height:100% } 
.sub2 .sec2 .sec2_1 .inner .content > ul > li.reverse .txt_wrap:before { left:1%;; right:unset } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right,
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-left { display:none } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul { width:100% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul:before { width:100%!important; left:0!important; right:0!important; transform: translate(0); top:51% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):before { width:50%!important } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):after { left:49%; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5) li { width:50% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4) { flex-direction:row } 
.sub2 .sec2 .sec2_2 { background-size: 40%; } 
 }

@media (max-width: 640px){
 .sub2 { padding-bottom:0 } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5) li { width:auto } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul { gap:20px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li { width :30% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt { width:100% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt .date_info { width:100%; height:35px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li img { width:55% } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(3) { margin-bottom:30px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul:before { display:none } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):after { display:none } 
.sub2 .sec2 .sec2_2 { background: url(../img/sub/sub2_sec3_img05.jpg) no-repeat 50% 96%; background-size: 90%; padding-bottom: 300px; } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li .list_txt span { height:100px } 
.sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4) { margin-bottom:30px; } 



 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-right,
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap .curve-left { display:none; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul:before,
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(3):before,
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(4):before,
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):before,
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul:nth-child(5):after { display:none; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap > ul { display: contents !important; padding:0 !important; margin:0 !important; list-style:none; left:auto; transform:none; } 
 .sub2 .sec2 .sec2_2 .sec2_2_list_wrap ul li { width:auto !important; justify-content:flex-end; } 
 }



/* sub03 */
.sub3 .sec1 { background:url(../img/sub/sub3_sec1_bg.png)no-repeat center center/cover; height:100vh } 
.sub3 .inner { max-width:1400px; overflow: visible; } 
.sub3 .sec1 .inner { display: flex; flex-direction: column; align-items: flex-start; height:100%; width:92%; max-width:1400px; } 
.sub3 .sec1 .inner > img { margin-top:100px; } 
.sub3 .sec1 .inner .sub_tit { font-size: .9em; color: #fff; margin-top: 40px; } 
.sub3 .sec2 { background:#FBFBFB; padding:100px 0 } 
.sub3 .sec2 .inner { padding-top:0 } 
.sub3 .sec2 .flex-box { gap: 85px; align-items: center; } 
.sub3 .sec2 .flex-box .img_wrap { } 
.sub3 .sec2 .flex-box .img_wrap img { } 
.sub3 .sec2 .flex-box .txt_wrap { } 
.sub3 .sec2 .flex-box .txt_wrap h2 { font-family: 'Escoredream'; font-weight:300; font-size: 2.25em; line-height: 1.3; letter-spacing: -3px; color: var(--color-main); } 
.sub3 .sec2 .flex-box .txt_wrap h2 strong { font-weight:600; } 
.sub3 .sec2 .flex-box .txt_wrap span { font-size: 1.2em; font-weight: 500; display:block; margin-top:10px; } 
.sub3 .sec2 .flex-box .txt_wrap p { color: #535353; margin-top: 30px; } 
.sub3 .sec2 .flex-box .txt_wrap p span { font-size: .9em; color: #000; font-weight: 500; display:block; margin-top:10px; } 

.sub3 .sec3 .flex-box { flex-wrap: wrap; justify-content: space-between; } 
.sub3 .sec3 .flex-box .left { width:45%; } 
.sub3 .sec3 .flex-box .left h2 { font-size: 2.25em; font-family: 'Escoredream'; color: var(--color-main); font-weight: 600; } 
.sub3 .sec3 .flex-box .right { display: flex; width: 55%; flex-direction: column; gap: 100px; } 
.sub3 .sec3 .flex-box .right .right_box { border-radius: 30px; display: flex; flex-direction: column; align-items: flex-start; padding: 40px 50px; position:relative; background: #ffffff; border-radius: 20px; padding: 30px 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.03); z-index:1 } 
.sub3 .sec3 .flex-box .right .right_box h3 { font-size: 1.5em; margin-bottom: 10px; } 
.sub3 .sec3 .flex-box .right .right_box p { margin-bottom: 20px; } 
.sub3 .sec3 .flex-box .right .right_box ul { display: flex; flex-wrap: wrap; gap: 10px 40px; } 
.sub3 .sec3 .flex-box .right .right_box ul li { display: flex; align-items: center; gap: 10px; font-size: .9em; } 
.sub3 .sec3 .flex-box .right .right_box:nth-child(1):before { content:''; position:absolute; right:40px; top:-63px; background:url(../img/sub/sub3_sec2_icon01.png)no-repeat center center /cover; width:122px; aspect-ratio: 122/126; } 
.sub3 .sec3 .flex-box .right .right_box:nth-child(2):before { content:''; position:absolute; right:40px; top:-55px; background:url(../img/sub/sub3_sec2_icon02.png)no-repeat center center /cover; width:150px; aspect-ratio: 150/115; } 
.sub3 .sec3 .flex-box .right .right_box:nth-child(2) ul li { width:100%; flex-wrap:wrap } 
.sub3 .sec3 .flex-box .right .right_box ul li img { } 
.sub3 .sec3 .flex-box .right .right_box a { background: #1C2451; display: flex; color: #fff; padding: 10px 30px; border-radius: 30px; margin-top: 40px; font-size: 17px; } 
.sub3 .sec3 .flex-box .right .right_box a img { } 

.sub3 .sec3 .flex-box .bottom { width: 100%; background: linear-gradient(90deg, #243594, #1C2451); color: #fff; border-radius: 130px; display: flex; align-items: center; margin-top: 80px; position:relative } 
.sub3 .sec3 .flex-box .bottom:before { content:''; position:absolute; left:50px; top:-247px; background:url(../img/sub/sub3_sec2_img01.png)no-repeat center center/cover; width:440px; aspect-ratio: 440/247; } 
.sub3 .sec3 .flex-box .bottom .flex-box { display: flex; justify-content: space-between; padding: 40px 130px; width: 100%; align-items: center; } 
.sub3 .sec3 .flex-box .bottom .left { width: 50%; } 
.sub3 .sec3 .flex-box .bottom .left h3 { font-size: 2em; font-family: 'Escoredream'; font-weight: 500; } 
.sub3 .sec3 .flex-box .bottom .left span { } 
.sub3 .sec3 .flex-box .bottom .right { width: 50%; gap: 0; } 
.sub3 .sec3 .flex-box .bottom .right p { font-size: 1.2em; font-weight: 500; } 
.sub3 .sec3 .flex-box .bottom .right h3 { font-size: 2em; font-family: outfit; font-weight: 500; } 

.sub3 .sec4 .inner { padding-top:0 } 
.sub3 .sec4 { background:#F8F9FF; position:relative; padding:150px 0 } 
.sub3 .sec4:before { z-index: -1; position: absolute; left: 0; top: -100px; height: 100px; width: 100%; content: ''; background: #f8f9ff; } 
.sub3 .sec4 .sub_title h2 { font-family: 'Escoredream'; font-size:2.5em; color:var(--color-main); font-weight:600; text-align: center; margin-bottom:50px } 
.sub3 .sec4 .bottom .gallery_wrap { display:flex; flex-wrap:wrap; gap:75px 100px; justify-content: space-between; } 
.sub3 .sec4 .bottom .gallery_wrap .gallery_list { width:calc(33% - 65px) } 
.sub3 .sec4 .bottom .gallery_wrap .txt_wrap { margin-top:15px; } 
.sub3 .sec4 .bottom .gallery_wrap .txt_wrap p { font-size:1.1em; font-weight:500 } 


@media(max-width:1399px){
 .sub3 .sec4 .bottom .gallery_wrap { gap: 75px 80px; } 
 .sub3 .sec4 .bottom .gallery_wrap .gallery_list { width: calc(33% - 50px); } 
 }
@media(max-width:1199px){
 .sub3 .sec2 .flex-box { gap:30px; } 
 .sub3 .sec2 .flex-box .img_wrap { width:45% } 
 .sub3 .sec2 .flex-box .txt_wrap h2,
 .sub3 .sec3 .flex-box .left h2 { font-size:2em } 
 .sub3 .sec2 .flex-box .txt_wrap span,
 .sub3 .sec3 .flex-box .bottom .right p { font-size:1em } 
 .sub3 .sec2 .flex-box .txt_wrap p,
 .sub3 .sec3 .flex-box .right .right_box p,
 .sub3 .sec3 .flex-box .bottom .left span { font-size:16px } 
 .sub3 .sec3 .flex-box .right .right_box h3 { font-size:1.2em; } 
 .sub3 .sec3 .flex-box .bottom .left h3,
 .sub3 .sec3 .flex-box .bottom .right h3 { font-size:1.5em; } 
 .sub3 .sec3 .flex-box .bottom .flex-box { padding:30px 100px } 
 .sub3 .sec3 .flex-box .right .right_box:nth-child(1):before { width:80px; top:-40px; } 
 .sub3 .sec3 .flex-box .right .right_box:nth-child(2):before { width:100px; top:-50px } 
 .sub3 .sec3 .flex-box .left { width:40% } 
 .sub3 .sec4 .bottom .gallery_wrap { gap:40px; } 
 .sub3 .sec4 .bottom .gallery_wrap .gallery_list { width: calc(33% - 33px); } 
 }
@media(max-width:1024px){
 .sub3 .sec3 .flex-box .right { width:60% } 
 .sub3 .sec1 { background:#53adc1 url(../img/sub/sub3_mo_sec1_bg.png)no-repeat right 100% /cover; height:100vh; background-size: 70%; } 
 }
@media(max-width:768px){
 .sub3 .sec1 { background-size:100%; } 

 .sub3 .sec1 .inner > img { width:60% } 
 .sub3 .sec2 { padding:80px 0; } 
 .sub3 .sec2 .flex-box { flex-direction: column; } 
 .sub3 .sec2 .flex-box .txt_wrap { text-align: center; } 
 .sub3 .sec2 .flex-box .img_wrap { width:100%; display: flex; align-items: center; justify-content: center; } 
 .sub3 .sec3 .flex-box { flex-direction: column; } 
 .sub3 .sec3 .flex-box .left { width:100%; text-align:center; margin-bottom:50px; } 
 .sub3 .sec3 .flex-box .right { width:100%; margin-bottom:100px; } 
 .sub3 .sec3 .flex-box .bottom .flex-box { padding:20px; } 
 .sub3 .sec3 .flex-box .bottom .left, 
 .sub3 .sec3 .flex-box .bottom .right { width:100%; text-align: center; } 
 .sub3 .sec3 .flex-box .bottom .left { margin-bottom:20px; } 
 .sub3 .sec3 .flex-box .bottom .right { margin-bottom:0 } 
 .sub3 .sec3 .flex-box .bottom:before { width:200px; top:-112px; z-index: -1;; } 
 .sub3 .sec4 { padding:80px 0 } 
 .sub3 .sec4 .bottom .gallery_wrap .gallery_list { width:calc(50% - 20px) } 
 }
@media(max-width:640px){
 .sub3 .sec4 .bottom .gallery_wrap .gallery_list { width:100% } 
 }




/* sub04 */
.sub4 .sec1 { background:url(../img/sub/sub4_sec1_bg.png)no-repeat center center/cover; height:100vh } 
.sub4 .inner { max-width:1400px; overflow: visible; } 
.sub4 .sec1 .inner { height:100% } 
.sub4 .sec1 .img_wrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; gap:30px; } 
.sub4 .sec1 .img_wrap img { width:43% } 
.sub4_subtitle { font-family:'Yeongwol'; font-size:2.1em; color:var(--color-main) } 
.sub4 .sec2 { background:#FBFBFB } 
.sub4 .sec2 .inner { padding-bottom:150px; } 
.sub4 .sec2 h2 { font-size: 2.25em; text-align: center; margin-bottom: 21px; font-weight: bold; font-family: 'Escoredream'; } 
.sub4 .sec2 .chart_wrap { display: flex; justify-content: center; align-items: center; } 
.sub4 .sec2 .chart_wrap .donation-wrap { position: relative; width: 100%; border-radius: 10px; max-width: 50%; aspect-ratio: 520 / 350; } 
.sub4 .sec2 .chart_wrap .donation-gauge { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 500 / 279; } 
.sub4 .sec2 .chart_wrap .donation-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; bottom: -92px; } 
.sub4 .sec2 .chart_wrap .donation-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } 
.sub4 .sec2 .chart_wrap .donation-icon img { animation: floatUpDown 2.5s ease-in-out infinite; will-change: transform; } 
.sub4 .sec2 .chart_wrap .donation-percent { font-size: 3em; font-weight: 600; font-family:'outfit'; } 
.sub4 .sec2 .chart_wrap .donation-amount { font-size: 2.5em; font-weight: 600; font-family: 'outfit'; } 
.sub4 .sec2 .chart_wrap .donation-bottom { position: absolute; bottom: 0; left:calc(50% + 5px); width: 100%; display: flex; justify-content: space-between; font-size: 1.5em; padding: 0; font-family: 'outfit'; font-weight: 600; transform: translateX(-50%); padding-top:70px; } 
.sub4 .sec2 .chart_wrap .donation-bottom::before { position: absolute; left: -8px; content: ''; top: 0; width: 60px; aspect-ratio: 1 / 1; background: url(../img/main/sec5_icon01.png) no-repeat center center / contain; animation: heartbeat 1.8s ease-in-out infinite; transform-origin: center; will-change: transform; } 
/* 아이콘 둥실둥실 애니메이션 */
@keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 
 50% { transform: translateY(-6px); } 
 }
/* 아이콘 하트 두근두근*/
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 
 25% { transform: scale(1.1); } 
 50% { transform: scale(0.95); } 
 75% { transform: scale(1.08); } 
 }

.sub4 .sec3 .inner { padding-bottom:150px } 
.sub4 .sec3 h2 { text-align: center; font-size:2.5em; font-weight:bold; font-family:'Escoredream'; margin-bottom: 50px; } 
.sub4 .sec3 .table_wrap { width: 100%; overflow-x: auto; border-bottom:1px solid #f0f0f0 } 
.sub4 .sec3 .table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #000; } 
.sub4 .sec3 .table thead th { background: #1f2b5a; color: #fff; padding: 12px 10px; font-weight: 500; font-size:1.1em } 
.sub4 .sec3 .table thead th:first-child { border-top-left-radius: 30px; border-bottom-left-radius: 30px; } 
.sub4 .sec3 .table thead th:last-child { border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-right: none; } 
.sub4 .sec3 .table tbody td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #f0f0f0; background: #fff; word-break: keep-all; } 
.sub4 .sec3 .table tbody tr td:last-child { border-right: none; } 
.sub4 .sec3 .table .group { font-weight: 600; color: #1f2b5a; font-size:1.1em } 
.sub4 .sec3 .table .total-row td { font-weight: 600; border-bottom: none; } 
.sub4 .sec3 .table .total-row td.total-label { background: #f5f5f8; } 
.sub4 .sec3 .table .total-label { text-align: center; } 



 .sub4 .sec4 .inner { padding-bottom:150px; } 
.sub4 .sec4 .monthly-chart { width: 100%; padding: 40px 16px; box-sizing: border-box; background: #f5f6fb; } 
.sub4 .sec4 h2 { text-align: center; font-size:2.5em; font-weight:bold; font-family:'Escoredream'; margin-bottom: 50px; } 
.sub4 .sec4 .legend { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; } 
.sub4 .sec4 .legend-item::before { content: ""; display: inline-block; width: 100px; height: 20px; border-radius: 5px; margin-right: 6px; vertical-align: middle; } 
.sub4 .sec4 .legend-year1::before { background: #aab0c0; } 
.sub4 .sec4 .legend-year2::before { background: #4d7fe8; } 
.sub4 .sec4 .legend-year3::before { background: #1a42c4; } 
.sub4 .sec4 .chart-wrap { border-radius: 14px; padding: 24px 20px 28px; overflow: hidden; } 
.sub4 .sec4 .y-axis { float: left; width: 40px; height: 520px; display: flex; flex-direction: column; justify-content: space-between; padding-right: 8px; box-sizing: border-box; color: #000; } 
.sub4 .sec4 .chart { margin-left: 40px; height: 550px; position: relative; display:flex; } 
.sub4 .sec4 .month { position: relative; height: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; width: calc(100% / 12); min-width: 40px; z-index: 1; } 
.sub4 .sec4 .month-label { font-size:1em; margin-top: 6px; color: #000; } 
.sub4 .sec4 .bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 100%; background:#fff } 
.sub4 .sec4 .bar { --value: 0; width: 8px; border-radius: 999px 999px 2px 2px; background: #d0d4e4; height: 0; position: relative; transform-origin: bottom; transition: height 0.8s ease-out; } 
.sub4 .sec4 .bar-y1 { background: #B9BDD4; } 
.sub4 .sec4 .bar-y2 { background: #4159E2; } 
.sub4 .sec4 .bar-y3 { background: #001486; } 
.sub4 .sec4 .bar-tooltip { position: absolute; left: 50%; transform: translate(-50%, -140%); padding: 4px 8px; border-radius: 999px; border: 1px solid #1a42c4; background: #ffffff; white-space: nowrap; background:#fff; color: #1a42c4; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out, transform 0.2s ease-out; z-index: 2; } 
.sub4 .sec4 .bar:hover .bar-tooltip { opacity: 1; transform: translate(-50%, -160%); } 
.sub4 .sec5 .inner { padding-bottom:150px; } 
.sub4 .sec5 { position:relative; overflow: hidden; } 
.sub4 .sec5:before { content:''; position:absolute; right:-15%; top:-93%; background:url(../img/sub/sub4_sec5_bg01.png)no-repeat center center; width:945px; aspect-ratio: 1/1; z-index:-1 } 
.sub4 .sec5:after { content:''; position:absolute; left:-20%; bottom:-80%; background:url(../img/sub/sub4_sec5_bg01.png)no-repeat center center; width:945px; aspect-ratio: 1/1; z-index:-1; transform: rotateZ(90deg); } 
.donation-panels .donation-pill-list li { background:#fff } 
.donation-tabs { background: #fff; } 
@media (max-width: 1399px){
 .sub4 .sec1 .img_wrap img { width: 50%; } 
 }

@media (max-width: 1199px){
 .sub4 .sec2 .chart_wrap .donation-wrap { width:60% } 
 .sub4 .sec1 .img_wrap { height: auto; padding-top: 100px; } 
 .sub4 .sec1 .img_wrap img { width:70% } 
 }

@media (max-width: 1024px){
 .donation-panels .donation-pill-list li { padding:15px 0; } 
 .sub4 .sec1 { background:#D7EAFD url(../img/sub/sub4_mo_sec1_bg.png)no-repeat right 80% /cover; height:100vh; background-size: 60%; } 
 }


@media (max-width: 900px){
 .sub4 .sec4 .chart-wrap { padding: 20px 12px 24px; } 
 .sub4 .sec4 .month { width: 9%; } 
 .sub4_subtitle { font-size:1.8em } 
 }


@media (max-width: 768px){
 .sub4 .sec1 { background-size: 90%; background-position: right 100%; } 
 .sub4_subtitle { font-size:1.5em } 
 .sub4 .sec4 .inner,
 .sub4 .sec5 .inner,
 .sub4 .sec3 .inner { padding-bottom:80px; } 
 .sub4 .sec2 .chart_wrap .donation-wrap { width:80%; max-width:none } 
 .sub4 .sec3 .table { font-size: 13px; } 
 .sub4 .sec3 .table tbody td,
 .sub4 .sec3 .table thead th { padding: 10px 8px; } 

 .sub4 .sec4 .title { font-size: 18px; } 
 .sub4 .sec4 .legend { gap: 12px; font-size: 12px; } 
 .sub4 .sec4 .chart-wrap { overflow-x: hidden; } 
 .sub4 .sec2 h2,
 .sub4 .sec3 h2,
 .sub4 .sec4 h2,
 .sub4 .sec5 .donation-title,
 .donation-title { font-size:2em } 
 .sub4 .inner { padding:80px 0 } 
 .donation-title { margin-bottom:20px; } 
 .donation-tabs { width:80%; margin-bottom:30px; } 
 .donation-panels .donation-pill-list li { width:calc(100% / 3 - 30px) } 



#monthlyDonation .y-axis { display:none; } 
#monthlyDonation .chart { display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 10px; height:auto; margin-left:0 } 
#monthlyDonation .month { gap: 12px; width: 100%; display: flex; flex-direction: row-reverse; } 
#monthlyDonation .month-label { order:0; font-size:13px; line-height:1; } 
#monthlyDonation .bars { display: flex; gap: 8px; width: 100%; flex-direction: column; align-items: flex-start; } 
#monthlyDonation .bar { height:10px; width:0%; border-radius:999px; transition: width 1.0s ease; } 
#monthlyDonation .bar.empty { width:100%; opacity:.15; } 
#monthlyDonation .bar .bar-tooltip { position:absolute; right:0; top:50%; transform:translate(110%,-50%); white-space:nowrap; } 
 }

@media (max-width: 480px){
 .sub4 .sec4 .inner,
 .sub4 .sec5 .inner,
 .sub4 .sec3 .inner { padding-bottom:60px; } 
 .sub4 .sec4 .inner, .sub4 .sec3 .inner { padding:60px 0 } 
 .sub4 .sec1 .img_wrap img { width:80% } 
 .sub4 .sec2 h2, .sub4 .sec3 h2, .sub4 .sec4 h2, .sub4 .sec5 .donation-title,
 .donation-title { font-size:1.5em } 
 .sub4 .sec2 .chart_wrap .donation-center { bottom:-190px; } 
 .sub4 .sec2 .chart_wrap .donation-amount,
 .sub4 .sec2 .chart_wrap .donation-percent { font-size:2em } 
 .sub4 .sec4 .title { font-size: 16px; line-height: 1.4; } 
 .sub4 .sec2 .chart_wrap .donation-bottom::before { top:13px; left:-18px; } 
 .sub4 .sec4 .chart { height:400px; } 
 .sub4 .sec4 .y-axis { height:380px; } 
 .donation-tabs { width:100% } 
 .donation-tabs button { padding:10px 0; font-size:16px; } 
 .donation-panels .donation-pill-list li { width:calc(50% - 15px); font-size:12px; padding:12px 0 } 
 }


/* sub05 */


.sub5 .sec1 { background:url(../img/sub/sub5_sec1_bg.png)no-repeat center center/cover; height:100vh } 
.sub5 .inner { max-width:1400px; overflow: visible; } 
.sub5 .sec1 .inner { display: flex; flex-direction: column; align-items: flex-start; height:100%; width:92%; max-width:1400px; } 
.sub5 .sec1 .inner > img { margin-top:100px; } 
.sub5 .sec1 .inner .sub_tit { font-size: .9em; color: #fff; margin-top: 40px; line-height: 1.6; } 
.sub5 .sec2 .bg_wrap { position: relative; } 
.sub5 .sec2 .bg_wrap img { } 
.sub5 .sec2 .bg_wrap .sec2_tit_boxs { position: relative; width: 90%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 30px 30px 0 0; top: -100px; padding-top: 100px; } 
.sub5 .sec2 .bg_wrap .sec2_tit_boxs h2 { font-family: 'Escoredream'; font-size: 2.25em; font-weight: bold; text-align: center; color: var(--color-main); margin-bottom: 20px; position:relative; } 
.sub5 .sec2 .bg_wrap .sec2_tit_boxs h2:before { position:absolute; content:''; width:50px; height:5px; background:var(--color-main); left:50%; transform: translateX(-50%); top:-30px; } 
.sub5 .sec2 .bg_wrap .sec2_tit_boxs p { text-align: center; line-height: 1.6; } 
.sub5 .sec2 .tabs { width: 100%; } 
.sub5 .sec2 .tab-buttons { display:flex; } 
.sub5 .sec2 .tab-btn { padding: 10px 14px; border: 1px solid #E2E2E2; background: #fff; cursor: pointer; width: 20%; color: var(--color-main); } 
.sub5 .sec2 .tab-btn.is-active { border-color: var(--color-main); background: var(--color-main); color: #fff; } 
.sub5 .sec2 .tab-panel { display:none; padding:16px 0; } 
.sub5 .sec2 .tab-panel.is-active { display:block; } 

.sub5 .sec2 .map-wrap { position:relative; width:100%; padding:120px 0 200px } 
.sub5 .sec2 .tab-panel .map-wrap { opacity:0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; } 
.sub5 .sec2 .tab-panel.is-enter .map-wrap { opacity:1; transform: translateY(0); } 

.sub5 .sec2 .map-wrap img { width:100%; height:auto; display:block; } 
.sub5 .sec2 .donor-map { position:absolute; inset:0; pointer-events:none; } 
.sub5 .sec2 .donor-spot { position: absolute; width: 71px; height: 99px; border: 6px solid #ff0000; pointer-events: auto; cursor: pointer; } 
.sub5 .sec2 .donor-tooltip { position:absolute; min-width:160px; padding:10px 12px; background:rgba(0,0,0,.8); color:#fff; border-radius:10px; font-size:1em; line-height:1.6; opacity:0; transform: translateY(6px); transition: .2s; white-space:nowrap; z-index:5; } 
.sub5 .sec2 .donor-tooltip { left:50%; bottom:130%; transform:translate(-50%, 6px); } 
.sub5 .sec2 .donor-spot:hover .donor-tooltip { opacity:1; transform:translate(-50%, 0); } 
.sub5 .sec2 .donor-tooltip.tip-left { left:auto; right:130%; bottom:50%; transform:translateY(50%); } 
.sub5 .sec2 .donor-spot:hover .donor-tooltip.tip-left { transform:translateY(50%); } 
.sub5 .sec2 .donor-tooltip.tip-right { left:130%; bottom:50%; transform:translateY(50%); } 
.sub5 .sec2 .donor-spot:hover .donor-tooltip.tip-right { transform:translateY(50%); } 
.sub5 .sec2 .donor-tooltip.tip-bottom { top:130%; bottom:auto; left:50%; transform:translate(-50%, -6px); } 
.sub5 .sec2 .donor-spot:hover .donor-tooltip.tip-bottom { transform:translate(-50%, 0); } 

.sub5 .sec2 .donor-spot.shape-b { width:67px; height:106px } 
.sub5 .sec2 .donor-spot.has-amount { border-color:#ff0000; } 
.sub5 .sec2 .donor-spot.is-empty { border-color:#ababab; } 
.sub5 .sec2 .donor-spot.is-empty:hover { border-color:#ffef10; } 
.sub5 .sec2 .scroll-hint { display:none } 


@media (min-width: 1401px){
 .sub5 .sec2 .tab-panel { overflow-x: visible; } 
 .sub5 .sec2 .map-wrap { min-width: auto; } 
 }

@media (max-width: 1400px){
 .sub5 .sec2 .tab-panel { overflow-x: auto; overflow-y: hidden; } 
 .sub5 .sec2 .map-wrap { min-width: 1400px; } 
 }

@media (max-width: 1024px) { /* 힌트 위치/기본 */
 .sub5 .sec1 { background:#4225b2 url(../img/sub/sub5_mo_sec1_bg.png) no-repeat right 80% / cover; background-size: 70%; } 
#tab_content_box .scroll-hint { position: relative; left: 0; top:1em; z-index: 50; display: flex; align-items: center; gap: 10px; pointer-events: none; } 

#tab_content_box .scroll-hint .hint-text { font-size: 1em; font-weight: 500; color:var(--color-main); animation: hintBlink 1.2s ease-in-out infinite; white-space: nowrap; font-weight:bold } 
#tab_content_box .scroll-hint .hint-arrow { position: relative; width: 44px; height: 16px; overflow: hidden; } 
#tab_content_box .scroll-hint .hint-arrow::before { content: ">>>"; position: absolute; top: 50%; left: -40%; transform: translateY(-50%); color: var(--color-main); opacity: .9; letter-spacing: 2px; animation: hintArrowMove 1.3s ease-in-out infinite; } 

@keyframes hintBlink { 0%,100% { opacity: .35; } 
 50% { opacity: 1; } 
 }

@keyframes hintArrowMove { 
 0% { left: -40%; opacity: 0; } 
 25% { opacity: 1; } 
 100% { left: 110%; opacity: 0; } 
 } 
 }


@media (max-width: 768px){
 .sub5 .sec1 { background:#4225b2 url(../img/sub/sub5_mo_sec1_bg.png) no-repeat right 90% / cover; background-size: 80%; } 
 .sub5 .sec1 .inner > img { width:70%; margin-top:50px; } 
.sub5 .sec2 .map-wrap { padding:100px 0 100px } 
.sub5 .sec2 .donor-spot { top:23%!important } 
.sub5 .sec2 .donor-spot.shape-b { top:59%!important } 
 }
 @media (max-width: 640px){
 .sub5 .sec1 { background-size: 100%; } 
 .sub5 .sec2 .bg_wrap .sec2_tit_boxs h2 { font-size:1.8em; } 
 .sub5 .sec2 .bg_wrap .sec2_tit_boxs p { font-size:14px; } 
 .sub5 .sec2 .bg_wrap .sec2_tit_boxs { top:-60px; padding-top:60px } 
 }




.sub5 .sec2 .map-wrap { padding:70px 0 100px; } 
.sub5 .sec2 .map-wrap img { border: 1px solid #ddd; padding: 50px 0; } 
#detailTalk { white-space: pre-line; } 
.donor-detail { overflow: hidden; height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; } 
.donor-detail.is-open { opacity: 1; margin-bottom:150px; height:100%; margin-top:-70px; } 
.detail_location { font-size: 2em; color: var(--color-main); font-weight: bold; margin-bottom: 30px; } 
.detail_contents { display:flex; flex-wrap:wrap; gap:20px 0; } 
.detail_contents > div { width:50%; display:flex; align-items:center; gap:20px; } 
.detail_contents > div:last-child { width:100%; align-items:baseline; } 
.detail_contents > div span { font-size:1em; font-weight:500; background:var(--color-main); width:180px; height:50px; border-radius:30px; color:#fff; display:flex; align-items:center; justify-content:center } 
.detail_contents > div p { line-height:1.5; } 
.donor-detail.is-empty .detail_contents { display:none; } 
.donor-detail .empty-message { display:none; line-height:1.6; font-size:1em; } 
.donor-detail.is-empty .empty-message { display:block; } 
.sub5 .sec2 .tab-panel { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
 scrollbar-width: none; } 
.sub5 .sec2 .tab-panel::-webkit-scrollbar { display:none; } 
@media (max-width: 768px){
 .sub5 .sec2 .map-wrap { padding: 30px 0 100px; } 
 .sub5 .sec2 .donor-spot { top:19%!important } 
 .sub5 .sec2 .donor-spot.shape-b { top: 54% !important; } 
 .detail_contents > div { width:100% } 
 .detail_contents > div span { width:35% } 
 .detail_contents > div:last-child { flex-direction:column } 
 .detail_contents > div:last-child span { width:100% } 

}