@charset "utf-8";

.main-visual {position: relative; height: 100vh;}
.main-visual .item {height: 100vh;}
.main-visual .item .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; }
.main-visual .item.slick-active .img-box {transform: scale(1.06); transition: all 4.5s;}
.main-visual .item .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 15px;}
.main-visual .item .text-box h2 {font-size: 72px; font-weight: 400; line-height: 1.3em; letter-spacing: 0.06em; color: #fff; text-align: center;}
.main-visual .item .text-box h2 span {font-weight: 700;}
.main-visual .item.slick-active .text-box h2 {animation: text-ani 1s both 0.3s;}
@keyframes text-ani {0% {filter: blur(20px); transform: translateY(50px); opacity: 0;} 100% {filter: blur(0); transform: translateY(0); opacity: 1;}}
.main-visual .paging {position: absolute; bottom: 60px; left: 100px;}
.main-visual .slick-dots {display: flex; border-bottom: 3px solid rgba(255,255,255,0.3);}
.main-visual .slick-dots li {position: relative; width: 100px; font-size: 16px; font-weight: 700; line-height: 1em; color: rgba(255,255,255,0.3); padding-bottom: 16px; cursor: pointer; transition: all 0.4s;}
.main-visual .slick-dots li.slick-active {color: #fff;}
.main-visual .slick-dots li:after {position: absolute; bottom: -3px; left: 0; content: ''; width: 0; height: 3px; background: #fff; transition: all 4s;}
.main-visual .slick-dots li.slick-active:after {width: 100%;}
.main-visual .scroll-down {position: absolute; bottom: 60px; right: 100px;}
.main-visual .scroll-down img {margin-bottom: 8px;}
.main-visual .scroll-down .bg {position: relative; display: block; width: 9px; height: 28px; border-radius: 4px; background: rgba(255,255,255,0.3);}
.main-visual .scroll-down .bg:after {position: absolute; top: 0; left: 0; content: ''; width: 9px; height: 9px; background: #fff; border-radius: 50%; animation: circle-ani 2.3s infinite;}
@keyframes circle-ani {0% {top: 0;} 45% {top: calc(100% - 9px);} 100% {top: 0;}}
/* section01 */
.section01 {height: 980px; overflow: hidden;}
.section01 .wrap {display: flex; height: 100%;}
.section01 .box {position: relative; flex: 1;}
.section01 .box:after {position: absolute; top: 0; right: 0; content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.3);}
.section01 .box:last-child:after {display: none;}
.section01 .box a {position: relative; height: 100%; overflow: hidden;}
.section01 .img-box {position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; z-index: -1;}
.section01 .img-box img {width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease;}
.section01 .box a:hover .img-box img {transform: scale(1.1);}
.section01 .text-box {position: relative; z-index: 5; transform: translateY(127px); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 175px; transition: all 0.6s;}
.section01 .box a:hover .text-box {transform: translateY(0); padding-bottom: 175px;}
.section01 .text-box p {font-size: 40px; font-weight: 600; line-height: 1em; color: #fff; text-align: center;}
.btn-more {position: relative; width: 210px; height: 75px; border-radius: 38px; background: #006d43; border: 1px solid #006d43; font-family: 'pretendard'; font-size: 20px; font-weight: 700; line-height: 73px; color: #fff; padding: 0 39px; }
.btn-more:after {position: absolute; top: 50%; margin-top: -6px; right: 39px; content: ''; width: 13px; height: 13px; background: url('../img/main/icon_arrow_white.png') no-repeat center center;}
.section01 .btn-more {opacity: 0; margin: 55px auto 0; transition: background 0.5s, border 0.5s, opacity 0.5s; transition-delay: 0s, 0s, 0.4s;}
.section01 .box a:hover .btn-more {opacity: 1; }
.section01 .box a .btn-more:hover {border: 1px solid #fff; background: transparent; transition-delay: 0s, 0s, 0s;}
/* section02 */
.section02 {position: relative; height: 980px; overflow: hidden;}
.section02 .text-box {position: relative; height: 100%; z-index: 5;}
.section02 .text-box .contain {align-content: center;}
.section02 .text-box h3 {font-size: 68px; font-weight: 600; line-height: 1em; color: #010101; text-align: center; margin-bottom: 30px;}
.section02 .text-box p {font-size: 24px; line-height: 1.4em; color: #666; text-align: center; margin-bottom: 78px;}
.section02 .text-box .btn-more {margin: 0 auto; transition: all 0.5s;}
.section02 .text-box .btn-more:hover {background: #fff; border: 1px solid #006d43; color: #006d43;}
.section02 .text-box .btn-more:after {transition: all 0.5s;}
.section02 .text-box .btn-more:hover:after {background-image: url('../img/main/section03_icon_arrow.png');}
.section02 .img-box img {opacity: 1; position: absolute; border-radius: 10px; overflow: hidden;}
.section02 .img-box .img01 {top: 50px; right: 240px;}
.section02 .img-box .img02 {top: 175px; left: -140px;}
.section02 .img-box .img03 {bottom: 0; right: 0; border-radius: 10px 0 0 0;}
.section02 .img-box .img04 {bottom: 0; left: 295px; border-radius: 10px 10px 0 0;}
/* section03 */
.section03 {height: 980px; background: url('../img/main/section03_bg01.jpg') no-repeat center center/cover; transition: all 0.5s;}
.section03 .contain {align-content: center;}
.section03 h3 {font-size: 48px; font-weight: 600; line-height: 1.33em; color: #fff; text-align: center; margin-bottom: 65px;}
.section03 .wrap {display: flex; justify-content: center;}
.section03 .box {padding: 0 25px;}
.section03 .box a {display: flex; flex-direction: column; justify-content: center; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); text-align: center; transition: all 0.4s;}
.section03 .box .text-box {transform: translateY(40px); transition: all 0.5s;}
.section03 .box .icon {width: 78px; height: 78px; background-repeat: no-repeat; background-position: center center; margin: 0 auto 16px; opacity: 0.7; transition: all 0.6s;}
.section03 .box:nth-child(1) .icon {background-image: url('../img/main/section03_icon01.png');} 
.section03 .box:nth-child(2) .icon {background-image: url('../img/main/section03_icon02.png');} 
.section03 .box:nth-child(3) .icon {background-image: url('../img/main/section03_icon03.png');} 
.section03 .box h4 {font-size: 32px; font-weight: 600; line-height: 1.3em; color: #fff; opacity: 0.7; transition: all 0.6s;}
.section03 .box .arrow {opacity: 0; width: 60px; height: 60px; border-radius: 50%; background: url('../img/main/section03_icon_arrow.png') no-repeat center center #fff; margin: 24px auto 0;transition: all 0.5s;}
.section03 .box a:hover {border: 1px solid #13744e; background: rgba(12,111,75,0.9);}
.section03 .box a:hover .text-box {transform: translateY(0);}
.section03 .box a:hover .icon {opacity: 1;}
.section03 .box a:hover h4 {opacity: 1;}
.section03 .box a:hover .arrow {opacity: 1; transition-delay: 0.4s;}
/* section04 */
.section04 {padding: 110px 0 120px;}
.section04 .cont {width: 100%; height: 580px; align-content: center; background: url('../img/main/section04_bg.jpg') no-repeat center center/cover; border-radius: 10px; overflow: hidden; padding: 0 140px; margin: 0 auto;}
.section04 .cont .flex {display: flex; justify-content: space-between; align-items: center;}
.section04 .cont .text-box h3 {position: relative; display: inline-block; padding-right: 30px; font-family: 'Montserrat'; font-size: 65px; font-weight: 700; line-height: 1.1em; color: #fff; margin-bottom: 28px;}
.section04 .cont .text-box h3:after {position: absolute; right: 0; bottom: 12px; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #006d43;}
.section04 .cont .text-box p {font-size: 24px; line-height: 1.58em; color: rgba(255,255,255,0.7); }
.section04 .cont .btn-more {border: 1px solid #fff; background: rgba(255,255,255,0.1); transition: all 0.5s;}
.section04 .cont .btn-more:hover {background: #006d43; border: 1px solid #006d43;}