@charset "UTF-8"; 
@import url("reset.css"); 




:root { 
  --brand-color : #4780FF;
 } 

.wrap{overflow-x: hidden;}
br.mo { display: none; } 





/* 폰트 */
.mont {font-family: 'Montserrat'; } 
.popins {font-family: "Poppins", sans-serif;}
.bruno{font-family: "Bruno Ace", sans-serif;}


.wrap{width: 100%; background-image: url(../img/ph/all_bg.png);}

.m_tit{text-align: center;}
.m_tit .eyebrow{font-size: 18px; font-weight: 500; color: var(--brand-color);}
.m_tit span{font-size: 65px; font-weight: bold;}
.m_tit span{font-size: 65px; font-weight: bold;}
.m_tit span b{color: var(--brand-color);}
.m_tit p{font-size: 20px; font-weight: 500; color: #656565; line-height: 32px;}
.m_tit p b{color: var(--brand-color);}

.mainvi{width: 100%;}
.mainvi .m_tit{margin: 186px auto 0;}
.mainvi .inq_btn{width: fit-content; margin: 0 auto;}
.mainvi .inq_btn a{display: flex; align-items: center; gap: 6px; padding: 16px 36px; border-radius: 500px; background: linear-gradient(to bottom right, #4B83FF 0%, #81E8FB 100%); color: #fff; font-size: 20px; font-weight: bold; max-height: 56px; box-sizing: border-box; overflow: hidden; transition:transform .55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1);}
.mainvi .inq_btn a:hover{background: linear-gradient(to bottom right, #81E8FB 0%, #4B83FF 100%);  transform:translateY(-4px);}
.mainvi .inq_btn a img{width: 24px; transition:transform .3s ease;}








.mainvi .main_swiper { width: 100%; margin-top: 96px; padding: 0 0 96px; overflow: hidden; }
.mainvi .main_swiper .swiper-wrapper { display: flex; align-items: center; }
.mainvi .main_swiper .swiper-slide { width: 506px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.mainvi .main_swiper .swiper-slide-active { pointer-events: auto; }
.mainvi .main_swiper .slide_inner { width: 506px; border-radius: 30px; overflow: hidden; transform-origin: center center; transition: transform 0.7s ease, opacity 0.7s ease; will-change: transform, opacity; }
.mainvi .main_swiper .slide_inner img { display: block; width: 100%; height: auto; }

.sec01{padding: 118px 0 160px; box-sizing: border-box;}
.sec01 .img_wrap{width: fit-content; margin: 0 auto;}
.sec01 .m_tit{width: fit-content; margin: 60px auto 0;}

.sec02{display: flex; width: 100%; height: 100vh; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}
.sec02 .left_cont{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 50%; height: 100%; padding-left: 160px; background-color: #FAFAFA;}
.sec02 .left_cont .m_tit{text-align: left; margin: 0;}
.sec02 .right_cont{display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; background-color: #fff;}
.sec02 .right_cont .logo_box{width: fit-content;}
.sec02 .right_cont .logo_box ul{display: flex; flex-direction: column; gap: 56px;}
.sec02 .right_cont .logo_box ul>li{display: flex; align-items: center; justify-content: center; gap: 56px;}
.sec02 .right_cont .logo_box ul>li img{height: 56px;}

.sec03{position: relative; width: 100%; background-color: #111; padding: 176px 0 42px;}
.sec03 .text_wrap{position: absolute; left: 160px; top: 176px;}
.sec03 .m_tit{text-align: left;}
.sec03 .m_tit span{display: block; margin-top: 24px; color: #fff;}
.sec03 .m_tit p{color: #999;}
.sec03 .inq_btn{width: fit-content;}
.sec03 .inq_btn a{display: flex; align-items: center; gap: 6px; padding: 16px 36px; border-radius: 500px; background: linear-gradient(to bottom right, #4B83FF 0%, #81E8FB 100%); color: #fff; font-size: 20px; font-weight: bold; max-height: 56px; box-sizing: border-box; }
.sec03 .inq_btn a:hover{background: linear-gradient(to bottom right, #81E8FB 0%, #4B83FF 100%);}
.sec03 .inq_btn a img{width: 24px;}
.sec03 .chart{width: fit-content;}
.sec03 .chart .curve_svg { display:block; min-width:1622px; height:auto; overflow:visible; }
.sec03 .chart .curve_path { opacity:0; transition:opacity .4s ease; }
.sec03.on .chart .curve_path { opacity:1; }
.sec03 .chart .point_group { opacity:0; transition:opacity 1.2s ease; transition-delay:.4s; transform-origin:center; }
.sec03.on .chart .point_group { opacity:1; }
.sec03 .chart .point_glow { fill:var(--brand-color); opacity:.2; transform-origin:center; transform-box:fill-box; animation:pointRipple 2.2s ease-out infinite; }
.sec03 .chart .point_ring { fill:var(--brand-color); opacity:.35; }
.sec03 .chart .point_core { fill:var(--brand-color); }
.sec03 .img_wrap{position: absolute; top: 0; right: 0;}

.sec03 .marquee_wrap{display: flex; justify-content: center; align-items: center; width: 100%; height: fit-content;}
.sec03 .marquee_wrap .inner{display: flex; justify-content: center; align-items: center; width: 100%; }
.sec03 .marquee_wrap .inner .marquee{width: 100%; animation: marqueeX 20s infinite linear;}
.sec03 .marquee_wrap .inner .marquee.right{position: absolute; width: 100%; right: calc(-100% - 48px);}

.sec04{width: 100%; background-color: #fff; padding: 156px 0; box-sizing: border-box;}
.sec04 .review_swiper{width: 100%; margin-top: 66px; padding-top: 104px;}
.sec04 .review_swiper .swiper-wrapper { display: flex; align-items: center; }
.sec04 .review_swiper .swiper-slide { width: 346px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.sec04 .review_swiper .swiper-slide-active { pointer-events: auto; }
.sec04 .review_swiper .slide_inner { width: 100%; border-radius: 30px; overflow: hidden; transform-origin: center center; transition: transform 0.7s ease, opacity 0.7s ease; will-change: transform, opacity; }
.sec04 .review_swiper .slide_inner img { display: block; width: 100%; height: auto; }
.sec04 .review_swiper .swiper-pagination { position: absolute; top: 0;}
.sec04 .review_swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; opacity: 1;}
.sec04 .review_swiper .swiper-pagination-bullet-active { width: 48px; height: 8px;  background: #4B83FF; border-radius: 100px;}

.sec05{display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: #fff url(../img/ph/sec05_bg.png) no-repeat center / cover;}
.sec05 .inner{width: 1600px; margin: 0 auto;}
.sec05 .service_btn {width: fit-content; margin: 0 auto;}
.sec05 .service_btn ul {position: relative; display: flex; width: 465px; height: 76px; padding: 14px 16px; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 500px; background-color: #fff;}
.sec05 .service_btn ul::before {content: ""; position: absolute; top: 14px; left: 16px; width: calc((100% - 32px) / 2); height: calc(100% - 26px); border-radius: 500px; background: linear-gradient(to bottom right, #4B83FF 0%, #81E8FB 100%); transform: translateX(0); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);}
.sec05 .service_btn ul li {position: relative; z-index: 1; width: 50%; height: 100%; border-radius: 500px; overflow: hidden;}
.sec05 .service_btn ul li a {display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 100%; color: #B5B5B5; font-size: 20px; font-weight: 500;}
.sec05 .service_btn ul li.active a {color: #fff; font-weight: bold;}
.sec05 .service_btn ul li a img {width: 24px;}
.sec05 .service_btn ul li.active a img {opacity: 1;}
.sec05 .service_btn ul li:not(.active) a img {opacity: 1;}
.sec05 .service_btn ul.is-second::before {transform: translateX(100%);}


.sec06{display: flex; justify-content: center; align-items: center; width: 100%; padding: 212px 0; background: #fff url(../img/ph/sec06_bg.png) no-repeat center / cover; box-sizing: border-box;}
.sec06 .inner{width: 1600px; margin: 0 auto;}
.sec06 .inner .m_tit{width: 100%; margin: 0 auto;}
.sec06 .inner .m_tit .eyebrow{color: #fff;}
.sec06 .inner .m_tit span{display: block; margin-top: 24px; color: #fff;}
.sec06 .inner .m_tit p{color: #D8F0F4;}
.sec06 .inq_btn{width: fit-content; margin: 0 auto;}
.sec06 .inq_btn a{display: flex; align-items: center; gap: 6px; padding: 16px 36px; border-radius: 500px; background: #111; color: #fff; font-size: 20px; font-weight: bold; max-height: 56px; box-sizing: border-box; }
.sec06 .inq_btn a img{width: 24px;}


/* 물결 퍼짐 효과 */
@keyframes pointRipple {
    0% {
        transform: scale(0.4);
        opacity: .45;
    }
    60% {
        transform: scale(0.8);
        opacity: .12;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* 슬라이드 텍스트 */
@keyframes marqueeX {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}












/* 반응형 작업 */

@media screen and (max-width:1600px) {
  html{font-size: 8px !important;}
  #header .hd_wrap{max-width: 90%;}

  .sec05 .inner{width: 100%;}
  .sec06 .inner{width: 100%;}

}





@media screen and (max-width:1400px) {
    .m_tit span{font-size: 48px;}
    .m_tit p{font-size: 18px; line-height: 22px;}
    .m_tit .eyebrow{font-size: 15px;}
    
    .mainvi .inq_btn a{font-size: 18px; padding: 18px 26px; max-height: 48px;}

    .sec01{padding: 64px 24px 82px;}

    .sec02{flex-direction: column; height: fit-content;}
    .sec02 .left_cont{width: 100%; padding: 64px 24px 0; background-color: #fff; align-items: center;}
    .sec02 .left_cont img{width: 48px;}
    .sec02 .left_cont .m_tit{text-align: center;}
    .sec02 .right_cont{width: 100%; padding: 64px 0 82px;}
    .sec02 .right_cont .logo_box ul{gap: 24px;}
    .sec02 .right_cont .logo_box ul>li{gap: 24px;}
    .sec02 .right_cont .logo_box ul>li img{height: 32px;}

    .sec03{padding: 296px 0 48px;}
    .sec03 .chart .curve_svg{width: 90%; min-width: auto;}
    .sec03 .img_wrap{width: 100%;}
    .sec03 .img_wrap img{width: 100%;}
    .sec03 .text_wrap{left: 0; top: 136px; padding: 0 10.211vw;}
    .sec03 .m_tit span{margin-top: 12px;}
    .sec03 .inq_btn a{font-size: 18px; padding: 18px 26px; max-height: 48px;}

    .sec04{padding: 64px 0;}
    .sec04 .review_swiper .swiper-slide{width: 90%;}
    .sec04 .review_swiper .swiper-slide img{aspect-ratio: 9/16;}

    .sec05{height: fit-content; padding: 96px 0;}
    .sec05 .service_btn ul{height: 66px;}
    .sec05 .service_btn ul li a{font-size: 18px;}
    .sec05 .service_btn ul li a img{width: 18px;}
    .sec05 .service_btn ul::before{top: 10px; height: calc(100% - 20px);}

    .sec06{padding: 96px 0;}
    .sec06 .inq_btn a{font-size: 17px; padding: 18px 26px; max-height: 48px;}
}

@media screen and (max-width:1024px) {

}

@media screen and (max-width:768px) {
    br{display: none;}
    br.mo{display: block;}

    .m_tit span{font-size: 32px;}
    /* .m_tit span br{display: none;} */
    .m_tit p{font-size: 15px; line-height: 20px;}
    .m_tit .eyebrow{font-size: 14px;}

    .mainvi .m_tit{margin-top: 156px;}
    .mainvi .inq_btn a{font-size: 15px; padding: 16px 24px; max-height: 42px;}
    .mainvi .main_swiper{width: 100%; margin-top: 56px; padding-bottom: 56px;}
    .mainvi .main_swiper .swiper-slide{width: 100%;}
    .mainvi .main_swiper .slide_inner{width: 100%;}

    .sec01{padding: 56px 0 64px;}
    .sec01 .img_wrap{width: 30%;}
    .sec01 .img_wrap img{width: 100%;}

    .sec02{flex-direction: column; height: fit-content;}
    .sec02 .left_cont{width: 100%; padding: 56px 16px 0; background-color: #fff; align-items: center;}
    .sec02 .left_cont img{width: 24px;}
    .sec02 .left_cont .m_tit{text-align: center;}
    .sec02 .right_cont{width: 100%; padding: 56px 0 76px;}
    .sec02 .right_cont .logo_box ul{gap: 16px;}
    .sec02 .right_cont .logo_box ul>li{gap: 16px;}
    .sec02 .right_cont .logo_box ul>li img{height: 24px;}

    .sec03{padding: 296px 0 48px;}
    .sec03 .chart .curve_svg{width: 90%; min-width: auto;}
    .sec03 .img_wrap{width: 100%;}
    .sec03 .img_wrap img{width: 100%;}
    .sec03 .text_wrap{left: 0; top: 136px; padding: 0 16px;}
    .sec03 .m_tit span{margin-top: 12px;}
    .sec03 .inq_btn a{font-size: 15px; padding: 16px 24px; max-height: 42px;}

    .sec04{padding: 56px 0;}
    .sec04 .review_swiper .swiper-slide{width: 90%;}
    .sec04 .review_swiper .swiper-slide img{aspect-ratio: 9/16;}
    .sec04 .review_swiper .swiper-pagination-bullet{width: 6px; height: 6px;}
    .sec04 .review_swiper .swiper-pagination-bullet-active{width: 48px; height: 6px;}

    .sec05{height: fit-content; padding: 136px 0;}
    .sec05 .service_btn{width: 90%;}
    .sec05 .service_btn ul{width: 100%; height: 62px;}
    .sec05 .service_btn ul li a{font-size: 15px;}
    .sec05 .service_btn ul li a img{width: 16px;}
    .sec05 .service_btn ul::before{top: 10px; height: calc(100% - 20px);}

    .sec06{padding: 136px 0;}
    .sec06 .inq_btn a{font-size: 15px; padding: 16px 24px; max-height: 42px;}
}
@media screen and (max-width:320px) {}