/*커스텀*/

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

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;}

.label-blue{border-radius: 13px; padding: 4px 12px;background: linear-gradient(90deg, #0470D9 0%, #02A5F0 101.72%); color:#fff; font-weight: 600;}

.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/bg1.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;}
.bg-navy{background:#233240;}
.bg-photo{background:url(../image/layout/bg-photo.png)center / cover no-repeat;}

.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:2rem 2rem 0 2rem; height: 350px; 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: 2rem; 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;}

.pricing .pricing-table:not([class*="grdnt-"]){background:#ECF2F6; border: 1px solid rgba(0, 0, 0, .1);}
.pricing .pricing-table:not([class*="grdnt-"]).suggestion{background:#A4D1F4; border:2px solid #8FC6F2; box-shadow: 16px 12px 32px 0px rgba(23, 24, 24, 0.2);}
.pricing-feature{padding:24px;}
.pricing-feature ul li{padding:10px 20px; border-radius: 10px; text-align: left;}
.pricing-feature ul li.lock{background: rgba(0, 0, 0, 0.05); color: rgba(34, 34, 34, 0.30);}
.pricing-feature ul li.open{background:#fff; color:#161C2D; font-weight: 700; box-shadow: 0 0 6px 0px rgba(23, 24, 24, 0.1);}
.main-pricing{padding:40px 24px 20px; display: flex; justify-content: start;}
.main-pricing h5{margin-bottom:0;}

.ft-dark .item{padding:50px 24px;}
.img-pre{display: flex; justify-content: center;}
.img-pre img{width:300px;}

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

/*.move-img{display: block; position:relative;}*/
/*.move-img:after{content: ''; display: block; width:100%; height:100%; background:url(../image/layout/img-6-2-move.gif)center / contain no-repeat; position:absolute; left: 5%; top: 5%}*/


/*로딩*/
.spinner {width: 180px; height: 180px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin:-90px 0 0 -90px;
    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-loading{width:150px; height:150px; 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-loading:after{content:''; display: block; width:96px; height:96px; background:url(../image/layout/ic-loading.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);
    }
}

.ic-default{display: inline-flex; background-repeat: no-repeat; background-size: cover; background-position: center;}
.logo-title{display: flex; align-items: center; gap: 8px;}
.logo-title .logo-tgs{display: inline-flex;width:79px; height:36px; background-image:url("../image/layout/logo-tgs.svg");}

@media (min-width: 767px) {
    /* header{overflow: hidden; padding-bottom: 3rem;} */
    .sec-pad-lg.bg-shape-after{padding-top: 80px; padding-bottom: 80px;}
    .title-text{font-size: 4rem;}
    .title-text.logo-title{font-size: 3.5rem;}
    .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;}

    .img-pre{justify-content: end;}

    .logo-title .logo-tgs{width:109px; height:50px;}

}

@media (min-width: 992px) {
    .title-text.logo-title{font-size: 4rem;}
    .logo-title .logo-tgs{width:153px; height:70px;}

    .step-wrap .col-md-3:after{content:''; display: block; width:40px; height:40px; bottom: 50%; right: 10px; margin-right: -20px; transform: rotate(0deg);}
    .demo-wrap{flex-direction: row; gap:0;}
    .demo-content{height:360px;}
    .demo-content .fs-5{font-size:1.125rem;}
    .demo-content .demo-img{width:220px; bottom:-20px;}
    .demo-content.demo-real{height:600px}

    .main-pricing{padding:48px 32px 16px;}
    .pricing-feature{padding:32px;}
    .pricing-feature ul li{padding:16px 32px;}
    .img-pre img{width:340px;}

}

@media (min-width: 1200px) {
    .demo-content{padding:2.5rem 2.5rem 0 2.5rem; height:400px;}
    .demo-content .fs-5{font-size:1.25rem;}
    .demo-content .demo-img{width:250px;}
}

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