@charset "UTF-8";

.main-container {overflow: hidden;}
.section {padding: 20px; max-width: 1430px; margin: 0 auto;}
.section:last-child {padding-bottom: 60px;}
.section-tit {font-size: 24px; font-weight: bold; color: #333; position: relative;}
.section-tit:before {content: ''; position: absolute; right: 0; top: 50%; z-index: -1; width: calc(100% - 100px); height: 1px; border-top: 1px solid #63A1FF;}

@media screen and (min-width: 768px){
    .section-tit {font-size: 34px;}
    .section-tit:before {width: calc(100% - 145px);}
}
@media screen and (min-width: 1024px){
    .section:last-child {padding-bottom: 100px;}
}

/*main visual*/
.section.main-visual-wrap {padding: 20px 0;}
.visual-tit-wrap {position: relative; font-size: 24px; color: #333; padding: 10px 20px; line-height: 1.2;}
.visual-tit-wrap strong {position: relative;}
.visual-tit-wrap strong:before {content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% + 30px); height: 70%; background: rgba(88,209,255,0.24); z-index: -1;}
.main-visual-wrap {position: relative;}
.main-visual-wrap .pop-wrap {position: absolute; left: 50%; transform: translateX(-50%); top: 130px; max-width: 450px; width: 58%; z-index: 10;}
.main-visual-wrap .pop-wrap img {width: 80%;}
.main-visual-control {justify-content: space-between; padding: 20px;}
.main-visual-control, .main-visual-control .paging-btn {display: flex; align-items: center;}
.main-visual-control .paging-btn>* {margin-right: 10px;}
.main-visual-control .paging-btn>button {line-height: 1;}
.main-visual-control .swiper-pagination {letter-spacing: 0; min-width: 50px; position: static; width: auto; font-size: 13px; color: #666;}
.main-visual-control .swiper-pagination-current {color: #E6007E;}
.main-visual-control .play-stop {width: 11px; height: 17px;}
.main-visual-control .play-stop>button {display: none;}
.main-visual-control .play-stop>button.on {display: block;}
.main-visual-control .play-stop .play {height: 0; border-left: 7px solid #111; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}
.main-visual-control .play-stop .stop {border-left: 3px solid #333; border-right: 3px solid #333; width: 9px; height: 13px;}
.main-visual-wrap .swiper-wrapper {padding-top: 70px; max-height: 485px;}
.main-visual-wrap .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.main-visual-wrap .swiper-slide-active img {animation: moveBg 5s ease-out; animation-fill-mode: forwards;}
.main-visual-wrap .swiper-slide {overflow: hidden; height: auto;}

@keyframes moveBg {
    from {transform: scale(2);}
    to {transform: scale(1.7);}
}


@media screen and (min-width: 768px){
    .visual-tit-wrap {font-size: 32px;}
    .main-visual-wrap .pop-wrap {top: 100px;}
    .main-visual-wrap .pop-wrap img {max-width: 545px;}
    @keyframes moveBg {
        from {transform: scale(1.2);}
        to {transform: scale(1);}
    }

}
@media screen and (min-width: 1024px){
    .section.main-visual-wrap {padding-top: 100px; max-width: none;}
    .visual-tit-wrap {font-size: 40px; max-width: 1430px; margin: 0 auto;}
    .main-visual-wrap .pop-wrap {left: auto; right: 0; top: -60px; width: 50%; max-width: 430px;}
    .main-visual-wrap .pop-wrap img {width: 100%; max-width: none;}
    .main-visual-wrap .swiper-wrapper {padding-top: 0;}
    .main-visual-control {max-width: 1430px; margin: 0 auto;}
    .scroll-down-wrap {display: block;}
}
@media screen and (min-width: 1650px){
    .main-visual-wrap .swiper-wrapper {margin-left: 100px;}
}


/*service wrap*/
.service-wrap {position: relative; z-index: 15; margin-top: -105px;}
.service-slide:before {content: ''; position: absolute; left: -15px; bottom: -30px; width: 84px; height: 71px; background: url('/_user/restructure2022/village/sinbuk-eup/images/main/img-service-bg.png') no-repeat; background-size: 100% 100%;}
.service-wrap .service-slide {position: relative; padding: 0 9% 5px; background: #fff; border-radius: 70px; border: 8px solid #63A1FF;}
.service-wrap .swiper {overflow: hidden; padding-top: 10px;}
.service-wrap .swiper-slide>a {display: flex; flex-direction: column; align-items: center; color: #333;}
.service-wrap .swiper-slide .icon-area {background: #fff; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; box-sizing: border-box; text-align: center; width: 60px; height: 60px; border-radius: 45px; border: 1px solid #D1E3FF; transition: all 0.5s; box-shadow: 3px 3px 5px rgba(147,147,147,0.2);}
.service-wrap .swiper-slide .icon-area img {width: 70%;}
.service-wrap .swiper-slide>a:hover .icon-area,
.service-wrap .swiper-slide>a:focus .icon-area {top: -5px; box-shadow: 0 5px 7px rgba(203,203,203,0.8); transition: all 0.5s; background: #63A1FF;}
.service-wrap .swiper-slide>a:hover .icon-area + span,
.service-wrap .swiper-slide>a:focus .icon-area + span {color: #63A1FF;}
.service-wrap .swiper-button-prev, .service-wrap .swiper-button-next {background-size: 9px 16px;}
.service-wrap .swiper-button-prev {left: 5px; background-image: url('/_user/restructure2022/village/sinbuk-eup/images/main/icon-prev-btn.svg');}
.service-wrap .swiper-button-next {right: 5px; background-image: url('/_user/restructure2022/village/sinbuk-eup/images/main/icon-next-btn.svg');}


@media screen and (min-width: 768px){
    .service-slide:before {bottom: -50px; width: 117px; height: 98px;}
    .service-wrap {margin-top: -125px; padding-bottom: 40px;}
    .service-wrap .service-slide {padding: 15px 10% 10px; border-radius: 85px;}
    .service-wrap .swiper-slide>a {font-size: 16px;}
    .service-wrap .swiper-slide .icon-area {width: 80px; height: 80px;}
    .service-wrap .swiper-slide .icon-area img {width: 65%;}
    .service-wrap .swiper-button-prev {left: 20px;}
    .service-wrap .swiper-button-next {right: 20px;}
    .service-wrap .swiper-slide>a:hover .icon-area, .works-wrap>ul>li>a:focus .icon-area {top: -10px; box-shadow: 0 5px 7px rgba(203,203,203,0.8); transition: all 0.3s; background: #63A1FF;}
    .service-wrap .swiper-slide>a .icon-area:after {content: ''; display: block; position: absolute; z-index: -1; margin-left: -6px; bottom: -2px; left: 50%; border-top: 8px solid #63A1FF; border-right: 7px solid transparent; border-left: 7px solid transparent;}
    .service-wrap .swiper-slide>a:hover .icon-area:after {border-top-color: #63A1FF; bottom: -7px; transition: all 0.2s 0.05s; z-index: 1;}

}
@media screen and (min-width: 1024px){
    .service-wrap .service-slide {border-width: 15px; border-radius: 110px; padding: 23px 10% 22px;}
    .service-slide:before {width: 158px; height: 130px;}
    .service-wrap .swiper {padding-top: 12px;}
    .service-wrap .swiper-button-prev, .service-wrap .swiper-button-next {display: none;}
    .service-wrap .swiper-slide>a {font-size: 18px;}
    .service-wrap .swiper-slide .icon-area {width: 95px; height: 95px; margin-bottom: 10px;}
}
@media screen and (min-width: 1500px){
    .service-slide:before {width: 209px; height: 178px; bottom: -40px;}
}

/*info wrap*/
.section-tit .add-more {position: relative; background: #fff; display: block; width: 30px; height: 30px; text-indent: -9999px; border: 1px solid #63A1FF;}
.section-tit .add-more:before, .section-tit .add-more:after {content: ''; position: absolute;}
.section-tit .add-more:before {left: 8px; top: 15px; width: 13px; height: 1px; border-top: 1px solid #63A1FF;}
.section-tit .add-more:after {left: 14px; top: 9px; height: 13px; width: 1px; border-left: 1px solid #63A1FF;}
.section-tit .add-more:hover {background: #3A6DD5; transition: .3s;}
.section-tit .add-more:hover:before {border-top: 1px solid #fff;}
.section-tit .add-more:hover:after {border-left: 1px solid #fff;}

.gallery-wrap {box-sizing: border-box; padding-top: 40px; overflow: hidden; position: relative;}
.gallery-wrap .swiper {padding-top: 18px; box-sizing: border-box;}

.gallery-wrap .img-area {height: 0; padding-top: 70%; position: relative; overflow: hidden; background: #c1c1c1 url('/_user/restructure2022/base/img/sub/img-no-img.png') 50%/40% no-repeat;}
.gallery-wrap .swiper-slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.gallery-wrap .img-info {color: #777; font-weight: 500; background: #f7f7f7; letter-spacing: 0; padding: 20px;}
.gallery-wrap .img-info .dotdot {color: #333;}
.gallery-wrap .img-info .date {display: inline-block; padding-left: 20px; background: url('/_user/restructure2022/village/sinbuk-eup/images/main/icon-time.png') no-repeat 0 3px;}
.gallery-wrap .swiper-button-next, .gallery-wrap .swiper-button-prev {display: none;}

@media screen and (min-width: 768px){
    .section-tit .add-more {width: 40px; height: 40px;}
    .section-tit .add-more:before {left: 12px; top: 19px; width: 17px;}
    .section-tit .add-more:after {left: 20px; top: 11px; height: 17px;}
}

@media screen and (min-width: 1024px){
    .info-wrap {display: flex;}
    .info-wrap>* {width: 50%;}

    .news-wrap {padding-right: 32px;}
    .news-wrap .tab-box-wrap .tab-box {padding-top: 30px;}
    .news-wrap .tab-box-wrap .tab-box .noti-box {min-width: 0;}
    .news-wrap .tab-box-wrap .noti-box .tit>p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

    .gallery-wrap {padding-top: 0; padding-left: 32px; min-height: 340px;}
    .gallery-wrap .swiper {padding-top: 30px; height: calc(100% - 51px);}
    .gallery-wrap .swiper-slide {width: 40%;}
    .gallery .swiper-slide>a {height: 100%; display: flex; flex-direction: column; position: relative; top: 0; transition: top 0.3s;}
    .gallery-wrap .img-area {padding-top: 0; height: calc(100% - 82px);}
    .gallery .swiper-slide>a:hover {top: -10px;}
    .gallery-wrap .img-info {position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box;}
    .gallery-wrap .swiper-button-next, .gallery-wrap .swiper-button-prev {display: block; background-image: none; background-color: #fff; width: 34px; height: 72px; margin-top: 0;}
    .gallery-wrap .swiper-button-next.swiper-button-disabled, .gallery-wrap .swiper-button-prev.swiper-button-disabled {display: none;}
    .gallery-wrap .swiper-button-prev {left: 0; box-shadow: 3px 0 3px rgba(0,0,0,0.2); border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
    .gallery-wrap .swiper-button-next {right: 0; box-shadow: -3px 0 3px rgba(0,0,0,0.2); border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
    .gallery-wrap .swiper-button-prev:before, .gallery-wrap .swiper-button-next:before {position: absolute; content: ''; top: 50%; transform: translateY(-50%) rotate(45deg); width: 9px; height: 9px;}
    .gallery-wrap .swiper-button-prev:before {left: 2px; border-bottom: 2px solid #333; border-left: 2px solid #333;}
    .gallery-wrap .swiper-button-next:before {right: 2px; border-top: 2px solid #333; border-right: 2px solid #333;}
}

/* 메인 bg 애니메이션, scroll down text s */

.ani-wrap {display: none; position: fixed; left: -190px; top: 60px; z-index: -2;}
.ani-wrap span {display: block; width: 628px; height: 655px; background: url("/_user/restructure2022/village/sinbuk-eup/images/main/img-ani.png") no-repeat;  animation: rotateBg 60s linear infinite;}

.scroll-down-wrap {display: none; position: relative; left: -17px; top: 713px; z-index: 5}
.scroll-down-wrap p {position: absolute; left: 0px; top: -870px; font-size: 8px; letter-spacing: 4px; transform: matrix(0, 1, -1, 0, 0, 0);}
.scroll-down-wrap .arrow-con {position: absolute; left: 60px; top: -779px;}
.scroll-down-wrap .arrow-con .arrow-down {display: block; width: 0; height: 0; margin-bottom: 8px; border-top: 7px solid #2A2A2A; border-left: 7px solid transparent; border-right: 8px solid transparent;}
.arrow-con .arrow-down:nth-of-type(2) {border-top: 7px solid #5A5A5A;}
.arrow-con .arrow-down:nth-of-type(3) {border-top: 7px solid #C1C1C1;}

@keyframes rotateBg {
    100% {
        transform-origin: center;
        transform: rotate(-360deg);
    }
}

@media screen and (min-width: 768px){
    .ani-wrap {display: none;}
}

@media screen and (min-width: 1024px){
    .ani-wrap {display: block;}
}

@media screen and (min-width: 1500px){
    .ani-wrap {display: block;}
    .scroll-down-wrap {display: block;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1024px) {
    .scroll-down-wrap .arrow-con {position: absolute; left: 51px; top: -779px;}
}

/* 메인 bg 애니메이션, scroll down text e */