﻿/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%;}

.fp-viewing-2rdPage #header,
.fp-viewing-3rdPage #header,
.fp-viewing-4rdPage #header {top:-2.5rem;}

.fp-viewing-2rdPage .fp-nav,
.fp-viewing-3rdPage .fp-nav,
.fp-viewing-4rdPage .fp-nav {top:3.75rem;}

.fp-viewing-2rdPage .go_map,
.fp-viewing-3rdPage .go_map,
.fp-viewing-4rdPage .go_map {top:15.95rem;}

.MC_wrap1 { position:relative;  padding-left: 4.5rem;}
.MC_wrap1 .container {position:relative; display: flex; max-width:100%; align-items: center; justify-content:center; height:100vh;}
.MC_wrap1 .container::before {content: ''; position:absolute; top:6.25rem; right:0; bottom:0; width:0; background:url(/images/dgedu/web/dsag/main/section1_bg.png) no-repeat center / cover; z-index: -1; opacity:0;transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;}
.fp-viewing-firstPage .MC_wrap1 .container::before {opacity: 1; width:100%;}
.MC_wrap2 { position:relative; padding-left: 4.5rem; z-index: 2;}
.MC_wrap2:before {content:''; position:absolute; top:-100%; left:0; width:1320px; height:415px; background:url(/images/dgedu/web/dsag/main/section2_bg1.png) no-repeat right bottom / contain; z-index:-1; visibility: hidden; opacity:0;transition:all 0.5s 0.2s ease-out;-webkit-transition:all 0.5s 0.2s ease-out;}
.MC_wrap2:after {content:''; position:absolute; bottom:-100%; left:0; width:100%; height:585px; background:url(/images/dgedu/web/dsag/main/section2_bg2.png) no-repeat right bottom / cover; z-index:-1; visibility: hidden; opacity:0;transition:all 0.5s 0.2s ease-out;-webkit-transition:all 0.5s 0.2s ease-out;}
.fp-viewing-2rdPage .MC_wrap2:before {visibility: visible; opacity: 1; top:3rem;}
.fp-viewing-2rdPage .MC_wrap2:after {visibility: visible; opacity: 1; bottom:0;}
.MC_wrap2 .container { position:relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 3.25rem; max-width: 70rem; height:100vh; margin: 0 auto; }
.MC_wrap2 .container::before {content: '';position: absolute;left: -9rem;bottom: 1rem;width:250px;height:391px;background: url('/images/dgedu/web/dsag/main/section2_bg3.png') no-repeat 0 0 / contain;}
.MC_wrap2 .container:after {display:none;}
.MC_wrap2 .container .con_wrap{position: relative; width: 58%; height: 36.75rem;}
.MC_wrap3 { position: relative; background: #feeff4;  padding-left: 4.5rem; z-index: 1;}
.MC_wrap3:before,
.MC_wrap3:after {content:''; position:absolute; width:28rem; height:30rem; border-radius: 50%; border:5rem solid #fee3ea; z-index:-1; visibility: hidden;  opacity:0; transition:all 0.5s 0.2s ease-out;-webkit-transition:all 0.5s 0.2s ease-out;}
.MC_wrap3:before {top:-13.5rem; right:-100%;}
.MC_wrap3:after {bottom:-10rem; left:-100%;}
.fp-viewing-3rdPage .MC_wrap3:before,
.fp-viewing-4rdPage .MC_wrap3:before {visibility: visible; opacity: 1; right:5.3rem;}
.fp-viewing-3rdPage .MC_wrap3:after,
.fp-viewing-4rdPage .MC_wrap3:after {visibility: visible; opacity: 1; left:4.3rem;}
.MC_wrap3 .container{ display: flex; height: 100vh; align-items: center; justify-content: center; max-width: 85rem; padding-top:3.25rem; }
.MC_wrap3 .container::after{display: none;}
.MC_wrap4, .MC_wrap4 .fp-tableCell {height:auto !important; z-index: 2;}

.MC_wrap1 .con_wrap {position: absolute; bottom:0; right: calc((100% - 76.5rem)/2); display: flex; flex-direction: column; width: 37rem; margin-left: auto;}

.MC_box1 { position: absolute; top:50%; left:50%; width: 100%; max-width:76rem; height:37.5rem; transform: translate(-50%, -40%); -webkit-transform: translate(-50%, -40%);}/* 메인비주얼 */
.MC_box2 { position: relative; width: 100%; margin-bottom: 1rem; height: auto;}/* 바로가기1 */
.MC_box3 { position: relative; width: 100%; height: auto; padding:3.5rem 0 3rem; background: url(/images/dgedu/web/dsag/main/notice_img3.png) no-repeat center top;}/* 게시판 */
.MC_box4 { position: relative; width: 100%; height: auto; }/* 나눔은행검색 서비스 */
.MC_box5 { position: relative; width: 100%; margin-bottom: 3.5rem; height: auto; }/* 바로가기2 */
.MC_box6 { position: relative; width: 100%; height: auto; }/* 바로가기3 */
.MC_box7 { position: relative; width: 100%; height: auto; margin-top: 2rem; }/* 안내사항 */
.MC_box8 { position: relative; width: 100%; height: auto; text-align: center;}/* 안내사항 */



/* 우수활용사례바로가기 추가 2026 */
.board_go {z-index: 11; display: block;height: 74px;max-width: 450px;border-radius: 10px 40px;width: 100%;position: absolute;bottom: 10px;color: #Fff;font-weight: 800;font-family: 'Jalnan';box-sizing: border-box;padding: 0 0 0 123px;text-align: left;background: linear-gradient(142deg, #00BCD4, #00018f);right: 10px;bottom: 67px;box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.24);line-height: 74px;}
.board_go > b {font-size: 1.3rem;}
.board_go > span {font-size: 1.1rem;margin-left: 6px;}
.board_go > i {display: inline-block;width: 72px;height: 86px;background: url(/images/dgedu/web/dsag/main/icon_man.png);position: absolute;bottom: 0;left: 38px;}
.board_go > i:before {content: '';display: inline-block;width: 32px;height: 46px;background: url(/images/dgedu/web/dsag/main/icon_man_h.png);position: absolute;bottom: 0;left: -7px;background-size: cover;/* background-color: red; */}
.board_go:after {content: '';display: inline-block;width: 21px;height: 15px;background: url(/images/dgedu/web/dsag/main/icon_man_arrow.png);margin-left: 13px;transition-duration: 0.2s;}
.board_go:hover:after {margin-left:23px;}
.board_go:hover i:before { transform: scale(1.2);}
.M_notice3  {height:70px;}
.M_notice3 .board_go  {
    bottom: 0;
    background: linear-gradient(142deg, #F44336, #9C27B0);
    padding: 0 0 0 133px;
}
.M_notice3 .board_go > i {display: inline-block;width:95px;height: 89px;background: url(/images/dgedu/web/dsag/main/icon_man02.png);position: absolute;bottom: 0;left: 36px;}
.M_notice3 .board_go > i:before {content: '';display: inline-block;width: 30px;height: 41px;background: url(/images/dgedu/web/dsag/main/icon_man01.png);position: absolute;top: -10px;right: 0;background-size: cover;left: initial;}


@media (max-width: 1650px) {
    .MC_wrap1 .con_wrap {width:48%; right: 1.5rem;}
}

@media (max-width: 1540px) {
    #container {padding-top: 6.25rem;} 

    .MC_wrap1{height: auto !important; padding-left: 0;}
    .MC_wrap1 .container::before {width:100%; opacity:1;}
    .MC_wrap1 .container{height: auto; padding: 0;}
    .MC_wrap1 .container:before{top: 0; bottom: 0; right: 0;}
    .MC_wrap2{height: auto !important; padding: 2.5rem 0 3.5rem;}
    .MC_wrap2:before {top:3rem; visibility: visible; opacity:1; top:7rem; left:0; width:900px; height:283px;}
    .fp-viewing-2rdPage .MC_wrap2:before {top:7rem;}
    .MC_wrap2:after {bottom:0; visibility: visible; opacity:1;}
    .MC_wrap2 .container{height: auto; padding-top: 0rem;}
    .MC_wrap2 .container::before {display: none;}
    .MC_wrap3{height: auto !important; padding-left: 0;}
    .MC_wrap3:before,
    .MC_wrap3:after {visibility: visible;  opacity:1; width:20rem; height:20rem; border-width: 3rem;}
    .MC_wrap3:before {right:-3.5rem;}
    .MC_wrap3:after {left:-4rem; bottom:2rem;}
    .fp-viewing-3rdPage .MC_wrap3:before, .fp-viewing-4rdPage .MC_wrap3:before {right:-3.5rem;}
    .fp-viewing-3rdPage .MC_wrap3:after, .fp-viewing-4rdPage .MC_wrap3:after {left:-4rem;}
    .MC_wrap3 .container{padding: 4rem 0;}

    .MC_box1{position: relative; height:42rem; padding: 2rem 2rem; top:auto; left:auto; transform: none; -webkit-transform: none;} /* 메인비주얼 */

    .MC_box5{}/* 바로가기1 */
}

@media (max-width: 1240px) {
    #container {padding-top: 6rem;}

    [class*="MC_wrap"]:not(.MC_wrap4) .container{padding: 2rem 1rem;}
    .MC_wrap2 {padding: 1rem 0;}
    .MC_wrap2 .container{display: block; ;}
    .MC_wrap2 .container:before{top: 0; right: 1rem; height: 24.35rem;}
    .MC_wrap2 .container .con_wrap{width: 100%; height: auto; padding-bottom: 2rem;}
    .MC_wrap3 .container {height: auto;}
    .MC_box1 {padding:0; height: 33rem;}
    .MC_box3{height: auto; background: none; padding:1rem 0 2rem;} /* 게시판 */
    .MC_box4{height: auto;} /* 팝업존 */
    .MC_box5{height: auto;} /* 바로가기1 */
    .MC_box6{height: auto;} /* 바로가기2 */
    .MC_box7{height: auto;} /* 바로가기3 */
    .MC_box8 {height: 48rem;}/* 안내사항 */    

    
    .board_go {left:50%;transform: translateX(-50%);bottom: 0;right: inherit;max-width: 30rem;height: auto;}
	.M_notice3 .board_go {left:50%;transform: translateX(-50%);bottom: 0;right: inherit;max-width: 30rem;height: auto;}

    
}

@media (max-width: 1024px) {
    .MC_wrap2 {padding:0;}

    .MC_box1 {height: 31rem;}
    .MC_box2 {margin-bottom:1rem;}
    .MC_box5{margin-bottom:2rem;} /* 바로가기1 */
    .MC_box6{height: auto;} /* 바로가기2 */
    .MC_box6{width: 100%; margin-bottom: 1.5rem;}/* 바로가기2 */
    .MC_box7{width: 100%;}/* 바로가기3 */
}

@media (max-width:940px){
}

@media (max-width: 860px) {

}

@media (max-width: 768px) {
    .MC_wrap1 .container {background: #d3eef7;}
    .MC_wrap2 {background:#fff8e8;}
    .MC_wrap1 .container::before,
    .MC_wrap2:before,
    .MC_wrap2:after,
    .MC_wrap3:before, .MC_wrap3:after {display: none;}
    .MC_wrap1 .con_wrap {position: relative; width: 100%; right: auto; bottom:auto;}
    .MC_box1 {display: none;}
    .MC_box2{padding-left: 0;} /* 갤러리 */
    .MC_box3 {padding-bottom: 0;}
}
@media (max-width:640px){
    .MC_wrap2:before{bottom: -6rem;}
    .MC_wrap2 .container .con_wrap{padding-bottom: 0;}
}
@media (max-width: 480px) {
    [class*="MC_wrap"]:not(.MC_wrap4) .container {padding: 1.5rem 1rem;}
    .MC_wrap1:before{ border-radius: 1rem 0; left: 0;}
    .MC_wrap1 .container:before{left: 3.5rem; bottom: 2.4rem; top: 5rem; border-radius: 2rem 0 0 2rem;}
    
    .MC_wrap2 .container:before{right: 0; background-size: 82%;}

    .MC_box4 {padding-bottom: 3.5rem;}
    .MC_box4::before {content: ''; position: absolute; top:-1.5rem; bottom: 0; left:-1rem; right:-1rem; width:auto; height: auto; background-color: #ea4e35; z-index: -1;}
    .MC_box5 {margin-top: -3.75rem;}
    .MC_box8 {height: 46rem;}/* 안내사항 */
    .board_go {padding:0;text-align:center;border-radius: 40px;}
    .board_go > b, .board_go > span {font-size: 1.1rem;}
    .board_go > i {display:none}
    .M_notice3 .board_go {padding:0;text-align:center;border-radius: 40px;}
    .M_notice3 .board_go > b, .board_go > span {font-size: 1.1rem;}  
    .M_notice3 .board_go > i {display:none}

}

@media (max-width: 380px) {
    .MC_wrap3 {padding-bottom: 50px;}
    .MC_wrap3 .board_go{bottom:-50px;}
}

@media (max-width: 340px) {
    .MC_box8 { height: 50rem;}/* 안내사항 */
    .MC_wrap3 {padding-bottom: 130px;}
    .MC_wrap3 .board_go{bottom:-135px;}
}