@charset "utf-8";


.mo {display: none;}

/* fullpage nav */
#fp-nav {position: fixed; top: 50%; right: 71px;}
#fp-nav li {margin-bottom: 31px;} 
#fp-nav li a {position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: all 0.4s; border: 1px solid #3473B2; margin: 0 auto;}
#fp-nav li a.active {background: #3473B2; width: 22px; height: 22px;}
#fp-nav li a.active::before {position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 50%; left: 50%; background-color: rgba(43, 110, 255, 0.34); transform: translate(-50%, -50%);}
#fp-nav li:nth-child(6) {display: none;}

.fp-viewing-FOOTER #fp-nav {display: none;}

.fullpage-wrapper {overflow: hidden;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 910px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide {overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease; transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .slide04 .backdrop {background-image: url(../images/main/m-visual04.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {max-width: 1445px !important; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container span {display: block; position: absolute; left: 15px; top: 280px; font-size: 22px; font-weight: 500; line-height: normal; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #B2E79F 0%, #3B8A28 43.45%); opacity: 0; transition: all 1.2s ease .3s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide02 .container span {-webkit-text-fill-color: #65EDFF; background-image: none;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container span {-webkit-text-fill-color: #FFD2AC; background-image: none;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container span {-webkit-text-fill-color: #fff; background-image: none;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {position: absolute; top: 320px; left: 15px; font-size: 65px; line-height: normal; color: #fff; font-weight: 700;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.45);}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 410px; left: 15px; font-size: 20px; line-height: 1.74; color: #fff; font-weight: 500; width: 100%; opacity: 0; transition: all 1.2s ease .7s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p ~ p {top: 510px; transition-delay: 1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p strong {font-size: 700;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container span {opacity: 1; top: 326px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 360px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 457px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p ~ p {top: 547px;}

.controls {position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1445px; padding: 0 15px; height: 20px; z-index: 5; transition: all .3s linear .5s;}
.controls .btn-area {width: 250px; height: 100%; display: flex; align-items: center; gap: 11px;}
.controls .btn-area .visual-pagination {width: auto; margin-right: 6px; display: flex; gap: 8px; align-items: center; position: relative; font-size: 0; bottom: 0 !important; top: 0 !important;}
.controls .btn-area .visual-pagination::after {position: absolute; content: '|'; font-size: 14px; color: #fff; font-weight: 500; left: 50%; top: 0; line-height: 1.3; transform: translateX(-50%);}
.controls .btn-area .visual-pagination > span {position: relative; padding-left: 10px; display: block; font-size: 14px; color: #B2E79F; font-weight: 600; line-height: 1.3;}
.controls .btn-area .visual-pagination > span.swiper-pagination-total {color: #fff;}
.controls .btn-area .visual-pagination > span::before {position: absolute; content: '0'; font-size: 14px; color: #B2E79F; font-weight: 600; line-height: 1.3; top: 0; left: 0;}
.controls .btn-area .visual-pagination > span.swiper-pagination-total::before {color: #fff;}

.controls .btn-area .progress-box {position: relative; width: 160px; height: 3px;}
.controls .btn-area .progress-box .autoplay-progress {position: absolute; left: 0; top: 0; width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.30); border-radius: 5px;}
.controls .btn-area .progress-box .autoplay-progress svg {--progress:0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 3px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}

.controls .btn-area .btn-controls {width: 6px; height: 9px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto;}
.controls .btn-area .btn-controls.play {background-image: url(../images/main/ico_play.png);}

.controls.s1 { top: 632px;}
.controls.s2{ top: 555px;}
.controls.s3 { top: 612px;}
.controls.s4 { top: 555px;}

.section-header span {display: block; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -.48px;}
.section-header h3 {font-size: 50px; font-weight: 700; line-height: 1.49; letter-spacing: -1px; text-align: center; margin-top: 12px;}
.section-header p {font-size: 18px; font-weight: 500; line-height: 1.77; margin-top: 12px; text-align: center;}
.section-header p > strong {font-weight: 900;}

/* sec2 */
.sec2 {width: 100%; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover;}
.sec2 .section-header {color: #fff; margin-top: 70px;}
.sec2 .section-header a {position: relative; display: block; max-width: 150px; line-height: 43px; text-align: center; border-radius: 60px; background-color: rgba(14, 77, 140, 0.80); font-size: 18px; font-weight: 600; color: #fff; margin: 30px auto 0;}
.sec2 .section-header a::after {position: absolute; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.60); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .2s linear; border-radius: 100px;}
.sec2 .section-header a:hover::after {opacity: 1;}
.sec2 .cnt {margin-top: 30px;}
.sec2 .cnt ul {position: relative; width: calc(100% - 306px); margin: 0 auto; display: flex; gap: 111px; align-items: center;}
.sec2 .cnt ul::after {position: absolute; content: ''; width: calc(100% + 306px); height: 1px; background-color: rgba(255, 255, 255, 0.50); top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sec2 .cnt ul li {position: relative; width: 1%; flex: 1 1 auto; min-height: 320px; padding: 44px 10px; transition: all .2s linear; border-radius: 10px;}
.sec2 .cnt ul li::after {position: absolute; content: ''; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.sec2 .cnt ul li .ico {max-width: 88px; width: 100%; margin: 0 auto;}
.sec2 .cnt ul li .ico img {display: block; max-width: 100%; margin: 0 auto;}
.sec2 .cnt ul li .txt {margin-top: 64px; display: flex; min-height: 77px; align-items: center; justify-content: center; flex-direction: column;}
.sec2 .cnt ul li p {font-size: 20px; font-weight: 500; line-height: 1.74; color: #fff; text-align: center;}
.sec2 .cnt ul li p ~ p {margin-top: 7px;}
.sec2 .cnt ul li:hover {background-color: rgba(14, 77, 140, 0.80);}

/* sec3 */
.sec3 {width: 100%; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover;}
.sec3 .section-header {margin-top: 70px;}
.sec3 .section-header span {color: #3473B2;}
.sec3 .section-header h3 {color: #222;}
.sec3 .section-header span ~ span {margin-top: 20px;}
.sec3 .section-header p {margin-top: 40px; color: #767676;}
.sec3 .section-header a {position: relative; display: block; max-width: 268px; width: 100%; margin: 64px auto 0; border-radius: 100px; background-color: #0E4D8C; line-height: 60px; font-size: 20px; font-weight: 700; color: #fff; font-family: 'Poppins'; text-align: center;}
.sec3 .section-header a::after {position: absolute; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); background-color: transparent; border: 2px solid #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .2s linear; border-radius: 100px;}
.sec3 .section-header a:hover::after {opacity: 1;}

/* sec4 */
.sec4 {background-color: #f2f2f2;}
.sec4 .section-header {margin-top: 110px;}
.sec4 .section-header h3 {color: #333; margin-top: 0;}
.sec4 .section-header p {color: #767676;}
.sec4 .cnt {margin-top: 124px;}
.sec4 .cnt ul {display: flex; gap: 40px; width: 100%;}
.sec4 .cnt ul li {width: 1%; flex: 1 1 auto; min-height: 390px; border-radius: 10px; overflow: hidden;}
.sec4 .cnt ul li a {position: relative; display: block; width: 100%; height:100%; display: flex; align-items: flex-end; background: url() 50% 50% no-repeat; background-size: auto; padding: 24px 47px 70px 32px; }
.sec4 .cnt ul li a::after {position: absolute; content: ''; width: 100%; height: 100%; border-radius: 10px; top: 0; left: 0; background: url(../images/main/img_over.png) 50% 50% no-repeat; background-size: auto; z-index: 0; opacity: 0; transition: all .2s linear;}
.sec4 .cnt ul li:nth-of-type(1) a {background-image: url(../images/main/img_sec401.jpg);}
.sec4 .cnt ul li:nth-of-type(2) a {background-image: url(../images/main/img_sec402.jpg);}
.sec4 .cnt ul li:nth-of-type(3) a {background-image: url(../images/main/img_sec403.jpg);}
.sec4 .cnt ul li:nth-of-type(4) a {background-image: url(../images/main/img_sec404.jpg);}
.sec4 .cnt ul li a .txt {position: relative; z-index: 2;}
.sec4 .cnt ul li a .txt h5 {font-size: 28px; font-weight: 700; line-height: 1.4; color: #fff;}
.sec4 .cnt ul li a .txt p {font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; margin-top: 7px;}
.sec4 .cnt ul li a img {display: block; max-width: 100%; position: absolute; top: 24px; right: 27px; opacity: 0; transition: all .2s linear; z-index: 2;}
.sec4 .cnt ul li a:hover img {opacity: 1;}
.sec4 .cnt ul li a:hover::after {opacity: 1;}

/* sec5 */
.sec5 .section-header {margin-top: 30px;}
.sec5 .section-header h3 {color: #333; margin-top: 0;}
.sec5 .section-header p {color: #767676;}
.sec5 .flow-wrap {margin-top: 20px; max-width: 1800px; width: 100%; white-space: nowrap; margin-left: auto; border-radius: 110px 0 0 110px; overflow: hidden; background-color: #f2f2f2; margin-bottom: 130px;}
.sec5 .flow-wrap ~ .flow-wrap {margin-bottom: 0px;}
.sec5 .flow-wrap .flow {display: flex; animation: scroll-left 40s linear infinite; width: max-content;}
.sec5 .flow-wrap .flow a {display: inline-block; margin-right: 40px; max-width: 240px; width: 100%; white-space:nowrap;}
.sec5 .flow-wrap .flow a img {display: block; max-width: 100%; margin: 0 auto;}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes text-up {
	0% {transform: translateY(-50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-down {
	0% {transform: translateY(50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-right {
	0% {transform: translateX(-50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes text-left {
	0% {transform: translateX(50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

.sec2.on .section-header {animation:text-down 1.2s both .3s}
.sec2.on .cnt ul li:nth-of-type(1) {animation:text-down 1.2s both .5s}
.sec2.on .cnt ul li:nth-of-type(2) {animation:text-down 1.2s both .8s}
.sec2.on .cnt ul li:nth-of-type(3) {animation:text-down 1.2s both 1.1s}
.sec2.on .cnt ul li:nth-of-type(4) {animation:text-down 1.2s both 1.4s}
.sec2.on .cnt ul li:nth-of-type(5) {animation:text-down 1.2s both 1.7s}

.sec3.on .section-header {animation:text-down 1.2s both .5s}
.sec4.on .section-header {animation:text-down 1.2s both .3s}
.sec4.on .cnt ul li:nth-of-type(1) {animation:text-down 1.2s both .5s}
.sec4.on .cnt ul li:nth-of-type(2) {animation:text-down 1.2s both .8s}
.sec4.on .cnt ul li:nth-of-type(3) {animation:text-down 1.2s both 1.1s}
.sec4.on .cnt ul li:nth-of-type(4) {animation:text-down 1.2s both 1.4s}

.sec5.on .section-header {animation:text-down 1.2s both .3s}
.sec5.on .section-header.ty2 {animation:text-down 1.2s both 1.1s}
.sec5.on .flow-wrap {animation:text-down 1.2s both .8s}
.sec5.on .flow-wrap.ty2 {animation:text-down 1.2s both 1.4s}