@charset "utf-8";

.subWrap {padding-top: 7em;}
.subWrap .inner {max-width: 1740px; padding: 0 30px;}
.subWrap .con {padding-top: 2.2em; padding-bottom: 3.35em;}
.subWrap .topTitle {font-size: 2.45em; text-align: center; font-weight: 800; margin-bottom: 1.35em;}
.subWrap .con.aos-animate .topTitle span {animation: spanTextUp_3 1s ease both;}

/* 페이지 번호 --------------------------------------------------------------- */
.subWrap .pageWrap {margin-top: 3em;}
.subWrap .pageWrap ul {display: flex; gap: 0.45em; justify-content: center;}
.subWrap .pageWrap ul li a {width: 2.1em; height: 2.1em; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; color: #999999; transition: .5s ease; font-family: 'Rubik';}
.subWrap .pageWrap ul li.arrow {color: #DDDDDD; background: url(../../images/ico_page_first.png) no-repeat center;}
.subWrap .pageWrap ul li.first.active {background-image: url(../../images/ico_page_first_active.png);}
.subWrap .pageWrap ul li.prev {background-image: url(../../images/ico_page_prev.png);}
.subWrap .pageWrap ul li.next {background-image: url(../../images/ico_page_next.png);}
.subWrap .pageWrap ul li.last {background-image: url(../../images/ico_page_last.png);}
.subWrap .pageWrap ul li.last.active {background-image: url(../../images/ico_page_last_active.png);}
.subWrap .pageWrap ul li.now a {background: var(--black); color: #fff; border-color: transparent;}


/* 요금 페이지 --------------------------------------------------------------- */
.pricing .inner {max-width: 1166px;}
.pricing .con01 .listBox {display: flex; gap: 4%;}
.pricing .con01 .listBox > li {width: 100%; border-radius: 1.85em; box-shadow: 0 4px 32px rgba(0, 0, 0, .1); padding: 4.34%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 2.2em; align-items: flex-start;}
.pricing .con01 .listBox > li.left {border: 1px solid #DDD;}
.pricing .con01 .listBox > li.right {background: var(--black); color: #fff}
.pricing .con01 .listBox > li .tt1 {font-size: 1.35em; font-weight: 600; margin-bottom: .3em;}
.pricing .con01 .listBox > li .price {display: flex; align-items: flex-end; gap: .5em; margin-bottom: 2.2em;}
.pricing .con01 .listBox > li .price strong {font-size: 1.85em; font-weight: 800;}
.pricing .con01 .listBox > li .price span {color: #999; font-weight: 600; transform: translateY(-.1em);}
.pricing .con01 .listBox > li .textList {display: flex; flex-direction: column; gap: .9em;}
.pricing .con01 .listBox > li .textList li {display: flex; gap: .5em;}
.pricing .con01 .listBox > li .textList li .icon {width: 1.35em; height: 1.35em; background: url(../../images/ico_check_black.svg) no-repeat center / contain;}
.pricing .con01 .listBox > li.right .textList li .icon {background-image: url(../../images/ico_check_red.svg)}
.pricing .con01 .listBox > li .linkBtn {position: relative; font-weight: 700; background: var(--black); color: #fff; padding: .9em 1.35em; border-radius: 2em; transition: .5s ease; border: 3px solid #fff;}
.pricing .con01 .listBox > li.right .linkBtn {color: #fff; background: var(--mainColor); border-color: var(--black); position: relative;}
.pricing .con01 .listBox > li .linkBtn span:after {content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -2em; width: 1.35em; height: 1.35em; background: var(--mainColor) url(../../images/ico_arrow_right_white.svg) no-repeat center / contain; opacity: 0; transition: .5s ease; border-radius: 50%;}
.pricing .con01 .listBox > li.right .linkBtn span:after {background: #fff url(../../images/ico_arrow_right_red.svg) no-repeat center / contain;}
.pricing .con02 .listBox li {padding: .7em 1.35em; border-radius: 1.6em; transition: .5s ease; cursor: pointer; display: flex; flex-direction: column;}
.pricing .con02 .listBox.aos-animate li {animation: upMove 1s ease both;}
.pricing .con02 .listBox li.open {padding: 1.35em; background: rgba(230, 9, 0, .05); gap: .9em;}
.pricing .con02 .listBox li .question {display: flex; gap: 1em; font-size: 1.35em; font-weight: 700; word-break: break-all;}
.pricing .con02 .listBox li .question .red {font-weight: 800;}
.pricing .con02 .listBox li .question p {color: #333;}
.pricing .con02 .listBox li .answer {display: none; color: #666; opacity: 0; font-weight: 500; transition: .5s ease; line-height: 1.6;}
.pricing .con02 .listBox li.open .answer {display: block; animation: opacityMove 1s ease both;}


/* 기능 페이지  --------------------------------------------------------------- */
.overview .con {position: relative; height: 39em; padding: 0;}
.overview .con .inner {padding: 0 3.15%; display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative;}
.overview .con:nth-child(odd):after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #f7f7f7; z-index: -1;}
.overview .con:nth-child(even) {text-align: right;}
.overview .con .imgBox {position: relative; flex: none;}
.overview .con .imgBox .ab {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.overview .con .textBox {display: flex; flex-direction: column; align-items: flex-start; gap: 1.4em; font-weight: 800;}
.overview .con:nth-child(even) .textBox {align-items: flex-end;}
.overview .con .textBox .tt1 {font-size: 1.85em; color: transparent; overflow: hidden; position: relative;}
.overview .con .textBox .tt1:after {content: attr(data-text); position: absolute; top: 0; left: 0; transition: .5s ease; color: #808080;}
.overview .con.aos-animate .textBox .tt1:after {animation: upMove100 1s ease both;}
.overview .con .textBox .tt2 {font-size: clamp(2.5em, 4vw, 3.5em);}
.overview .con.aos-animate .textBox .tt2 {animation: leftMove 1s .15s ease both;}
.overview .con .textBox .tt3 {color: #666; font-size: 1.35em;}
.overview .con.aos-animate .textBox .tt3 {animation: leftMove 1s .3s ease both;}
.overview .con .textBox br.mo {display: none;}
.overview .con .textBox .linkBtn {margin-top: .6em; padding: .8em 1.6em; border-radius: 25px; background: #E60900; color: #fff; position: relative; transition: .5s ease; display: flex; align-items: center; justify-content: center;}
.overview .con.aos-animate .textBox .linkBtn {animation: upMove 1s .45s ease both;}
.overview .con .imgBox img, .overview .con01 .imgBox .ab {opacity: 0; transform-origin: -4% 17%;}
.overview .con.aos-animate .imgBox img {animation: leftMove 1s ease both;}
.overview .con:nth-child(even).aos-animate .imgBox img {animation: rightMove 1s ease both;}
.overview .con01 .imgBox {max-width: 796px; width: 48%;}
.overview .con02 .inner {justify-content: flex-end;}
.overview .con02 .imgBox {max-width: 601px; width: 40%; position: absolute; bottom: 0; left: 3.15%;}
.overview .con03 .imgBox {max-width: 755px; width: 37%;}
.overview .con04 .imgBox {max-width: 725px; width: 50%; position: absolute; bottom: 0; left: 3.15%;}
.overview .con05 .imgBox {max-width: 1020px; width: 58%;}
.overview .con01.aos-animate .imgBox .ab {animation: overviewCon01Img 1s .3s ease both;}
@keyframes overviewCon01Img {0% {opacity: 0; transform: scale(.7) translate(-50%, -50%);} 100% {transform: translate(-50%, -50%); opacity: 1;}}
.overview .con02 .textBox {margin-left: auto;}
.overview .con03 .textBox .box {display: flex; gap: 1em; width: 100%;}
.overview .con03 .textBox .box p {font-size: 1.2em; color: #fff; background: #E60900; border-radius: 70px; max-width: 12em; width: 100%; height: 4.5em; display: flex; align-items: center; justify-content: center; font-weight: 500; text-align: center; opacity: 0;}
.overview .con03.aos-animate .textBox .box p {animation: leftMove 1s .2s ease both;}
.overview .con03.aos-animate .textBox .box p:last-child {animation-delay: .3s;}
.overview .con04 .textBox {margin-left: auto;}


/* 리뷰 페이지  --------------------------------------------------------------- */
.review .con .listBox {display: flex; gap: 2.2em 4%; flex-wrap: wrap;}
.review .con .listBox li {width: calc(50% - 2%);}
.review .con .listBox li a {display: flex; gap: 3%; align-items: flex-start;}
.review .con .listBox li .imgBox {position: relative; border-radius: .9em; max-width: 12em; overflow: hidden; width: 40%; flex: none}
.review .con .listBox li .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.review .con .listBox li .textBox {display: flex; flex-direction: column; gap: .9em;}
.review .con .listBox li .textBox .tt1 {font-size: 1.15em;}
.review .con .listBox li .textBox .tt1 .time {color: #999999; font-size: .8em; margin-left: .2em;}
.review .con .listBox li .textBox .tt2 {font-weight: 700; font-size: 1.5em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal}
.review .con .listBox li .textBox .tt3 {margin-top: -.5em; line-height: 1.6; color: #666666; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal}


/* 사례 페이지  --------------------------------------------------------------- */
.cases .listBox {display: flex; flex-wrap: wrap; gap: 1em 1.5%; width: 100%;}
.cases .listBox li {width: calc(100% / 4 - 1.13%);}
.cases .listBox li a {width: 100%; position: relative; padding-bottom: 134.6%; border-radius: 32px; overflow: hidden; transition: .5s ease;}
.cases .listBox li a > * {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.cases .listBox li .bg:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .3);}
.cases .listBox li .bg img {width: 100%; height: 100%; object-fit: cover; transition: .5s ease;}
.cases .listBox li .textBox {padding: 9%; box-sizing: border-box; color: #fff;}
.cases .listBox li .textBox .text1:after {content: ""; width: 1.1em; height: 1px; background: #fff; margin: .7em 0; display: block;}
.cases .listBox li .textBox .text2 {line-height: 1.3; font-size: 1.35em; font-weight: 800;}
.cases .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;}
.cases .listBox li .textBox .icon.black {background-image: url(../../images/main_section04_arrow_black.svg);}
.cases_modal .boxWrap .box .topText {display: flex; flex-direction: column; gap: .9em; margin-bottom: 1.8em;}
.cases_modal .boxWrap .box .topText .logo {width: 3.5em; height: 1.35em; background: url(../../images/logo.svg) no-repeat center / contain;}
.cases_modal .boxWrap .box .topText strong {font-size: 2em; font-weight: 400;}
.cases_modal .boxWrap .box .imgBox {display: flex; flex-wrap: wrap; gap: .9em; margin-bottom: 1.8em; flex: none;}
.cases_modal .boxWrap .box .imgBox li {width: calc(100% / 2 - .45em); border-radius: 1.35em; overflow: hidden; position: relative; padding-bottom: 27%;}
.cases_modal .boxWrap .box .imgBox.odd li:last-child {width: 100%; padding-bottom: 56.25%;}
.cases_modal .boxWrap .box .imgBox li img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.cases_modal .boxWrap .box .textBox .title {display: flex; gap: .5em; align-items: flex-start; margin-bottom: 1.35em;}
.cases_modal .boxWrap .box .textBox .title span {background: #BBBBBB; color: #fff; padding: .3em .75em; border-radius: 8px; margin-top: .1em; font-size: .9em;}
.cases_modal .boxWrap .box .textBox .title p {font-weight: 800; font-size: 1.55em;}
.cases_modal .boxWrap .box .textBox .text {font-size: 1.28em; font-weight: 600; line-height: 1.25; word-break: break-all;}
.cases_modal .boxWrap .box .textBox .text .red {font-weight: 800;}


/* 소개 페이지 --------------------------------------------------------------- */
.about {overflow: hidden;}
.about .con01 .boxWrap {position: relative;}
.about .con01 .boxWrap:after {content: ""; position: absolute; height: 34em; background: #f6f6f6; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;}
.about .con01 .boxWrap .box01 {max-width: 1150px; margin: 0 auto; width: 100%; padding: 4.5em 0;}
.about .con01 .boxWrap .box01 h3 {font-size: 4em; font-weight: 800; text-align: center; margin-bottom: .2em;}
.about .con01 .boxWrap .box01 p {color: #666666; font-weight: 600; text-align: center; line-height: 1.4;}
.about .con01 .boxWrap .box01.aos-animate p {animation: upMove 1s ease both;}
.about .con01 .boxWrap .box02 {background: #fff; border-radius: 32px; box-shadow: 0 4px 32px rgba(0, 0, 0, .1); padding: 3.7em 2em 2em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2.2em; margin-bottom: 2.2em;}
.about .con01 .boxWrap .box02 .text {max-width: 62em; color: #666666; line-height: 1.4; font-weight: 600;}
.about .con01 .boxWrap .box02.aos-animate .text {animation: opacityMove 1s .2s ease both;}
.about .con01 .boxWrap .box02 .list {display: flex; max-width: 62em; width: 95%; justify-content: space-between;}
.about .con01 .boxWrap .box02 .list li {width: 100%; text-align: center; display: flex; flex-direction: column; gap: 1em; font-weight: 700; color: var(--mainColor); line-height: 1;}
.about .con01 .boxWrap .box02 .list li .icon {max-width: 3.5em; width: 40%; margin: 0 auto;}
.about .con01 .boxWrap .box02 .list.aos-animate li {animation: upMove 1s ease both;}
.about .con01 .boxWrap .box02 .list li p {font-size: 1.35em;}
.about .con01 .boxWrap .box02 .list li p span {color: #999; font-size: .75em;}
.about .con01 .boxWrap .box03 {display: flex; gap: 2.2%;}
.about .con01 .boxWrap .box03 > div {width: 50%; border-radius: 32px; box-shadow: 0 4px 32px rgba(0, 0, 0, .1); padding: 4% 4% 0 4%; overflow: hidden; box-sizing: border-box;}
.about .con01 .boxWrap .box03 > div.aos-animate > * {animation: upMove 1s ease both;}
.about .con01 .boxWrap .box03 > div .title {font-size: 4em; font-weight: 800; line-height: 1.1; margin-bottom: .3em;}
.about .con01 .boxWrap .box03 > div .text {font-size: 1.35em; font-weight: 600; line-height: 1.5; margin-bottom: 1em;}
.about .con01 .boxWrap .box03 > div figure {margin-left: auto; max-width: 381px; width: 50%;}
.about .con01 .boxWrap .box03 .left {background: var(--mainColor); color: #fff;}
.about .con01 .boxWrap .box03 .right {background: var(--black); display: flex; flex-direction: column; justify-content: space-between;}
.about .con01 .boxWrap .box03 .right .title {background: linear-gradient(180deg, #0ED86C, #12D8B5); background-clip: text; -webkit-background-clip: text; color: transparent;}
.about .con02 .list {display: flex; flex-direction: column; position: relative; gap: 2.2em;}
.about .con02 .list:after {content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; background: #EEEEEE; width: 1px; height: 100%; z-index: -1;}
.about .con02 .list li {width: 50%; box-sizing: border-box; position: relative;}
.about .con02 .list li:before {content: ""; width: 1em; height: 1em; position: absolute; top: 0; background: var(--mainColor);}
.about .con02 .list li:nth-child(odd) {margin-left: auto; padding-left: 5em;}
.about .con02 .list li:nth-child(odd):before {left: -.5em;}
.about .con02 .list li:nth-child(even) {margin-right: auto; padding-right: 5em; text-align: right;}
.about .con02 .list li:nth-child(even):before {right: -.5em;}
.about .con02 .list li.aos-animate:before {animation: rotateMove45 1s ease both;}
@keyframes rotateMove45 {0% {transform: rotate(45deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
.about .con02 .list li.aos-animate > div > * {animation: upMove 1s .1s ease both;}
.about .con02 .list li.aos-animate .year {animation-delay: .2s;}
.about .con02 .list li.aos-animate .tt2 {animation-delay: .3s;}
.about .con02 .list li.aos-animate .tt3 {animation-delay: .4s;}
.about .con02 .list .title {color: var(--mainColor); font-weight: 600; line-height: 1;}
.about .con02 .list .title .tt1 {font-size: 1.35em;}
.about .con02 .list .title .year {font-size: 4em; font-weight: 800;}
.about .con02 .list .text {margin: 1.7em 0; display: flex; flex-direction: column; gap: .9em;}
.about .con02 .list .text .tt2 {font-size: 1.35em; font-weight: 800; color: #333;}
.about .con02 .list .text .tt3 {font-weight: 600; color: #666;}


@media screen and (min-width: 1025px) {
    .subWrap .pageWrap ul li:hover a {box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-color: var(--black)}

    .pricing .con01 .listBox > li .linkBtn:hover {border-color: #ddd;}
    .pricing .con01 .listBox > li.right .linkBtn:hover {border-color: #0000006b;}
    .pricing .con02 .listBox li:hover {background: rgba(230, 9, 0, .05)}
    .pricing .con01 .listBox > li .linkBtn:hover span:after {opacity: 1; right: -.6em;}
    .cases .listBox li:hover a {transform: rotate(1deg);}
    .cases .listBox.hover li:not(.hover) a {opacity: .4;}
    .cases .listBox li:hover .textBox .icon {left: calc(100% - 18%);}
    .cases .listBox li:hover .bg img {transform: scale(1.05);}
}
@media screen and (max-width: 1200px) {
    .overview .con02 .imgBox {transform: translateX(-4%);}
    .overview .con03 .textBox .box p {font-size: 1em;}
    .about .con01 .boxWrap .box03 > div .title {font-size: 3.2em;}
    .about .con01 .boxWrap .box03 > div .text {font-size: 1.2em;}
    .about .con02 .list li:nth-child(odd) {padding-left: 3em;}
    .about .con02 .list li:nth-child(even) {padding-right: 3em;}
}
@media screen and (max-width: 1024px) {
    .overview .con .inner {padding: 0 5%;}
    .overview .con .textBox br.mo {display: block;}
    .overview .con .textBox .tt2 {font-size: clamp(2.5em, 4.8vw, 3.5em);}
    .overview .con02 .imgBox {transform: none; width: 45%;}
    .overview .con03 .imgBox {width: 50%;}
    .overview .con04 .imgBox {width: 47%;}
    .overview .con05 .imgBox {width: 55%;}
    .about .con01 .boxWrap .box02 .list li p {font-size: 1.1em;}
    .about .con01 .boxWrap .box03 > div .title {font-size: 2.8em;}

    .review .con .listBox li {width: 100%;}
    .review .con .listBox li .imgBox {width: 30%;}
}
@media screen and (max-width: 768px) {
    .subWrap .topTitle {font-size: 2.2em;}

    /* 페이징 */
    .subWrap .pageWrap ul li:nth-child(8), .subWrap .pageWrap ul li:nth-child(9), .subWrap .pageWrap ul li:nth-child(10), .subWrap .pageWrap ul li:nth-child(11), .subWrap .pageWrap ul li:nth-child(12) {display: none;}

    .overview .con .inner {padding: 0 30px;}

    .pricing .con01 .listBox {gap: 2%;}
    .pricing .con01 .listBox > li {padding: 2em;}
    .pricing .con01 .listBox > li .price strong {font-size: 1.6em;}
    .pricing .con01 .listBox > li .textList {gap: .5em;}

    .about .con01 .boxWrap .box02 .logo {width: 45%;}
    .about .con01 .boxWrap .box03 {flex-direction: column; gap: 1.1em;}
    .about .con01 .boxWrap .box03 > div {width: 100%; padding: 6% 6% 0 6%;;}
    .about .con02 .list li:nth-child(odd) {padding-left: 1.5em;}
    .about .con02 .list li:nth-child(even) {padding-right: 1.5em;}
    .about .con02 .list li:before {width: .7em; height: .7em;}
    .about .con02 .list li:nth-child(odd):before {left: -.35em;}
    .about .con02 .list li:nth-child(even):before {right: -.35em;}
}
@media screen and (max-width: 640px) {
    .overview .con {height: auto; padding: 3em 0;}
    .overview .con .inner {flex-direction: column; gap: 1em; justify-content: center; align-items: flex-start;}
    .overview .con:nth-child(even) {padding-bottom: 6em;}
    .overview .con:nth-child(even) .inner {gap: 3em;}
    .overview .con .textBox {width: 100%;}
    .overview .con .textBox .tt1 {font-size: 1.4em;}
    .overview .con .textBox .tt2 {font-size: clamp(2.1em, 4.8vw, 3.5em);}
    .overview .con .textBox .tt3 {font-size: 1.2em;}
    .overview .con01 .imgBox {width: 100%;}
    .overview .con02 .imgBox {position: static; width: 90%; max-width: 400px; margin-left: auto;}
    .overview .con03 .imgBox {width: 75%;}
    .overview .con04 .imgBox {position: static; width: 75%; margin-left: auto;}
    .overview .con05 .imgBox {width: 100%;}

    .about .con01 .boxWrap .box02 .list {flex-wrap: wrap; justify-content: center; gap: 1.8em 0;}
    .about .con01 .boxWrap .box02 .list li {width: calc(100% / 3);}
    .about .con01 .boxWrap .box02 .list li:first-child {margin-left: 5%;}
    .about .con01 .boxWrap .box02 .list li:nth-child(2) {margin-right: 5%;}
    .about .con02 .list:after {left: 5%; transform: none;}
    .about .con02 .list li {width: 95%;}
    .about .con02 .list li:nth-child(odd) {padding-left: 3em;}
    .about .con02 .list li:nth-child(even) {padding-right: 0; padding-left: 3em; text-align: left; margin: 0; margin-left: auto;}
    .about .con02 .list li:nth-child(odd):before {left: -.35em;}
    .about .con02 .list li:nth-child(even):before {right: auto; left: -.35em;}
    .about .con02 .list .title .tt1 {font-size: 1.1em; margin-bottom: .4em;}
    .about .con02 .list .title .year {font-size: 3.2em;}

    .review .con .listBox li .imgBox {width: 40%; max-width: 9.5em;}
    .review .con .listBox li .textBox {gap: .8em;}
    .review .con .listBox li .textBox .tt3 {font-size: .9em;}

    @media screen and (max-width: 500px) {
        /* page */
        .subWrap .pageWrap ul {max-width: 360px; margin: 0 auto; width: 100%;}
        .subWrap .pageWrap ul li {width: 100%;}
        .subWrap .pageWrap ul li a {width: 100%;}
        .pricing .con01 .listBox {flex-direction: column; gap: 1em;}
    }
    @media screen and (max-width: 460px) {
        .overview .con .inner {padding: 0 20px;}
        .about .con01 .boxWrap .box03 > div {padding: 1.6em 1.6em 0 1.6em;}
        .about .con01 .boxWrap .box03 > div .title {font-size: 2.2em;}

        .review .con .listBox {gap: 0;}
        .review .con .listBox li:not(:last-child) {padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #eaeaea;}
        .review .con .listBox li a {flex-direction: row; gap: 1em;}
       
        /* 
        24.12.02 수정

         .review .con .listBox li a {flex-direction: column; gap: 1em;}

        */

    }
    @media screen and (max-width: 400px) {
        .overview .con04 .textBox .tt2 br {display: none;}
    }