#fp-nav { position: absolute; top:50%; left: 50%; transform: translateY(-50%); margin-left: -700px; margin-top: 0 !important; }
#fp-nav ul { display: flex; align-items: center; flex-direction: column; }
#fp-nav ul li { position: relative; }
#fp-nav ul li+li {margin-top: 20px;}
#fp-nav ul li a { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }
#fp-nav ul li a span{ width: 8px; height: 8px; border-radius: 8px; display: block; background-color: rgba(0, 0, 0, 0.25); }
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{ width: 24px; height: 24px; border-radius: 24px; background: url(../images/main/navi_on.png) center center no-repeat #003676; }

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top:-50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
    color: #000;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; left:24px;}
.fp-section:not(#footer) {position: relative;overflow: hidden;}
.fp-section .fp-tableCell { padding-top: 172px;  }
.fp-section .inner { width: 1280px; margin: 0 auto; }
.section .inner { width: 1280px; margin: 0 auto; }
.fp-section .bg { width: 100%; height: 100%; }

.inner h2 { font-size: 48px; font-weight: bold; color: #1d1d1d; line-height: 1.3; }

.move, .link.move {
    overflow: hidden;
}

.move:after, .link.move:after {
    transition: all 1s ease-out;
    transform: translateX(-500%);
}

.movewrap:hover {
    box-shadow: -8px 8px 20px 0 rgba(0, 0, 0, 0.3);
}

.movewrap:hover .move:after, .movewrap:hover .link.move:after {
    transform: translateX(0);
}


#section0 {background-color: rgba(109, 152, 201, 0.1); }

#section0 .inner {padding-top: 60px; position: relative; }
#section0 .inner .main_roll { width: 816px; height: 436px; margin-top: 60px; position: relative; overflow: hidden; }
#section0 .inner .main_roll .swiper-wrapper { width: 100%;  height: 376px;}
#section0 .inner .main_roll .swiper-wrapper img { width: 100%; }
#section0 .inner .main_bn_slide_control { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
#section0 .inner .main_bn_slide_control > button { width: 40px; height: 40px; border-radius: 40px; border: solid 1px #e4e4e4; background-color: #fff !important; overflow: hidden; text-indent: -300%; }
#section0 .inner .main_bn_slide_control .play { background: url(../images/main/icon_play.png) center center no-repeat; }
#section0 .inner .main_bn_slide_control .pause { background: url(../images/main/icon_pause.png) center center no-repeat; }
#section0 .inner .main_bn_slide_control .main_prev { background: url(../images/main/icon_prev.png) center center no-repeat; }
#section0 .inner .main_bn_slide_control .main_next { background: url(../images/main/icon_next.png) center center no-repeat; }
#section0 .inner .main-login { width: 400px; height: 561px; position: absolute; top: 60px; right: 0; padding: 56px 40px 0; border-radius: 20px; background: rgba(109, 152, 201, 0.2); }
#section0 .inner .main-login:before { width: 287px; height: 287px; display: block; position: absolute; right: -128px; bottom: -97px; background: url(../images/main/img-tube.png); background-size: 100% 100%; z-index: -1; content: ""; }
#section0 .inner .main-login .tttext { font-size: 27px; font-weight: bold; color: #1d1d1d; line-height: 1; display: block; }
#section0 .inner .main-login .tttext + .login_wrap {margin-top: 32px;}
#section0 .inner .main-login .ttsub { width: 100%; display: block; padding-bottom: 32px; margin-top: 24px; border-bottom: solid 1px #717171; font-size: 19px; color: #555; line-height: 1; }
#section0 .inner .login_wrap li { width: 100%; }
#section0 .inner .login_wrap li label { font-size: 17px; color: #000; line-height: 1;}
#section0 .inner .login_wrap li label+input { width: 100%; height: 56px; margin-top: 10px; border-radius: 8px; padding: 0 16px; line-height: 54px;border: solid 1px #717171; background: #fff; }
#section0 .inner .login_wrap li+li { margin-top: 16px; }
.checkboxwrap { margin-top: 16px; }
.checkboxwrap label { display: flex; align-items: center; font-size: 18px; gap: 8px; }  
.checkboxwrap input { -webkit-appearance: auto; }
#section0 .inner .btn-login { width: 100%; height: 56px; margin-top: 22px; border-radius: 8px;background: #005de9; line-height: 56px; text-align: center; font-size: 19px; color: #fff; z-index: 9; }
#section0 .inner .btn-login.st2 { margin-top: 15px; background: #507ab8; }
#section0 .inner .id_mail + .btn-login { margin-top: 50px; }
#section0 .inner .btn-logout { width: 100%; height: 56px; margin-top: 24px; border-radius: 8px;background-color: rgba(109, 152, 201, 0.2); line-height: 56px; text-align: center; font-size: 19px; color: #2a5c96; z-index: 9; }
#section0 .inner .sub_txt { font-size: 25px; font-weight: bold; color: #1d1d1d; line-height: 1; margin-top: 49px; }
#section0 .inner .sub_txt b { color: #005de9;}
#section0 .inner .id_mail { display: block; margin-top: 14px; font-size: 16px; color: #555; }
#section0 .inner .btn_idpw { display: flex; justify-content:space-between; align-items: center; margin-top: 25px; gap: 21px; position: relative; }
#section0 .inner .btn_idpw li a,
#section0 .inner .btn_idpw li button { font-size: 17px; color: #1d1d1d; }
#section0 .inner .btn_idpw li+li::before { width: 1px; height: 18px; display: block; position: absolute; top:50%; left: 50%; transform: translateY(-50%); background: #8e8e8e; content: ""; }
#section0 .inner .btn_idpw .enroll { display: flex; align-items: center; gap: 6px; }
#section0 .inner .btn_idpw .enroll::after { width: 16px; height: 16px; background: url(../images/main/icon-link.png); background-size: 16px 16px; content: ""; }
#section0 .inner .icon-sd { position: absolute; bottom: 40px; left: 50%; margin-left: -745px; font-size: 17px; color: #c6c6c6; display: flex; gap: 11px; transform: rotate(90deg); transform-origin: left, top; -ms-transform: rotate(90deg); -ms-transform-origin:left, top; -webkit-transform: rotate(90deg); -webkit-transform-origin:left, top; animation: bounce 3s infinite;}
#section0 .inner .icon-sd::after { width: 14px; height: 21px; background: url(../images/main/icon_sdmove.png); content: ""; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }
@keyframes bounce {
    0% {
        transform: translateY(0) rotate(90deg);
    }
    30% {
        transform: translateY(10px) rotate(90deg);
    }
    50% {
        transform: translateY(0) rotate(90deg);
    }
    70% {
        transform: translateY(15px) rotate(90deg);
    }
    100% {
        transform: translateY(0) rotate(90deg);
    }
}
#section1 .fp-tableCell {position: relative;}
#section1 .inner {padding-top: 60px; position: relative; }
#section1 .inner .text1 { display: inline-block; margin-top: 20px; font-size: 25px; font-weight: 500; color: #2d2d2d; }
#section1 .inner .text2 { display: block; margin-top: 15px; font-size: 19px; color: #2d2d2d;}
#section1 .inner .img { width: 100%; margin-top: 40px; }
#section1 .inner .img img { width: 100%; }
#section1 .circle1 { width: 399px; height: 399px; position: absolute; top:-68px; left: 50%; margin-left: 38px; border-radius: 399px; background: #ffb724; opacity: .2; }
#section1 .circle1:after { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 200px; background: #fff; content: ""; }
#section1 .circle2 { width: 502px; height: 502px; position: absolute; bottom:-200px; left: -132px; border-radius: 502px; background: #e2d3fa; opacity: .3; }
#section1 .circle2:after { width: 251px; height: 251px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 251px; background: #fff; content: ""; }
#section1 .circle3 { width: 256px; height: 256px; position: absolute; bottom:306px; right: -96px; border-radius: 256px; background: #e2d3fa; opacity: .4; }
#section1 .circle3:after { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 128px; background: #fff; content: ""; }

#section2 { background: #f7f7fa; }
#section2 .inner {padding-top: 40px; position: relative; }
#section2 .inner h3 { font-size: 32px; font-weight: bold; color: #1d1d1d; }
#section2 .inner .text1 { display: inline-block; margin-top: 16px; font-size: 25px; font-weight: 500; color: #2d2d2d; }
#section2 .inner .main_content_info { display: flex; justify-content: space-between; margin-top: 16px; }
#section2 .inner .main_content_info > li { width: calc((100% - 48px) / 3); height: auto; padding: 32px; border-radius: 12px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); background: #fff; border: #fff solid 1px; }
#section2 .inner .main_content_info > li:hover { border: solid 1px #652c86; }
#section2 .inner .main_content_info > li h4 { font-size: 25px; font-weight: 500; color: #1d1d1d; }
#section2 .inner .main_content_info > li:hover h4 { font-weight: bold; color: #652c86; }
#section2 .inner .main_content_info > li:hover { border: solid 1px #652c86; }
#section2 .inner .main_content_info > li .infobox { width: 100%; margin-top: 20px; padding: 20px; border-radius: 10px; background: #f7f7fa;}
#section2 .inner .main_content_info > li .line { width: 100%; display: flex; justify-content: space-between; }
#section2 .inner .main_content_info > li .icon { justify-content: flex-end; }
#section2 .inner .main_content_info > li .icon .icontext { height: 26px; display: inline-block; line-height: 24px; padding: 0 8px; border-radius: 4px; border: solid 1px #d8d8d8; background-color: #fff; white-space: nowrap; color: #555;  font-size: 14px; font-weight: 500; }
#section2 .inner .main_content_info > li .line + .line { margin-top: 16px; }
#section2 .inner .main_content_info > li .line .info1 { font-size: 15px; color: #555; }
#section2 .inner .main_content_info > li .line .info2 { font-size: 15px; color: #2d2d2d; font-weight: 500; }
#section2 .inner .main_content_info > li .info_ck { margin-top: 20px; padding-left: 12px; }
#section2 .inner .main_content_info > li .info_ck > li { width: 100%; padding-left: 28px; position: relative; color: #2d2d2d; }
#section2 .inner .main_content_info > li .info_ck > li:before { width: 20px; height: 21px; position: absolute; top:0; left: 0; background:url(../images/main/icon_ck.png); background-size: 100% 100%; content: ""; }
#section2 .inner .main_content_info > li .info_ck > li > p { font-size: 15px; color: #2d2d2d; line-height: 1.5; }
#section2 .inner .main_content_info > li .text_date { width: 100%; margin-top: 20px; display: block; text-align: right; line-height: 1; font-size: 17px; color: #652c86; font-weight: 500; }
#section2 .inner .main_content_info > li .dl { width: 100%; margin-top: 25px; }
#section2 .inner .main_content_info > li .dl dt { width: 100%; height: 27px; line-height: 27px; text-align: center; background-image: linear-gradient(to right, #b332b2 0%, #4a13a3 100%); font-size: 15px; font-weight: bold; color: #fff; border-radius: 10px 10px 0 0; }
#section2 .inner .main_content_info > li .dl dd { width: 100%; height: 47px; line-height: 47px; text-align: center; background: #f7f7fa; font-size: 25px; font-weight: bold; color: #652c86; border-radius: 0 0 10px 10px; }

#section3 .inner {padding-top: 35px; position: relative; }
#section3 .inner h3 { font-size: 32px; font-weight: bold; color: #1d1d1d; }
#section3 .inner .h3div { display: flex; justify-content: space-between; align-items: center; }
#section3 .inner .h3div .more { display: flex; align-items: center; font-size: 17px; color: #1d1d1d; line-height: 1; }
#section3 .inner .h3div .more::after { width: 24px; height: 24px; margin-left: 8px; background: url(../images/main/icon_more.png); background-size: 24px 24px; content: ""; transition: all .5s ease-out; }
#section3 .inner .h3div .more:hover:after { transform: rotate(90deg); }
#section3 .inner .tab { display: flex; gap: 8px; margin-top: 30px; }
#section3 .inner .tab li a { height: 48px; display: block; padding: 0 13px; font-size: 19px; font-weight: bold; color: #555; line-height: 48px; }
#section3 .inner .tab li.on a,
#section3 .inner .tab li a:hover { border-radius: 8px; background: #003676; color: #f2f2f2; }
#section3 .inner .board { width: 100%; margin-top: 24px; padding: 32px; border-radius: 12px; border: solid 1px #d8d8d8; }
#section3 .inner .board li { position: relative; display: flex; align-items: center; gap:16px; }
#section3 .inner .board li .cate { height: 24px; line-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 15px; }
#section3 .inner .board li .cate1 { background: #eef7f0; color: #006e18; }
#section3 .inner .board li .cate2 { background: #eff5ff; color: #1d56bc; }
#section3 .inner .board li .text { font-size: 17px; color: #1d1d1d; line-height: 1; }
#section3 .inner .board li .text:hover { text-decoration: underline; }
#section3 .inner .board li .date { position: absolute; top:50%; right: 0; transform: translateY(-50%); font-size: 17px; color: #555; line-height: 1; }
#section3 .inner .board li + li { margin-top: 20px; }
#section3 .inner .card { width: 100%; margin-top: 24px; display: flex; justify-content: space-between; }
#section3 .inner .card li { width: calc((100% - 72px) / 4); height: 244px; padding: 40px 0 0 30px; position: relative; border-radius: 12px; }
#section3 .inner .card li:before { position: absolute; right: 20px; bottom: 20px; content: ""; }
#section3 .inner .card li .subtt { font-size: 15px; font-weight: bold; color: #1d1d1d; line-height: 1; }
#section3 .inner .card li.card1,
#section3 .inner .card li.card1 .more span { cursor: pointer; background: #e5e2ef; }
#section3 .inner .card li.card2,
#section3 .inner .card li.card2 .more span { cursor: pointer; background: #dfe8f4; }
#section3 .inner .card li.card3,
#section3 .inner .card li.card3 .more span { cursor: pointer; background: #cee7e5; }
#section3 .inner .card li.card4,
#section3 .inner .card li.card4 .more span { background: #e7d8ce; }
#section3 .inner .card li .text { display: block; font-size: 32px; font-weight: bold; color: #1d1d1d; line-height: 1; margin-top: 24px; }
#section3 .inner .card li .more { display: flex; align-items: center; gap: 6px; margin-top: 24px; }
#section3 .inner .card li .more span { font-size: 17px; color: #1d1d1d; line-height: 1; z-index: 99; }
#section3 .inner .card li .more::after { width: 16px; height: 16px; transform: translateX(-200%); background: url(../images/main/icon_more2.png); content: ""; z-index: 98; transition: all .4s ease-out; }
#section3 .inner .card li .more:hover:after { transform: translateX(0); }
#section3 .inner .card li.card1:before { width: 117px; height: 92px; background: url(../images/main/img-card1.png); background-size: 100%; }
#section3 .inner .card li.card2:before { width: 100px; height: 110px; background: url(../images/main/img-card2.png); background-size: 100%; }
#section3 .inner .card li.card3:before { width: 120px; height: 111px; background: url(../images/main/img-card3.png); background-size: 100%; }
#section3 .inner .card li.card4:before { width: 109px; height: 97px; background: url(../images/main/img-card4.png); background-size: 100%; }

#section4 .inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 80px; }
#section4 .inner h3 { font-size: 32px; font-weight: bold; color: #1d1d1d; }
#section4 .inner .list { width: 100%; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 30px; }
#section4 .inner .list li { width: calc((100% - (30px * 5)) / 6); height: 62px; border-radius: 12px; border: solid 1px #d8d8d8; }
#section4 .inner .list li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
#section4 .inner .list li a .hover_text {display:none;}
#section4 .inner .list li a:hover .hover_text {width: 100%;height: 100%;position:absolute;top:0;left:0;display: flex;justify-content: center; align-items: center;border-radius: 12px; color:#fff; font-size:16px;font-weight:bold;background:rgba(0,0,0,0.6);}

.swiper {width: 100%; height: 100%;}
.swiper-slide {text-align: center;font-size: 18px;display: flex;justify-content: center;align-items: center;}
.swiper-slide a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.swiper-slide img {max-width: 98%;height: auto;display: block;}

.fp_navi { position: absolute; top: 50%; left: 50%; margin-left: -700px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.fp_navi .home { width: 20px; height: 20px; margin-bottom: 16px; background: url(../images/main/icon_navi.png); cursor: pointer; }
.fp_navi .page-num { font-size: 17px; font-weight: 500; color: #1d1d1d; line-height: 1; }
.fp_navi .page-total-num { font-size: 17px; font-weight: 500; color: #c6c6c6; line-height: 1; }
.fp_navi .line { width: 1px; height: 60px; display: block; position: relative; background: #c6c6c6; margin: 16px 0; }
.fp_navi .line::before { width: 1px; position: absolute; top:0; left: 0; background: #1d1d1d; content: ""; transition: all .3s ease-out; }
.fp_navi .line01::before { height: 20%; }
.fp_navi .line02::before { height: 40%; }
.fp_navi .line03::before { height: 60%; }
.fp_navi .line04::before { height: 80%; }
.fp_navi .line05::before { height: 100%; }