@charset "utf-8";

.mo {display: none;}
.main {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 .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.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 .swiper-slide-active .backdrop {transform: scale(1.08);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {position: absolute; top: 320px; left: 15px; font-size: 50px; line-height: 1.4; color: #fff; font-weight: 700;  width: 100%; opacity: 0; transition: all 1.2s ease .3s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 480px; left: 15px; font-size: 22px; line-height: 1.6; color: #fff; font-weight: 400; width: 100%; opacity: 0; transition: all 1.2s ease .6s;}
.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: 525px; opacity: 1;}

.controls {position: absolute; bottom: 233px; left: 50%; transform: translateX(-50%); width: 100%; height: 24px; z-index: 5; max-width: 1420px; padding: 0 15px;}
.controls .btn-area {width: 144px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px;}
.controls .btn-area .visual-pagination {width: 80px;}
.swiper-pagination-bullets {align-items: center; display: flex; justify-content: space-between;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {width: 12px; height: 12px; border-radius: 0; background-color: rgba(4,4,4, .5); opacity: 1; margin: 0; transition: all .2s linear;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 16px; height: 16px; background-color: #F5CD1D;}
.controls .btn-area .btn-controls {width: 24px; height: 24px; 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);}


/* sec2 */
.sec2 {padding: 120px 0 180px;}
.sec2 .section-header {text-align: center;}
.sec2 .section-header p {font-size: 24px; font-weight: 700; color: #84c03a; line-height: 1.4;}
.sec2 .section-header h3 {font-size: 40px; color: #222; font-weight: 700; line-height: 1.3; margin-top: 6px;}
.sec2 .research {margin-top: 70px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.sec2 .research .inner {display: flex; width: 100%;}
.sec2 .research .inner a {display: block; width: 100%; padding: 50px 54px 54px;}
.sec2 .research .inner a ~ a {border-left: 1px solid #ccc;}
.sec2 .research .inner a:nth-of-type(1) {padding-left: 0;}
.sec2 .research .inner a:nth-of-type(3) {padding-right: 0;}
.sec2 .research .inner a h5 {position: relative; font-size: 32px; font-weight: 700; line-height: 1.4; color: #222; transition: all .2s linear;  display: inline-block;}
.sec2 .research .inner a h5::after {position: absolute; content: ''; width: 0%; bottom: 0; left: 0; height: 3px; background: linear-gradient(120deg, #84C03A 22.57%, #139D85 67.83%); transition: all .3s linear;}
.sec2 .research .inner a:hover h5 {background: linear-gradient(120deg, #84C03A 22.57%, #139D85 67.83%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sec2 .research .inner a:hover h5::after {width: 100%;}
.sec2 .research .inner a p {font-size: 22px; font-weight: 400; color: #666; line-height: 1.6; margin-top: 12px;}
.sec2 .research .inner a .img-box {padding-top: 52px; position: relative;}
.sec2 .research .inner a .img-box::after {position: absolute; content: ''; width: 40px; height: 40px; background: url(../images/main/ico_arrow.png) 50% 50% no-repeat; background-size: auto; top: 0; right: 0; opacity: 0; transition: all .2s linear;}
.sec2 .research .inner a .img-box img {display: block; max-width: 100%; margin: 0 auto;}
.sec2 .research .inner a:hover .img-box::after {opacity: 1;}

/* sec3 */
.sec3 {padding-bottom: 200px;}
.sec3 .inner {display: flex; width: 100%; gap: 54px; align-items: flex-start}
.sec3 .inner .board-box {width: 1%; flex:  1 1 auto; display: flex; gap: 54px;}
.sec3 .inner .board-box .board {width: 1%; flex: 0 0 calc(50% - 27px); border-top: 1px solid #ccc; padding-top: 36px;}
.sec3 .inner .board-box .board h5 {font-size: 36px; font-weight: 700; line-height: 1.4; color: #222; display: flex; align-items: center; justify-content: space-between;}
.sec3 .inner .board-box .board h5 > a {display: block; width: 32px; height: 32px;}
.sec3 .inner .board-box .board h5 > a img {display: block; max-width: 100%; margin: 0 auto; transition: all .2s linear;}
.sec3 .inner .board-box .board h5 > a:hover img {transform: rotate(90deg);}
.sec3 .inner .board-box .board ul {margin-top: 40px; width: 100%;}
.sec3 .inner .board-box .board ul li {width: 100%;}
.sec3 .inner .board-box .board ul li ~ li {margin-top: 16px;}
.sec3 .inner .board-box .board ul li a {display: block; width: 100%;}
.sec3 .inner .board-box .board ul li a p {font-size: 22px; color: #000; line-height: 1.6; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 70px; transition: all .2s linear;}
.sec3 .inner .board-box .board ul li a:hover p {background-color: #84c03a; color: #fff; font-weight: 700;}
.sec3 .inner .board-box .board ul li a span {font-size: 18px; color: #999; line-height: 1.6; margin-top: 1px;}
.sec3 .inner .contact {max-width: 372px; width: 100%; background: url(../images/main/img_04.jpg) 50% 50% no-repeat; background-size: cover; padding: 86px 44px 70px; text-align: center;}
.sec3 .inner .contact > h5 {font-size: 32px; font-weight: 700; line-height: 1.4; color: #222;}
.sec3 .inner .contact > h5 > span {color: #497c0b;}
.sec3 .inner .contact > p {font-size: 22px; font-weight: 400; line-height: 1.6; color: #666; margin-top: 20px;}
.sec3 .inner .contact > a {display: block; max-width: 145px; line-height: 48px; border-radius: 50px; font-size: 22px; color: #fff; font-weight: 700; text-align: center; background-color: #84C03A; margin: 45px auto 0; transition: all .2s linear; border: 1px solid #84c03a;}
.sec3 .inner .contact > a:hover {background-color: #fff; color: #84C03A;}