@charset "utf-8";
/* s: 공통영역 */
body {position: relative; letter-spacing: -0.07em; font-size: 1.8rem; font-weight: 400; line-height: 1; word-break: keep-all;}
a:active, a:hover, a:focus {text-decoration: none;}

/* container */
.container {width: 1400px; margin: 0 auto;}

/* conBox */
.conBox {display: flex; justify-content: space-between; padding: 100px 0; border-bottom: 1px solid #e0e0e0;}
.conBox:first-of-type {padding-top: 0;}

/* cont-title */
h4.cont-title {font-size: 4.8rem; font-weight: 600; color: var(--white); margin-bottom: 60px;}
h5.cont-title {font-size: 3.8rem; font-weight: 600; line-height: 1.3;}
h5.cont-title span {color: var(--subColor);}
h6.cont-title {position: relative; padding-left: 12px; box-sizing: border-box; font-size: 2.8rem; font-weight: 600; margin-bottom: 16px; line-height: 1.3;}
h6.cont-title::before {content: ''; position: absolute; left: 0; top: 5px; width: 5px; height: 27px; background: var(--mainColor); border-radius: 2px;}

/* cont-list */
.cont-list li {position: relative; padding-left: 15px; box-sizing: border-box; line-height: 1.5;}
.cont-list li.flex {display: flex;}
.cont-list li:not(:last-of-type) {margin-bottom: 5px;}
.cont-list li span {font-weight: 600;}
.cont-list li span.tell {position: relative; padding-left: 10px; margin-left: 10px; box-sizing: border-box;}
.cont-list li span.tell::before {content: ''; position: absolute; top: 7px; left: 0; width: 1px; height: 15px; background: #d0d0d0 !important;}
.cont-list li span.arr {color: var(--mainColor);}
.cont-list li::before {content: ''; position: absolute; top: 11px; left: 0; width: 5px; height: 5px; background: var(--fontColor3); border-radius: 50%;}
.cont-list.type2 li::before {content: ''; position: absolute; top: 13px; left: 0; width: 8px; height: 2px; background: var(--fontColor3); border-radius: 0;}
.cont-list.flex li {display: flex; gap: 24px;}
.cont-list.flex li span {font-weight: 600;}
.cont-list.flex li span.tit {position: relative; width: 48px; text-align-last: justify; flex-shrink: 0;}
.cont-list.flex li span.tit.type2 {width: 63px;}
.cont-list.flex li span.tit::before {content: ''; position: absolute; top: 7px; right: -13px; width: 1px; height: 15px; background: #d0d0d0;}

/* go_link */
a.go_link {display: inline-block; color: var(--white); padding: 10px 15px; box-sizing: border-box; border-radius: 19px; background: var(--fontColor); transition: var(--time); margin-top: 45px;}
a.go_link span {position: relative; padding-right: 20px; box-sizing: border-box;}
a.go_link span::before {content: ''; position: absolute; top: 7px; right: 0; background: url('/resource/fiveproject/images/go_link_icon.png') no-repeat; width: 14px; height: 14px; background-size: 100%;}
a.go_link:hover {background: var(--mainColor);}
a.go_link.type2 {padding: 0; margin-top: 0; background: transparent; color: var(--mainColor);}
a.go_link.type2 span {font-weight: 500;}
a.go_link.type2 span::before {background: url('/resource/fiveproject/images/go_link_icon2.png') no-repeat; background-size: 100%;}
a.go_link.type2:hover {text-decoration: underline;}

/* banner */
.banner {border-radius: 15px; overflow: hidden; padding: 65px 50px 50px 50px; margin-bottom: 100px; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center;}
.banner .list {display: flex; flex-wrap: wrap; column-gap: 33px; row-gap: 12px;}
.banner .list li {font-size: 2.0rem; font-weight: 500; color: var(--white); position: relative;}
.banner .list li:not(:last-of-type)::before {content: ''; position: absolute; top: 1px; right: -16px; width: 1px; height: 17px; background: rgba(255,255,255,0.5);}

/* imgArea */
.imgArea {width: 100%; border-radius: 13px; overflow: hidden; margin-top: 25px;}
.imgArea img {display: block; width: 100%; object-fit: cover;}

/* listArea */
.listArea {width: 1030px; flex-shrink: 0;}
.listArea .listBox:not(:last-of-type) {margin-bottom: 90px; padding-bottom: 90px; border-bottom: 1px solid #e0e0e0; box-sizing: border-box;}
.listArea .listBox.type2:not(:last-of-type) {padding-bottom: 0; margin-bottom: 70px; border-bottom: none;}
.listArea .listTitle {margin-bottom: 30px;}
.listArea .listTitle .txt {font-weight: 500;}
.listArea .subTit {margin-bottom: 20px; padding: 10px 35px; box-sizing: border-box; border-radius: 8px; background: var(--mainColor);}
.listArea .subTit p {font-size: 2.3rem; font-weight: 600;}
.listArea .list {display: flex; flex-wrap: wrap; gap: 24px;}
.listArea .list>li {width: calc(50% - 12px); border-radius: 13px; background: var(--gray); padding: 35px; box-sizing: border-box;}
.listArea .list.nth3>li {width: calc(33.333% - 16px);}
.listArea .list.type2>li:first-of-type {width: calc(33% - 12px);}
.listArea .list.type2>li:last-of-type {width: calc(67% - 12px);}
.listArea .list>li p.tit {font-size: 2.3rem; font-weight: 600; color: var(--mainColor); margin-bottom: 20px;}
.listArea .list>li p.tit.type2 {color: var(--fontColor);}
.listArea .list>li p.txt {line-height: 1.5;}
.listArea .list>li p.txt span {font-weight: 600;}
.listArea .list>li p.txt span.arr {color: var(--mainColor);}
.listArea .btText {margin-top: 20px; padding-top: 20px; border-top: 1px solid #e7e7e7; box-sizing: border-box;}
.listArea li.cash {position: relative;}
.listArea li.cash::before {content: ''; position: absolute; bottom: 10px; right: 10px; background: url('/resource/fiveproject/images/cash_icon.png') no-repeat; width: 102px; height: 113px; background-size: 100%;}
.listArea .btText .fontC3 {line-height: 1.3;}
.listArea .callText {line-height: 1.3;}
.listArea .callText:first-of-type {margin-top: 25px;}
.listArea .callText:not(:last-of-type) {margin-bottom: 15px;}
.listArea .callText span {position: relative; padding: 0 11px 0 30px; margin-right: 11px; box-sizing: border-box;}
.listArea .callText span::before {content: ''; position: absolute; top: 7px; left: 0; background: url('/resource/fiveproject/images/call_icon.png') no-repeat; width: 18px; height: 15px; background-size: 100%;}
.listArea .callText span::after {content: ''; position: absolute; top: 7px; right: 0; width: 1px; height: 16px; background: #dddddd;}

/* stepList */
.stepList {display: flex; gap: 20px;}
.stepList li {width: calc(33.333% - 13.333px); background: var(--white); border-radius: 10px; padding: 20px; box-sizing: border-box;}
.stepList li .num {font-size: 1.6rem; font-weight: 500; color: var(--mainColor); margin-bottom: 10px;}
.listArea .list>li .stepList li .tit {font-size: 1.8rem; font-weight: 600; padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid #eeeeee; box-sizing: border-box; color: var(--fontColor);}
.stepList li .txt {font-size: 1.6rem; line-height: 1.3;}

/* pointBox */
.pointBox {background: var(--subColor2); border-radius: 13px; padding: 35px; box-sizing: border-box; margin-top: 25px;}
.pointBox>.tit {font-size: 2.3rem; font-weight: 600; color: var(--mainColor); margin-bottom: 20px;}

/* s: introBox */
.introBox {position: fixed; top: 0; left: 0; z-index: 99; overflow: hidden; width: 100%; height: 100vh; background: #f1eeee; animation: introBack2 1.5s 5s ease-in-out forwards;}
.introBox .firstIntro {position: absolute;  top: 0; left: 50%; opacity: 0; transform: translateX(-50%); animation: secondIntro 1.5s forwards;}
.introBox .secondIntro {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10.7rem; padding-top: 18.5rem;}
.introBox .secondIntro img {opacity: 0; animation: secondIntro 1s 1s forwards;}
.introBox .secondIntro .text {text-align: center;}
.introBox .secondIntro .text .tit {opacity: 0; font-size: 5.0rem; font-weight: 700; color: var(--subColor); margin-bottom: 2.7rem; animation: secondIntro 1s 3s forwards;}
.introBox .secondIntro .text .txt {opacity: 0; font-size: 2.2rem; font-weight: 500; color: var(--white); animation: secondIntro 1s 3.5s forwards;}

.introBox .assetsBox .assets {position: relative;}
.introBox .assetsBox .assets img:nth-child(2) {position: absolute; top: 50%; right: -13px; transform: translateY(-50%);}
.introBox .assetsBox .assets img:nth-child(3) {position: absolute; top: 0; left: 0; width: 0; height: 7.4rem; animation: secondIntro2 1s 1.5s forwards;}
.introBox .assetsBox .assets img:nth-child(4) {position: absolute; top: 50%; left: 48%; transform: translate(-50%,-50%); animation: secondIntro 1s 1.8s infinite;}

@keyframes firstIntro {
    0% {top: -100%;}
    100% {top: 0;}
}

@keyframes secondIntro {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes secondIntro2 {
    0% {width: 0; opacity: 0;}
    100% {width: 13.2rem; opacity: 1;}
}

@keyframes introBack {
    0% {top: 0;}
    100% {top: -100%;}
}

@keyframes introBack2 {
    0% {opacity: 1; z-index: 99;}
    100% {opacity: 0; z-index: -1;}
}
 
/* s: mainVisual */
.mainVisual {position: relative; height: 100vh; display: flex; align-items: center; justify-content: flex-end; padding-right: 7%; box-sizing: border-box; background: url('/resource/fiveproject/images/mainVisual_bg.png') center center no-repeat; background-size: cover;}
.mainVisual .logo {position: absolute; top: 20px; right: 24px; z-index: 1;}
.mainVisual .contArea {width: 100rem;}
.mainVisual .contArea .title {margin-bottom: 11rem;}
.mainVisual .contArea .title .txt {font-size: 3.3rem; margin-bottom: 3.5rem; letter-spacing: -2px; animation: transform 1s /* 3.8s */ forwards;}
.mainVisual .contArea .title .tit {font-size: 6.2rem; letter-spacing: -3.5px; animation: transform 1s 0.5s forwards;}
.mainVisual .contArea .title .tit span {font-size: 8.8rem;}
.mainVisual .list {box-sizing: border-box; display: flex; gap: 26px;}
.mainVisual .list>li {width: calc(20% - 20.8px);}
.mainVisual .list>li:first-child {animation: transform 1s 0.8s forwards;}
.mainVisual .list>li:nth-child(2) {animation: transform 1s 1.1s forwards;}
.mainVisual .list>li:nth-child(3) {animation: transform 1s 1.4s forwards;}
.mainVisual .list>li:nth-child(4) {animation: transform 1s 1.7s forwards;}
.mainVisual .list>li:nth-child(5) {animation: transform 1s 2.1s forwards;}
.mainVisual .list>li a {display: block; transition: var(--time);}
.mainVisual .list>li a .tit {position: relative; font-size: 2.4rem; font-weight: 600; line-height: 1.2; height: 10rem; display: flex; align-items: center; border-top: 2px solid var(--black); transition: var(--time);}
.mainVisual .list>li a .tit::before {content: ''; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: var(--mainColor); transition: var(--time);}
.mainVisual .list>li a ul {height: 16.5rem; border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; box-sizing: border-box; padding: 2.5rem 0; margin-bottom: 3rem;}
.mainVisual .list>li a ul li {font-weight: 500; font-size: 1.6rem;}
.mainVisual .list>li a ul li:not(:last-of-type) {margin-bottom: 1.6rem;}
.mainVisual .list>li a button.arr {display: inline-block; font-size: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: url('/resource/fiveproject/images/main_arr.png') center center #dedddd no-repeat; transition: var(--time);}
.mainVisual .list>li a:hover {transform: translateY(-15px);}
.mainVisual .list>li a:hover button.arr {background: url('/resource/fiveproject/images/main_arr_on.png') center center #7030a0 no-repeat;}
.mainVisual .list>li a:hover .tit {color: var(--mainColor);}
.mainVisual .list>li a:hover .tit::before {width: 100%;}

@keyframes transform {
    0% {transform: translateY(10px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

/* 메인 비쥬얼 수정 */
.mainVisual {background: #e6e2e3; overflow: hidden;}
.mainVisual .phoneArea {position: absolute; left: 1.5rem; top: -5rem;}
.mainVisual .phoneArea .firstPhone {animation: secondIntro 1s forwards;}
.mainVisual .phoneArea .secondPhone {position: absolute; top: 20%; left: 31%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10.7rem;}
.mainVisual .phoneArea .secondPhone img {opacity: 0; animation: secondIntro 1s 0.5s forwards;}
.mainVisual .phoneArea .secondPhone .text {text-align: center;}
.mainVisual .phoneArea .secondPhone .text .tit {opacity: 0; font-size: 5.0rem; font-weight: 700; color: var(--subColor); margin-bottom: 2.7rem; animation: secondIntro 1s 2s forwards;}
.mainVisual .phoneArea .secondPhone .text .txt {opacity: 0; font-size: 2.2rem; font-weight: 500; color: var(--white); animation: secondIntro 1s 2.5s forwards;}
.mainVisual .phoneArea .assetsBox .assets {position: relative;}
.mainVisual .phoneArea .assetsBox .assets img:nth-child(2) {position: absolute; top: 50%; right: -13px; transform: translateY(-50%);}
.mainVisual .phoneArea .assetsBox .assets img:nth-child(3) {position: absolute; top: 0; left: 0; width: 0; height: 7.4rem; animation: secondIntro2 1s 1s forwards;}
.mainVisual .phoneArea .assetsBox .assets img:nth-child(4) {position: absolute; top: 50%; left: 48%; transform: translate(-50%,-50%); animation: secondIntro 1s 1.5s infinite;}

/* s: header */
header {width: 100%; box-shadow: 0 5px 13px rgba(0,0,0,5%); margin-bottom: 120px; position: sticky; top: 0; background: var(--white); z-index: 1;}
header .gnb {display: flex;}
header .gnb li {width: 20%; text-align: center;}
header .gnb li a {position: relative; font-size: 2.1rem; font-weight: 500; display: block; width: 100%; padding: 35px 0; border-radius: 13px; transition: var(--time);}
header .gnb li a::before {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: #dddddd;}
header .gnb li a:hover,
header .gnb li a.active {background: var(--mainColor); color: var(--white); font-weight: 600;}
header .gnb li a:hover::before,
header .gnb li a.active::before {display: none;}
header .mobileNav {display: none;}

/* section1 */
#section1 .banner {background-image: url('/resource/fiveproject/images/s1_banner.png');}

/* section2 */
#section2 .banner {background-image: url('/resource/fiveproject/images/s2_banner.png');}

/* section3 */
#section3 .banner {background-image: url('/resource/fiveproject/images/s3_banner.png');}

/* section4 */
#section4 .banner {background-image: url('/resource/fiveproject/images/s4_banner.png');}

/* section5 */
#section5 .banner {background-image: url('/resource/fiveproject/images/s5_banner.png');}

/* s: footer */
footer {width: 100%; background-color: #353b45; color: var(--white); padding: 50px 0; text-align: center; letter-spacing: 0;}
footer .logo {display: inline-block; margin-bottom: 35px;}
footer .txt {margin-bottom: 20px; line-height: 1.2em; padding: 0 32px;}

/* s: topBtn */
button.topBtn {display: block; position: fixed; bottom: 40px; right: 40px; font-size: 0; width: 63px; height: 63px; background: url('/resource/fiveproject/images/top_btn.png') no-repeat; background-size: 100%; z-index: 2;}

/* 반응형 */
@media screen and (max-width: 1800px) {
    .mainVisual .phoneArea {left: -2.5rem;}
}

@media screen and (max-width: 1700px) {
    .mainVisual .phoneArea {left: -8.5rem;}
}

@media screen and (max-width: 1600px) {
    /* mainVisual */
    .mainVisual {padding-right: 5%;}
    .mainVisual .contArea {width: 93rem;}
    .mainVisual .contArea .title .tit {font-size: 5rem;}

    /* 메인 비쥬얼 수정 */
    .mainVisual .phoneArea {left: -14.5rem;}
    .mainVisual .phoneArea .firstPhone {width: 90%;}
    .mainVisual .phoneArea .secondPhone {left: 26%; gap: 9.7rem;}
    .mainVisual .phoneArea .assetsBox .assets .bg img {width: 15rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(3) {height: 6.6rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(4) {width: 2.6rem;}
    .mainVisual .phoneArea .secondPhone .text .tit {font-size: 4.6rem; margin-bottom: 2.7rem;}
    .mainVisual .phoneArea .secondPhone .text .txt {font-size: 2.2rem;}
    @keyframes secondIntro2 {
        0% {width: 0; opacity: 0;}
        100% {width: 11.8rem; opacity: 1;}
    }
}

@media screen and (max-width: 1400px) {
    /* s: 공통영역 */
    .container {width: 95%;}

    /* s: mainVisual */
    .mainVisual .contArea {width: 80rem;}
    .mainVisual .contArea .title {margin-bottom: 50px;}
    .mainVisual .contArea .title .txt {font-size: 2.8rem;}
    .mainVisual .contArea .title .tit {font-size: 4.5rem;}
    .mainVisual .contArea .title .tit span {font-size: 7.4rem;}
    .mainVisual .list {gap: 12px;}
    .mainVisual .list>li {width: calc(20% - 10px);}
    .mainVisual .list>li a .tit {font-size: 2.2rem; height: 80px;}
    .mainVisual .list>li a ul li {font-size: 1.5rem;}
    .mainVisual .list>li a ul li:not(:last-of-type) {margin-bottom: 11px;}

    /* listArea */
    .listArea {width: 950px;}
}

@media screen and (max-width: 1280px) {
    /* s: 공통영역 */
    /* cont-title */
    h5.cont-title {font-size: 3.4rem;}
    h6.cont-title {font-size: 2.6rem;}
    h6.cont-title::before {top: 4px;}

    /* listArea */
    .listArea {width: 75%;}

    /* s: introBox */
    .introBox .secondIntro {padding-top: 15.5rem; gap: 8rem;}

    /* s: mainVisual */
    .mainVisual {height: 480px; /* background: url('/resource/fiveproject/images/mainVisual_bg_tab.png') center center no-repeat; background-size: cover;  */padding-right: 0; padding-left: 43%; justify-content: flex-start;}
    .mainVisual .logo img {width: 9.9rem;}
    .mainVisual .contArea {width: 53rem;}
    .mainVisual .contArea .title {margin-bottom: 38px;}
    .mainVisual .contArea .title .txt {font-size: 2.1rem; margin-bottom: 1.7rem;}
    .mainVisual .contArea .title .tit {font-size: 3.4rem;}
    .mainVisual .contArea .title .tit span {font-size: 4.9rem;}
    .mainVisual .list {flex-wrap: wrap; gap: 0; border-top: 2px solid var(--black); box-sizing: border-box;}
    .mainVisual .list>li {width: 100%;}
    .mainVisual .list>li:not(:last-of-type) {border-bottom: 1px solid #c4c4c4; box-sizing: border-box;}
    .mainVisual .list>li a {display: flex; align-items: center; justify-content: space-between; padding: 10px; box-sizing: border-box;}
    .mainVisual .list>li a .tit {font-size: 1.8rem; height: auto; border-top: none;}
    .mainVisual .list>li a .tit::before {display: none;}
    .mainVisual .list>li a .tit>br {display: none;}
    .mainVisual .list>li a button.arr {width: 28px; height: 28px; background-size: 14px;}
    .mainVisual .list>li a ul {display: none;}

    /* 메인 비쥬얼 수정 */
    .mainVisual .phoneArea {position: absolute; left: -0.8rem; width: 52.6rem;}
    .mainVisual .phoneArea .firstPhone {width: 100%;}
    .mainVisual .phoneArea .secondPhone {left: 25%; gap: 5.7rem;}
    .mainVisual .phoneArea .assetsBox .assets .bg img {width: 13rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(3) {height: 5.7rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(4) {width: 2.4rem;}
    @keyframes secondIntro2 {
        0% {width: 0; opacity: 0;}
        100% {width: 10.5rem; opacity: 1;}
    }
    .mainVisual .phoneArea .secondPhone .text .tit {font-size: 3.8rem; margin-bottom: 2.4rem;}
    .mainVisual .phoneArea .secondPhone .text .txt {font-size: 2.0rem;}
    .mainVisual .list>li a:hover {transform: translateY(0);}
}

@media screen and (max-width: 1025px) {
    /* s: 공통영역 */
    /* cont-title */
    h4.cont-title {font-size: 4.4rem; margin-bottom: 50px;}

    /* banner */
    .banner {padding: 50px 40px; margin-bottom: 80px;}

    /* conBox */
    .conBox {flex-wrap: wrap; padding: 80px 0;}
    .conBox .title {width: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 30px;}

    /* listArea */
    .listArea {width: 100%;}
    .listArea .listBox:not(:last-of-type) {margin-bottom: 60px; padding-bottom: 60px;}

    /* go_link */
    a.go_link {margin-top: 0; flex-shrink: 0;}

    /* s: introBox */
    .introBox {display: none;}
    /* .introBox .secondIntro {gap: 10.4288vw; padding-top: 18.0312vw;}
    .introBox .secondIntro .assets .bg img {width: 16.3743vw;}
    .introBox .assetsBox .assets img:nth-child(2) {width: 1.0721vw; right: -1.2671vw;}
    .introBox .assetsBox .assets img:nth-child(3) {height: 7.2125vw;}
    .introBox .assetsBox .assets img:nth-child(4) {width: 3.2164vw;}
    .introBox .secondIntro .text .tit {font-size: 3.7037vw; margin-bottom: 2.3392vw;}
    .introBox .secondIntro .text .txt {font-size: 1.9493vw;}

    @keyframes secondIntro2 {
        0% {width: 0; opacity: 0;}
        100% {width: 12.8655vw; opacity: 1;}
    } */

    /* s: mainVisual */
    .mainVisual {height: 450px; padding-left: 40%; padding-right: 30px;}
    .mainVisual .contArea {width: 50rem;}
    .mainVisual .contArea .title {margin-bottom: 25px;}
    /* .mainVisual .contArea .title .txt {animation-delay: 0s;} */
    .mainVisual .contArea .title .tit {font-size: 3.0rem; /* animation-delay: 0.5s; */}

    /* .mainVisual .list>li:first-child {animation-delay: 1s;}
    .mainVisual .list>li:nth-child(2) {animation-delay: 1.3s;}
    .mainVisual .list>li:nth-child(3) {animation-delay: 1.6s;}
    .mainVisual .list>li:nth-child(4) {animation-delay: 1.9s;}
    .mainVisual .list>li:nth-child(5) {animation-delay: 2.1s;} */

    /* 메인 비쥬얼 수정 */
    .mainVisual .phoneArea {position: absolute; left: -0.8rem; width: 43.6rem;}
    .mainVisual .phoneArea .secondPhone {left: 25%; gap: 4.6rem;}
    .mainVisual .phoneArea .assetsBox .assets .bg img {width: 10rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(2) {width: 0.9rem; right: -11px;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(3) {height: 4.4rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(4) {width: 2.0rem;}
    @keyframes secondIntro2 {
        0% {width: 0; opacity: 0;}
        100% {width: 8rem; opacity: 1;}
    }
    .mainVisual .phoneArea .secondPhone .text .tit {font-size: 3.0rem; margin-bottom: 2.0rem;}
    .mainVisual .phoneArea .secondPhone .text .txt {font-size: 1.7rem;}

    /* s: header */
    header .container {width: 100%;}
    header .gnb {flex-wrap: wrap;}
    header .gnb li {width: 33.333%;}
    header .gnb li a {font-size: 1.9rem; padding: 25px 0; border-radius: 0;}
}

@media screen and (max-width: 780px) {
    /* 메인 비쥬얼 수정 */
    /* s: mainVisual */
    .mainVisual {height: 750px; /* background: url('/resource/fiveproject/images/mainVisual_bg_mob.png') center center no-repeat; background-size: cover; */ padding: 0 20px 15px 20px; align-items: flex-end; justify-content: center;}
    .mainVisual .logo {left: 12px; top: 11px;}
    .mainVisual .phoneArea {left: 54%; width: 43rem; transform: translateX(-50%);}
    .mainVisual .contArea {width: 100%;}
    .mainVisual .contArea .title {text-align: center;}
    .mainVisual .contArea .title .tit span {font-size: 4.0rem;}
}

@media screen and (max-width: 768px) {
    /* s: 공통영역 */
    body {font-size: 1.6rem;}

    /* container */
    .container {width: 93%;}

    /* cont-title */
    h4.cont-title {font-size: 3.4rem; margin-bottom: 30px;}
    h5.cont-title {font-size: 3.0rem;}
    
    /* cont-list */
    .cont-list.flex li span.tit {width: 38px;}
    .cont-list.flex li span.tit.type2 {width: 53px;}

    /* banner */
    .banner {padding: 35px 30px;}
    .banner .list {column-gap: 20px;}
    .banner .list li {font-size: 1.6rem;}
    .banner .list li:not(:last-of-type)::before {top: 2px; right: -12px; height: 15px;}

    /* conBox */
    .conBox .title {margin-bottom: 20px;}

    /* pointBox */
    .pointBox {padding: 25px;}

    /* listArea */
    .listArea .list {gap: 15px;}
    .listArea .list>li {width: 100% !important; padding: 25px;}
    .listArea .list>li p.tit {font-size: 2.0rem; margin-bottom: 12px;}
    .listArea .callText:first-of-type {margin-top: 20px;}
    .listArea .callText span {padding: 0 8px 0 20px; margin-right: 8px;}
    .listArea .callText span::before {top: 7px; width: 15px;}
    .listArea .callText span::after {top: 6px; right: -1px; height: 14px;}
    .listArea .btText {padding-top: 15px; margin-top: 15px;}
    .listArea li.cash::before {display: none;}

    /* stepList */
    .stepList {gap: 10px; flex-wrap: wrap;}
    .stepList li {width: 100%;}

    /* s: header */
    header .gnb li a {font-size: 1.8rem; padding: 20px 0;}

    /* section1 */
    #section1 .banner {background-image: url('/resource/fiveproject/images/s1_banner_mo.png');}

    /* section2 */
    #section2 .banner {background-image: url('/resource/fiveproject/images/s2_banner_mo.png');}

    /* section3 */
    #section3 .banner {background-image: url('/resource/fiveproject/images/s3_banner_mo.png');}

    /* section4 */
    #section4 .banner {background-image: url('/resource/fiveproject/images/s4_banner_mo.png');}

    /* section5 */
    #section5 .banner {background-image: url('/resource/fiveproject/images/s5_banner_mo.png');}

    /* s: topBtn */
    button.topBtn {right: 30px; bottom: 30px; width: 53px; height: 53px;}

    /* s: footer */
    footer .txt {padding: 0 16px;}
    footer>div>p.txt {display: none;}
    footer {padding: 25px 0;}
    footer .logo {height: 25px; margin-bottom: 19px;}
    footer>div>p {font-size: 1.4rem;}
}

@media screen and (max-width: 480px) {
    /* s: 공통영역 */
    /* conBox */
    .conBox {padding: 35px 0;}
    .conBox .title {margin-bottom: 15px;}

    /* cont-title */
    h4.cont-title {font-size: 2.4rem; margin-bottom: 20px;}
    h5.cont-title {font-size: 2.6rem;}
    h6.cont-title {font-size: 2.2rem; margin-bottom: 15px;}
    h6.cont-title::before {height: 24px; top: 3px;}

    /* cont-list */
    .cont-list li.flex {flex-wrap: wrap;}

    /* banner */
    .banner {padding: 30px 25px;}
    .banner .list {column-gap: 17px;}
    .banner .list li {font-weight: 400;}
    .banner .list li:not(:last-of-type)::before {right: -8px;}

    /* listArea */
    .listArea .list>li {padding: 20px;}
    .listArea .list>li p.tit {font-size: 1.8rem; margin-bottom: 12px;}
    .listArea .subTit {padding: 10px 20px;}
    .listArea .subTit p {font-size: 1.8rem;}

    /* stepList */
    .stepList li {padding: 15px;}
    .stepList li .num {font-size: 1.4rem; margin-bottom: 10px;}
    .listArea .list>li .stepList li .tit {font-size: 1.6rem;}

    /* s: mainVisual */
    /* .mainVisual {background: url('/resource/fiveproject/images/mainVisual_bg_mob2.png') center center no-repeat; background-size: cover;} */
    .mainVisual .contArea .title .tit {font-size: 3.2rem;}
    .mainVisual .contArea .title .tit span {font-size: 3.2rem;}

    /* 메인 비쥬얼 수정 */
    .mainVisual .phoneArea {width: 42rem; left: 58%; top: -6rem;}
    .mainVisual .phoneArea .secondPhone {left: 25%; top: 23%; gap: 4.7rem;}
    .mainVisual .phoneArea .assetsBox .assets .bg img {width: 10rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(3) {height: 4.4rem;}
    .mainVisual .phoneArea .assetsBox .assets img:nth-child(4) {width: 1.7rem;}
    .mainVisual .phoneArea .secondPhone .text .tit {font-size: 2.8rem; margin-bottom: 1.8rem;}
    .mainVisual .phoneArea .secondPhone .text .txt {font-size: 1.6rem;}
    @keyframes secondIntro2 {
        0% {width: 0; opacity: 0;}
        100% {width: 8rem; opacity: 1;}
    }

    /* s: header */
    header {margin-bottom: 80px;}
    header .gnb {display: none;}
    header .mobileNav {display: block;}
    header .mobileNav li {width: 100%;}
    header .mobileNav li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; padding: 0 60px; box-sizing: border-box; background: var(--mainColor); font-size: 2.2rem; font-weight: 600; text-align: center; color: var(--white);}
    header .mobileNav .slideBtn {background-repeat: no-repeat; background-position: center center; position: absolute; top: 0; margin-top: 0; width: 60px; height: 70px; padding: 0; font-size: 0;}
    header .mobileNav .slideBtn::after {display: none;}
    header .mobileNav .slideBtn.next {background-image: url('/resource/englishbusan/images/slideNext.png'); right: 0;}
    header .mobileNav .slideBtn.prev {background-image: url('/resource/englishbusan/images/slidePrev.png'); left: 0;}
}