@charset "utf-8";
.main {overflow: hidden;}
.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 870px; position: relative; }
.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.1);}
.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: 290px; left: 15px; font-size: 65px; line-height: 1.3;  color: #fff; font-weight: 700;  width: 100%; opacity: 0; transition: all 1.2s ease .1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 400px; left: 15px; font-size: 24px; line-height: 1.25; color: #fff; font-weight: 400; width: 100%; opacity: 0; transition: all 1.2s ease .5s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 335px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 450px; opacity: 1;}

.controls {position: absolute; top: 545px; left: 0; width: 100%; z-index: 2;}
.controls .btn-area {position: relative; width: 280px; height: 100%; display: flex; align-items: center; justify-content: space-between;}
.controls .btn-area .visual-pagination {width: 190px; gap: 40px; display: flex;}
.swiper-pagination-bullet {margin: 0 !important; position: relative; background-color: transparent !important; opacity: 1 !important; height: 14px !important; width: 15px !important; transition: all .3s linear;}
.swiper-pagination-bullet-active {width: 95px !important;}
.swiper-pagination-bullet::before {position: absolute; content: ''; font-size: 14px; font-weight: 600; font-family: 'Montserrat'; opacity: .5; color: #fff; top: 0; left: 0;}
.swiper-pagination-bullet:nth-of-type(1)::before {content: '01';}
.swiper-pagination-bullet:nth-of-type(2)::before {content: '02';}
.swiper-pagination-bullet:nth-of-type(3)::before {content: '03';}
.swiper-pagination-bullet-active::before {opacity: 1;}
.controls .btn-area .progress-bar {position: absolute; width: 60px; height: 1px; background-color: transparent; left: 125px; top: 50%; transform: translateY(-50%); transition: all .15s linear;}
.controls .btn-area .progress-bar svg {position: absolute; --progress: 0; top: 0; left: 0; width: 100%; stroke-width: 4px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}
.controls.s1 .btn-area .progress-bar {left: 124px;}
.controls.s2 .btn-area .progress-bar {left: 180px;}
.controls.s3 .btn-area .progress-bar {left: 232px;}
.controls .btn-area .btn-controls {width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255, .5); 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 .btns {width: 10px; height: 17px; background: url() 50% 50% no-repeat; background-size: auto;}
.controls .btns.visual-prev {background-image: url(../images/main/ico_prev.png);}
.controls .btns.visual-next {background-image: url(../images/main/ico_next.png);} 

/* 공통 */
.section-header small {display: block; font-size: 24px; font-weight: 700; font-family: 'Montserrat'; color: #808080;}
.section-header h3 {font-size: 48px; font-weight: 300; color: #333; line-height: 1.4; margin-top: 30px;}
.section-header h3 > strong {font-weight: 700;}


/* sec2 */
.sec2 {width: 100%; padding: 130px 0 145px; position: relative;}
.sec2 .section-header {padding-left: 182px;}
.sec2 .tab {width: 100%; max-width:calc(100% - 900px); margin-top: 55px; position: relative; padding-left: 182px; z-index: 2;}
.sec2 .tab ul {width: 100%; margin-right: auto; padding-right: 120px;}
.sec2 .tab ul li {position: relative; width: 100%; overflow: hidden;}
.sec2 .tab ul li ~ li {border-top: 1px solid #ddd;}
.sec2 .tab ul li:last-child {border-bottom: 1px solid #ddd !important;}
.sec2 .tab ul li .tab-btn {display: flex; padding: 55px 35px; width: 820px; align-items: center; border-radius: 10px; gap: 40px; cursor:pointer;}
.sec2 .tab ul li .tab-btn dl {width: 1%; flex: 1 1 auto; display: flex; align-items: center; line-height: 40px;}
.sec2 .tab ul li .tab-btn dl dt {max-width: 220px; width: 100%; font-size: 36px; font-weight: 600; color: #333; padding-left: 60px; background: url() 0% 50% no-repeat; background-size: auto;}
.sec2 .tab ul li:nth-of-type(1) .tab-btn dl dt {background-image: url(../images/main/ico_sec201.png);}
.sec2 .tab ul li:nth-of-type(2) .tab-btn dl dt {background-image: url(../images/main/ico_sec202.png);}
.sec2 .tab ul li:nth-of-type(3) .tab-btn dl dt {background-image: url(../images/main/ico_sec203.png);}
.sec2 .tab ul li .tab-btn dl dd {font-size: 20px; color: #666;}
.sec2 .tab ul li .tab-btn > a {width: 40px; height: 40px; border-radius: 50%; display: block; opacity: 0; transition: all .2s linear;}
.sec2 .tab ul li .tab-btn > a:hover {transform: rotate(180deg);}
.sec2 .tab ul li .tab-btn > a img {display: block; max-width: 100%; margin: 0 auto;}

.sec2 .tab ul li.active {border: 0; overflow: visible;}
.sec2 .tab ul li.active + li {border: 0;}
.sec2 .tab ul li:last-child.active {border: 0 !important;}
.sec2 .tab ul li.active .tab-btn {background-color: #808080;}
.sec2 .tab ul li:nth-of-type(1).active .tab-btn dl dt {background-image: url(../images/main/ico_sec201_on.png);}
.sec2 .tab ul li:nth-of-type(2).active .tab-btn dl dt {background-image: url(../images/main/ico_sec202_on.png);}
.sec2 .tab ul li:nth-of-type(3).active .tab-btn dl dt {background-image: url(../images/main/ico_sec203_on.png);}
.sec2 .tab ul li.active .tab-btn dl dt {color: #fff;}
.sec2 .tab ul li.active .tab-btn dl dd {color: #fff;}
.sec2 .tab ul li.active .tab-btn > a {opacity: 1;}

.sec2 .bg {width: 100%; max-width: 960px; height: 970px; position: absolute; top: 0; right: 0; z-index: -1; background: url(../images/main/bg_sec201.jpg) 50% 50% no-repeat; background-size: cover; transition: all .3s linear;}

/* sec3 */
.sec3 {width: 100%; padding: 155px 0 160px; background-color: #f7f7f7;}
.sec3 .banner {width: 100%; display: flex; margin-top: 55px; gap: 50px;}
.sec3 .banner a {display: flex; justify-content: flex-end; flex-direction: column; width: 100%; max-width: 745px; border-radius: 10px; background: url() 50% 50% no-repeat; background-size: cover; padding: 60px 20px 60px 60px; min-height: 400px; clip-path:inset(0 100% 0 0);}
.sec3 .banner a:nth-of-type(1) {background-image: url(../images/main/img_sec301.jpg);  transition: all 1s ease-out .5s;}
.sec3 .banner a:nth-of-type(2) {background-image: url(../images/main/img_sec302.jpg);  transition: all 1s ease-out 1.5s;}
.sec3 .banner a h5 {font-size: 36px; color: #fff; font-weight: 600;}
.sec3 .banner a p {font-size: 20px; color: #fff; margin-top: 30px; line-height: 1.5;}
.sec3 .banner.motion a {clip-path: inset(0 0 0 0);}

.sec3 .banner a:hover h5 .char {animation:textUp 1s both; animation-delay:calc(0.1s * var(--char-index)); display: inline-block;}

@keyframes textUp {
	0% {transform: translateX(0);}
	50% {transform: translateX(10px);}
	100% {transform: translateX(0);}
}



/* sec4 */
.sec4 {width: 100%; padding: 140px 0 160px; background: url(../images/main/bg_sec4.jpg) 50% 50% no-repeat; background-size: cover;}
.sec4 .about {margin-top: 55px; width: 100%; padding: 0 5px;}
.sec4 .about ul {display: flex; width: calc(100% + 20px); margin: 0 -10px;}
.sec4 .about ul li {width: 20%; padding: 0 10px; min-height: 380px; opacity: 0;}
.sec4 .about ul li a {display: block; width: 100%; height: 100%; background-color: rgba(255,255,255, .5); border-radius: 10px; padding-top: 50px; transition: all .3s linear;}
.sec4 .about ul li a dl {width: 100%;}
.sec4 .about ul li a dl dt {max-width: 120px; width: 100%; border-radius: 50%; margin: 0 auto;}
.sec4 .about ul li a dl dt img {max-width: 100%; display: block; margin: 0 auto;}
.sec4 .about ul li a dl dd {margin-top: 30px; text-align: center;}
.sec4 .about ul li a dl dd h5 {font-size: 30px; font-weight: 600; color: #333;}
.sec4 .about ul li a dl dd p {font-size: 18px; color: #666; line-height: 1.66; margin-top: 20px;}

.sec4 .about ul li a:hover {background-color: #fff;}

.sec4 .about ul.motion li:nth-of-type(2) {animation-delay: .2s}
.sec4 .about ul.motion li:nth-of-type(3) {animation-delay: .4s}
.sec4 .about ul.motion li:nth-of-type(4) {animation-delay: .6s}
.sec4 .about ul.motion li:nth-of-type(5) {animation-delay: .8s}

.sec4 .about ul.motion li {animation:moveAni .8s linear forwards;}

@keyframes moveAni {

	0% {opacity:0; transform:translateX(-100%);}
	50% {opacity:0; transform:translateX(-50%);}
	80% {opacity:0.6; transform:translateX(-20%);}
	100% {opacity:1; transform:translateX(0%);}
}


/* sec5 */
.sec5 {width: 100%; padding: 150px 0;}
.sec5 .section-header {position: relative;}
.sec5 .section-header > a {position: absolute; display: block; width: 40px; height: 40px; border-radius: 50%; bottom: 0; right: 0; transition: all .3s ease-out;}
.sec5 .section-header > a:hover {transform: rotate(180deg);}

.sec5 .notice {margin-top: 55px; width: 100%;}
.sec5 .notice ul {width: calc(100% + 40px); display: flex; margin: 0 -20px;}
.sec5 .notice ul li {width: 25%; padding: 0 20px; min-height: 305px;  opacity: 0;}
.sec5 .notice ul li a {width: 100%; height: 100%; border-radius: 10px; display: block; box-shadow: 0px 0px 20px 0px rgba(125, 125, 125, 0.15); padding: 45px 35px 50px; background-color: #fff;}
.sec5 .notice ul li a span {font-size: 42px; font-weight: 700; color: #808080;}
.sec5 .notice ul li a small {font-size: 14px; font-weight: 700; color: #808080; display: block; margin-top: 5px;}
.sec5 .notice ul li a h5 {font-size: 22px; font-weight: 600; color: #333; line-height: 1.54; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 45px; word-break:break-all;}
.sec5 .notice ul li * {transition: all .3s linear;}
.sec5 .notice ul li a:hover {background-color: #808080;}
.sec5 .notice ul li a:hover * {color: #fff;}

.sec5 .notice ul.motion li:nth-of-type(2) {animation-delay: .25s}
.sec5 .notice ul.motion li:nth-of-type(3) {animation-delay: .45s}
.sec5 .notice ul.motion li:nth-of-type(4) {animation-delay: .65s}

.sec5 .notice ul.motion li {animation:moveAni 1s linear forwards;}


/* sec6 */
.sec6 {width: 100%; padding: 110px 0 100px; background: url(../images/main/bg_sec6.jpg) 50% 50% no-repeat; background-size: cover;}
.sec6 .section-header {position: relative;}
.sec6 .section-header > a {color: #fff; font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 60px; right: 0; max-width: 180px; width: 100%; border-radius: 50px; background-color: #808080; padding: 0 40px; line-height: 65px; transition: all .2s linear; opacity: 0;}
.sec6 .section-header > a > i {font-style: normal;}
.sec6 .section-header > a:hover {background-color: #418154;}

.sec6 .section-header.motion a {animation: btnAni .8s linear .5s forwards;}

@keyframes btnAni {
	0% {transform: translateX(-100%); opacity: 0;}
	50% {transform: translateX(-50%); opacity: 0.2;}
	80% {transform: translateX(-20%); opacity: 0.5;}
	100% {transform: translateX(0%); opacity: 1;}

}