@charset "utf-8";
main{min-height:100vh;}
*{font-family: 'Pretendard'}
main .fix-layout{max-width:1744px;}

/*공통 title*/
.main-tit{margin-bottom:50px;}
.main-tit span{font-family:'Gmarket'; font-weight:300; color:#009a57;}
.main-tit p{margin-top:50px; font-size:50px; font-weight:bold; color:#111111;}

/*발전기금 메인 시작*/
.sc01{padding-top:60px; background:url(/resources/custom/images/fund/main/main-visu-bg.jpg) no-repeat left bottom;}
.sc01 .con{display:flex; align-items:center; justify-content: end;}
.main-sl-txt-area{width:40%; padding-left:150px; padding-right:30px;}
.main-sl-txt{margin-bottom:100px;}
.main-sl-txt .txt01{font-family:'Gmarket'; color:#009a57;}
.main-sl-txt .txt02{margin:50px 0; font-size:65px; font-weight:bold;}
.main-sl-txt .txt02 span{color:#009a57;}
.main-sl-txt .txt03{font-size:30px; color:#000000;}
.main-sl-util{display:flex; align-items:center; gap:30px;}
.main-sl-util .main-sl-info span{font-size:30px; color:#969696;}
.main-sl-util .main-sl-info .main-sl-counter{color:#080808; font-weight:bold;}
.main-sl-util .main-sl-pager{display:flex;}
.main-sl-util .main-sl-pager .main-sl-prev{position:relative;}
.main-sl-util .main-sl-pager .main-sl-prev:after{content:""; display:inline-block; width:1px; height:100%; background:#cbcbcb; margin:0 30px;}
.main-sl-area{width:60%; height:910px; border-radius:200px 0 0 0; overflow: hidden;}
.main-sl-list{height:100%;}
.main-sl-area .main-sl-itm{width:100%; height:100%;}
.main-sl-area .main-sl-itm img{width:100%; height:100%; object-fit:cover;}

/*sc02*/
.sc02{padding:180px 0 100px 0; background:url(/resources/custom/images/fund/main/news-arti-bg.png) no-repeat 135px 80%;}
.sc02 .con{display:flex; align-items:start;}
.sc02 .main-tit-box{width:40%;}
.sc02 .main-tit-box > a{display:inline-block; width:220px; line-height:65px; background:#000000; color:#fff; text-align: center; font-size:20px;
transition:all .3s; position:relative;}
.sc02 .main-tit-box > a:hover{background:#0b824e; }
.sc02 .li-wrap{width:60%; margin-left:50px; position:relative;}
.news-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.news-list > li{width:100%;  height:430px; border-radius:32px; overflow:hidden;}
.news-list > li:nth-child(2){margin-top:-60px;}
.news-list > li:nth-child(3) {margin-left:calc(100% + 40px); margin-right:0; margin-top:-60px;}
.pop-list{position:absolute; bottom:0; width:calc((100% - 40px)/2);}
.pop-list > li{width:100%;  height:370px; border-radius:32px; overflow:hidden;}
/*.news-list > li:nth-child(4) { order: 3; }*/
.news-itm a{display:flex; align-items:start; justify-content: center; flex-direction:column; gap:30px; background:#f7f7f7; padding:40px; height:100%;}
.news-itm .news-label{color:#009a57; font-weight:bold;}
.news-itm .news-title{font-size:26px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
line-height:1.3em; min-height:2.6em;}
.news-itm .news-desc{font-size:20px; color:#333333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
line-height:1.5em; min-height:3em;}

/*팝업카드*/
.news-list > li.popup-sl-area{height:370px; position:relative;}
.popup-sl-list{height:100%;}
.popup-sl-list .popup-sl-itm{height:100%;}
.popup-sl-itm a{display:block; width:100%; height:100%;}
.popup-sl-itm a img{width:100%; height:100%; object-fit:cover;}
.popup-sl-util{position:absolute; left:0; bottom:0; background:#ebf3f6; display:flex; padding:24px; border-radius:0 8px 0 0; gap:16px; align-items:center;
z-index:2;}
.popup-sl-info span{color:#000000; font-size:20px;}
.popup-sl-info .popup-sl-counter{font-weight:bold;}
.popup-sl-pager{display:flex; gap:10px; align-items:center;}
.popup-sl-pager a{display:flex;}

.sc03{padding:200px 0 200px; position:relative;}
.sc03:before{content:"BUSAN NATIONAL UNIVERSITY OF EDU"; font-size:180px; font-family:'Gmarket'; color:#fafafa; position:absolute; z-index:-1; top:150px; width: max-content; 
    right:0; white-space: nowrap;animation: moveLeft 10s linear infinite;}
.sc03:after{content:""; display:block; width:55%; height:560px; background:#f2f2f2; position:absolute; right:0; top:0; z-index:-2;}
.sc03 .con{display:flex; }
.fund-intro-area{width:100%; padding-right:50%;}
.fund-intro-txt .txt01{color:#2f2f2f; font-size:36px; line-height:1.5; margin-bottom:50px;}
.fund-intro-txt .txt02{color:#8a8a8a; font-size:24px; line-height:1.5;}
.fund-intro-img{position:absolute; right:0; border-radius:300px 0 0 300px; overflow:hidden; width:50%;}
@keyframes moveLeft {
    0% {
      transform: translateX(0);
      visibility: visible;
    }
    90% {
      transform: translateX(-100vw);
      visibility: visible;
    }
    100% {
      transform: translateX(-100vw);
      visibility: hidden;
    }
  }
.sc04{padding-bottom:100px;}
.sc04 .con{display:flex; gap:55px;}
.qk-box{display:flex; height:170px; width:calc(100% - 55px);  flex-direction:column; justify-content:center; position:relative; padding-left:50px; border-radius:12px; gap:20px;}
.qk-box .txt01{font-size:32px; color:#7a7a7a; font-weight:bold;}
.qk-box.box01{background:#edf8f7; padding-right: 268px;}
.qk-box.box01:after{content:""; display:block; width:232px; height:133px; background:url(/resources/custom/images/fund/main/ico-qk01.png); position:absolute; right: 60px; top:50%; transform:translateY(-50%);}
.qk-box.box01 .txt01 span{color:#00a15b}
.qk-box.box01 .txt02{font-size:36px; color:#000000; font-family:'Gmarket';}
.qk-box.box02{background:#edf6f8; padding-right:180px;}
.qk-box.box02:after{content:""; display:block; width:166px; height:201px; background:url(/resources/custom/images/fund/main/ico-qk02.png); position:absolute; right: 30px; bottom:10px;}
.qk-box.box02 .txt01 span{color:#0057a8}
.qk-box.box02 .txt02{font-family:'Gmarket'; font-weight:300; font-size:22px; word-break: keep-all;}
.qk-box.box02 .txt02 span{font-family:'Gmarket'; font-weight:500;}

/*반응형 시작*/
@media all and (max-width:1600px){
		.main-sl-txt-area{padding-left:12px;}
		.main-sl-txt .txt03{font-size:20px;}
		.main-sl-area{height:700px;}
}
@media all and (max-width:1000px){
		.main-sl-area{height:500px;}
		.main-sl-txt .txt02{font-size:40px; margin:20px 0;}
		.main-sl-txt{margin-bottom:30px;}
}
@media all and (max-width:1400px){
		.sc04 .con{gap:10px;}
		.qk-box{width: calc(100% - 10px); padding-left:20px;}
}

@media all and (max-width:1200px){
		.main-tit{margin-bottom:30px;}
		.main-tit p{font-size:40px; margin-top:24px;}
		
		.news-list{gap:10px;}
		
		.sc03{padding-top:100px;}
		.fund-intro-txt .txt01{font-size:24px;}
		.fund-intro-txt .txt02{font-size:20px;}
		.fund-intro-img{top:20px;}
		
		.qk-box .txt01{font-size:24px;}
		.qk-box.box01 .txt02{font-size:32px;}
		.qk-box.box01:after{right:12px;}
		.qk-box.box02 .txt02{font-size:18px;}
}
@media all and (max-width:1000px){
		.main-sl-util .main-sl-info span{font-size:20px;}
		.main-sl-util .main-sl-pager .main-sl-prev:after{margin:0 10px;}
		
		.sc02{padding:80px 0;}
		.sc02 .con{flex-direction:column; gap:30px;}
		.sc02 .main-tit-box{width:100%; text-align:center;}
		.sc02 .li-wrap{width:100%; margin-left:0;}
		.news-list{width:100%; padding-left:0;}
		.news-list > li, .pop-list > li.popup-sl-area{height:300px;}
		.news-list > li:nth-child(2), .news-list > li:nth-child(3){margin-top:0;}
		.news-itm a{gap:20px;}
		.news-list > li:nth-child(3){order:3; margin-left:calc(100% + 10px);}
		.news-list > li:nth-child(4){order:4;}
		.pop-list{width:calc((100% - 10px)/2);}
		
		.qk-box.box01 .txt02{font-size:26px;}
		.qk-box{width:100%; padding-left:20px; background-position:95%; background-size:auto;}
        .qk-box.box01:after, .qk-box.box02:after{display:none;}
        .qk-box.box01{background:url(/resources/custom/images/fund/main/ico-qk01.png)no-repeat  #edf8f7 95% center / auto 50%;         padding-right: 0;}
        .qk-box.box02{background:url(/resources/custom/images/fund/main/ico-qk02.png)no-repeat #edf6f8 95% center / auto 70%;         padding-right: 0;}
}
@media all and (max-width:767px){
		
		.main-tit p{font-size:30px;}
		
		.sc01{background-position:left top; padding-top:20px;}
		.sc01 .con{flex-direction:column; gap:20px;}
		.main-sl-txt-area{width:100%; text-align:center;         padding-right: 0;}
		.main-sl-area{width:100%; height:350px; text-align: center;}
		.main-sl-util{justify-content: center;}
		
		.news-list{grid-template-columns: repeat(1, 1fr);}
		.pop-list{width:100%; position:unset; margin-top:10px}
		.news-list > li:nth-child(3){margin-left:0;}
		.news-itm a{gap:10px;}
		.news-itm .news-title{font-size:20px}
		.news-itm .news-desc{font-size:16px}
		.sc02 .main-tit-box > a{font-size:16px; width:180px; line-height:50px;}
		
		.sc03{padding:50px 0 80px 0;}
		.sc03 .con{flex-direction: column;; gap:30px;}
		.fund-intro-area{padding-right:0; text-align:center;}
		.fund-intro-img{position:relative; width:100%; height: 300px; top: unset;}
		.fund-intro-txt .txt01{margin-bottom:20px;}
		.fund-intro-txt .txt02 br{display:none;}
		
		.sc04 .con{flex-direction:column}
        .qk-box.box02 .txt01 span{color:#0057a8}
}

/*애니메이션 부분*/
.main-sl-txt .txt01,
.main-sl-txt .txt02,
.main-sl-txt .txt03 {
  transform: skew(10deg, 10deg);
  opacity: 0;
  transition: transform .5s, opacity .5s;
  display: block;
}

.main-sl-txt.active .txt01,
.main-sl-txt.active .txt02,
.main-sl-txt.active .txt03 {
  transform: skew(0, 0); /* 일관성 */
  opacity: 1;
}

.main-sl-txt.active .txt02 { transition-delay: .3s; }
.main-sl-txt.active .txt03 { transition-delay: .6s; }

/* 스크롤 애니메이션은 '다른 요소' 전용으로 쓰세요 (txt01/2/3에는 붙이지 않기) */
.animation {
  transform: skew(10deg, 10deg) translateY(-100px);
  opacity: 0;
  transition: transform .5s, opacity .5s;
}
.animation.active {
  transform: translateY(0) skew(0, 0);
  opacity: 1;
}