@charset "utf-8";

.main-visual {position: relative; width: 100%;}
.main-visual .item {position: relative; width: 100%; height: 100vh;}
.main-visual .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.1); z-index: 1;}
.main-visual .item:nth-child(1) .img-box {background-image: url('../img/main/main-visual01.jpg');}
.main-visual .item:nth-child(2) .img-box {background-image: url('../img/main/main-visual02.jpg');}
.main-visual .item:nth-child(3) .img-box {background-image: url('../img/main/main-visual03.jpg');}
.main-visual .item.slick-active .img-box {transform: scale(1); transition: all 3.5s;}
.main-visual .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1550px; width: 100%; padding: 0 15px; z-index: 5;}
.main-visual .text-box .inner {position: relative; max-width: 1060px; margin: 0 auto;}
.main-visual .text-box .inner:before {position: absolute; top: -138px; right: -55px; content: ''; width: 226px; height: 361px; background: url('../img/main/main-visual-deco.png') no-repeat center center;}
.main-visual .text-box h2 {font-family: "Noto Serif KR", serif; font-size: 40px; font-weight: 700; line-height: 1.4em; color: #fff; text-align: center; margin-bottom: 26px;}
.main-visual .text-box p {font-size: 20px; font-weight: 400; line-height: 1.7em; color: #fff; text-align: center;}
.main-visual .slick-active .text-box h2 {animation: text-up 1.4s both 0.5s;}
.main-visual .slick-active .text-box p {animation: text-up 1.4s both 0.3s;}
@keyframes text-up {
    0% {
        filter: blur(5px);
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}
.main-visual .controler {position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 40px;}
.main-visual .controler .paging ul {display: flex; align-items: center; gap: 20px;}
.main-visual .controler .paging ul li button {display: block; width: 12px; height: 12px; background: rgba(4, 4, 4, 0.50); font-size: 0; border: 0; transition: all 0.5s;}
.main-visual .controler .paging ul li.slick-active button {width: 16px; height: 16px; background: #42B59D;}
.main-visual .controler .btn-wrap button {display: block; width: 24px; height: 24px; background-color: rgba(0, 0, 0, 0.50); background-repeat: no-repeat; background-position: center center; border-radius: 50%; font-size: 0; border: 0;}
.main-visual .controler .btn-wrap .btn-stop {background-image: url('../img/main/btn-main-slide-stop.png');}
.main-visual .controler .btn-wrap .btn-play {background-image: url('../img/main/btn-main-slide-play.png');}

.m-section01 {overflow: hidden;}
.m-section01 .intro {position: relative; padding: 100px 0 0 0; text-align: center; margin-bottom: 260px;} 
.m-section01 .intro .vertical-line {display: block; width: 1px; height: 90px; background: #42B59D; margin: 0 auto 40px;}
.m-section01 .intro .text-box {position: relative; display: flex; flex-direction: column; gap: 40px; overflow: hidden; padding-bottom: 77px;}
.m-section01 .intro .text-box:before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; width: 304px; height: 304px; background: url('../img/main/section01-bg.png') no-repeat center bottom;}
/* .m-section01 .intro .backdrop {position: absolute; top: 0; left: 0; z-index: 3;  width: 100%; height: 700px; background: #FFF; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%); transition: all 3s;} */
/* .m-section01 .intro .backdrop.is-animate {top: 150%; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 100%);} */
.m-section01 .intro .sub-title {position: relative; z-index: 5; /* letter-spacing: 1.5em; */ font-size: 24px; font-weight: 700; line-height: 1.8em; color: #42B59D;}
.m-section01 .intro .section-title {position: relative; z-index: 5;}
.m-section01 .intro .section-desc {position: relative; z-index: 1;}
.section-title {font-family: "Noto Serif KR", serif; font-size: 50px; font-weight: 700; line-height: 1.4em; color: #222;}
.section-desc {font-size: 24px; line-height: 1.8em; color: #444;}
/* .splitting .char {display: inline-block; opacity: 0;} */
/* .m-section01 .intro .section-title.is-animate .char {animation: slide-in 0.5s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(60ms * var(--char-index));} */

@keyframes slide-in {
	from {
		transform: translateY(-0.4em);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.m-section01 .center {padding: 0 0 216px 0;}
#main .m-section01 .center .container {max-width: 1420px;}
.m-section01 .center .wrap {display: flex; justify-content: space-between; gap: 30px;}
.m-section01 .center .item {display: flex; flex-direction: column; max-width: 560px; width: 100%;}
.m-section01 .center .title {margin-bottom: 40px; transition: all 1.2s;}
.m-section01 .center .title h4 {font-family: "Noto Serif KR", serif; font-size: 46px; font-weight: 700; line-height: 1.4em; color: #185B4D; margin-bottom: 10px;}
.m-section01 .center .title p {font-size: 28px; font-weight: 600; line-height: 1.8em; color: #666; }

.m-section01 .center .card-wrap {flex: 1; display: flex;}
.m-section01 .center a {position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 72px 50px 50px; border-radius: 30px; background: #fff; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.30); transition: all 0.6s; overflow: hidden;}
.m-section01 .center a:after {position: absolute; top: 40px; right: 40px; content: ''; width: 78px; height: 125px; background: url('../img/main/section01-logo.png') no-repeat center center; transition: all 0.6s;} 
.m-section01 .center .text-box {display: flex; flex-direction: column; justify-content: flex-end; gap: 30px;}
.m-section01 .center .text-box p {font-size: 24px; line-height: 1.8em; color: #444; padding-right: 70px; transition: all 0.8s;}
.m-section01 .center .btn-more {position: relative; transition: all 0.6s;}
.m-section01 .center .btn-more:after {z-index: 10; position: absolute; top: 0; left: 0; content: ''; width: 66px; height: 66px; background: url('../img/main/btn-more03-green.png') no-repeat center center; transition: all 0.6s;}
.m-section01 .center a:hover {background: #005846;}
.m-section01 .center a:hover:after {background-image: url('../img/main/section01-logo-active.png');}
.m-section01 .center a:hover .text-box p {color: #fff;}
.m-section01 .center a:hover .btn-more {filter: brightness(0) invert(1);}
.m-section01 .center a:hover .btn-more:after {background-image: url('../img/main/btn-more03.png'); transform: rotate(45deg) translate(1px,-1px); transition-delay: 0.2s;}

.m-section01 .text-ani {position: relative; z-index: -1; transform: translateY(36px);}
.m-section01 .text-ani p {font-family: "Roboto", sans-serif; font-size: 180px; font-weight: 700; line-height: 1em; color: #EAEAEA;}
.m-section01 .text-ani p:nth-child(1) {width: 2200px;}
.m-section01 .text-ani p:nth-child(2) {width: 1905px; margin-top: -30px;}

.m-section02 {background: url('../img/main/section02-bg.jpg') no-repeat center center/cover; padding: 200px 0;}
#main .m-section02 .container {max-width: 1610px;}
.m-section02 .wrap {display: flex; align-items: flex-start; gap: 150px;}
.m-section02 .title-box {position: sticky; top: 200px; max-width: 575px; width: 100%; padding-left: 100px;}
.tab-menu {margin-bottom: 30px;}
.tab-menu ul {display: flex; align-items: center; margin: 0 -20px;}
.tab-menu ul li {position: relative; padding: 0 20px;}
.tab-menu ul li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 20px; background: #666;}
.tab-menu ul li:last-child:after {display: none;}
.tab-menu ul li a {position: relative; font-family: "Noto Serif KR", serif; font-size: 26px; font-weight: 700; line-height: 1.4em; color: #999; transition: all 0.6s;}
.tab-menu ul li a:hover {color: #5EE8CB;}
.tab-menu ul li.active a {color: #5EE8CB; padding-right: 17px;}
.tab-menu ul li a:after {opacity: 0; position: absolute; top: 0; right: 0; content: ''; width: 10px; height: 10px; background: #42B59D; border-radius: 50%; transition: all 0.6s;}
.tab-menu ul li.active a:after {opacity: 1;}
.m-section02 .title {transition: all 0.5s;}
.m-section02 .section-title {color: #fff; margin-bottom: 20px;}
.m-section02 .section-desc {color: #f8f8f8; margin-bottom: 50px;} 
.m-section02 .btn-more a {display: flex; align-items: center; gap: 16px; font-size: 22px; font-weight: 700; line-height: 1.8em; color: #fff;}
.m-section02 .btn-more .arrow {width: 56px; height: 56px; background: url('../img/main/btn-more-circle-white.png') no-repeat center center; transition: all 0.5s;}
.m-section02 .btn-more a:hover .arrow {background-image: url('../img/main/btn-more-circle-active.png');}
.m-section02 .content-box {width: 1%; flex: 1 1 auto;}
.m-section02 .slide-items {display: flex; flex-wrap: wrap; gap: 40px;}
.m-section02 .slide-item {width: calc(50% - 20px);}
.m-section02 .slide-item:nth-child(even) {transform: translateY(180px);}

.m-section02 .slide-item a {padding: 30px 30px 50px 30px; background: #FCFCFC; border-radius: 20px; box-shadow: 5px 10px 40px 0 rgba(0, 0, 0, 0.16); transition: all 0.6s;}
.m-section02 .content-box .img-box {margin-bottom: 16px;}
.m-section02 .content-box .img-box .pic {position:relative; height:0; padding-bottom:85.43%; overflow:hidden; transition:all 0.6s;}
.m-section02 .content-box .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.6s;}
.m-section02 .content-box .text-box p {font-size: 24px; font-weight: 700; line-height: 1.5em; color: #222; height:calc(1.5em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition: all 0.5s;} 
.m-section02 .slide-item a:hover {background: #42B59D;}
.m-section02 .content-box a:hover .text-box p {color: #fff;}
.m-section02 .slick-dots {display: flex; justify-content: center; margin-top: 10px; gap: 10px;}
.m-section02 .slick-dots li button {display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); font-size: 0; border: 0; transition: all 0.5s;}
.m-section02 .slick-dots .slick-active button {background: #42B59D;}

.m-section03 {padding-top: 220px; overflow: hidden;}
.m-section03 .title-box {text-align: center; margin-bottom: 130px;}
.m-section03 .title-box .section-title {margin-bottom: 30px;}
.m-section03 .slick-list {overflow: visible;}
.m-section03 .item {position: relative; max-width: 408px; width: 100%; padding:0 20px;}
.m-section03 .inner {position: relative; padding-top: 96px; transition: all 0.6s;}
.m-section03 .inner:hover {padding-top: 0; padding-bottom: 96px;} 
.m-section03 .inner:before {position: absolute; top: -90px; left: 50%; content: ''; width: 1px; height: 0; background: #42B59D; transition: all 0.6s;}
.m-section03 .inner:hover:before {height: 90px;}
.m-section03 .item .img-box {position: relative; border-radius: 30px; overflow: hidden; z-index:2; transition: all 0.6s;}
.m-section03 .item .img-box:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 88, 70, 0.40) 0%, rgba(0, 88, 70, 0.40) 100%); box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.30); transition: all 0.6s;}
.m-section03 .item .img-box:after {opacity: 0; position: absolute; bottom: 0; right: 20px; content: ''; width: 55px; height: 87px; background: url('../img/main/section03-logo.png') no-repeat right bottom; transition: all 0.6s;}
.m-section03 .item .img-box img {width: 100%;}
.m-section03 .item .text {position: absolute; top: 80%; left: 50%; transform: translateX(-50%); transition: all 0.5s;}
.m-section03 .item .text p {font-family: "Noto Serif KR", serif; font-size: 32px; font-weight: 700; line-height: 1.4em; color: #fff; text-align: center; transition: all 0.6s;}
.m-section03 .btn-box {position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; z-index: 1; opacity: 0; transition: all 0.6s;}
.m-section03 .btn-inquiry {position: relative; display: block; align-content: center; width: 274px; height: 66px; font-family: "Noto Serif KR", serif; font-size: 22px; font-weight: 700; line-height: 1.4em; color: #fff; text-align: center; padding-right: 34px; background: #42B59D; border: 2px solid #42B59D; border-radius: 33px; margin: 30px auto 0; transition: all 0.5s;}
.m-section03 .btn-inquiry:hover {background: #fff; color: #42B59D;}
.m-section03 .btn-inquiry:after {position: absolute; top: 50%; right: 49px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../img/main/btn-more02.png') no-repeat center center; transition: all 0.5s;}
.m-section03 .btn-inquiry:hover:after {background-image: url('../img/main/btn-more02-green.png');}
.m-section03 .inner:hover .img-box {box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.30);}
.m-section03 .inner:hover .img-box:before {opacity: 1;}
.m-section03 .inner:hover .img-box:after {opacity: 1;}
.m-section03 .inner:hover .text {top: 50%; transform: translate(-50%,-50%); transition-delay: 0.1s;}
.m-section03 .inner:hover .text p {font-size: 38px;}
.m-section03 .inner:hover .btn-box {opacity: 1; transition-delay: 0.5s;}
/* .m-section03 .section-title.is-animate .char {animation: slide-in 0.5s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(60ms * var(--char-index));} */

/* .m-section03 .section-desc {opacity: 0; transform: translateY(40px);}
.m-section03 .items {opacity: 0;transform: translateY(60px);} */

.m-section04 {padding: 220px 0 204px;}
.m-section04 .wrap {display: flex; gap: 110px;}
.m-section04 .title-box {max-width: 485px; width: 100%;}
.m-section04 .tab-menu ul li a:hover {color: #42B59D;}
.m-section04 .tab-menu ul li.active a {color: #42B59D;}
.m-section04 .section-title {margin-bottom: 20px;}
.m-section04 .section-desc {margin-bottom: 50px;} 
.m-section04 .btn-more a {display: flex; align-items: center; gap: 16px; font-size: 22px; font-weight: 700; line-height: 1.8em; color: #444;}
.m-section04 .btn-more .arrow {width: 56px; height: 56px; background: url('../img/main/btn-more-circle-gray.png') no-repeat center center; transition: all 0.5s;}
.m-section04 .btn-more a:hover .arrow {background-image: url('../img/main/btn-more-circle-active.png');}
.m-section04 .content-box {width: 1%; flex: 1 1 auto;}
.m-section04 .tab-cont ul {border-top: 2px solid #222;}
.m-section04 .tab-cont ul li {border-bottom: 1px solid #ccc;}
.m-section04 .tab-cont a {padding: 30px 24px 20px 20px; transition: all 0.6s;}
.m-section04 .tab-cont a:hover {background: #f7f7f7;}
.m-section04 .tab-cont .date {font-size: 18px; line-height: 1.6em; color: #999; margin-bottom: 20px;}
.m-section04 .tab-cont .title-wrap {display: flex; justify-content: space-between; gap: 10px;}
.m-section04 .tab-cont .title {width: 1%; flex: 1 1 auto; font-size: 22px; font-weight: 400; line-height: 1.8em; color: #000; height:calc(1.8em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.m-section04 .tab-cont .btn {max-width: 32px; width: 100%; height: 32px; background: url('../img/main/btn-more-gray.png') no-repeat center center; transition: all 0.6s;}
.m-section04 .tab-cont a:hover .btn {background-image: url('../img/main/btn-more-green.png');}
/* .m-section04 .title-box,
.m-section04 .content-box {opacity: 0; transform: translateX(-50px);} */

.banner {overflow: hidden; padding: 38px 0 40px; border-top: 1px solid #eee; }
.banner .slide-items {display: flex; width: max-content; animation: rolling 40s linear infinite;}
.banner .item {padding: 0 30px;}
@keyframes rolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}