@charset "utf-8";

.red {color: var(--mainColor);}
.kakao-channel-btn {position: fixed; bottom: 1em; right: -1em; z-index: 5; max-width: 130px; opacity: 0.9}

/* 공통부분 ---------------------------------------------- */
.section {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.section .inner {height: 100%; display: flex; align-items: center; padding-top: 7.15em; padding-bottom: 7.15em;}
.section .btn {padding: .9em 1.35em; border-radius: 35px; border: 1px solid transparent; transition: .5s ease;}
.section .redBtn {background: var(--mainColor); color: #fff;}
.section .whiteBtn {background: #fff; color: var(--mainColor); border-color: var(--mainColor);}
.section .textBox h2.title {font-size: 4.3em; font-weight: 900; margin-bottom: 3.4%; line-height: 1.3; letter-spacing: -1px; animation: upMove 1s .1s ease both;}
.section .textBox > .text {font-size: 1.35em; line-height: 1.3;}
.section .textBox > .text > p {overflow: hidden; position: relative; color: transparent;}
.section .textBox > .text > p:after {content: attr(data-text); position: absolute; top: 0; left: 0; transition: .5s ease; color: #808080;}
.section.active .textBox > .text > p:after {animation: upMove100 1s ease both;}
.section.active .textBox > .text > p:nth-child(2):after {animation-delay: .15s;}


/* section 01 ---------------------------------------------- */
.sec01 {max-width: 1920px; margin: 0 auto; overflow: hidden;}
.sec01 .textBox {padding-bottom: 7%;}
.sec01 .textBox .text {margin-bottom: 7.62%;}
/*.sec01 .textBox .contact > * {opacity: 0;}*/
.sec01 .textBox .contact .redBtn {margin-bottom:  3.39%;}
.sec01 .textBox .contact .text2 {display: block; font-size: 1.8em; font-weight: 900; margin-bottom: 1.3%;}
.sec01 .textBox .contact .tel {font-size: 2.615em; font-weight: 900; position: relative; display: inline-block;}
/*.sec01 .textBox .contact .tel:after {content: ""; position: absolute; width: 0; height: 30%; background: var(--mainColor2); transition: .5s ease; left: 0; bottom: 0; z-index: -1;}*/
.sec01 .imgWrap {position: absolute; right: 0; bottom: 0; max-width: 1100px; width: 60%;}
/* 
24.12.02수정

.sec01 .imgWrap {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 649px;
    width: 55%;

*/
.sec01 .imgWrap .imgBox .ab {position: absolute; top: 0; left: 0;}
.sec01 .imgWrap .imgBox {position: absolute; left: -35%; top: 17%; max-width: 216px; width: 32%;}

/* 애니메이션 */
.sec01.active .imgWrap .img1 {animation: sec01ImgMove 4s .35s linear both;}
@keyframes sec01ImgMove {0% {transform: translateX(30%); opacity: 0;} 15%, 100% {transform: none; opacity: 1;}}
.sec01.active .imgWrap .imgBox {animation: sec01ImgMove2 4s .35s ease both;}
@keyframes sec01ImgMove2 {0%, 12% {transform: translateX(10%); opacity: 0;} 22%, 100% {transform: none; opacity: 1;}}
.sec01.active .imgWrap .imgBox .img3 {animation: sec01ImgMove3 4s .35s linear both;}
@keyframes sec01ImgMove3 {0%, 15% {transform: translateY(10%); opacity: 0;} 25%, 100% {transform: none; opacity: 1;}}
.sec01.active .imgWrap .imgBox .img4 {animation: sec01ImgMove4 4s .35s linear both;}
@keyframes sec01ImgMove4 {0%, 17% {transform: translateY(10%); opacity: 0;} 27%, 100% {transform: none; opacity: 1;}}
.sec01.active .imgWrap .imgBox .img5 {animation: sec01ImgMove5 4s .35s linear both;}
@keyframes sec01ImgMove5 {0%, 19% {transform: translateY(10%); opacity: 0;} 29%, 100% {transform: none; opacity: 1;}}
.sec01.active .textBox .contact > * {animation: upMove 1s ease both;}

/* section 02 ---------------------------------------------- */
.sec02 {background: #000;}
.sec02 .inner {display: flex; justify-content: space-between; gap: 1%;}
.sec02 .textBox h2.title {color: #fff;}
.sec02 .imgWrap {position: relative; padding: 0 8.21%; width: 50%; max-width: 780px; box-sizing: border-box;}
.sec02 .imgWrap .imgBox {max-width: 480px; width: 100%; display: flex; flex-direction: column-reverse; align-items: center;}
.sec02 .imgWrap .img01 {margin-top: -8%;}
.sec02 .imgWrap .img02 {width: 78%; position: relative;}
.sec02 .imgWrap .text {position: absolute; background: #fff; padding: 2.5% 3%; border-radius: 74px; text-align: center; width: 42%; max-width: 320px; box-sizing: border-box; border: 1px solid var(--mainColor);}
.sec02 .imgWrap .text p {font-size: 1.35em; margin-bottom: 3%; font-weight: 600;}
.sec02 .imgWrap .text strong {font-weight: 900; font-size: 1.8em;}
.sec02 .imgWrap .text1 {left: 0; top: 13%;}
.sec02 .imgWrap .text2 {bottom: 24%; left: 12%;}
.sec02 .imgWrap .text3 {right: 0; top: 27%}

/* 애니메이션 */
.sec02.active .imgWrap .img01 {animation: sec02imgMove01 4s .3s ease both;}
@keyframes sec02imgMove01 {0% {transform: translateY(30%) rotateX(45deg); opacity: 0;} 20%, 100% {transform: none; opacity: 1;}}
.sec02.active .imgWrap .img02 {animation: sec02imgMove02 4s .3s ease both;}
@keyframes sec02imgMove02 {0%, 7% {transform: scale(.8) translateY(20%); opacity: 0;} 23%, 100% {transform: none; opacity: 1;}}
.sec02.active .imgWrap .text1 {animation: sec02TextMove01 4s .3s ease both;}
@keyframes sec02TextMove01 {0%, 15% {transform: translateX(30%) scale(.5); opacity: 0;} 35%, 100% {transform: none; opacity: 1;}}
.sec02.active .imgWrap .text2 {animation: sec02TextMove02 4s .3s ease both;}
@keyframes sec02TextMove02 {0%, 20% {transform: translateY(-30%) scale(.5); opacity: 0;} 40%, 100% {transform: none; opacity: 1;}}
.sec02.active .imgWrap .text3 {animation: sec02TextMove03 4s .3s ease both;}
@keyframes sec02TextMove03 {0%, 25% {transform: translateX(-30%) scale(.5); opacity: 0;} 45%, 100% {transform: none; opacity: 1;}}
.sec02.active .imgWrap .text .red  {animation: sec02TextMove04 4s .3s ease both;}
@keyframes sec02TextMove04 {50% {transform: scale(1.3) rotate(2deg);} 30%, 75%, 100% {transform: none;}}

/* section 03 ---------------------------------------------- */
.sec03 .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../../images/main_section03_bg.png) no-repeat center / cover;}
.sec03.active .bg {animation: sec03BgMove 5s linear both;}
@keyframes sec03BgMove {80%, 100% {transform: translateY(2%); opacity: .4;}}
.sec03 .inner {position: relative; align-items: flex-start; padding-top: calc(8em + 5%);}
.sec03 .textBox .text {margin-bottom: 13%;}
.sec03 .textBox .btnBox {display: flex; align-items: center; gap: 4%;}

/* 애니메이션 */
.sec03.active .textBox .btnBox .btn {animation: leftMove 1s .15s ease both;}
.sec03.active .textBox .btnBox .whiteBtn {animation-delay: .3s;}

/* section 04 ---------------------------------------------- */
.sec04 {background: #000; height: 100%;}
.sec04 .inner {flex-wrap: wrap; padding: calc(6em + 3%) 30px;}
.sec04 .inner .textBox {color: #fff; margin-bottom: 4%;}
.sec04 .inner .textBox h2 {margin-bottom: 0;}
.sec04 .inner .listBox {display: flex; flex-wrap: wrap; gap: 1em 1.5%; width: 100%;}
.sec04 .inner .listBox li {width: calc(100% / 4 - 1.13%);}
.sec04 .inner .listBox li a {width: 100%; position: relative; padding-bottom: 134.6%; border-radius: 32px; overflow: hidden; transition: .5s ease;}
.sec04 .inner .listBox li a > * {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.sec04 .inner .listBox li .bg:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .3);}
.sec04 .inner .listBox li .bg img {width: 100%; height: 100%; object-fit: cover; transition: .5s ease;}
.sec04 .inner .listBox li .textBox {padding: 9%; box-sizing: border-box;}
.sec04 .inner .listBox li .textBox .text1:after {content: ""; width: 1.1em; height: 1px; background: #fff; margin: .7em 0; display: block;}
.sec04 .inner .listBox li .textBox .text2 {line-height: 1.3; font-size: 1.35em; font-weight: 800;}
.sec04 .inner .listBox li .textBox .icon {width: 1.8em; height: 1.8em; background: url(../../images/main_section04_arrow_white.svg) no-repeat center / contain; position: absolute; bottom: 9%; left: 9%; transition: .5s ease;}
.sec04 .inner .listBox li .textBox .icon.black {background-image: url(../../images/main_section04_arrow_black.svg);}

/* 애니메이션 */
.sec04.active .inner .listBox li {animation: sec04ImgMove 1s ease both;}
@keyframes sec04ImgMove {0% {transform: translateY(10%); opacity: 0;} 100% {transform: none; opacity: 1;}}

/* section 05 ---------------------------------------------- */
.sec05 .inner {justify-content: space-between;}
.sec05 .inner .textBox {padding-bottom: 10%;}
.sec05 .inner .textBox h2 {margin-bottom: 11%;}
.sec05 .inner .textBox .redBtn {transition: .5s ease;}
.sec05 .imgBox {max-width: 1040px; width: 55%; z-index: -1; padding-bottom: 33.5%; position: relative; margin-left: -6%; flex: none;}
.sec05 .imgBox > * {position: absolute;}
.sec05 .imgBox figure img {vertical-align: middle;}
.sec05 .imgBox .img01 {left: 0; bottom: 9%; max-width: 21px; max-height: 21px; width: 2.5%; height: 3.5%;}
.sec05 .imgBox .img02 {max-width: 35px; max-height: 35px; width: 3.4%; height: 5.6%; bottom: 13%; left: 18%;}
.sec05 .imgBox .img03 {max-width: 14px; max-height: 14px; width: 2%; height: 2.4%; left: 11%; bottom: 34%;}
.sec05 .imgBox .img04 {max-width: 21px; max-height: 21px; width: 2.5%; height: 3.5%; top: 31%; left: 21%;}
.sec05 .imgBox .img05 {max-width: 618px; max-height: 623px; width: 60%; height: 99.5%; top: 50%; transform: translateY(-50%); right: 14%;}
.sec05 .imgBox .img06 {max-width: 45px; max-height: 45px; width: 5%; height: 8%; right: 14%; top: 8%;}
.sec05 .imgBox .img07 {max-width: 33px; max-height: 33px; width: 4%; height: 5.5%; right: 0; top: 21%;}
.sec05 .imgBox .img08 {max-width: 20px; max-height: 20px; width: 2.4%; height: 3.4%; left: 35%; top: 5%;}
.sec05 .imgBox .img05 .svgBox {position: absolute; max-width: 340px; width: 63.5%; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.sec05 .imgBox .img05 .svgBox svg path {stroke: #ffffff; stroke-width: 1px; fill: #fff;}

/* 애니메이션 */
.sec05.active .inner .textBox .redBtn {animation: scaleMove 1s .2s ease both;}
.sec05.active .imgBox figure {animation: sec05ImgScaleMove 8s .2s ease both;}
.sec05.active .imgBox figure:nth-child(even) {animation-delay: .4s;}
.sec05.active .imgBox .img05 figure {animation: sec05ImgScaleMove 8s ease both;}
@keyframes sec05ImgScaleMove {0% {transform: scale(.5); opacity: 0;} 10%, 100% {transform: none; opacity: 1;}}
.sec05.active .imgBox > *:not(.img05) img {animation: sec05ImgYMove 3s .2s ease both;}
.sec05.active .imgBox > *:nth-child(even) img {animation-delay: 2s;}
@keyframes sec05ImgYMove {0% {transform: translateY(15%);} 100% {transform: translateY(-15%);}}
.sec05.active .imgBox .img05 .svgBox svg {animation: sec05SvgMove 8s cubic-bezier(.25, .46, .45, .94) both;}
@keyframes sec05SvgMove {0%, 5% {transform: translateY(110%); opacity: 0;} 15%, 100% {transform: none; opacity: 1;}}
.sec05.active .imgBox .img05 svg path {animation: sec05SvgMove2 8s cubic-bezier(.25, .46, .45, .94) both;}
@keyframes sec05SvgMove2 {0%, 4% {stroke-dasharray: 0 300; stroke-opacity: 1; fill: transparent;} 12% {fill: transparent;} 22% {stroke-dasharray: 300 0; stroke-opacity: 1;} 52%,100% {fill: #ffffff; stroke-dasharray: 300 0; stroke-opacity: 0;}}

/* 모달 */
.modalCon {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 150;}
.modalCon .bg {position: absolute; width: 100%; height: 100%; top: -100%; left: 0; background: rgba(0, 0, 0, .5); transition: .4s ease; backdrop-filter: blur(5px);}
.modalCon.open .bg {top: 0 !important;}
.modalCon .m-inner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.modalCon .boxWrap {position: relative; background: #fff; opacity: 0; transform: scale(.8); transition: .5s ease; max-width: 640px; width: 90%; border-radius: 1.8em;}
.modalCon.open .boxWrap {opacity: 1; transform: translateY(1em); transition-delay: .3s;}
.modalCon .boxWrap .close {cursor: pointer; transition: .5s ease; position: absolute; top: -3.5em; left: 50%; transform: translateX(-50%); line-height: .3; color: #fff; -webkit-text-stroke: 1px; border-radius: 50%; width: 2.7em; height: 2.7em; background: url(../../images/ico_close.svg) no-repeat center / contain;}
.modalCon .boxWrap .box {width: 100%; height: 100%; overflow-y: auto; padding: 7%; box-sizing: border-box;}
.modalCon .boxWrap .box::-webkit-scrollbar {width: .5em;}

.sec04_modal .boxWrap .box .topText {display: flex; flex-direction: column; gap: .9em; margin-bottom: 1.8em;}
.sec04_modal .boxWrap .box .topText .logo {width: 3.5em; height: 1.35em; background: url(../../images/logo.svg) no-repeat center / contain;}
.sec04_modal .boxWrap .box .topText strong {font-size: 2em; font-weight: 400;}
.sec04_modal .boxWrap .box .imgBox {display: flex; flex-wrap: wrap; gap: .9em; margin-bottom: 1.8em; flex: none;}
.sec04_modal .boxWrap .box .imgBox li {width: calc(100% / 2 - .45em); border-radius: 1.35em; overflow: hidden; position: relative; padding-bottom: 27%;}
.sec04_modal .boxWrap .box .imgBox.odd li:last-child {width: 100%; padding-bottom: 56.25%;}
.sec04_modal .boxWrap .box .imgBox li img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sec04_modal .boxWrap .box .textBox .title {display: flex; gap: .5em; align-items: flex-start; margin-bottom: 1.35em;}
.sec04_modal .boxWrap .box .textBox .title span {background: #BBBBBB; color: #fff; padding: .3em .75em; border-radius: 8px; margin-top: .1em; font-size: .9em;}
.sec04_modal .boxWrap .box .textBox .title p {font-weight: 800; font-size: 1.55em;}
.sec04_modal .boxWrap .box .textBox .text {font-size: 1.28em; font-weight: 600; line-height: 1.25; word-break: break-all;}
.sec04_modal .boxWrap .box .textBox .text .red {font-weight: 800;}

@media screen and (min-width: 1025px) {
	.section a.btn:hover {box-shadow: 0 5px 18px var(--mainColor2);}
	.section a.btn:hover span span {animation: spanTextUp 3s linear both infinite;}
	.sec01 .textBox .contact .tel:hover span span {animation: spanTextUpPointColor 3s linear both infinite;}
	.sec04 .inner .listBox li:hover a {transform: rotate(1deg);}
	.sec04 .inner .listBox.hover li:not(.hover) a {opacity: .4;}
	.sec04 .inner .listBox li:hover .textBox .icon {left: calc(100% - 18%);}
	.sec04 .inner .listBox li:hover .bg img {transform: scale(1.05);}
}
@media screen and (max-width: 1400px) {
	.sec05 .inner {padding-top: 20vh; align-items: flex-start;}
	.sec05 .inner .textBox {padding-bottom: 0%;}
	.sec05 .imgBox {position: absolute; right: 6%; bottom: 8%; margin: 0;}
}
@media screen and (max-width: 1200px) {
	.section .textBox h2.title {font-size: 4em;}
	.sec02 .imgWrap .text p {font-size: 1.1em;}
	.sec02 .imgWrap .text strong {font-size: 1.5em;}
}
@media screen and (max-width: 1024px) {
	.section .textBox h2.title {font-size: 3.5em;}
	.sec02 .imgWrap .text p {font-size: 1em;}
	.sec02 .imgWrap .text strong {font-size: 1.35em;}
	.sec04 .inner .listBox li .textBox .text1 {font-size: .9em;}
	.sec04 .inner .listBox li .textBox .text2 {font-size: 1.1em;}
	.sec05 .imgBox {width: 60%; padding-bottom: 37%; bottom: 15%;}
}
@media screen and (max-width: 900px) {
	.sec04 .inner .listBox li {width: calc(100% / 3 - 1%);}
}
@media screen and (max-width: 768px) {
	.kakao-channel-btn {width: 8.5em;}
	.section .textBox h2.title {font-size: 3.2em;}
	.sec02 .inner {gap: 0; flex-direction: column; justify-content: center; align-items: flex-start;}
	.sec02 .imgWrap {width: 85%; margin-left: auto; margin-top: 5vh; max-width: 400px;}
	.sec02 .imgWrap .text {max-width: 135px;}
	.sec02 .imgWrap .text p {font-size: 75%; margin-bottom: 0;}
	.sec02 .imgWrap .text .red {font-size: 90%;}
	.sec05 .imgBox {width: 75%; padding-bottom: 46%; bottom: 12vh;}

	.modalCon .boxWrap .box {padding: 1.8em;}
	.sec04_modal .boxWrap .box .topText strong {font-size: 1.6em;}
	.sec04_modal .boxWrap .box .imgBox {gap: .4em;}
	.sec04_modal .boxWrap .box .imgBox li {width: calc(100% / 2 - .2em);}
	.sec04_modal .boxWrap .box .textBox .text {font-size: 1.1em; line-height: 1.6;}
}
@media screen and (max-width: 640px) {
	.section .textBox h2.title {font-size: 2.8em;}
	.section .textBox > .text {font-size: 1.1em;}
	.sec01 .imgWrap {width: 88%; right: -13%;}
	.sec04 .inner .listBox {gap: .8em;}
	.sec04 .inner .listBox li {width: calc(100% / 2 - .4em);}
	.sec04 .inner .listBox li a {border-radius: 20px;}
}