@charset "UTF-8";


br.pc_br { display: none; }
.layout.ly-main .ly-inner .main { width: 100%; }

.service { background: none no-repeat center bottom / 100% auto; }


.service.intro section { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.service section h2 { font-size: 56px; text-align: center; font-weight: 700; }
.service .intro h2 { word-break: keep-all; white-space: pre-wrap; line-height: 1.3; }

.intro { background-image : url('/public/images/main/bg_intro.png'); }
.intro .sub-title { font-size: 24px; color: #5543ff; font-weight: 700; }
.intro h2 { margin-top: 20px; }
.intro .desc { margin-top: 36px; line-height: 1.75; font-size: 20px; font-weight: 500; text-align: center; }
.intro .link { margin-top: 66px; padding: 0 60px; height: 56px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; font-weight: 700; border-radius: 4px; background: #3800d9; }

.feature { background: #f0f3fc; }
.feature h2 { color: #1a0f8e; }
.feature .stats { width: 100%; min-width: 0; display: flex; gap: 30px; }
.feature .stats .item { display: flex; flex-direction: column; justify-content: center; gap: 10px; font-weight: 600; border-radius: 24px; background: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.feature .stats .item dt { color: #999; font-size: 23px; }
.feature .stats .item dd { font-size: 32px; }
.feature .cards { margin-top: 50px;  width: 100%; min-width: 0; display: flex;  gap : 30px; }
.feature .cards .item { flex: 1; color: #1a0f8e; border-radius: 24px; background: #dce3fe; }
.feature .cards .item { gap: 20px; }

.feature .cards .item dd { font-weight: 500; line-height: 1.5 }
.feature .cards .item .title { font-weight: 800; }

.usage { background: #511aef; }
.usage h2 { color: #fff; }
.usage .cards { min-width: 0; display: grid; gap: 30px; }
.usage .cards .item { display: flex; flex-direction: column; gap: 20px;  background: #fff; }
.usage .cards .item dt { font-size: 36px; font-weight: 700; }
.usage .cards .item dd { display: flex; }
.usage .cards .item dd .desc { font-size: 24px; line-height: 1.5; word-break: keep-all; }


.guide { background: #292e41; }
.guide h2 { color: #fff; }

.guide .steps {  display: flex;  gap: 30px; }
.guide .steps li { padding: 10px; min-width: 0; flex: 1; display: flex; align-items: center; gap: 20px; border-radius: 50px; background: #191e33; box-shadow: inset 0 1px 2px rgba(255,255,255,.05), inset 0 -2px 6px rgba(0,0,0,.30); }

.guide .steps .num { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 36px; font-weight: 700; border-radius: 40px; color:#1a0f8e;  background: #dce3fe; }
.guide .steps .step { color: #fff; word-break: keep-all; white-space: pre-wrap; font-size: 28px; font-weight: 500; line-height: 1.16; }


/* 모바일 */
@media screen and (max-width: 1024px) {
    .service section { padding: 50px 16px; width: 100%; }
    
    .intro .desc { word-break: keep-all; }
    
    .feature .stats { margin-top: 30px; flex-direction: column; }
    .feature .stats .item { padding: 0 40px; height: 120px; }
    .feature .cards .item { padding: 20px; }
    .feature .cards .item dt { display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
    .feature .cards .item .icon { width: 50px; }
    .feature .cards .item .icon img { width: 100%; }
    .feature .cards .item .title { flex: 1; font-size: 26px; }
    .feature .cards .item dd { margin-top: 20px; font-size: 20px; word-break: keep-all; }
    .feature .cards { flex-direction: column; }
    .usage .cards { margin-top: 20px; grid-template-columns: 1fr; }
    .usage .cards .item { padding: 20px; border-radius: 24px;}

    .guide .steps { margin-top: 20px; flex-direction: column; }
}

/* PC */
@media screen and (min-width: 1025px) {
    .layout.ly-head .ly-inner,
    .layout.ly-foot .ly-inner { width: var(--width); min-width: var(--width); } 
    
    .layout.ly-main .ly-inner { width: 100%; min-width: var(--width); } 
    
    br.pc_br { display: block; }
    
    .service { padding: 100px 0 138px 0; display: flex; justify-content: center; align-items: center; }
    .service section { width: var(--width); min-width: var(--width); }
    
    .service.intro section { padding: 0 250px; }
    .intro { padding-bottom: 190px; }

    .feature .stats { margin-top: 88px; justify-content: space-between; align-items: center; }
    .feature .stats .item { padding: 0 40px; flex: 1; height: 120px; }
    .feature .cards .item { padding: 90px 40px 54px 40px; display: flex; justify-content: center; flex-direction: column; align-items: center; }
    .feature .cards .item dt { display: flex; justify-content: center; flex-direction: column; align-items: center; gap :74px; }
    .feature .cards .item .title { font-size: 36px; }
    .feature .cards .item dd { font-size: 24px; line-height: 1.5 }

    .feature .cards { justify-content: space-between; align-items: center; }
    
    .usage .cards { margin-top: 102px; grid-template-columns: 1fr 1fr 1fr; }
    .usage .cards .item { padding: 56px 56px 44px 56px; border-radius: 60px; }
    .usage .cards .item dd { flex-direction: column; gap: 41px;}
    .usage .cards .item dd .icon { align-self: flex-end; }
    
    .guide .steps { margin-top: 50px; justify-content: space-between; align-items: center; }
    .guide .steps .step { width: min-content; }
}