/** background **/
.section-1 {background: url('../img/main/section-1-bg.jpg'); background-size: cover; background-position: center}
.section-2 {background: url('../img/main/section-2-bg.jpg'); background-size: cover; background-position: center}
.section-3 .box1 {background: url('../img/main/section-3-bg-1.jpg'); background-size: cover; background-position: center;}
.section-3 .box2 {background: url('../img/main/section-3-bg-2.jpg'); background-size: cover; background-position: center;}
.section-4 {background: url('../img/main/section-4-bg.jpg'); background-size: cover; background-position: center}
.section-5 {background: url('../img/main/section-5-bg.jpg'); background-size: cover; background-position: center}

@media all and (max-width: 800px){
    .section-1 {background: url('../img/main/section-1-bg-mo.jpg'); background-size: cover; background-position: center}
    .section-2 {background: url('../img/main/section-2-bg-mo.jpg'); background-size: cover; background-position: center}
    .section-3 .box1 {background: url('../img/main/section-3-bg-1-mo.jpg'); background-size: cover; background-position: center;}
    .section-3 .box2 {background: url('../img/main/section-3-bg-2-mo.jpg'); background-size: cover; background-position: center}
    .section-4 {background: url('../img/main/section-4-bg-mo.jpg'); background-size: cover; background-position: center}
    .section-5 {background: url('../img/main/section-5-bg-mo.jpg'); background-size: cover; background-position: center}
}

/** 메인 공통 **/
.section .inner {height: 100%}
.section .content {height: 100%}

.section .title-area .tit {padding-bottom: 1rem}
.section .title-area .wrt {opacity: 0.7}

.section .view-btn-area {}
.section .view-btn {padding: 1.5rem 3rem 1.5rem 6rem;}
.section .view-btn::before {content: ''; display: block; position: absolute; width: 5rem; height: 5rem; left: 0; top: 50%; transform: translateY(-50%); border-radius: 30px; background: rgba(255,255,255,0.2); border: 1px solid transparent; transition: 0.3s}
.section .view-btn .line {height: 2px; background: #fff; width: 1.7rem; border-radius: 10px; left: 1.4rem; opacity: 0; transition: 0.3s;}
.section .view-btn img {left: 2.3rem; transition: 0.3s}

@media (hover: hover) and (pointer: fine) { /* when supported */
    .section .view-btn:hover::before {width: 100%; border: 1px solid #fff}
    .section .view-btn:hover .line {opacity: 1; left: 2.9rem}
    .section .view-btn:hover img {left: 3.8rem}
}

@media all and (max-width: 800px){
    .section .title-area .wrt {font-size: 2.8rem}
    .section .view-btn {font-size: 2.8rem; padding: 1rem 3rem 1rem 6rem}
    .section .view-btn img {max-width: 0.9rem}
}


/** 메인 섹션 1 **/
.section-1 {}
.section-1 .content {}
.section-1 .txt {margin-bottom: 5rem}
.section-1 .txt .tit {}
.section-1 .txt .wrt {opacity: 0.7; padding-top: 2rem; line-height: 4rem}
.section-1 .logo {max-width: 57.2rem; margin-bottom: 5rem}

@media all and (max-width: 800px){
    .section-1 {padding: 30rem 0}
    .section-1 .content {align-items: center;}
    .section-1 .txt {text-align: center}
    .section-1 .logo {max-width: 90%}
}


/** 메인 섹션 2 **/
.section-2 {}
.section-2 .content {}
.section-2 .title-area {top: 15.8rem; z-index: 1;}
.section-2 .list-area {height: 100%}
.section-2 .list-area li {flex: 1; transition: 0.5s}
.section-2 .list-area li a {padding-bottom: 5rem; transition: 0.5s}
.section-2 .list-area li .ico {text-align: center; opacity: 1; transition: 0.5s; top: 0}
.section-2 .list-area li .ico img {width: 50%}
.section-2 .list-area li .txt {transition: 0.5s; top:0; padding-top: 1rem}
.section-2 .list-area li .plus {}
.section-2 .list-area li .plus img {opacity: 0; transition: 0.5s; transform: rotate(0deg);}

.section-2 .list-area li::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transition: 0.5s}
.section-2 .list-area li:nth-child(1)::before {background: url('../img/main/about-bg-1.jpg') no-repeat; background-size: cover; background-position: center;}
.section-2 .list-area li:nth-child(2)::before {background: url('../img/main/about-bg-2.jpg') no-repeat; background-size: cover; background-position: center;}
.section-2 .list-area li:nth-child(3)::before {background: url('../img/main/about-bg-3.jpg') no-repeat; background-size: cover; background-position: center;}


@media (hover: hover) and (pointer: fine) { /* when supported */
    /* .section-2 .list-area li:hover .ico {opacity: 0; top: -5rem;}
    .section-2 .list-area li:hover .txt {top: -5rem;}
    */
    .section-2 .list-area li:hover .plus img {transform: rotate(90deg); opacity: 1;}
    .section-2 .list-area li:hover::before {opacity: 1;}
}

@media all and (max-width: 800px){
    .section-2 {padding: 15rem 0}
    .section-2 .title-area {position: relative; top: 0;}
    .section-2 .list-area {margin-top: 7.4rem; padding: 3rem 0 5rem; background: rgba(255,255,255,0.1);}
    .section-2 .list-area li:nth-child(1)::before {background: none}
    .section-2 .list-area li:nth-child(2)::before {background: none}
    .section-2 .list-area li:nth-child(3)::before {background: none}

    .section-2 .list-area li .ico img {width: 100%; display: block;}
    .section-2 .list-area li:nth-child(1) .ico {max-width: 9.7rem}
    .section-2 .list-area li:nth-child(2) .ico {max-width: 11rem}
    .section-2 .list-area li:nth-child(3) .ico {max-width: 8rem}
    .section-2 .list-area li .plus img {opacity: 1; max-width: 3rem}
    .section-2 .list-area li a {padding-bottom: 0}
}



/** 메인 섹션 3 **/
.section-3 .box {flex: 1; overflow: hidden;}
.section-3 .box::before {content: ''; display: block; position: absolute; width: 100%; height:  100%; background: rgba(0,0,0,0.5); z-index: 1; transition: 0.4s;}
.section-3 .box .box-inner {transition: 0.4s; height: 100%;}
.section-3 .box .title-area {left: 15rem; bottom: 15rem; z-index: 1;}
.section-3 .box .title-area .tit {padding-bottom: 0; transition: 0.4s;}
.section-3 .box .title-area .wrt {opacity: 0; }

@media (hover: hover) and (pointer: fine) { /* when supported */
    .section-3 .box:hover::before {opacity: 0;}
    .section-3 .box:hover .box-inner {transform: scale(1.16);}
    .section-3 .box:hover .title-area .tit {padding-bottom: 0;}
}

@media all and (max-width: 800px){
    .section-3 {display: none !important}
    .section-3 .inner {flex-direction: column; height: 80rem;}
    .section-3 .box::before {display: none}
    .section-3 .box .title-area {top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: auto; width: 100%; max-width: 80%;}
    .section-3 .box .title-area .wrt {opacity: 1; margin-bottom: 5rem}

}


/** 메인 섹션 4 **/
.section-4 .title-area {margin-bottom: 7rem; padding-top: 15rem}
.section-4 .notice-slide-area {overflow: hidden;}
.section-4 .more-area {margin-bottom: 5rem; justify-content: flex-end;}
.section-4 .more-area a {width: 5rem; height: 5rem; background: rgba(255,255,255,0.2); border-radius: 100%}
.section-4 .more-area a img {transform: rotate(0deg); transition: 0.3s}
.section-4 .notice-slide {position: initial;}
.section-4 .notice-box {background: rgba(255,255,255,0.2); backdrop-filter: brightness(1.2) blur(11px); padding: 5rem; top: 0; transition: 0.3s}
.section-4 .notice-box .top {padding-bottom: 1.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.5); transition: 0.3s}
.section-4 .notice-box .top img {transform: rotate(0deg); transition: 0.3s}
.section-4 .notice-box .tit {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.section-4 .notice-box .wrt {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; opacity: 0.7; margin: 1.5rem 0 2.5rem}
.section-4 .notice-box .date {opacity: 0.7}

.section-4 .notice-slide .notice-prev,
.section-4 .notice-slide .notice-next {top: 0; margin-top: 0; width: 5rem; height: 5rem; background: rgba(255,255,255,0.2); border-radius: 100%;}
.section-4 .notice-slide .notice-prev {left: auto; right: 12rem}
.section-4 .notice-slide .notice-next {right: 6rem}

.section-4 .notice-slide .notice-prev::after,
.section-4 .notice-slide .notice-next::after {width: 100%; height: 100%; font-size: 0;}
.section-4 .notice-slide .notice-prev::after {background: url('../img/arrow-left.png') no-repeat; background-size: 1.1rem; background-position: center;}
.section-4 .notice-slide .notice-next::after {background: url('../img/arrow-right.png') no-repeat; background-size: 1.1rem; background-position: center;}


@media (hover: hover) and (pointer: fine) { /* when supported */
    .section-4 .more-area a:hover {background-color: #3F8BD6;}
    .section-4 .more-area a:hover img {transform: rotate(90deg);}

    .section-4 .notice-box:hover {background: #3F8BD6; backdrop-filter: none; top: -1rem}
    .section-4 .notice-box:hover .top {color: #9FC5EA}
    .section-4 .notice-box:hover .top img {transform: rotate(90deg);}
}

@media all and (max-width: 800px){
    .section-4 {padding-bottom: 15rem}
    .section-4 .title-area {margin-bottom: 5rem}

    .section-4 .more-area {margin-bottom: 3rem}
    .section-4 .more-area a {width: 7rem; height: 7rem;}
    .section-4 .more-area a img {width: 2.7rem}

    .section-4 .notice-box .top {font-size: 2rem; margin-bottom: 2rem;}
    .section-4 .notice-box .tit {font-size: 2.8rem}
    .section-4 .notice-box .wrt {font-size: 2.2rem; margin: 1.5rem 0;}
    .section-4 .notice-box .date {font-size: 2.2rem}

    .section-4 .notice-slide .notice-prev,
    .section-4 .notice-slide .notice-next {width: 7rem; height: 7rem;}
    .section-4 .notice-slide .notice-prev {right: 16rem}
    .section-4 .notice-slide .notice-next {right: 8rem}
}


/** 메인 섹션 5 **/
.section-5 .title-area {margin-bottom: 7rem; padding-top: 15rem}
.section-5 .map-area {width: 100%; height: 32.7rem}
.section-5 .info-area {}
.section-5 .info-area .box {flex: 1; padding: 3rem 0; background: rgba(255,255,255,0.1); backdrop-filter: brightness(1) blur(11px);}
.section-5 .info-area .icon-1 {max-width: 1.56rem}
.section-5 .info-area .icon-2 {max-width: 2rem}
.section-5 .info-area .icon-3 {max-width: 3.1rem}
.section-5 .info-area .tit {padding: 1rem 0;}
.section-5 .info-area .wrt {opacity: 0.7}
.section-5 .info-area .box + .box::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background: rgba(255,255,255,0.5)}

@media all and (max-width: 800px){
    .section-5 {padding-bottom: 15rem; display: none !important}
    .section-5 .title-area {margin-bottom: 5rem}
    .section-5 .info-area {flex-direction: column;}
    .section-5 .info-area .box {margin-top: 1rem; min-height: 28rem;}
    .section-5 .info-area .icon-1 {max-width: 4rem}
    .section-5 .info-area .icon-2 {max-width: 5rem}
    .section-5 .info-area .icon-3 {max-width: 5.7rem}
    .section-5 .info-area .tit {font-size: 3.4rem; padding: 1rem 0 1.5rem}
    .section-5 .info-area .wrt {font-size: 2.8rem}
    .section-5 .info-area .box + .box::before {display: none}
}


/** 메인 푸터 **/
.main-footer {}
.main-footer .footer-inner {padding: 4.2rem 0}
.main-footer .ft-cont {gap: 2rem}
.main-footer .ft-logo {max-width: 14rem; opacity: 0.3}
.main-footer .ft-area {}
.main-footer .ft-link {opacity: 0.7; padding-bottom: 1rem}
.main-footer .ft-link li + li {padding-left: 1rem; margin-left: 1rem; border-left: 2px solid #989898}
.main-footer .ft-info {padding-bottom: 0.8rem}
.main-footer .ft-info-option {opacity: 0.5;}
.main-footer .ft-info-option + .ft-info-option {padding-left: 1rem; margin-left: 1rem; border-left: 2px solid #989898}
.main-footer .ft-info-option span {margin-right: 1rem}
.main-footer .ft-info-option i {opacity: 0.7; font-style: normal;}
.main-footer .ft-copy {opacity: 0.3}

@media all and (max-width: 800px){
    .main-footer .footer-inner {padding: 5rem 0}
    .main-footer .ft-cont {flex-direction: column; align-items: center; gap: 5rem}
    .main-footer .ft-logo {max-width: 41.6rem}
    .main-footer .ft-link {flex-direction: column; font-size: 2.4rem; text-align: center; padding-bottom: 5rem}
    .main-footer .ft-link li + li {border-left: 0; padding-left: 0; margin-left: 0; margin-top: 1.5rem}
    .main-footer .ft-info {flex-wrap: wrap; font-size: 2.4rem}
    .main-footer .ft-info-option {width: 100%; text-align: center;}
    .main-footer .ft-info-option + .ft-info-option {width: 33.3%; width: 33.3%; padding-left: 0; margin-left: 0; border: 0; padding-top: 3.3rem}
    .main-footer .ft-info-option span {display: block; padding-bottom: 0.6rem;}
    .main-footer .ft-copy {font-size: 2.4rem; text-align: center; margin-top: 7rem}
}


#fp-nav.right {right: 9.5rem}
#fp-nav ul li,
.fp-slidesNav ul li {margin: 2rem 0}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {width: 1rem; height: 1rem; background: rgba(255,255,255,0.5); margin: 0; transform: translate(-50%,-50%);}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {margin: 0; width: 1.6rem; height: 1.6rem; background: transparent;}
#fp-nav ul li a.active span::before,
#fp-nav ul li:hover a.active span::before,
.fp-slidesNav ul li a.active span::before,
.fp-slidesNav ul li:hover a.active span::before {content: ''; display: block; position: absolute; width: 1.8rem; height: 1.8rem; border: 2px solid #fff; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#fp-nav ul li a.active span::after,
#fp-nav ul li:hover a.active span::after,
.fp-slidesNav ul li a.active span::after,
.fp-slidesNav ul li:hover a.active span::after {content: ''; display: block; position: absolute; width: 1rem; height: 1rem; background: #fff; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}







.