@charset "utf-8";
/* common */
.renewal *{box-sizing: border-box;  line-height: 1.2;}
.renewal img {display: block; width: 100%;}
.pcArea.renewal .inner {
    max-width: 1280px;
    margin: 0 auto;
}

.section .tit {text-align: center;}
.section .tit > span {font-size: 24px; font-weight: 400; color: #505050; font-family: 'NanumSquare'; line-height: 1.4;}
.section .tit p:not(.small){font-size: 48px; color: #093A5E;font-family: 'NanumSquare'; line-height: 1.2;}
.section .tit p:not(.small) strong {font-weight: 600; display: inline-block;position: relative; z-index: 2;}
.section .tit p:not(.small) strong::before{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% + 16px); height: 32px; background-color: #D2F3FF; z-index: -1; border-radius: 8px;}
.section .tit p.small {display: block; font-size: 18px; text-align: center; color: #767676; margin: 20px 0 40px; line-height: 1.4;}

/* visual */
.visual-area {height: 880px; background: url('../images/2024/visual-bg.png') no-repeat 50% 50% / cover; position: relative;}
.visual-area .inner {position: relative;}
.visual-area .tit {position: absolute; top: 240px; left: 0;}
.visual-area .tit p span {font-size: 32px; font-weight: 600; font-family: 'NanumSquare'; line-height: 1.3;}
.visual-area .tit p span.blue {color: #2787CC;}
.visual-area .tit p span.red {color: #E36352;}
.visual-area .tit strong {font-size: 48px; font-weight: 600; color: #111; line-height: 1.4;}
.visual-area .tit a{display: flex; margin-top: 40px; width: 280px; height: 66px; border-radius: 12px; background-color: #139dff; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #fff;}

/* section1 */
.section1 {
    margin-top: -122px;
    padding: 180px 0 150px;
    background: url(../images/2024/section1-bg.png) no-repeat 50% 50% / cover;
}

.section1 .item-box ul {position: relative; display: flex; align-items: stretch; flex-wrap: wrap; gap: 40px 28px; z-index: 1;}
.section1 .item-box ul::after {content: ''; position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%,-50%); width: 340px; height: 340px; background: url('../images/2024/section1-bg-acc.png') no-repeat 50% 50% / contain; z-index: -1;}
.section1 .item-box ul li {width: calc(50% - 14px); background-color: rgba(255,255,255,0.6); border-radius: 24px; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06); padding: 60px 0; position: relative; backdrop-filter: blur(15px);}
.section1 .item-box ul li:nth-child(2n){padding-left: 128px; text-align: left;}
.section1 .item-box ul li:nth-child(2n - 1){padding-right: 128px; text-align: right;}

.section1 .item-box ul li i {position: absolute; display: flex; align-items: center; justify-content: center;}
.section1 .item-box ul li:nth-child(1) i{bottom: 16px; right: 19px; width: 60px; height: 60px;} 
.section1 .item-box ul li:nth-child(2) i {bottom: 16px; left: 32px; height: 64px;width: 64px;}
.section1 .item-box ul li:nth-child(3) i {top: 32px; right: 19px; height: 64px;width: 64px;}
.section1 .item-box ul li:nth-child(4) i {top: 32px; left: 32px; height: 60px;width: 60px;}


.section1 .item-box li > strong {font-size: 28px; font-weight: 500; color: #111; display: block; margin-bottom: 12px;}
.section1 .item-box li > strong br {display: none;}
.section1 .item-box li > p {font-size: 20px; font-weight: 400; color: #111; line-height: 1.5;}
.section1 .item-box li > p br.mo {display: none;}



/* section2 */
.section2 {position: relative; padding: 128px 0 160px; z-index: 2;}
.section2::before{content: ''; position: absolute; top: -100px; left: 0; z-index: -1; width: 100%; height: 100%; background: url('../images/2024/section2-before.png') no-repeat 50% 50% / auto 100%;} 

.section2 .flex-wrap {display: flex; justify-content: space-between; width: 100%;}
.section2 .flex-wrap.mo{display: none;}
.section2 .flex-wrap > div {width: calc(50% - 92px);}
.section2 .flex-wrap .left-service-box > .tit {text-align: left; margin-bottom: 214px;}
.section2 .flex-wrap .left-service-box > .tit p {text-align: left;}

.section2 .flex-wrap .img-area {position: relative; margin-bottom: 66px; display: block;}
.section2 .flex-wrap .img-area .service-img {display: flex; align-items: center; justify-content: center; max-width: 480px;}
.section2 .flex-wrap .img-area .service-ico {position: absolute; bottom: -54px; left: 50%; transform: translateX(-50%); width: 172px; height: 172px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.06);display: flex; align-items: center; justify-content: center; border-radius: 100px 20px 100px 100px; overflow: hidden;}
.section2 .flex-wrap .img-area .service-ico img {max-width: 72px;}

.section2 .flex-wrap .text-area h4{margin: 0; font-size: 32px; font-weight: 500; color: #111; display: block; margin-bottom: 16px; letter-spacing: -0.01em;}
.section2 .flex-wrap .text-area h4 + p {font-size: 20px; font-weight: 400; color: #111; letter-spacing: -0.01em; line-height: 1.5; display: block; margin-bottom: 28px;}
.section2 .flex-wrap .text-area .more-btn {display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; font-weight: 500; letter-spacing: -0.01em; height: 48px; gap: 2px; border-radius: 8px; background-color: #139dff; width: 174px;}
.section2 .flex-wrap .text-area .more-btn i {display: flex; align-items: center; justify-content: center; width: 32px; }

.section2 .service-box.box2 {margin-bottom: 70px;}



/* section3 */
.section3{background: url('../images/2024/section3-bg.png') no-repeat 50% 50% / cover;}
.section3 .flex-wrap {display: flex; justify-content: space-between; width: 100%; }
.section3 .left-ex-txt-box {width: 300px; margin: 148px 0 344px;}
.section3 .left-ex-txt-box .tit {text-align: left;}
.section3 .left-ex-txt-box .tit .small {margin: 20px 0 32px; text-align: left;}
.section3 .left-ex-txt-box .tit .text-arrow {font-size: 16px; display:flex; align-items: center; gap: 4px; width: fit-content; color: #767676;}
.section3 .left-ex-txt-box .tit .text-arrow i {display: flex; align-items: center; width: 20px;}
.section3 .right-ex-img-box {width: calc(100% - 444px);}

.section3 .right-work-box {overflow: hidden;}
.section3 .right-work-box.mo{display: none;}
.section3 .work-columns{display: flex; gap: 28px; height: 776px;}
.section3 .work-column:nth-child(2) .work-track{top: -123px;}
.section3 .work-track{position: relative; width: 100%; display: flex; flex-direction: column; gap: 28px;}
.section3 .work-item img{display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 10px;}

/* banner */
#banner {padding: 160px 0;}
#banner .banner-box img.mo{display: none;}


/* section4 */
.section4 .tit {text-align: left;}
.section4 .tit p.small {text-align: left; margin: 20px 0 60px;}
.section4 .partners-wrapper {display: block; width: 100%; overflow: hidden;}
.section4 .partners-wrapper .partners-row {position: relative; overflow: hidden; width: 100%;}
.section4 .partners-wrapper > div:nth-child(n+2){margin-top: 16px;}
.section4 .partners-wrapper .partners-track {display: flex; width: max-content;position: relative; left: 0; transition: left 0.1s linear;}
.section4 .partners-wrapper .partner{flex-shrink: 0; padding: 0 10px;}
.section4 .partners-wrapper .partner img {display: block; height: 100px; width: auto;}


/* section5 */
.section5{padding: 160px 0;}
.section5 .flex-wrap {display: flex; align-items: center; justify-content: space-between; gap: 100px;}
.section5 .flex-wrap .tit {width: 365px; text-align: left;}
.section5 .flex-wrap .tit p.small {text-align: left;}


.certificate-slider { width: 816px; padding: 20px 60px;}
.certificateSwiper {width: 100%; position: relative; }
.certificateSwiper .swiper-slide {text-align: center;margin-bottom : 70px;}
.certificateSwiper .swiper-slide img { width: 100%; height: auto; object-fit: cover; border-radius: 16px;box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06);}
.certificateSwiper .swiper-scrollbar {bottom: 0px;height: 3px; background: #D4D4D8;}
.certificateSwiper .swiper-scrollbar-drag {background: #139DFF;}
.certificateSwiper .swiper-button-next,
.certificateSwiper .swiper-button-prev {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 100%; background-color: #F8F8F8;position: absolute; top: 50%; transform: translateY(-50%);}
.certificateSwiper .swiper-button-next {right: 0px;}
.certificateSwiper .swiper-button-prev {left: 0px;}
.certificateSwiper .swiper-button-next:after,
.certificateSwiper .swiper-button-prev:after {
    font-size: 16px;
    color: #9494A0;
}

/* contact */
#contact-wrapper {padding: 148px 0; background: url('../images/2024/contac-bg.png') no-repeat 50% 50% / cover;}
#contact-wrapper  .inner {display: flex; align-items: stretch; justify-content: space-between;}
#contact-wrapper  .inner .left-box {width: 560px;}
#contact-wrapper  .inner .left-box .top-area{display: flex; align-items: stretch; justify-content: space-between;  margin-bottom: 28px;}
#contact-wrapper  .inner .left-box .top-area li {width: calc(50% - 14px); }
#contact-wrapper  .inner .left-box li{background-color: rgba(246,249,250,0.8); border-radius: 16px; backdrop-filter: blur(20px); padding: 48px 32px; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06);}
#contact-wrapper  .inner .left-box li i{display: flex; align-items: center; justify-content: center; width: 37px;}
#contact-wrapper  .inner .left-box li .contact-tit {display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
#contact-wrapper  .inner .left-box li .contact-tit strong {font-size: 32px; font-weight: 600; color: #111; display: block; font-family: 'NanumSquare';}
#contact-wrapper  .inner .left-box li .contact-txt {font-size: 18px; font-weight: 400; color: #505050; letter-spacing: -0.01em; line-height: 1.4; margin-bottom: 28px; display: block;}
#contact-wrapper  .inner .left-box li .fs-big {font-size: 36px; font-weight: 500; color: #111; line-height: 1.3; display: block;}
#contact-wrapper  .inner .left-box li .contact-blog {display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 400; color: #767676; line-height: 1.5;}
#contact-wrapper  .inner .left-box li .contact-blog i {display: flex; align-items: center; justify-content: center; width: 20px;}
#contact-wrapper  .inner .left-box li .contact-kakao {display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 500; color: #3c1e1e; line-height: 1.5; left: -0.01em; margin-top: 52px; width: 100%; height: 66px; border-radius: 8px; background-color: #fae100;}
#contact-wrapper  .inner .left-box li .contact-kakao i {display: flex; align-items: center; justify-content: center; width: 21px;}
#contact-wrapper  .inner .right-box {width: calc(100% - 588px); background-color: rgba(246,249,250,0.8); border-radius: 16px; backdrop-filter: blur(20px); padding: 48px; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06);}
#contact-wrapper  .inner .right-box .contact-tit h5 {font-size: 40px; font-weight: 500; color: #111; margin-bottom: 12px; display: block; }
#contact-wrapper  .inner .right-box .contact-tit p{font-size: 18px; font-weight: 400; color: #505050; letter-spacing: -0.01em; display: block; margin-bottom: 32px;}

/* contact form */
#contact-wrapper .right-box .form-box {display: flex; flex-direction: column; gap: 20px;}
#contact-wrapper .right-box .form-box .flex{display: flex;align-items: center; gap: 12px; justify-content: space-between;}
#contact-wrapper .right-box .form-box .flex.chk{justify-content: flex-start; margin-top: 4px; gap: 0;}
#contact-wrapper .right-box .form-box .flex:not(.full,.chk) input:first-child{width: 384px;}
#contact-wrapper .right-box .form-box .flex:not(.full,.ck) input:last-child{width: calc(100% - 396px);}
#contact-wrapper .right-box .form-box input, #contact-wrapper .right-box .form-box textarea{
    height: 56px; border-radius: 8px; padding: 0 16px; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.5; background-color: #fff; resize: none; border: none; outline: none;
}
#contact-wrapper .right-box .form-box textarea {height: 136px; padding: 16px;}
#contact-wrapper .right-box .form-box input::placeholder, #contact-wrapper .right-box .form-box textarea::placeholder{font-size: 18px; color: #767676; }
#contact-wrapper .right-box .form-box .full input, #contact-wrapper .right-box .form-box .full textarea {width: 100%; }

#contact-wrapper .right-box .form-box input[type="checkbox"] {width: 18px; height: 18px; border-radius: 100%; border: 1px solid #AAAAAA; background-color: transparent; appearance: none; display: block; padding: 0; margin: 0; box-sizing: border-box; margin-right: 6px; cursor: pointer;}
#contact-wrapper .right-box .form-box input[type="checkbox"]:checked {background: #139DFF url('../images/2024/chk-ico.png') no-repeat 50% 50% / 10px 7px; border-color: #139DFF;}

#contact-wrapper .right-box .form-box input[type="checkbox"] + label {color: #767676; font-size: 16px;}  
#contact-wrapper .right-box .form-box input[type="checkbox"] + label  span {color: #767676; font-weight: 400; text-decoration: underline;}
#contact-wrapper .right-box .form-box label {display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 400; color: #767676; line-height: 1.5;}
#contact-wrapper .right-box .form-box label span {font-weight: 500; color: #111;}
#contact-wrapper .right-box .form-box .submit-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 8px; background-color: #139dff; font-size: 18px; font-weight: 500; color: #fff; margin-top: 8px; outline: none; letter-spacing: -0.01em; border: none;}


/* header */
#re-header {position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: transparent; height: 96px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}
#re-header.active, #re-header.scroll {background-color: #fff;}
header, header .wrapper {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
header.mo{display: none;}
header .inner {max-width: 1280px; margin: 0 auto; display: flex; align-items: center; width: 100%; height: 100%; justify-content: space-between;}
header .inner #logo a{display: flex; align-items: center; width: 125px;}
header .inner #logo a img{display: block; width: 100%;}
header .inner nav.re-nav {margin: 0 38px;}
header .inner .nav-list{display: flex; align-items: center;}
header .inner .nav-list .deps1 {position: relative; width: 159px; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
header .inner .nav-list .deps1 > a{ width: 100%; height: 100%; text-align: center; font-size: 18px; color: #111; font-weight: 500; height: 96px; display: flex; align-items: center; justify-content: center; transition:0.3s ease;}
header .inner .nav-list .sub-menu{position: absolute; top: 96px; left: 50%; width: 159px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px); box-shadow: 0px 4px 20px 0px rgba(0,4px,20px,0.06); transform: translateX(-50%); display: none; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
header .inner .nav-list .deps1.active .sub-menu{display: block; opacity: 1; visibility: visible;}
header .inner .nav-list .sub-menu li a {text-align: center; display: block; width: 100%; padding: 13px 0; font-size: 15px; color: #111; transition:0.3s ease;}

/* active */
header .inner .nav-list .deps1.active > a {color: #139DFF;}
header .inner .nav-list .deps1.active .deps1-menu{position: relative;}
header .inner .nav-list .deps1.active .deps1-menu::after {content: ''; position: absolute;  bottom: 0; left: 0; width: 100%; height: 3px; background-color: #139DFF;}
header .inner .nav-list .sub-menu li a:hover{color: #139DFF;}

header .r-contact-box ul {display: flex; align-items: center;}
header .r-contact-box ul li:first-child{display: flex; align-items: center; gap: 6px; position: relative; padding-right: 16px; margin-right: 16px;}
header .r-contact-box ul li:first-child::after{content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 20px; transform: translateY(-50%); background-color: #999;}
header .r-contact-box ul li i {display: flex; align-items: center; justify-content: center;width: 24px;}
header .r-contact-box ul li i img{display: block; width: 100%;}
header .r-contact-box ul li i + a {display: block; font-size: 24px; font-weight: 500; color: #111;}
header .r-contact-box ul li:last-child p {display: block;font-size: 12px; color: #505050; text-align: left;}
header .r-contact-box ul li:last-child p:first-child{margin-bottom: 4px;}

/* footer */
#footer {margin: 0; padding: 0; background: transparent;}
footer.footer-wrap{padding: 80px 0; background: #D9DEE2;}
footer.footer-wrap .inner {max-width:1280px; margin: 0 auto;}
footer.footer-wrap .flex-box{display: flex; justify-content: space-between; }
footer.footer-wrap .flex-box.mo{display: none;}
footer.footer-wrap ul.f-nav {display: flex; align-items: center;}
footer.footer-wrap ul.f-nav li:nth-child(n+2){margin-left:16px; padding-left: 16px; position: relative}
footer.footer-wrap ul.f-nav li:nth-child(n+2)::before{content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 12px; background-color: #999999;}
footer.footer-wrap ul.f-nav li a{font-size: 15px; color: #505050;}

footer.footer-wrap .f-logo{display: flex; width: 191px; margin: 28px 0 32px;}
footer.footer-wrap .f-logo img{display: block; width: 100%;}

footer.footer-wrap .f-info ul li{display: flex; gap: 14px;}
footer.footer-wrap .f-info ul li:nth-child(n+2){margin-top: 6px;}
footer.footer-wrap .f-info ul li p{font-size: 14px; color: #767676;}
footer.footer-wrap .f-info ul li.copy{margin-top: 12px;}

footer.footer-wrap .contact-tit span{display: block; font-size: 16px; color: #505050; margin-bottom:8px;}
footer.footer-wrap .contact-tit strong {display: block; font-size: 20px; color: #111; font-weight: 500; margin-bottom: 12px;}
footer.footer-wrap .contact-desc p{font-size: 14px; color: #767676;}
footer.footer-wrap .contact-desc p:last-child{margin-top: 6px;}


/* footer-floating */
#floating-box {position: fixed; bottom: 80px; right: 40px; z-index: 999;}
#floating-box ul li{display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background-color: #fff; border-radius: 100%; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06);}
#floating-box ul li:last-child{margin-top: 16px;}

#floating-box ul li#chat-btn a {display: block; width: 100%; height: 100%; background: url('../images/2024/f-chat-ico.png') no-repeat 50% 50% / 38px 38px;}
#floating-box ul li#top-btn a {display: block; width: 100%; height: 100%; background: url('../images/2024/f-top-ico.png') no-repeat 50% 50% / 24px 24px;}

/* ********* media ********* */
@media screen and (max-width: 1300px) {
    /* common */
    .pcArea.renewal .inner{padding: 0 40px;}

    /* header */
    header .inner {padding: 0 40px;}
    header .inner #logo a{width: 100px;}
    header .inner nav.re-nav{margin: 0 12px;}
    header .inner nav.re-nav .nav-list .deps1{width: 120px;}
    header .inner nav.re-nav .nav-list .deps1 > a{font-size: 16px;}
    header .inner nav.re-nav .nav-list .sub-menu{width: 120px;}
    header .inner nav.re-nav .nav-list .sub-menu li a{font-size: 14px;}
    header .inner nav.re-nav .nav-list .deps1.active .deps1-menu::after{width: 100%;}
    header .r-contact-box ul li i{width: 20px;}
    header .r-contact-box ul li i + a{font-size: 20px;}

    /* footer */
    footer.footer-wrap .inner{padding: 0 40px;}

    /* visual */
    .visual-area .tit{left: 40px;}


    /* section1 */
    .section1 .item-box ul li:nth-child(2n - 1){padding-left: 40px; word-break: keep-all;}
    .section1 .item-box ul li:nth-child(2n){padding-right: 40px; word-break: keep-all;}

    /* section5 */
    .section5 .flex-wrap .tit{width: 370px;}
    .certificate-slider{width: 700px;}

    /* contact */
    #contact-wrapper .right-box .form-box .flex:not(.full,.chk) input:first-child{width: 60%;}
    #contact-wrapper .right-box .form-box .flex:not(.full,.ck) input:last-child{width: 40%;}

}

@media screen and (max-width: 1210px){
    /* section3 */
    .section3 .work-item img {height: 260px;}
}
@media screen and (max-width: 1200px){
    /* visual */
    .visual-area{height: 800px;}
    .visual-area .tit{top: 200px;}

    /* contact */
    #contact-wrapper .inner .left-box{width: calc(100% - 480px);}
    #contact-wrapper .inner .left-box li{padding: 30px 22px;}
    #contact-wrapper .inner .left-box li i{width: 30px;}
    #contact-wrapper .inner .left-box li .contact-tit strong{font-size: 24px;}
    #contact-wrapper .inner .left-box li .contact-txt{font-size: 16px;}
    #contact-wrapper .inner .left-box li .fs-big{font-size: 30px;}

    #contact-wrapper .inner .right-box{width: 460px;}
    #contact-wrapper .inner .right-box{padding: 30px;}
    #contact-wrapper .inner .right-box .contact-tit h5{font-size: 26px;}
    #contact-wrapper .inner .right-box .contact-tit p{font-size: 16px;}
}

@media screen and (max-width: 1300px) {
        /* section5 */
        .certificate-slider{width: 600px; padding: 20px 40px;}
}

@media screen and (max-width: 1080px) {
    /* visual */
    .visual-area{height: 720px;}


    /* header */
    header .inner #logo a{width: 80px;}
    header .inner nav.re-nav{margin: 0 12px;}
    header .inner nav.re-nav .nav-list .deps1{width: 100px;}
    header .inner nav.re-nav .nav-list .deps1 > a{font-size: 14px;}
    header .inner nav.re-nav .nav-list .sub-menu{width: 100px;}
    header .inner nav.re-nav .nav-list .sub-menu li a{font-size: 12px;}
    header .inner nav.re-nav .nav-list .deps1.active .deps1-menu::after{width: 100%;}
    header .r-contact-box ul li i{width: 16px;}
    header .r-contact-box ul li i + a{font-size: 16px;}

    /* section1 */
    .section1 .item-box ul li{padding: 48px 0;}
    .section1 .item-box ul li:nth-child(2n - 1){padding-right: 96px;}
    .section1 .item-box ul li:nth-child(2n){padding-left: 96px;}
    .section1 .item-box li > strong{font-size: 22px;}
    .section1 .item-box li > p{font-size: 16px;}

    .section1 .item-box ul li:nth-child(1) i, .section1 .item-box ul li:nth-child(4) i{width: 50px; height: auto;}
    .section1 .item-box ul li:nth-child(3) i, .section1 .item-box ul li:nth-child(2) i{width: 52px; height: auto;}

    /* section2 */
    .section2 .flex-wrap > div{width: calc(50% - 60px);}
    .section2 .flex-wrap .img-area .service-img{max-width: 380px;}
    .section2 .flex-wrap .img-area .service-ico{width: 150px; height: 150px;}
    .section2 .flex-wrap .img-area .service-ico img{max-width: 50px;}
    .section2 .flex-wrap .text-area h4{font-size: 26px;}
    .section2 .flex-wrap .text-area h4 + p{font-size: 18px; word-break: keep-all;}
    .section2 .flex-wrap .text-area .more-btn{font-size: 16px; width: 156px;}
    .section2 .flex-wrap .text-area .more-btn i{width: 26px;}

    /* section3 */
    .section3 .work-item img {height: 220px;}

   

}
@media screen and (max-width: 1050px) {
    .section5 .flex-wrap{flex-direction: column; align-items: flex-start; gap: 40px;}
    .certificate-slider{width: 100%;}
}
@media screen and (max-width: 960px) {
    /* header */
    header .inner #logo a{width: 60px;}
    header .inner nav.re-nav{margin: 0 12px;}
    header .inner nav.re-nav .nav-list .deps1{width: 80px;}
    header .inner nav.re-nav .nav-list .deps1 > a{font-size: 14px;}
    header .inner nav.re-nav .nav-list .sub-menu{width: 80px;}
    header .inner nav.re-nav .nav-list .sub-menu li a{font-size: 12px;}
    header .inner nav.re-nav .nav-list .deps1.active .deps1-menu::after{width: 100%;}
    header .r-contact-box ul li i{width: 16px;}
    header .r-contact-box ul li i + a{font-size: 16px;}

    /* visual */
    .visual-area{height: 680px;}
    .visual-area .tit{top: 176px;}

    /* section3 */
    .section3 .left-ex-txt-box{margin: 70px 0 0;}
    .section3 .work-columns{height: 600px; gap: 20px;}
    .section3 .work-item img {height: 180px;}

    /* contact */
    #contact-wrapper .inner{flex-direction: column; gap: 30px 0;}
    #contact-wrapper .inner .left-box{width: 100%;}
    #contact-wrapper .inner .right-box{width: 100%;}
}

@media screen and (max-width: 910px) {
    /* footer */
    footer.footer-wrap ul.f-nav li a{font-size: 13px;}
    footer.footer-wrap .f-info ul li p{font-size: 12px;}
    footer.footer-wrap .contact-desc p{font-size: 12px;}
}

@media screen and (max-width: 900px) {
     /* common */
     .pcArea.renewal .inner{padding: 0 30px;}

    /* visual */
    .visual-area{height: 620px;}
    .visual-area .tit{top: 170px;}
    .visual-area .tit p span{font-size: 28px;}
    .visual-area .tit strong{font-size: 40px;}
    .visual-area .tit a{font-size: 20px; width: 260px; height: 60px;}

}

@media screen and (max-width: 800px) {
    /* common */
    .section .tit > span{font-size: 4vw;}
    .section .tit p:not(.small){display: flex; align-items: center; flex-wrap: wrap; font-size: 6.4vw; gap: 2.1333vw;}
    .section .tit p.small{margin: 1.8667vw 0 6.4vw; font-size: 3.4667vw;}
    .section .tit p:not(.small) strong::before{height: 4.8vw; width: calc(100% + 2.1333vw);}

    /* header */
    header.pc{display: none;}
    header.mo{display: block;}
   
    #re-header {height: 14.9333vw;}
    #re-header header.mo .inner {padding: 0 4.2667vw;}
    #re-header header.mo #mo-logo a{display: flex; align-items: center; justify-content: center; width: 30.6667vw;}
    #re-header header.mo #mo-logo a img {display: block; width: 100%;}
    #re-header header.mo .right-box{display: flex; align-items: center;}
    #re-header header.mo .right-box .contact-box {display: flex; align-items: center; gap: 1.0667vw; margin-right: 4.2667vw;}
    #re-header header.mo .right-box .contact-box i{display: flex; align-items: center; justify-content: center; width: 4.2667vw; height: 4.2667vw; }
    #re-header header.mo .right-box .contact-box i img {display: block; width: 100%;}
    #re-header header.mo .right-box .contact-box i + a {font-size: 4vw; font-weight: 500; color: #111;}
    #re-header header.mo #ham-menu{display: block; width: 6.4vw; height: 6.4vw; position: relative;}
    #re-header header.mo #ham-menu span {position: absolute; left: 50%; transform: translate(-50%,-50%); width: 4.8vw; height: 0.5333vw; border-radius: 3px; background-color: #111; }
    #re-header header.mo #ham-menu span:nth-child(1){top: calc(50% - 1.0667vw);}
    #re-header header.mo #ham-menu span:nth-child(2){top: 50%; transform: translate(-50%,-50%);}
    #re-header header.mo #ham-menu span:nth-child(3){top: calc(50% + 1.0667vw);}

    #re-header header.mo #mo-side-menu{position: absolute; top: 0; right: -100%; width: calc(100% - 21.3333vw); background: #F2F7F9; height: 100vh; z-index: 1000; transition: right 0.3s ease;}
    #re-header header.mo #mo-side-menu.open{right: 0;}
    #re-header header.mo #mo-side-menu #side-close-btn {position: absolute; top: 3.7333vw; right: 3.7333vw; width: 7.4667vw; height: 7.4667vw;}
    #re-header header.mo #mo-side-menu #side-close-btn span {position: absolute; top: 50%; left: 50%; width: 3.7333vw; height: 1.5px; background-color: #111; border-radius: 3px;transform: translate(-50%,-50%);}
    #re-header header.mo #mo-side-menu #side-close-btn span:first-child{transform: translate(-50%,-50%) rotate(45deg);}
    #re-header header.mo #mo-side-menu #side-close-btn span:last-child{transform: translate(-50%,-50%) rotate(-45deg);}
    #re-header header.mo #mo-side-menu .inner {padding: 0; margin-top: 21.3333vw; flex-direction: column; align-items: flex-start; padding-bottom: 21.3333vw; overflow: hidden; overflow-y: auto;}
#re-header header.mo #mo-side-menu  .mo-nav-wrap, #re-header header.mo #mo-side-menu  .mo-nav-wrap li {display: block; width: 100%;}
#re-header header.mo #mo-side-menu .mo-nav-wrap{margin-bottom :14.9333vw;}
    #re-header header.mo #mo-side-menu  .mo-nav-wrap li > a {padding: 4.2667vw; display: block; font-size: 4.2667vw; font-weight: 500; color: #111; transition: 0.5s;}
    #re-header header.mo #mo-side-menu  .mo-nav-wrap li.active > a{color: #139DFF;}
    #re-header header.mo #mo-side-menu  .mo-nav-wrap > li > a{position: relative;}
    #re-header header.mo #mo-side-menu  .mo-nav-wrap > li:nth-child(1) > a::after, #re-header header.mo #mo-side-menu  .mo-nav-wrap > li:nth-child(2) > a::after, #re-header header.mo #mo-side-menu .mo-nav-wrap > li:nth-child(3) > a::after{content: ''; position: absolute; top: 50%; right: 4.2667vw; width: 1.6vw; height: 1.6vw; border-right: 1.5px solid #999999; border-bottom: 1.5px solid #999999; transform: translateY(-50%) rotate(45deg); transition: 0.5s;}
    #re-header header.mo #mo-side-menu  .mo-nav-wrap > li.active:nth-child(1) > a::after, #re-header header.mo #mo-side-menu  .mo-nav-wrap > li.active:nth-child(2) > a::after{transform: translateY(-50%) rotate(-136deg);}
    #re-header header.mo #mo-side-menu .deps2-list{width: 100%; background-color: #F9F7F4; overflow: hidden; transition:  0.3s ease; display: none;}
    #re-header header.mo #mo-side-menu .mo-nav-wrap > li.active .deps2-list {display: block;}
    #re-header header.mo #mo-side-menu .deps2-list li{width: 100%; padding: 2.6667vw 6.4vw;}
    #re-header header.mo #mo-side-menu .deps2-list li > a{font-size: 3.7333vw; font-weight: 500; color: #505050; padding:0;}

    #re-header header.mo #mo-side-menu .mo-contact-box {padding: 0 30px 40px; width: 100%; display: flex; align-items: center;}
    #re-header header.mo #mo-side-menu .mo-contact-box .left {position: relative; display: flex; align-items: center; gap: 1.0667vw; padding-right: 4.2667vw; margin-right: 4.2667vw;}
    #re-header header.mo #mo-side-menu .mo-contact-box .left::after{content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 4.2667vw; background-color: #999999; transform: translateY(-50%);}
    #re-header header.mo #mo-side-menu .mo-contact-box .left i {display: flex; align-items: center; justify-content: center; width: 4.8vw; height: 4.8vw;}
    #re-header header.mo #mo-side-menu .mo-contact-box .left i img {display: block; width: 100%;}
    #re-header header.mo #mo-side-menu .mo-contact-box .left i + a {font-size: 4.8vw; font-weight: 500; color: #111;}
    #re-header header.mo #mo-side-menu .mo-contact-box .right p{display: block; font-size: 2.6667vw; color: #505050;}
    #re-header header.mo #mo-side-menu .mo-contact-box .right p:nth-child(1){margin-bottom: 4px;}


    #mo-dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255,255,255,0.5); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999;}
    #mo-dim.show {opacity: 1;visibility: visible;}


    /* visual */
    .visual-area{background: url('../images/2024/mo/mo-visual-bg.png') no-repeat 50% bottom / cover; padding: 30.9333vw 0 58.9333vw; height: auto;}
    .pcArea.renewal .inner {padding: 0 4.2667vw;}
    .visual-area .tit{position: relative; top: 0; left: 0;}
    .pcArea .mo-visual-wrapper .tit p{display: block;}
    .visual-area .tit p span {font-size: 4vw; }

    .visual-area .tit strong{font-size: 5.3333vw; }
    .visual-area .tit a {font-size:3.7333vw; width: 34.4000vw; height: 10.6667vw;  margin-top: 5.3333vw;}

    /* section1 */
    .section1{margin-top: -8vw; padding: 10.6667vw 0 12vw; background: url('../images/2024/mo/mo-section1-bg.png') no-repeat 50% 50% / cover;}
    .section1.section .tit p:not(.small) {justify-content: center;}
    .section1 .item-box ul{gap: 3.2vw;}
    .section1 .item-box ul li{padding: 4.2667vw 0; width: calc(50% - 1.6vw); height: 62.6667vw; word-break: keep-all;}
    .section1 .item-box ul li:nth-child(2n){padding-left: 4.2667vw; padding-right: 2.6667vw;}
    .section1 .item-box ul li:nth-child(2n - 1){padding-right: 4.2667vw; padding-left: 2.6667vw;}
    .section1 .item-box li > strong{font-size: 4.2667vw; margin-bottom:  2.1333vw;}
    .section1 .item-box li > strong br{display: block;}
    .section1 .item-box li > p{font-size: 3.2000vw; word-break: keep-all;}
    .section1 .item-box li > p br.mo{display: block;}

    .section1 .item-box ul li:nth-child(1) i{width: 9.6vw; height: 9.6vw; bottom: 4.2667vw; right: 4.2667vw;}
    .section1 .item-box ul li:nth-child(2) i{width: 10.6667vw; height: 10.6667vw; bottom: 4.2667vw; left: 4.2667vw;}
    .section1 .item-box ul li:nth-child(3) i{width: 10.6667vw; height: 10.6667vw; top: 4.2667vw; right: 4.5333vw;}
    .section1 .item-box ul li:nth-child(4) i{width: 9.6000vw; height:9.6000vw; top: 4.2667vw; left: 4.2667vw;}

    .section1 .item-box ul li:nth-child(n+3){display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column;}
    .section1 .item-box ul li:nth-child(1), .section1 .item-box ul li:nth-child(2){padding-top: 6.4000vw;}
    .section1 .item-box ul li:nth-child(3){justify-content: flex-start; padding-top: 18.1333vw;}
    .section1 .item-box ul li:nth-child(4){align-items: flex-start; justify-content: flex-start; padding-top: 17.0667vw;}
    .section1 .item-box ul::after{width: 53.3333vw; height: 53.3333vw;}


    /* section2 */
    .section2{padding: 10.6667vw 0 15.7333vw;}
    .section2::before{background: url('../images/2024/mo/mo-section2-bg.png') no-repeat 50% 0 / auto 100%; top: -10.4000vw;}
    .section2 .flex-wrap.pc{display: none;}
    .section2 .flex-wrap.mo{display: flex; flex-direction: column; }
    .section2 .flex-wrap > div{width: 100%; text-align: left;}
    .section2 .tit p.small{font-size: 3.2vw; text-align: left;}
    .section2 .flex-wrap > div.box1{margin-bottom: 11.7333vw;}
    .section2 .service-box.box2{margin-bottom: 11.7333vw; padding-left: 10.6667vw;}
    .section2 .flex-wrap .img-area{width: fit-content; margin-bottom: 9.8667vw;}
    .section2 .flex-wrap .img-area .service-img{max-width: 64vw;}
    .section2 .flex-wrap .img-area .service-ico{width: 23.4667vw;height: 23.4667vw; bottom: -8.2667vw;}
    .section2 .flex-wrap .img-area .service-ico img{max-width: 10.6667vw;}

    .section2 .flex-wrap .text-area h4{font-size: 4.2667vw; margin-bottom: 2.1333vw;}
    .section2 .flex-wrap .text-area h4 + p{font-size: 3.4667vw; margin-bottom: 4.2667vw;}
    .section2 .flex-wrap .text-area .more-btn{width: 30.1333vw; height: 8.5333vw; font-size: 3.4667vw; gap: 0.5333vw;}
    .section2 .flex-wrap .text-area .more-btn i{width: 5.3333vw;}

    /* section3 */
    .section3 {padding: 16vw 0; background: url('../images/2024/mo/mo-section3-bg.png') no-repeat 50% 50% / cover;}
    .section3 .inner {padding: 0 !important;}
    .section3 .right-work-box.pc{display: none;}
    .section3 .right-work-box.mo{display: block;}
    .section3 .flex-wrap{flex-direction: column;}
    .section3 .left-ex-txt-box{width: 100%; margin-bottom: 7.4667vw; margin-top: 0; padding: 0 4.2667vw;}
    .section3 .left-ex-txt-box .tit .small br{display: none;}
    .section3 .left-ex-txt-box .tit .text-arrow{font-size: 3.2000vw; gap: 0.5333vw;}
    .section3 .left-ex-txt-box .tit .text-arrow i{width: 5.3333vw;}

    .section3 .work-columns{flex-direction: column; height: auto; gap: 4.2667vw;}
    .section3 .work-track{flex-direction: row; height: 32vw; gap: 3.2vw; will-change: transform; transform: transform 1s linear;}
    .section3 .work-item{flex-shrink: 0;}
    .section3 .work-item img{height: auto; width: 48vw;}
    .section3 .work-column{width: 100%; overflow: hidden;}
    .section3 .work-column:nth-child(2) .work-track{top:0; left: -30px;}

    /* banner */
    #banner{padding: 16vw 0;}
    #banner .banner-box img.pc{display: none;}
    #banner .banner-box img.mo{display: block;}


    /* section4 */
    .section4{padding-top: 0; padding-bottom: 18.6667vw;}
    .section4 .partners-wrapper .partner img{height: 10.6667vw;}

    /* section5 */
    .section5{padding: 0 0 18.1333vw;}
    .section5 .inner {padding: 0 !important;}
    .section5 .flex-wrap {gap: 6.4vw; }
    .section5 .flex-wrap .tit{width: 100%; padding: 0 4.2667vw;}
    .section .tit p:not(.small) br{display: none;}
    .certificate-slider{padding-right: 0; padding-left: 4.2667vw;}
    .certificateSwiper .swiper-slide{margin-bottom: 10.6667vw;}
    .certificateSwiper .swiper-button-next, .certificateSwiper .swiper-button-prev{display: none;}

    /* contact */
    #contact-wrapper{padding: 16vw 0;}
    #contact-wrapper .inner .left-box .top-area{gap: 3.2vw; margin-bottom: 3.2vw;}
    #contact-wrapper .inner .left-box .top-area li{width: calc(50% - 1.6vw); padding: 6.4vw;}
    #contact-wrapper .inner .left-box li .contact-tit{margin-bottom: 3.4667vw; gap: 1.3333vw;}
    #contact-wrapper .inner .left-box li i{width: 7.2vw;}
    #contact-wrapper .inner .left-box li .contact-tit strong{font-size: 4.8vw;}
    #contact-wrapper .inner .left-box li .contact-txt{font-size: 3.4667vw; margin-bottom: 5.3333vw;}
    #contact-wrapper .inner .left-box li .fs-big{font-size: 5.3333vw;}
    #contact-wrapper .inner .left-box li .contact-blog{font-size: 3.2vw; gap: 0.5333vw;}
    #contact-wrapper .inner .left-box li .contact-blog i{width: 3.7333vw;}
    #contact-wrapper .inner .left-box li .contact-kakao{margin-top: 6.4vw;font-size: 4vw; gap: 1.8667vw; height: 12.8vw;}
    #contact-wrapper .inner .left-box li .contact-kakao i{width: 5.0667vw;}

    #contact-wrapper .inner{gap: 3.2vw;}
    #contact-wrapper .inner .right-box{padding: 6.4vw 5.3333vw;}
    #contact-wrapper .inner .right-box .contact-tit h5{font-size: 5.3333vw; margin-bottom: 1.6vw;}
    #contact-wrapper .inner .right-box .contact-tit p{font-size: 3.2vw; margin-bottom: 5.3333vw;}

    #contact-wrapper .right-box .form-box .flex{gap: 2.1333vw;}
    #contact-wrapper .right-box .form-box input{height: 10.6667vw;}
    #contact-wrapper .right-box .form-box .flex:not(.full,.chk) input:first-child{height: 10.6667vw; width: 46.6667vw;}
    #contact-wrapper .right-box .form-box .flex:not(.full,.ck) input:last-child{height: 10.6667vw; width: 32vw;}
    #contact-wrapper .right-box .form-box input, #contact-wrapper .right-box .form-box textarea{font-size: 3.7333vw; padding: 0 4.2667vw;}
    #contact-wrapper .right-box .form-box input::placeholder, #contact-wrapper .right-box .form-box textarea::placeholder{font-size: 3.7333vw;}
    #contact-wrapper .right-box .form-box textarea{padding: 4.2667vw; height: 24.5333vw;}
    #contact-wrapper .right-box .form-box{gap: 3.2vw;}

    #contact-wrapper .right-box .form-box input[type="checkbox"]{width: 4.8vw; height: 4.8vw;}
    #contact-wrapper .right-box .form-box input[type="checkbox"] + label{font-size: 3.2vw;}
    #contact-wrapper .right-box .form-box .submit-btn{margin-top: 3.2vw; font-size: 3.7333vw; height: 10.6667vw;}



    /* footer */
    footer.footer-wrap .flex-box.pc{display: none;}
    footer.footer-wrap .flex-box.mo{display: block;}

    footer.footer-wrap{padding: 10.6667vw 0;}
    footer.footer-wrap .inner{padding: 0 4.2667vw;}
    footer.footer-wrap ul.f-nav{margin-bottom: 5.3333vw;}
    footer.footer-wrap ul.f-nav li:nth-child(n+2){margin-left: 3.2vw; padding-left: 3.2vw;}
    footer.footer-wrap ul.f-nav li:nth-child(n+2)::before{height: 3.2vw;}
    footer.footer-wrap ul.f-nav li a{font-size: 3.4667vw;}
    footer.footer-wrap .contact-tit span{font-size: 3.2vw; margin-bottom: 1.0667vw;}
    footer.footer-wrap .contact-tit strong{font-size: 4.8vw; margin-bottom: 1.6vw;}
    footer.footer-wrap .contact-desc p{font-size: 2.6667vw;}
    footer.footer-wrap .contact-desc p:last-child{margin-top: 0;}
    footer.footer-wrap .f-logo{width: 30.6667vw; margin: 4.8vw 0 6.9333vw;}
    footer.footer-wrap .f-info ul li{flex-direction: column; gap: 0}
    footer.footer-wrap .f-info ul li p{font-size: 2.6667vw;}



    /* floating-btn */
    #floating-box{bottom: 80px; right:4.2667vw;}
    #floating-box ul li{width:10.6667vw; height: 10.6667vw;}
    #floating-box ul li:last-child{margin-top: 2.1333vw;}
    #floating-box ul li#chat-btn a{background: url('../images/2024/f-chat-ico.png') no-repeat 50% 50% / 5.3333vw 5.3333vw;}
    #floating-box ul li#top-btn a{background: url('../images/2024/f-top-ico.png') no-repeat 50% 50% / 5.3333vw 5.3333vw;}
}