/*커스텀*/

.fc-black{color:#161C2D;}
.fc-blue{color:#006BE8;}

body{word-break: keep-all;}
body, html{color:#707070; line-height: 150%;}
header{overflow: hidden; padding-bottom: 8rem;}
h1, h2, h3, h4, h5, h6{line-height: 150%;}
p{line-height: 160%;}

.title-text,
.sub-title-text{font-family: 'Paperlogy'; font-weight: 500; font-size: 2rem;}

.d-flex{display: flex;}
.all-center{justify-content: center; align-items: center;}
.flex-col{flex-direction: column;}
.flex-row{flex-direction: row;}

.radius1{border-radius: 20px;}
.shadow1{box-shadow: 16px 12px 32px 0px rgba(23, 24, 24, 0.14);}

.grdnt-pink:not(.overly){background:url("../image/layout/sky-bg.jpg")0 center / cover no-repeat;}
.bg-trans-3:before{display: none;}

.intro-text{margin-top: 80px;}
.shad-item .item{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.shad-item .before-bg{display: none;}
.grdnt-tranquil:not(.overly),
.grdnt-blue:not(.overly),
.grdnt-cyan:not(.overly){background:#eee;}

.info1{background:url(../image/layout/bg1.png)0 0 / cover no-repeat; border-radius: 30px; overflow: hidden;}

.step-wrap .col-md-3{margin-bottom:60px; position: relative;}
.step-wrap .col-md-3:after{content:''; display: block; width:40px; height:40px; background: url(../image/layout/ic-arrow.png)0 0 / contain no-repeat; position: absolute; bottom: -30px; right: 50%; margin-right: -20px; transform: rotate(90deg);}
.step-wrap .col-md-3:last-child::after{display: none;}
.step-wrap .col-md-3 .overview-img{margin-bottom: 20px;}

.bg-gray1{background:url(../image/layout/bg2.png)center / cover no-repeat;}
.bg-green1{background:url(../image/layout/bg1.png)center / cover no-repeat;}
.bg-blue1{background:#8ED1EA;}

.review-wrap .quote-item{background:#fafafa;}
.quote .owl-dot.active, .screen .owl-dot.active{background: #006BE8;}

.num{font-size: 18px; font-weight: 600; border-width:1px; border-style: solid; border-radius: 24px; box-sizing: border-box; padding: 8px 16px; display: inline-block; margin-bottom:24px;}
.num.num-blue{color: #006BE8; border-color:#CFECFA; background-color:#DCF1FB;}
.num.num-green{color: #30955B; border-color:#B4EBDE; background-color:#D4F6E5;}

.demo-content{padding:2.5rem 2.5rem 0 2.5rem; height: 400px; box-sizing: border-box; position: relative; background:#9CD8EE; border-radius:20px; overflow: hidden;}
.demo-content .demo-img{position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width:250px;}
.demo-wrap{display: flex; gap: 1rem; flex-direction: column;}

.review{margin-top: 40px;}

.item-wrap .item{margin-bottom:40px;}
.mobile-mockup{position: relative;}

.btn-main{padding:12px 20px; color:#fff; background:#242428; display: inline-block; border-radius: 8px;}
.btn-main:hover{color:#fff; background:#000;}

.footer-wrapper{background: #fff;}
.footer-info{display: flex; flex-direction: column;}


/*로딩*/
.spinner {width: 160px; height: 160px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin:-80px 0 0 -80px;
    background: radial-gradient(farthest-side, #58DBDB 94%, #0000) top / 7px 7px no-repeat, conic-gradient(#0000 10%, #58DBDB);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 0); animation: spinner 1.1s infinite linear;}
.ic-stamp{width:130px; height:130px; background:#fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0px 4px 12px 0px rgba(9, 9, 10, 0.10);
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.ic-stamp:after{content:''; display: block; width:64px; height:64px; background:url(../image/layout/ic-stamp.png)0 0 / contain no-repeat;  animation: bounce 1s ease-in-out infinite;}

/*로딩 애니메이션*/
@keyframes spinner {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(4px); /* 시작 위치 */
    }
    50% {
        transform: translateY(-2px); /* 위로 이동 */
    }
}


@media (min-width: 768px) {
    header{overflow: hidden; padding-bottom: 3rem;}
    .title-text{font-size: 4rem;}
    .sub-title-text{font-size: 3.5rem;}

    .mobile-mockup::after{width:140px; height:140px;}
    .mobile-mockup img{width: 600px;}

    .num{padding: 8px 24px; line-height: 36px;}

    .footer-info{flex-direction: row; gap: 20px;}


}

@media (min-width: 992px) {
    .step-wrap .col-md-3:after{content:''; display: block; width:40px; height:40px; bottom: 50%; right: 0; margin-right: -20px; transform: rotate(0deg);}
    .demo-wrap{flex-direction: row;}
    .demo-content.demo-real{height:600px}

}

@media (min-width: 1200px) {
    .container {width: 1300px;}
}